生成AIを使ってポートフォリオサイト制作の計画を立ててみた

## はじめに
本記事は [土山竜輝のひとり Advent Calendar 2024](https://qiita.com/advent-calendar/2024/tatsuki-tsuchiyama) の1日目です。25日間でポートフォリオサイトを作っていきます！
　　
## 前提条件
ChatGPTのカスタム指示の「どのように ChatGPT に回答してほしいですか？」以下のような指示を入力しています。
```md
Next.js（App Router、TypeScript）とTailwind CSSを用いて、以下の条件を満たすコードを生成してください。

- **仕様変更に柔軟性があること**：設計変更や機能追加に対する対応力を持つコード。
- **最小限の量であること**：必要最小限のコードで機能を実現。
- **SOLID原則に基づくこと**：コードの設計はSOLID原則に従ってください。
- **レスポンシブデザイン対応**：どのデバイスでも適切に表示されるようにデザインしてください。

# 出力フォーマット
用意するコードを、読みやすいフォーマットかつ適切なコメントを含めて提供してください。シンプルで保守性の高いコードを心がけてください。

# 注意事項
- リアクティブな設計を心がけ、変更点が発生したときにも少ない修正で対応できるようにしてください。
- メンテナンスや拡張を考慮したコード設計を行ってください。
```
　　
## 実装
はじめから生成AIをフル活用していきます。
　　
「一般的なポートフォリオサイト制作の流れを教えて」とChatGPTに指示したところ、以下の回答が返ってきました。
```md
一般的なポートフォリオサイト制作の流れは、以下のステップで進めることが多いです。各ステップをしっかり計画しながら進めることで、完成度の高いポートフォリオを作成できます。

---

## 1. **目的とターゲットの設定**
- **目的を明確化**: 何を伝えたいのか（スキル、プロジェクト、自己紹介など）。
- **ターゲット層の特定**: 採用担当者、クライアント、協業者など、誰に見てもらいたいか。

---

## 2. **コンテンツの準備**
- **必要な情報のリストアップ**:
  - 自己紹介（経歴、スキルセット、得意分野）
  - 作品・プロジェクト紹介（概要、使用技術、成果）
  - 連絡先（SNSやフォームなど）
  - その他（ブログ、趣味など）
- **素材の準備**:
  - 写真、動画、グラフィック、アイコンなど。
  - テキストやプロジェクト詳細のドラフト。

---

## 3. **デザインの計画**
- **ワイヤーフレーム作成**: サイトの構造やレイアウトを視覚化。
- **デザインテーマの決定**: 配色、フォント、スタイルを統一。
- **レスポンシブデザイン**: デスクトップ、タブレット、スマートフォン対応を考慮。

---

## 4. **技術スタックの選定**
- **フロントエンド**: HTML, CSS, JavaScript（Next.js + Tailwind CSSなど）
- **バックエンド**（必要に応じて）: Firebase, Supabase, Node.jsなど。
- **ホスティング**: Vercel, Netlify, GitHub Pagesなど。

---

## 5. **開発**
- **基本構造の構築**:
  - Next.jsでのルーティング設定。
  - レスポンシブデザインを考慮したレイアウト作成（Tailwind CSSを活用）。
- **コンポーネントの作成**:
  - 再利用可能なコンポーネントを設計（例: ヘッダー、フッター、カードなど）。
- **動的な機能**:
  - プロジェクト一覧やブログ記事を動的に生成（Next.jsの`getStaticProps`や`getServerSideProps`を活用）。
- **フォーム**: 連絡先用のフォームを実装（送信機能はバックエンドまたはサードパーティサービスを使用）。

---

## 6. **テスト**
- **動作確認**:
  - 全ページが正常に動作するか確認。
  - リンク切れ、誤字脱字がないかチェック。
- **レスポンシブテスト**:
  - 各デバイスでデザインが崩れていないか確認。
- **パフォーマンスチェック**:
  - Google Lighthouseなどのツールでスコアを確認し、最適化。

---

## 7. **デプロイ**
- **コードの最終確認**: 本番用に不要なデバッグコードやコメントを削除。
- **ホスティングサービスにデプロイ**: VercelやNetlifyにアップロード。
- **ドメインの設定**: 独自ドメインを取得し、設定。

---

## 8. **公開後のメンテナンス**
- **定期的な更新**:
  - 新しいプロジェクトやブログ記事を追加。
  - プロフィール情報の更新。
- **バグ修正**: ユーザーからのフィードバックを元に修正。
- **セキュリティ対策**: ライブラリや依存関係を最新に保つ。

---

この流れを守ることで、目的に合った高品質なポートフォリオサイトを効率的に構築できます。
```
　　
続けて、「25日で完成させることを目標として、1日単位でスケジュールを考えてください。」と指示すると、以下の回答が返ってきました。

```md
25日間でポートフォリオサイトを完成させるスケジュールを提案します。  
各ステップを小さなタスクに分解し、余裕を持たせた計画です。  

---

### **1〜3日目: 準備・計画**
1. **目的・ターゲット設定**  
   - サイトの目的とターゲットを決定。  
   - 必要なコンテンツをリストアップ。  
2. **コンテンツ準備**  
   - 自己紹介文やプロジェクト情報をまとめる。  
   - 使用する画像・動画・ロゴなどを収集。  
3. **デザインテーマ決定**  
   - 配色、フォント、スタイルを決定。  
   - ワイヤーフレームを簡単に描く。  

---

### **4〜6日目: 環境構築**
4. **Next.js プロジェクトセットアップ**  
   - Next.js + TypeScriptの初期プロジェクト作成。  
   - Tailwind CSSをインストールして基本設定。  
5. **ディレクトリ構成を決定**  
   - 必要なフォルダ（`components`, `pages`, `public`など）を整理。  
6. **共通レイアウト作成**  
   - ヘッダー・フッター・ナビゲーションバーを実装。  
   - レスポンシブデザインを考慮。  

---

### **7〜14日目: メイン機能の開発**
7. **トップページ作成**  
   - ヒーローセクション（キャッチフレーズや画像）を実装。  
   - トップページにサイト全体のリンクを配置。  
8. **自己紹介ページ作成**  
   - プロフィールやスキルセットを掲載。  
   - アイコンや図を使って視覚的にわかりやすくする。  
9. **プロジェクト一覧ページ作成**  
   - ダミーデータを用いて、プロジェクトカードをリスト表示。  
   - Tailwind CSSのグリッドレイアウトを活用。  
10. **プロジェクト詳細ページ作成**  
    - 動的ルーティングを実装（`getStaticPaths`と`getStaticProps`を利用）。  
    - プロジェクトの詳細を表示するページを作成。  
11. **ブログページ（オプション）**  
    - 必要に応じて、ブログ一覧と詳細ページを追加。  
12. **連絡フォーム作成**  
    - 名前・メールアドレス・メッセージ入力欄を設置。  
    - フォーム送信機能（サードパーティAPIを使用）。  
13. **全ページのレスポンシブ対応**  
    - モバイル・タブレット・デスクトップのビューを確認・調整。  
14. **基本的なアニメーション追加**  
    - Hoverエフェクトやフェードインアニメーションを実装。  

---

### **15〜18日目: テスト**
15. **動作確認**  
    - 全ページのナビゲーションや動的機能をチェック。  
16. **レスポンシブテスト**  
    - 実機またはブラウザツールで、各デバイスでの動作確認。  
17. **パフォーマンス最適化**  
    - 画像圧縮、コードスプリッティング、Lighthouseテスト。  
18. **アクセシビリティ確認**  
    - 色のコントラスト、キーボード操作対応を確認。  

---

### **19〜21日目: デプロイ準備**
19. **コードレビュー**  
    - 不要なコードやコメントを整理。  
20. **ホスティング環境構築**  
    - VercelやNetlifyにプロジェクトをアップロード。  
21. **ドメイン設定**  
    - 独自ドメインを取得して設定。  

---

### **22〜23日目: 最終調整**
22. **フィードバック反映**  
    - 他の人にサイトを見てもらい改善案を反映。  
23. **SEO対策**  
    - メタタグ、OGP画像、サイトマップの作成。  

---

### **24〜25日目: 公開と振り返り**
24. **公開**  
    - 本番環境で最終確認後、公開。  
25. **振り返りとメンテナンス計画**  
    - 制作の振り返りを行い、改善点をリスト化。  
    - 更新スケジュールを考える。  

---

このスケジュールに従えば、25日でポートフォリオサイトを効率よく完成させることができます。
```
　　
そういえば、こちらの要求が加味されていませんでしたね...
以下の指示をします。

```md
技術スタック
・Next.js 15
・Tailwind CSS
・Vercel

やりたいこと
自己紹介
シンプルなマークダウンでの記事編集・投稿エディタ

上記が要件です。
この他に私に確認しておきたいことを全て聞いてください。
```
　　
以下の回答が返ってきました。

```md
以下は、ポートフォリオサイトを構築するにあたって、事前に確認しておくべきポイントのリストです。これを元に要件をさらに詳細化し、制作をスムーズに進めます。

---

## **1. サイト全体に関する確認事項**
1. **デザインや雰囲気**  
   - シンプル、モダン、ミニマルなど、希望するデザインスタイルはありますか？  
   - 配色やフォントに特定のイメージや希望はありますか？  
   - 他に参考にしたいサイトやデザインがありますか？  

2. **ナビゲーション構造**  
   - サイト内のページはどのような構成にしますか？  
     （例: トップページ、自己紹介、記事一覧、記事詳細）  
   - ヘッダーやフッターに必要なリンクや情報はありますか？

3. **言語設定**  
   - サイトは1言語対応ですか？それとも多言語対応を考えていますか？

4. **パフォーマンス要件**  
   - ページ読み込み速度やモバイル対応で特に重視したい部分はありますか？

---

## **2. 自己紹介に関する確認事項**
1. **掲載内容**  
   - 自己紹介に含めたい情報はどのようなものですか？  
     （例: 名前、職歴、スキルセット、趣味、目標など）  
   - 写真やアイコンは掲載しますか？  

2. **形式やデザイン**  
   - 自己紹介をどのように見せたいですか？（例: カード形式、1ページにまとめる）  

---

## **3. 記事編集・投稿機能に関する確認事項**
1. **マークダウンの範囲**  
   - 使用したいマークダウン記法の範囲はどこまでですか？  
     （例: 見出し、リスト、コードブロック、画像埋め込みなど）

2. **投稿・編集ワークフロー**  
   - 記事の投稿や編集はどのような流れを希望しますか？  
     （例: ブラウザ上のエディタで入力して保存、外部のデータベースに連携）  
   - 記事を公開する前にプレビュー画面を表示したいですか？  

3. **データ保存**  
   - 投稿データはどのように保存しますか？  
     （例: ローカルJSONファイル、GitHub管理、外部APIやCMSとの連携）  

4. **管理機能**  
   - 記事の削除や非公開設定など、管理機能が必要ですか？  
   - 投稿者を複数人にする可能性はありますか？  

---

## **4. ホスティングとデプロイ**
1. **独自ドメイン**  
   - 独自ドメインを使用しますか？既にドメインをお持ちですか？  

2. **デプロイの頻度**  
   - サイトの更新頻度やデプロイの自動化を希望しますか？  

---

## **5. その他の機能や要件**
1. **追加機能の検討**  
   - 記事の検索機能やタグ機能を実装する予定はありますか？  
   - SNSやGitHub、LinkedInなどのリンクを設置しますか？

2. **拡張性**  
   - 今後予定している追加機能や、成長を見越した設計が必要ですか？  
     （例: プロジェクト紹介、ブログ機能の拡張）

3. **アクセス解析**  
   - Google Analyticsやその他のトラッキングツールを利用しますか？  

---

## **最終確認**
1. **開発スコープ**  
   - 25日の開発スケジュールで優先度の高い機能はどれですか？  
     （自己紹介と記事編集機能のどちらを重点的にするか）  

2. **スケジュール調整**  
   - この期間中にレビューやフィードバックをいただけるタイミングはいつですか？  

---

これらの質問を検討いただき、回答いただければ詳細な設計に進むことができます！
```
　　
ChatGPTからの質問に回答し、文末にスケージュールを再考させる旨の文章を加えて指示します。

```
1. **デザインや雰囲気**  
   - シンプル

2. **ナビゲーション構造**  
   - サイト内のページは「トップページ（自己紹介）、記事一覧、お問い合わせ」

3. **言語設定**  
   - 日本語のみ

4. **パフォーマンス要件**  
   - レスポンシブ対応

---

## **2. 自己紹介に関する確認事項**
1. **掲載内容**  
   - 自己紹介に含めたい情報は「名前、職歴、スキルセット、趣味、目標） 」
   - 写真やアイコンは掲載する

2. **形式やデザイン**  
   - 自己紹介はカード形式

---

## **3. 記事編集・投稿機能に関する確認事項**
1. **マークダウンの範囲**  
   - 使用したいマークダウン記法の範囲は全て

2. **投稿・編集ワークフロー**  
   - 記事の投稿や編集はどのような流れを希望しますか？  
     （例: ブラウザ上のエディタで入力して保存、現段階ではデータベースは使わずにJSONで格納）  
   - 記事を公開する前にプレビュー画面は表示したい 

3. **データ保存**  
   - 投稿データはローカルJSONファイルで保存  

4. **管理機能**  
   - 記事の削除や非公開設定がしたい
   - 投稿者を複数人にする可能性は現段階ではなし 

---

## **4. ホスティングとデプロイ**
1. **独自ドメイン**  
   - Vercelのドメインを使用

2. **デプロイの頻度**  
   - サイトの更新頻度やデプロイの自動化を希望

---

## **5. その他の機能や要件**
1. **追加機能の検討**  
   - 記事の検索機能やタグ機能を実装する予定はある
   - SNSやGitHub、LinkedInなどのリンクを設置する

2. **拡張性**  
   - 今後予定している追加機能や、成長を見越した設計が必要

3. **アクセス解析**  
   - Google Analyticsやその他のトラッキングツールを利用する

---

## **最終確認**
1. **開発スコープ**  
   - 25日の開発スケジュールで優先度の高い機能は自己紹介  

2. **スケジュール調整**  
   - この期間中にレビューやフィードバックをいただけるタイミングはなし


上記が回答になります。
上記の回答を元に、スケジュールを再考して提示して。
```
　　
以下の回答が返ってきました。
```md
ありがとうございます。提供いただいた情報を基に、ポートフォリオサイト制作のスケジュールを再調整しました。今回は「自己紹介」と「記事一覧」のページに重点を置き、マークダウンによる記事編集・投稿機能も実装するという要件に基づいて、進捗を効率よく管理できるようにしています。

---

### **再考された25日間のスケジュール**

---

### **1〜3日目: 準備・計画**
1. **目的・ターゲット設定**  
   - サイトの目的とターゲット層を明確化。
   - コンテンツ（自己紹介、記事、連絡先）を整理。
2. **デザインや雰囲気決定**  
   - シンプルなデザインの参考サイトを確認し、配色やレイアウトの方向性を決定。
   - ワイヤーフレームの作成（ページ構成、カード形式の自己紹介デザイン）。
3. **技術スタックセットアップ**  
   - Next.js 15 + Tailwind CSSのセットアップ（基本的な設定、必要な依存関係のインストール）。

---

### **4〜6日目: サイトの基本構築**
4. **プロジェクト構成設計**  
   - ディレクトリ構造を設計（`pages`, `components`, `public`, `data`など）。
   - Next.jsの基本ルーティング設定（トップページ、記事一覧、お問い合わせページの準備）。
5. **レスポンシブデザイン作成**  
   - Tailwind CSSで基本のレスポンシブデザインを作成（各ページをモバイル、タブレット、デスクトップに最適化）。
6. **自己紹介カード作成**  
   - カード形式で自己紹介を表示するコンポーネントを作成。
   - 自己紹介データ（名前、職歴、スキルセット、趣味、目標）を静的データとして埋め込む。

---

### **7〜10日目: 記事機能の実装**
7. **記事一覧ページ作成**  
   - 静的データ（JSONファイル）を用いて、記事一覧を表示するページを作成。
   - 記事のタイトル、要約、投稿日などをカード形式で表示。
8. **記事詳細ページ作成**  
   - `getStaticPaths`と`getStaticProps`を使用して、個別の記事詳細ページを作成。
   - 記事内容はマークダウン形式で表示。
9. **マークダウンエディタ実装**  
   - シンプルなマークダウンエディタを作成（`react-markdown`などのライブラリを使用）。
   - 投稿後にJSONファイルに記事データを保存。
10. **記事プレビュー機能実装**  
    - 記事編集時にプレビュー画面を表示する機能を作成。
    - 投稿前に表示内容を確認できるようにする。

---

### **11〜14日目: 記事管理機能の実装**
11. **記事の投稿機能実装**  
    - フォームから記事タイトル、内容（マークダウン）、カテゴリーを入力し、ローカルJSONに保存する機能を実装。
12. **記事削除・非公開設定機能**  
    - 投稿後、記事を削除する機能と非公開に設定するオプションを作成。
    - 非公開記事は一覧に表示しない、またはタグで非表示にする。
13. **記事の編集機能実装**  
    - 投稿した記事を編集できるようにする。
14. **記事データの保存と読み込み**  
    - ローカルJSONファイルに記事を保存し、サイトに表示するロジックを構築。

---

### **15〜17日目: お問い合わせフォーム・最適化**
15. **お問い合わせフォーム作成**  
    - シンプルなフォーム（名前、メールアドレス、メッセージ）を作成。
    - フォームの送信先を設定（Vercelのサーバーレス機能や第三者サービスを使用）。
16. **SEO対策**  
    - メタタグ、OGP設定を行い、検索エンジン最適化を実施。
17. **パフォーマンス最適化**  
    - 画像やCSS、JavaScriptの圧縮、コードスプリッティングを行い、ページ速度を向上させる。

---

### **18〜21日目: テスト・デプロイ準備**
18. **動作確認・バグ修正**  
    - 各ページの動作やリンク切れを確認し、バグを修正。
    - デバイス別の表示確認（レスポンシブデザインをテスト）。
19. **記事の検索・タグ機能実装**  
    - 記事の検索機能やタグ付け機能を簡単に実装。
20. **SNSリンク・アクセス解析の設定**  
    - SNS（GitHub、LinkedIn、Twitterなど）のリンクをヘッダーやフッターに設置。
    - Google Analyticsの設定。
21. **コードレビューと最終調整**  
    - コードのレビューを行い、最終調整を実施。

---

### **22〜23日目: デプロイと公開**
22. **Vercelへのデプロイ**  
    - Vercelにサイトをデプロイし、動作確認。
    - 独自ドメイン（Vercelのドメインを使用）を設定。
23. **最終確認と公開**  
    - サイトの最終確認を行い、公開。

---

### **24〜25日目: 振り返りとメンテナンス準備**
24. **振り返り**  
    - サイトの制作を振り返り、改善点を整理。
    - 記事機能やお問い合わせ機能のフィードバックを収集し、改善計画を立てる。
25. **メンテナンス準備**  
    - 更新スケジュールの策定。
    - 今後追加する機能（例えば、コメント機能やポートフォリオの詳細ページ）についての計画を立てる。

---

このスケジュールに従うことで、自己紹介ページ、記事一覧ページ、マークダウンによる記事編集機能、お問い合わせフォームの実装が効率よく進められます。また、25日以内にポートフォリオサイトが完成するように、余裕を持ったタスク配分をしています。
```
　　
良さそうですね！
ついでに記事の投稿のタイトルも考えてもらいましょう。
以下の指示をします。
```md
---

### **1〜3日目: 準備・計画**
1. **目的・ターゲット設定**  
   - サイトの目的とターゲット層を明確化。
   - コンテンツ（自己紹介、記事、連絡先）を整理。
2. **デザインや雰囲気決定**  
   - シンプルなデザインの参考サイトを確認し、配色やレイアウトの方向性を決定。
   - ワイヤーフレームの作成（ページ構成、カード形式の自己紹介デザイン）。
3. **技術スタックセットアップ**  
   - Next.js 15 + Tailwind CSSのセットアップ（基本的な設定、必要な依存関係のインストール）。

---

### **4〜6日目: サイトの基本構築**
4. **プロジェクト構成設計**  
   - ディレクトリ構造を設計（`pages`, `components`, `public`, `data`など）。
   - Next.jsの基本ルーティング設定（トップページ、記事一覧、お問い合わせページの準備）。
5. **レスポンシブデザイン作成**  
   - Tailwind CSSで基本のレスポンシブデザインを作成（各ページをモバイル、タブレット、デスクトップに最適化）。
6. **自己紹介カード作成**  
   - カード形式で自己紹介を表示するコンポーネントを作成。
   - 自己紹介データ（名前、職歴、スキルセット、趣味、目標）を静的データとして埋め込む。

---

### **7〜10日目: 記事機能の実装**
7. **記事一覧ページ作成**  
   - 静的データ（JSONファイル）を用いて、記事一覧を表示するページを作成。
   - 記事のタイトル、要約、投稿日などをカード形式で表示。
8. **記事詳細ページ作成**  
   - `getStaticPaths`と`getStaticProps`を使用して、個別の記事詳細ページを作成。
   - 記事内容はマークダウン形式で表示。
9. **マークダウンエディタ実装**  
   - シンプルなマークダウンエディタを作成（`react-markdown`などのライブラリを使用）。
   - 投稿後にJSONファイルに記事データを保存。
10. **記事プレビュー機能実装**  
    - 記事編集時にプレビュー画面を表示する機能を作成。
    - 投稿前に表示内容を確認できるようにする。

---

### **11〜14日目: 記事管理機能の実装**
11. **記事の投稿機能実装**  
    - フォームから記事タイトル、内容（マークダウン）、カテゴリーを入力し、ローカルJSONに保存する機能を実装。
12. **記事削除・非公開設定機能**  
    - 投稿後、記事を削除する機能と非公開に設定するオプションを作成。
    - 非公開記事は一覧に表示しない、またはタグで非表示にする。
13. **記事の編集機能実装**  
    - 投稿した記事を編集できるようにする。
14. **記事データの保存と読み込み**  
    - ローカルJSONファイルに記事を保存し、サイトに表示するロジックを構築。

---

### **15〜17日目: お問い合わせフォーム・最適化**
15. **お問い合わせフォーム作成**  
    - シンプルなフォーム（名前、メールアドレス、メッセージ）を作成。
    - フォームの送信先を設定（Vercelのサーバーレス機能や第三者サービスを使用）。
16. **SEO対策**  
    - メタタグ、OGP設定を行い、検索エンジン最適化を実施。
17. **パフォーマンス最適化**  
    - 画像やCSS、JavaScriptの圧縮、コードスプリッティングを行い、ページ速度を向上させる。

---

### **18〜21日目: テスト・デプロイ準備**
18. **動作確認・バグ修正**  
    - 各ページの動作やリンク切れを確認し、バグを修正。
    - デバイス別の表示確認（レスポンシブデザインをテスト）。
19. **記事の検索・タグ機能実装**  
    - 記事の検索機能やタグ付け機能を簡単に実装。
20. **SNSリンク・アクセス解析の設定**  
    - SNS（GitHub、LinkedIn、Twitterなど）のリンクをヘッダーやフッターに設置。
    - Google Analyticsの設定。
21. **コードレビューと最終調整**  
    - コードのレビューを行い、最終調整を実施。

---

### **22〜23日目: デプロイと公開**
22. **Vercelへのデプロイ**  
    - Vercelにサイトをデプロイし、動作確認。
    - 独自ドメイン（Vercelのドメインを使用）を設定。
23. **最終確認と公開**  
    - サイトの最終確認を行い、公開。

---

### **24〜25日目: 振り返りとメンテナンス準備**
24. **振り返り**  
    - サイトの制作を振り返り、改善点を整理。
    - 記事機能やお問い合わせ機能のフィードバックを収集し、改善計画を立てる。
25. **メンテナンス準備**  
    - 更新スケジュールの策定。
    - 今後追加する機能（例えば、コメント機能やポートフォリオの詳細ページ）についての計画を立てる。

---

上記のスケジュールに沿って、QiitaのAdvent Calendar 2024の記事を投稿していきます。カレンダーとタイトルは、「土山竜輝のひとりAdvent Calendar 2024」で、生成AIをフル活用して、ポートフォリオサイトを作ります。使用する技術はNext.js 15、Tailwind CSS、Vercelです。全25記事のタイトル案を考えてください。「生成AIを使って〇〇してみた」の形で統一してください。表記ブレがないように注意を払ってください。
```

　　
以下の回答が返ってきました。手直しはしますが、1記事目以外はこれでいきたいと思います。
```md
1. 生成AIを使ってポートフォリオサイトの目的とターゲットを設定してみた
2. 生成AIを使ってポートフォリオサイトのデザインを決定してみた
3. 生成AIを使ってNext.jsとTailwind CSSのセットアップをしてみた
4. 生成AIを使ってプロジェクト構成を設計してみた
5. 生成AIを使ってレスポンシブデザインを作成してみた
6. 生成AIを使って自己紹介カードを作成してみた
7. 生成AIを使って記事一覧ページを作成してみた
8. 生成AIを使って記事詳細ページを作成してみた
9. 生成AIを使ってマークダウンエディタを実装してみた
10. 生成AIを使って記事のプレビュー機能を実装してみた
11. 生成AIを使って記事の投稿機能を実装してみた
12. 生成AIを使って記事の削除・非公開設定機能を実装してみた
13. 生成AIを使って記事の編集機能を実装してみた
14. 生成AIを使って記事データの保存と読み込みを実装してみた
15. 生成AIを使ってお問い合わせフォームを作成してみた
16. 生成AIを使ってSEO対策を実施してみた
17. 生成AIを使ってパフォーマンス最適化をしてみた
18. 生成AIを使って動作確認とバグ修正をしてみた
19. 生成AIを使って記事の検索・タグ機能を実装してみた
20. 生成AIを使ってSNSリンクとアクセス解析を設定してみた
21. 生成AIを使ってコードレビューと最終調整をしてみた
22. 生成AIを使ってVercelにデプロイしてみた
23. 生成AIを使ってポートフォリオサイトを最終確認して公開してみた
24. 生成AIを使ってサイト制作を振り返ってみた
25. 生成AIを使ってメンテナンス準備をしてみた
```


　　
では、このスケジュールに沿ってアドベントカレンダーを進めていきたいと思います！
ただし、途中での軌道修正などは十分に考えられるため、予定を変更することはあると思われます。
よろしくお願いします！