概要
いま見ているこのサイトそのもの。「語る」より「体験させる」を方針に、表示の軽快さと演出を両立させた集客サイトとして、企画から実装まで手がけた。
課題
- 個人の集客サイトは、SEO（速度・構造化）と、技術力が伝わる演出を両立させる必要がある。
- 記事・実績を継続更新する前提で、運用コストを最小化したい。
アプローチ（技術選定理由）
フレームワークはNext.js（App Router）。MDXコンテンツを静的生成することで、SEOと表示速度の両方に有利な構成にした。コンテンツはMDX + VeliteでZod型付けし、記事・実績を「ファイルを足すだけ」で増やせるようにしている。
演出はThree.jsの粒子表現とGSAP / Lenisのスクロール連動。ただし「軽快さ＞派手さ」を原則に、重い演出はトップに限定し、prefers-reduced-motionでは即時表示へフォールバックする。WebGL非対応環境ではソリッド背景に切り替える。
結果・学び
サイトのUXそのものを技術力のデモにする、という狙いを形にした。演出と速度はトレードオフになりがちだが、「どこに演出を効かせ、どこを削るか」の設計でこそ両立できると再確認した。