個人事業主として本格的に活動を開始して1年、ポートフォリオサイトをようやくリニューアルしたので、その裏側のスタックや、実装中に感じたことをシェアします。
KIKIGOTO | portfolio site
今回のコンセプトは、「アニメーション＆ハッピー」。アニメーション制作ができるインパクト重視のデザインを、モダンな技術スタックの勉強を兼ねてどのように形にするかにこだわりました。
🏗️ 開発構成：保守性を意識したWPテーマ
フレームワークの使用も検討しましたが、今回はあえて**「WordPress × Vite」**という、保守性を維持した構成を選びました。
- PHPのモジュール管理： Reactの勉強で培ったコンポーネントの概念を意識し各パーツをモジュールとして分割て制作、パーツの再利用性を高める設計を意識しました。
- JSはES Modulesで細分化： 同じく機能を細かくファイル分割して管理。Viteの恩恵をフルに受け、ホットリロード環境で快適にコードを書くことができました。
🎬 映像×Web：LottieとGSAPの連動
映像制作をバックグラウンドに持つ身として、一番力を入れたのがアニメーションです。
- Lottieの活用： After Effectsで作成したオリジナルのSVGアニメーションを、Lottieで配置。もともとのスキルを活かして繊細なアニメーションを作成しています。
- GSAPとの同期： さらに**GSAP（ScrollTrigger）**を使い、スクロールに合わせてオブジェクトが自在に跳ねたり回ったりするように調整しました。ただの動画再生ではない、ブラウザならではの体験を目指しています。
🎨 Tailwind CSSとの戦いと「学び」
スタイリングにはTailwind CSSを採用しました。 クラス名に悩まされることがないメリットは大きいのですが、今回のような1px単位の緻密な調整が必要なデザインにおいては、正直に言って苦戦した部分もあります。
自由度の高いデザインゆえにカスタム値（Arbitrary values）が頻発してしまい、「ここは素直にCSS（Sass）で書いたほうが早かったかな」という気づきがありました。**「適材適所の技術選定」**の重要性を改めて実感した、良い経験です。
💬 最後に
特定のフレームワークに縛られず、「やりたい表現」のために最適な技術を組み合わせていく。そんな自分の「機動力」をこのサイトで表現できたかなと思っています。
募集要項のチェックリストだけでは測れない「現場での解決力」や「表現へのこだわり」を、このサイトから感じ取っていただければ嬉しいです。
