チュートリアル: AIでウェブサイトを作成する方法

はじめに

この包括的なガイドでは、東京のAIコミュニティのためのプロフェッショナルなウェブサイトを作成するための詳細な手順を提供します。このウェブサイトには、メール収集機能とニュースレター配信機能が含まれ、Kantan CMS統合によりコンテンツ管理が効率化されます。

前提条件

このプロジェクトを開始する前に、以下を確認してください：

• AIコーディングアシスタント（Cursor、Cline、Aiderなど）へのアクセス
• ウェブ開発の基本原則の理解
• Kantan CMSアカウントへのアクセス（後半の段階で必要）

ステップ1: 構造化されたウェブサイトの概要を作成する

適切に構造化された概要は、ウェブ開発プロジェクトの基盤となります。

手順：

1. お好みのAIコーディングアシスタントアプリケーションを起動します
2. 構造化された概要を生成するために、以下のプロンプトを入力します：

[あなたのビジネス/自分自身]についてのウェブサイトを作成したいと思います。それは
- （特徴1）
- （特徴2）
- （特徴3）

上記の情報に基づいて概要を生成してください。マークダウン形式で欲しいです。

例：

東京のAIコミュニティについてのウェブサイトを作成したいと思います。それは
- AIの愛好家が繋がり、知識を共有するためのハブ
- ニュースレターと無料リソースを配布するプラットフォーム
- 限定コンテンツ配信のためのメールアドレス収集システム
- 東京で開催されるAIイベントのカレンダー

上記の情報に基づいて概要を生成してください。マークダウン形式で欲しいです。

説明：

概要は、ウェブサイトの構造とコンテンツ構成のフレームワークを提供します。

ヒント：

生成された概要が目的に合っているかを慎重に評価してください。構造を確認する際には、情報の論理的な流れとユーザーエクスペリエンスを考慮してください。

ステップ2: 詳細な仕様書を作成する

仕様書は、ウェブサイト開発の技術的な設計図として機能します。

手順：

1. AIコーディングアシスタントで新しい会話を開始します
2. 以下のプロンプトを特定の要件にカスタマイズして送信します：

[あなたのビジネス/自分自身]についてのウェブサイトを作成したいと思います。
ウェブサイトには以下の要素を含めたいです：
- レスポンシブデザイン
- [好みのSSGフレームワーク]を使用
- [好みのCSSフレームワーク]を使用
- コンテンツ管理にマークダウンを使用
- [追加の技術仕様]

以下の概要に基づいて、ウェブサイトを作成するための仕様書を生成してください。
マークダウン形式（アーティファクト）で欲しいです。

[ステップ1から概要を挿入]

例：

東京のAIに焦点を当てたコミュニティに関するウェブサイトを作成したいと思います。
ウェブサイトには以下の要素を含めたいです：
- レスポンシブデザイン
- SSGフレームワークとしてNext.jsを使用
- Tailwind CSSを使用
- コンテンツ管理にマークダウンを使用
- 専用のニュースセクションページを持つ
- ホームページにメール収集フォームを含める

以下の概要に基づいて、ウェブサイトを作成するための仕様書を生成してください。
マークダウン形式（アーティファクト）で欲しいです。

[ステップ1から概要を挿入]

説明：

この仕様書は、開発プロセスの明確なガイダンスを提供し、ウェブサイトの技術的なパラメータを確立します。

ヒント：

技術要件を指定する際には、正確かつ包括的にしてください。これらはウェブサイトの機能性と外観に直接影響します。

ステップ3: ウェブサイトを生成する

手順：

1. 以下のオプションから適切なウェブサイト生成プラットフォームを選択します：
   • v0
   • bolt.new
   • lovable.dev
2. ステップ2からの仕様を入力します
3. 生成されたコードを評価し、必要な修正を実装します

説明：

これらのプラットフォームは、高度なアルゴリズムを使用して仕様を機能的なウェブサイトコードに変換します。

ヒント：

最初に生成されたコードは、特定のニーズを完全に満たすために改良が必要な基盤として機能します。

ステップ4: サンプルコンテンツを作成する

手順：

1. ウェブサイトに必要なコンテンツコレクションを決定します（ブログ記事、イベントリスト、リソースなど）
2. 各コレクションに3〜5つのサンプルコンテンツ項目を作成します
3. 一貫した表示のためにマークダウン形式を使用します

例：

ブログコレクションの場合、以下のような記事を作成します：

• 「東京のAIコミュニティの進化」
• 「日本の学術機関から生まれる新興AIリサーチトレンド」
• 「特集プロフィール：東京の革新的AIスタートアップ」

説明：

サンプルコンテンツは、ウェブサイトが情報をどのように表示するかを示し、必要なデザイン調整を特定するのに役立ちます。

ヒント：

最終的にウェブサイトに掲載される内容を正確に反映する、高品質で代表的なコンテンツを開発してください。

ステップ5: Kantan CMS APIキーを生成する

手順：

1. Kantan CMS管理ダッシュボードにアクセスします
2. 設定セクションに移動し、APIキーを選択します
3. 「APIキーの作成」オプションを選択します
4. 後続の統合のためにこのキーを安全に記録します

説明：

APIキーにより、ウェブサイトとKantan CMSシステム間の安全な通信が可能になります。

重要なセキュリティ通知：

このAPIキーはコンテンツ管理システムへのアクセスを許可します。公開したり、公開コードリポジトリに含めたりしないよう、適切なセキュリティ対策を講じてください。

ステップ6: Kantan CMS MCP（Model Context Protocol）をダウンロードする

手順：

1. システムのターミナルアプリケーションを開きます
2. 以下のコマンドを実行して管理コントロールパネルをダウンロードします：

   git clone https://github.com/kantan-cms/kantan-cms-mcp.git

3. このJSONテンプレートを使用してMCPサーバー設定を構成します：

   {
     "mcpServers": {
       "kantan-cms-instruction": {
         "command": "python",
         "args": ["<kantan-cms-mcpへの絶対パス>/main.py"],
         "disabled": false,
         "env": {
           "PROJECT_ID": "<プロジェクトID>",
           "CMS_API_KEY": "<APIキー>"
         }
       }
     }
   }

4. ホスティングページからプロジェクトIDを<プロジェクトID>の代わりに挿入します
5. ステップ5からのAPIキーを<APIキー>の代わりに挿入します

ヒント：

設定エラーを防ぐために、すべてのパス参照が絶対パスで適切にフォーマットされていることを確認してください。

ステップ7: メール収集フォームを統合する

手順：

1. AIコーディングアシスタントで、以下のプロンプトを送信します：

   <ページ名>でフォームを投稿する際に、<コレクション名>というコレクションにデータを送信したいと思います。
   対応するIDとコレクションにフォームデータを送信する手順を取得し、<ページ名>を修正してください。

2. このプロジェクトの実装例：

   index.jsでフォームを投稿する際に、「ニュースレター購読者」というコレクションにデータを送信したいと思います。
   対応するIDとコレクションにフォームデータを送信する手順を取得し、index.jsを修正してください。

3. 生成されたコードをウェブサイトファイルに実装します

説明：

このプロセスにより、メール収集フォームがCMS内の適切なデータベースコレクションに接続されます。

ヒント：

データが正しくキャプチャされ、コンテンツ管理システムに保存されていることを確認するために、フォーム機能の徹底的なテストを行ってください。

ステップ8: ビルドとアップロードスクリプトを作成する

手順：

1. AIコーディングアシスタントで、以下のプロンプトを送信します：

   Kantan CMSと統合したいと思います。
   
   build.shスクリプトを作成してください。<コレクション名>からレコードを取得し、<マークダウンコンテンツディレクトリ>に保存し、ビルドされたウェブサイトをKantan CMSにアップロードするビルダーを作成したいと思います。

2. 結果のスクリプトをプロジェクトのルートディレクトリにbuild.shとして保存します

説明：

このスクリプトは、CMSからコンテンツを取得し、マークダウンファイルを生成し、更新されたウェブサイトをデプロイするプロセスを自動化します。

ヒント：

新しいコンテンツや修正でウェブサイトを更新する必要があるときは、このスクリプトを実行してください。

結論

この体系的なアプローチに従って、東京を拠点とするAIコミュニティのためのプロフェッショナルなウェブサイトを正常に作成しました。このサイトには現在、メール収集機能とKantan CMS統合が備わっており、効率的なコンテンツ管理とニュースレター配信が可能です。

最適な結果を得るには、定期的にコンテンツを更新し、コミュニティメンバーと積極的に関わり、継続的な関心と成長を促進してください。