趣味のイラストサイトを作った話

趣味で描いているイラストを公開するサイトを制作しました。
こちらからご覧になれます。
https://e-hykw.com/daydream/

制作に係るツールは以下を使用しました。

  • デザイン：Figma
  • CSS設計：FLOCSS
  • CSSプリプロセッサ：Sass
  • プラグイン：GSAP、Swiper
  • 環境：Webpack、GitHub

制作のきっかけ

GSAPの練習でサイトを作りたいと思ったことがきっかけです。
実務でGSAPを使う機会は今までないのですが、素敵なサイトではGSAPはよく使用されている印象で、使いこなせるようになっておきたいと常々思っていました。
それ以外にも、FLOCSSやSass、Webpackなども使ってみたい願望があったので、導入してみました。

作ってみて

GSAPは公式サイトが非常にわかりやすく、またブログなどで情報発信してくださっている方々もたくさんいるので、比較的スムーズに制作ができました。

FLOCSSは初めて使いましたが、理解するのになかなか時間がかかってしまいました。今でも正しい使い方ができているか若干怪しいです。FLOCSS考案者の書籍『Web制作者のためのCSS設計の教科書』や実際にFLOCSSで構築されたサイトを参考にしました。

Sassは大昔に少し使ったことはあったのですが、ほぼ忘れていたので『Web制作者のためのSassの教科書』を読みつつZennの記事なども参考にしました。やはりmixinやextendは便利ですね。

最大の難関がWebpackでした。動画教材Udemyで良い教材（ Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 ）があったので、まずはそちらを一通りやりました。初学者向けに丁寧に説明してくださっていて、基礎的なことはスッと理解できました。
ただ、教材のメインはWebpack4の内容で、Webpack5は補足資料を用意してくださってはいるのですが、少し足りないかなと感じました（Webpack4を学ぶには十分な教材です）。その辺りは別途調べる必要がありました。

今後の展望

今回使ったFLOCSSをもっとスムーズに使いこなせるようになりたいですね。BEMにも挑戦してみたいです。
また、Three.jsでもGSAPは連携できるようなので、Three.jsの勉強を引き続き進めていきたいと思っています。
一方でJavaScriptフレームワークにも興味がでてきて、Reactを学んでみたいとも思っています。
Blenderにも手を出したいし、Astroも面白そう…
やりたいことが尽きませんが、楽しみながら制作を続けていきたいと思います。

GSAP