「フレームワークを使わない」という選択。React？ Next.js？ いいえ、HTML/CSS/JavaScriptのみ。あえてバニラで構築したポートフォリオサイトの制作裏側を公開します。
CONCEPT
サイトのコンセプト
テーマは「Geometric Elegance」。幾何学模様 x ミニマルデザイン x リッチアニメーション。HAKUSOのブランドカラー（パープル #6C3CE1 x ティール #00C9A7）を基調に、プロフェッショナルかつ遊び心のあるデザインを目指しました。
ポートフォリオサイトは、クリエイターにとって最も重要な「名刺」です。クライアントが最初に見るのはこのサイトであり、ここで「この人に頼みたい」と思ってもらえるかどうかが勝負。だからこそ、既製品のテンプレートではなく、自分の技術力とデザインセンスを最大限にアピールできるオリジナルサイトにこだわりました。
デザインのインスピレーション源は、バウハウスの幾何学的な造形美と、現代のグラスモーフィズム。無機質な幾何学模様に、グラデーションとブラーエフェクトを組み合わせることで、温かみのあるデジタル空間を表現しています。
カラーパレットの選定には特にこだわりました。パープル（#6C3CE1）は創造性と高級感を、ティール（#00C9A7）は信頼性と新鮮さを象徴します。この2色の組み合わせは、Web制作というクリエイティブかつビジネス的な領域を表現するのに最適だと考えました。
TECH STACK
技術的なこだわり
「フレームワークなしで、ここまでできる」-- それを証明するための技術選定です。すべてのインタラクションをブラウザネイティブAPIで実装しました。
Intersection Observer API
スクロール連動アニメーション、画像の遅延ロードをライブラリなしで実装。requestAnimationFrameと組み合わせて60fpsのスムーズなアニメーションを実現しています。スクロールイベントの直接監視と比べてパフォーマンスが圧倒的に優れています。
CSS Custom Properties
デザイントークンをCSS変数で一元管理。色、フォントサイズ、スペーシング、アニメーションのイージングまで、すべてを変数化しています。将来のダークモード対応も、変数を切り替えるだけで実現可能な設計です。
SVGアニメーション
ロゴ、装飾シェイプ、カードサムネイルのすべてをインラインSVGで実装。ラスター画像に頼らないため、どんな解像度でもシャープに表示されます。CSS animationとSMILを組み合わせた繊細な動きが特徴です。
パフォーマンス最適化
PageSpeed Insights 95+を達成。画像はすべてWebP化し、Critical CSSをインライン展開。フォントはdisplay:swapで非同期読み込み。gzip圧縮後の初回ロードは200KB以下に抑えています。
NUMBERS
数字で見るポートフォリオサイト
フレームワークに頼らない開発は非効率に見えるかもしれません。しかし、結果として得られたパフォーマンスと、開発過程で得た学びは計り知れません。
index.htmlの総行数
セマンティックなマークアップ
外部フレームワーク依存
React, Vue, jQuery 一切不使用
PageSpeedスコア
モバイル・デスクトップ両方
外部ライブラリゼロという制約は、一見すると不便に思えます。しかし、ブラウザAPIを直接操作する経験は、どんなフレームワークを使う場合でも土台となる力になります。フレームワークは「便利な抽象化」であり、その下で何が起きているかを理解しているかどうかで、トラブルシューティング能力に大きな差が出ます。
LESSONS
学んだこと
フレームワークなしでの開発は非効率に思えるかもしれませんが、ブラウザAPIを直接触ることで得られる理解は深い。就職活動やクライアントへのアピールにも「素のHTML/CSS/JSで作れる」スキルは強力な武器になります。
最も大きな学びは、CSSの表現力の高さでした。CSSだけで実現できるアニメーション、レイアウト、レスポンシブデザインの幅広さは、JavaScriptのフレームワークに頼りがちな開発者が見落としている部分です。Grid、Flexbox、Custom Properties、@container queries -- CSS単体でモダンなUIのほとんどを構築できます。
また、JavaScriptにおいてもWeb Components、Intersection Observer、ResizeObserver、MutationObserverなど、ブラウザネイティブのAPIが非常に充実していることを再認識しました。これらを直接使うことで、バンドルサイズを劇的に削減しながら、十分なインタラクティビティを実現できます。
一方で、状態管理が複雑になる場面ではフレームワークの恩恵を感じました。フォームのバリデーション、動的なフィルタリング、ルーティングなどは、素のJSで書くとコード量が膨らみがちです。適材適所でフレームワークを選択する判断力こそ、バニラ開発で養われるスキルだと感じています。
このポートフォリオサイトは、HAKUSOの技術力の証明であると同時に、「技術選定の根拠を説明できるクリエイター」であることのアピールでもあります。今後もこのサイトを育てながら、制作実績とともにアップデートしていく予定です。