生成AIを使ってポートフォリオサイトのデザインを作成してみた

はじめに

本記事は 土山竜輝のひとり Advent Calendar 2024 の2日目です。25日間でポートフォリオサイトを作っていきます！

実装

今回は、ポートフォリオサイトのデザインを作成していきます。
　　
実装するために必要なことがよく分からないので、とりあえず生成AIに聞いてみます。
25日間のスケジュールと『「生成AIを使ってポートフォリオサイトのデザインを作成してみた」を完遂させるために必要なこと全てを私に質問してください』という指示を生成AIに投げます。

すると、以下の回答が返ってきました。

ポートフォリオサイトのデザインを作成するために、まずいくつかの要素を整理し、具体的なデザインの方向性を決める必要があります。以下の質問をお答えいただけると、より詳細なデザイン案を作成できます。

### 1. サイトの目的とターゲット層
- **目的**: このポートフォリオサイトを通じて何を達成したいですか？（例：自分のスキルをアピール、仕事の受注、ブログ記事のシェアなど）
- **ターゲット層**: このサイトの訪問者は誰ですか？（例：採用担当者、クライアント、同じ業界の仲間など）

### 2. コンテンツ
- **基本的なセクション**: サイトに含めたいセクションは何ですか？（例：自己紹介、プロジェクト（ポートフォリオ）一覧、ブログ、連絡先など）
- **自己紹介**: どんな内容を自己紹介に含めますか？（例：経歴、スキルセット、趣味、目標）
- **プロジェクト**: 自分の作品や過去のプロジェクトの詳細をどう整理しますか？（例：プロジェクトごとにカード表示、スライダー形式など）
- **記事・ブログ**: 記事をどう分類しますか？（例：技術系の記事、日々の学びなど）

### 3. デザインの方向性
- **デザインのスタイル**: どんな雰囲気のデザインが好みですか？（例：ミニマリズム、フラットデザイン、モダン、レトロなど）
- **配色**: どんなカラーを使いたいですか？（例：シンプルでモノトーン、暖色系、青系、カスタムブランドカラーなど）
- **レイアウト**: 好きなレイアウトのタイプや参考になるサイトはありますか？（例：カード型、リスト型、シングルページ形式など）

### 4. レスポンシブデザイン
- どのデバイスに最適化したいですか？（例：モバイルファースト、タブレットも考慮、デスクトップ中心など）

### 5. ユーザーインタラクション
- サイト内でインタラクションはどのようなものを考えていますか？（例：ホバーエフェクト、アニメーション、フォーム入力時のバリデーションなど）
- **アニメーションや動き**: 特に気に入っている動きやアニメーションはありますか？

### 6. 特別な機能や要素
- このサイトに特別に組み込みたい機能やデザイン要素はありますか？（例：SNSの埋め込み、カスタムフォント、スライダーなど）

これらの質問にお答えいただければ、ポートフォリオサイトのデザインをより具体的に提案できると思います！

　　
これらの質問に回答しつつ、bolt でデザインを表示させるためのプロンプトを作成するために、以下のような指示を投げます。

### 1. サイトの目的とターゲット層
- **目的**: このポートフォリオサイトを通じて、自分について簡単にアピールできるようにしたい
- **ターゲット層**: このサイトの訪問者はランナーやエンジニアなど

### 2. コンテンツ
- **基本的なセクション**: サイトに含めたいセクションは、自己紹介、プロジェクト（ポートフォリオ）一覧、記事、連絡先など
- **自己紹介**: 自己紹介には、経歴、スキルセット、趣味、価値観を含める
- **プロジェクト**: 自分の作品や過去のプロジェクトの詳細をプロジェクトごとにカード表示する
- **記事・ブログ**: 記事をランニング・エンジニアリングに分類

### 3. デザインの方向性
- **デザインのスタイル**: シンプルなデザイン
- **配色**: どんなカラーを使いたいですか？シンプルな青系
- **レイアウト**: カード型

### 4. レスポンシブデザイン
- モバイルファーストだけど、どのデバイスでも閲覧できるように

### 5. ユーザーインタラクション
- スクロールするとサイドからコンテンツが出てくる

### 6. 特別な機能や要素
- SNSやGoogleアナリティクスの埋め込み

上記が回答です。この回答を踏まえ、AIに指示するプロンプトを考えてください。

　　
すると、以下のような回答が返ってきました。

上記の回答に基づいて、生成AIに指示するプロンプトを考えると、以下のような内容になります。これをAIに与えることで、ポートフォリオサイトのデザインと構築に必要な要素を生成するための詳細な指示を出すことができます。

---

### プロンプト

「シンプルで魅力的なポートフォリオサイトを作成するためのNext.js (App Router) とTailwind CSSのコードを生成してください。以下の要件を満たすデザインを提案し、コードを提供してください。

#### 1. サイトの目的
- 自分の経歴やスキルセット、プロジェクトを簡単にアピールできるサイトを作成。
- ターゲット層はランナーやエンジニア。

#### 2. サイト構成
- **基本的なセクション**: 
  - **自己紹介**: 経歴、スキルセット、趣味、価値観を含む
  - **プロジェクト（ポートフォリオ）**: カード形式でプロジェクトを一覧表示
  - **記事**: ランニング・エンジニアリングに関する記事を表示
  - **連絡先**: シンプルなコンタクトフォーム
- **レイアウト**: モダンでカード型のデザイン
  - 各プロジェクト、記事はカード形式で表示し、情報が見やすく整理されている

#### 3. デザインスタイル
- **配色**: シンプルで落ち着いた青系のカラーリング
- **デザインのスタイル**: クリーンでミニマル、視覚的に心地よいデザイン
- **レスポンシブデザイン**: モバイルファーストで、デスクトップやタブレットにも対応

#### 4. ユーザーインタラクション
- スクロール時に、サイドからコンテンツがフェードインするエフェクト
  - Tailwind CSSのアニメーションやトランジションを使ってスムーズな表示を実現

#### 5. 特別な機能
- **SNSリンク**: GitHub、LinkedIn、Twitterなどのアイコンをヘッダーやフッターに表示
- **Google Analytics**: サイトにGoogle Analyticsを埋め込む
- **SEO対策**: メタタグやOGP設定を行い、SEOを最適化

---

この指示に基づいて、Next.js 15 + Tailwind CSSを使ったコードを生成してください。コードは以下の点を重視してください：
- 最小限のコードで機能を実現
- レスポンシブデザインに対応
- シンプルで保守性の高いコード設計
- SOLID原則に基づいた構造

また、可能であれば、コードにコメントを付けて、理解しやすくしてください。」

---

このプロンプトを生成AIに与えることで、ポートフォリオサイトのデザインと実装に関するコードを得られ、さらに設計や機能追加に柔軟に対応できるようなベースを提供してくれるでしょう。

　　
スケジュールと生成AIから得られた指示をboltに投げると、以下のようなプレビューが表示されました。

　　
一発で出力されたクオリティにしては良いのではないのでしょうか？？
お気づきの方がほとんどだと思いますが、boltはコードも出力されます。
デザイナーの方はFigmaやAdobe XDでワイヤーフレームを作成することが多いと思いますが、コードで出力できるようになりそうです。
　　
ただし、不足している部分もあるため、続けて以下の指示を投げました。

・トップページにカード形式で自己紹介を追加して（経歴、スキルセット、趣味、価値観）
・SNSはX、Instagram、Github、Qiita
・投稿記事のデザインも見たいので記事に遷移できるようにして

　　
すると、以下のようなプレビューが表示されました。

ホーム

記事

　　
ほとんどの要件を実現してくれました。
細かい部分は色々ありますが、実装しながら改善していこうと思います。

次回の予定は「生成AIを使ってNext.jsとTailwind CSSのセットアップをしてみた」でしたが、boltを活用した方がスムーズに進みそうです。
また、boltはブラウザでコードが編集でき、デプロイも簡単にできるみたいです。
したがって、次回は「boltで得られたプロジェクトをNetlifyにデプロイしてみた」に変更したいと思います。
最後まで読んでいただき、ありがとうございました！