AIを駆使してこのポートフォリオサイトを1日で完成させた話
14分で読める
AINext.jsDesignArchitecture

AIを駆使してこのポートフォリオサイトを1日で完成させた話

このポートフォリオサイトのブログ機能をついに公開しました！ 記念すべき記事として、今回はこのホームページをどのようにして「1日で完成させたのか」について、その実装やアーキテクチャー、プロセスをシェアしたいと思います。

単なるVibe Codingでは終わらせない

最近はAIにざっくりとした指示を出してコードを書かせる「Vibe Coding」が流行っていますが、私自身UI/UXに関しては、普通にAIでコードを生成させてしまうと「よくある・ありふれたUI」になってしまうことが多いと感じていました。

それを防ぎ、リッチで洗練されたUI/UXを実現するために、今回はプロセスを工夫しました。

  1. 事前の綿密なディープリサーチ 実装に入る前に、まずはGEMINIを使ったディープリサーチを行い、最新のWebデザインのトレンドやUI/UXのベストプラクティスを徹底的に調査しました。

  2. 汎用的なAgent Skillsの作成と活用 リサーチで得られた知見を単なるプロンプトにするだけでなく、~/.claude/ 配下に「Web開発」用の体系的な「Agent Skills」としてドキュメント化し、それらを順に使って実装を進めるワークフローを構築しました。このスキル群は今回限りの使い捨てではなく、今後も別の案件で汎用的に再利用できるように設計しています。

    具体的には、以下のスキルを連携させて処理を実行しました：

    • ui-ux-pro-max: デザインシステムの生成を担当。サイト全体のカラーパレット、フォントペアリング、コンポーネントの基本スタイルを決定。
    • create-high-impact-landing-page: LPとしての設計・実装を担当。ペルソナ分析、コンテンツのセクション構造、Framer Motionを用いたアニメーションの実装。
    • nextjs-seo-optimization: SEO対策の実装を担当。メタデータの階層化、構造化データの埋め込み、OG画像の生成など、Next.jsに適した高度なテクニカルSEOを施しました。
    • web-design-guidelines: 最終的なUI/UXの設計やアクセシビリティの監査、ベストプラクティスとの整合性チェック。

  3. 明示的な指示 「スキルをベースにリッチなUI/UXにすること」「ダークモードやグラスモーフィズムを取り入れること」など、ただ動くものを作るのではなく、体験価値を高めるための制約をAIに明示しました。

アーキテクチャと採用技術

このサイトはシンプルながらも最新の技術スタックを用いて、パフォーマンスと表現力を両立させています。

  • Next.js 16 (App Router): パフォーマンス重視のルーティングと、Server / Clientコンポーネントの明確な分離による高速なレンダリング。
  • Tailwind CSS v4: ユーティリティクラスによる高速なスタイリング。透過やブレンドモードを多用し、モダンな質感を表現。
  • Framer Motion: リッチなUI/UXの核となる要素のフェードインや、スクロールアピアランスのアニメーションを担当。
  • React Three Fiber (R3F): 背景や一部のオブジェクトに用いる軽量な3Dエフェクト。
  • Lenis: サイト全体のスムーススクロールを実現し、ユーザーの手触りを向上させています。
  • マークダウンによるブログシステム: gray-matter を用いて、content/posts 配下のMarkdownファイルを直接解析。TypeScriptと連携して完全に型安全な状態でレンダリングしており、日英のi18n（多言語対応）にもスケールできるディレクトリ構造を取っています。

アニメーションとSVG: 手描きはトップのテキストのみ

AIはマークアップやロジックを書くのは得意ですが、複雑な手書きアニメーションなどを意図通りに出力するのは困難だと言われます。

しかし今回は、驚くべきことにサイトの背景やセクションの区切りなどに使われているリッチな線画や曲線のデコレーション（SVG dividers）のほとんどはAIが自律的に生成してくれました。

実は、私が個人的にデザインツールを使って手作業で作成したSVGは、トップページにある「NOZOMI」というテキストロゴの部分だけです。それ以外の部分はすべてAgent Skillsの力を借りたAIが、全体の世界観に合わせてSVGコンポーネントとアニメーションロジックを見事に作り上げています。人間は「キーとなるアセット」用意に徹し、その他の装飾やアニメーション実装はAIに任せるといった分担が非常にスムーズに機能しました。

何度かの調整と試行錯誤

もちろん、最初のワンショットの指示だけで100%思い通りの完璧なものができたわけではありません。 リッチな体験を実現するためには、要所で細かなチューニングを行いました。

  • Works（実績）セクションのレイアウト: 最初に出力された構成ではコンポーネント間の余白が広すぎたり、画像がうまく表示されないケースがあったため、グリッド構成を修正。
  • スマホでの動画やアニメーション再生: モバイル環境で動画がインライン再生されない問題や、アニメーションが重くなる問題があり、レスポンシブなビューポートの分岐を追加指示して調整しました。
  • マイクロインタラクションの調整: ボタンのホバー効果やコンポーネントの遷移など、Lenisのスムーススクロールの挙動と競合しないよう、何度か手を入れて最高の手触りを追求しています。

結果として、AIによる爆発的なコーディングスピードの恩恵を受けながらも、デザインの手触りや独自性を失わない自分らしいサイトを丸一日で完成させることができました。

今後は、今回作成した汎用のAgent Skillsをさらにアップデートしつつ、継続的にこのサイト自身も進化させていく予定です。