個人サイト制作
目次
コンセプト
人生観
自分は、「マグロのように生きる」をテーマに人生を過ごすことにしています。 マグロは、止まると死にます。自分は、常に新しいことを学習、やったことないことにも挑戦していくと決めました。 スティーブ・ジョブズがスタンフォード大学で語ったスピーチの最後に「Stay hungry, stay foolish」の言葉が胸に突き刺さりました。 今回の個人のweb制作で「マグロのように生きる」テーマを無限として表現してみました。
ロゴ
ロゴは、名前のYoshiyuki TakahashiのYTを組み合わせて１本線で繋がて無限を表現した形のデザインにしました。
色は、RGBとCMYKの色を組み合わせてこれらの色で無限の色を表現してみました。
背景
背景は、ロゴに合わせて無限のイメージがある宇宙で表現しました。 画像やイラストなどで星を表現するには、大変なためparticle.jsを使って簡単に表現ができ、それに合わせて色々な惑星をイラレで制作して見栄えがよくなるように足しました。
SVGを多用
ロゴやイラストなどがweb制作で多く使われており表示速度にとても影響がでております。SVGは、画像と違いベクターでできてます。 SVGは、高画質かつ低容量の為表示速度を上げることができ高画質ため見た目の良いです。 その為個人サイト制作では、画像を使用していません。
アニメーション
映像制作の影響
長年映像制作に携わっているおり静止画、イラストだけを並べただけだと面白みがない為、CSSやjavascriptのアニメーションを多用しました。 もっとやりたいことがありますが、現状のスキルだと限界があるためできる範囲で制作しております。
使用したJavascript
particles : https://vincentgarreau.com/particles.js/
lottie : https://airbnb.design/lottie
muuri : https://muuri.dev/
aos : https://michalsnik.github.io/aos/
swiper : https://swiperjs.com/
どのようにJavascritpt使用したかは、今度記事にしたいと思います。
完成の感想
とりあえずやりたいことは、できました。 ヒートマップなどをして今後改善していこうと考えてます。海外のwebサイトのようなインパクトあるサイトように感じてもらえたら成功かなと思います。