非エンジニアが10時間で生成AIサイトを構築した全記録
このサイトの作り方
本サイト制作のきっかけ
当初は本サイトの情報のようなホワイトペーパーを作成して、NEWhのリードを獲得しようと考えていました。
けれど、スライド化するよりもWebサイトを作ったほうが早いし、 事業開発における生成AIの活用がはじまったばかりという段階に情報をクローズドするのって、日本のためにならないし、NEWhっぽくないな、という思い、ノウハウをオープンにすべくWebサイトの開発に着手しました。とはいえ、、もちろん、みなさんとのご縁はほしい、というのも本音です。なので、どんどんお問い合わせをお願いいたします。
「スライドよりもWebサイトのほうが早い」
という発想自体が、すでにパラダイムシフトを感じます。
ステップ1：情報を生成AIが活用できるようにする
NEWhの生成AIのノウハウは、一定レベルで体系化されている。だけど、生成AIの可読性を意識して整理されていたわけではない。 例えば、AI Innovation Nodeのプレゼン資料などは、Keynote、PDFで保存されており、Claude Codeで直接読み取ることができない。 （Cursorでは可能だけど、本サイト制作では、コストメリットの高いClaude Codeの前提で進めている。）
そこで、Claude（Desktop）でPDFなどをMarkdownファイル化して、Claude Codeが読み取れるように準備した。
具体的な手順
- 1.
PDFをClaude Desktopにアップロード
Claude DesktopにPDFをドラッグ＆ドロップし、「このPDFをMarkdown形式に変換してください」とプロンプト
- 2.
変換結果をファイルとして保存
生成されたMarkdownを`.md`ファイルとして保存。ファイル名は日本語でもOK
- 3.
site-Structureフォルダに整理
プロジェクトフォルダ内に`site-Structure`フォルダを作成し、変換したファイルを格納
ポイント
PDFのMarkdown化については、文字要素だけではなくそのレイアウトや図解も理解している（と感じる）Claudeの精度が最も高かった。 特に、表や図の構造を考慮して適切にMarkdownのテーブルやリストに変換してくれる。
利用ツール：
Claude Desktop（Opus4メイン）
活用情報：
NEWh AI Innovation Node資料、業務活用しているプロンプト、note記事など
ステップ2：サイトコンセプト、構成案の作成
生成AIが情報にアクセスできる環境をつくったら、サイトコンセプトや構成案の作成にはいる。 最初は、Claude、ないしはClaude Codeで実施していたけど、コンテキストウインドウの関係上、Geminiのほうが親和性が高いと判断し、Gemini 2.5 Pro で対話しながら作成した。
Geminiでの作業フロー
1. 情報の投入
ステップ1で整理した情報（Markdownファイル）をGeminiに投入。 複数ファイルを一度にアップロード可能。
2. コンセプト作成プロンプト
「提供した資料を基に、生成AI×事業開発の実践ガイドサイトを作成したい。
ターゲットは企業の新規事業開発担当者。
実践ファースト、理論は後付けというコンセプトで、
サイト全体の構成案を提案してください。」
3. 各ページの詳細化
提案された構成案を基に、各ページの構成案とテキストを作成。 この段階で、実際のコンテンツの7割程度が完成。
Geminiが生成した構成案の実例
Geminiは、提供した資料を基に以下のような詳細な構成案を生成しました。 制作要件からコンテンツ構成、デザイン指示まで、実装に必要な情報がすべて含まれています。
「実践ガイド シーン1」の構成案（全文）を見る →
【1. 制作要件】
【実践ガイド】シーン1：メガトレンド分析 - AIで未来を読み解き、事業の種を見つける
/guide/megatrend-analysis
事業開発の初期段階にある担当者が、AIを使って世の中の大きな流れを掴み、具体的な事業機会の「種」を発見できる状態になること。
新規事業のテーマを探している担当者、既存事業の将来性を探りたいマネージャー。
AIを使えば、数週間かかっていた市場調査が数時間で完了し、自分だけでは気づけない事業機会を発見できる。
要約：事業開発のスタート地点での漠然とした不安（何から始めればいいか、など）に共感を示し、このページでAIを使ったメガトレンド分析の方法を学べることを提示する。
要約：段階的に分析を進めるプロンプトを提示。「#テーマ」部分を書き換えるだけで、誰でも高品質な分析が始められることを説明する。
要約：ユーザーとAIの具体的な対話例を掲載。「トレンド抽出」→「事業機会の提案」へと議論が深まっていく様子をリアルに見せ、実際の活用シーンを具体的にイメージさせる。
要約：このシーンで重要な思考法として「段階的プロセス設計」を解説。AIに一度に答えを求めないことが、なぜ人間の深い理解（腹落ち）に繋がるのかを理論的に裏付ける。
要約：従来の人力リサーチとAI活用を「時間」「視野」「客観性」などの軸で比較する表を使い、AI活用のメリットを具体的に提示する。
専門的だが、初心者にも分かりやすい言葉を選ぶ。自信に満ち、読者の行動を促すような、前向きで力強いトーン。
【2. 最終テキスト案】
【実践ガイド】シーン1：メガトレンド分析 - AIで未来を読み解き、事業の種を見つける
導入 - 「何から手をつければ…」その悩み、AIが解決します
「新しい事業を始めたいが、どこにチャンスがあるのか分からない」「自社の強みを活かせる新しい領域はどこだろうか？」
事業開発のスタート地点では、誰もがこうした漠然とした問いと向き合います。従来、この問いに答えるためには、膨大な時間をかけて市場調査レポートを読み解き、専門家の話を聞く必要がありました。
しかし、生成AIの登場がその常識を覆しました。AIを正しく使えば、世の中の大きな流れ（メガトレンド）を瞬時に、かつ体系的に理解し、有望な事業機会を発見することが可能です。このページでは、その具体的な方法を解説します。
実践プロンプト - コピーしてすぐ使える「未来予測の設計図」
まずは、このプロンプトをコピーしてAIに投げかけてみましょう。「#テーマ」の部分を、あなたが関心のある業界や技術に変えるだけで、AIが未来を読み解くパートナーになります。
コード スニペット
```
命令
あなたは一流の市場アナリストです。以下のテーマについて、事業機会の発見に繋がるメガトレンドを分析してください。
テーマ
日本のウェルネス市場
分析のステップ
1. 関連する主要なメガトレンドを3つだけ挙げてください。
2. それぞれのトレンドについて、なぜ今注目されているのか（背景）と、具体的な変化（事例）を簡潔に説明してください。
3. 上記トレンドが交差する領域で、今後5-10年で特に有望と考えられる新しい事業機会を3つ提案してください。
```
AIとの対話イメージ - このようにして事業の種は発見される
上記のプロンプトを使うと、AIと以下のような対話が展開されます。
> User > （上記のプロンプトを入力）
>
> AI > 承知いたしました。日本のウェルネス市場における主要メガトレンドを3つ挙げます。
>
> 1. 個別化医療の本格化：ゲノム解析コストの低下により、個人の体質に合わせた予防や治療が現実的になっています。例えば、遺伝子検査に基づいた食事指導サービスなどが登場しています。
> 2. デジタル・メンタルヘルスケアの台頭：ストレス社会を背景に、瞑想アプリやオンラインカウンセリングの需要が急増しています。
> 3. アクティブシニア層の拡大：健康寿命の延伸に伴い、高齢者がより活動的な生活を送るためのフィットネスや栄養管理への関心が高まっています。
>
> User > 面白いですね。では、これらのトレンドが交差する領域で、新しい事業機会を3つ提案してください。
>
> AI > かしこまりました。
>
> 1. 【個別化医療 × メンタルヘルス】：個人のストレス特性（遺伝子や生活習慣から分析）に合わせた、オーダーメイドの瞑想・リラクゼーションコンテンツを提供するサブスクリプションサービス。
> 2. 【アクティブシニア × 個別化医療】：高齢者一人ひとりの体力や持病に合わせて、最適な運動プログラムと食事メニューをAIが毎日提案する、スマートウォッチ連動型コーチングサービス。
> 3. 【デジタル・メンタルヘルス × アクティブシニア】：高齢者の孤独感や不安を解消するため、同世代のコミュニティ機能と専門家によるオンラインカウンセリングを組み合わせたプラットフォーム。
成功の鍵は「思考法」にあり - なぜこの方法が有効なのか
このシーンで最も重要な思考法は「段階的な情報提示」です。
AIに一度に完璧な答えを求めず、「まず3つに絞って全体像を把握」→「次に興味のある点を深掘り」というように、人間の認知限界に合わせて対話を進めることが重要です。
このステップ・バイ・ステップのアプローチにより、複雑なトレンド情報を少しずつ咀嚼し、自分の中で意味づけしながら理解を積み上げることができます。これが、単なる情報収集で終わらない、深い「腹落ち」に繋がるのです。
得られる効果 - 従来手法との圧倒的な差
この手法を用いることで、事業開発の初期段階は劇的に変わります。
| 比較項目 | 従来の方法（人力調査） | AI活用の場合 |
|---|---|---|
| 時間 | 2-3週間 | 数時間〜1日 |
| 情報源 | 読める資料の量に依存し、限定的 | 膨大なデータから総合的に分析 |
| 視点 | 担当者の知識・経験に偏りがち | 多角的・客観的な分析が可能 |
| 更新性 | 調査時点で情報が固定される | いつでも最新情報で再分析可能 |
| コスト | 人件費+資料代で高額になることも | ほぼゼロ（AIツール利用料のみ） |
| 網羅性 | 特定の業界情報が中心 | 業界横断的な視点も得られる |
※ これがGeminiが生成した構成案の全文です
なぜGemini？
- • コンテキストウインドウが大きく、大量の資料を一度に処理可能
- • 構成案の作成において、全体像を把握しながら詳細を詰められる
- • 日本語での長文生成が安定している
利用ツール：
Gemini（Gemini 2.5 Pro）
制作物：
サイトコンセプト、各ページの構成案／テキスト、カラーパレット
ステップ3：サイト実装
ステップ2で作成した構成案に合わせて、サイトを実装していく。 この段階では、デザインシステムなどはつくらずに、基本的なカラーパレットのみを指定した状態で進行する。
Claude Codeでの開発手順
1. プロジェクトの初期化
# Claude Codeで新規プロジェクトを作成
「Next.jsでサイトを作成してください。Tailwind CSSとTypeScriptを使用」
2. 構成案ファイルの配置と参照
Geminiで作成したMarkdownファイルをワーキングディレクトリに配置
「site-Structureフォルダ内の構成案を見て、トップページを実装してください」
# Claude Codeが自動的にファイルを読み込んで実装
3. プランモードの活用
Shift + Tab でプランモード切り替え
大きな変更を加える前は、プランモードで変更内容を確認してから実行。 特に既存コードの大幅な修正時は必須。
注意点
- • コンテキストウインドウの使用率を常に確認（％表示）
- • エラーが発生した場合、対処療法的な修正を避ける
- • ハードコーディングされた値に注意
- • 拡張性を考慮した実装を求め続ける
ベストプラクティス
- • CLAUDE.mdを定期的に更新
- • git commitを適切なタイミングで実行
- • 1つの機能完成ごとに動作確認
- • 本質的な解決を求め続ける
デザインを後回しにする理由
これは、私がエンジニアスキルを有しているわけではなく、きちんとした要件定義ができないという点と、 ガチガチにルール化しても完全に遵守されてつくられることはないため、先にコンテンツを実装して、最終的に、デザインシステムをつくって整えていったほうが効率的という過去の経験による判断。
利用ツール：
Claude Code
制作物：
サイト実装、UX開発
ステップ4：デザイン開発
大枠のコンテンツが完成したら、次はデザインシステムを作成する。 この際に、参照サイトのURLなどを渡して、イメージを理解してもらうと非常にスムーズ。
デザインシステム構築の流れ
1. 参照サイトの共有
「○○○のようなフラットでミニマルなデザインにしたい」
[参照URLを共有]
2. デザインの理解確認
表層的な理解を避けるため、Claude Codeに理解内容を説明してもらう
「参照サイトのデザインの特徴を分析して、
どのような要素を取り入れるべきか教えてください」
大きなハマりどころ：Tailwind v4問題
Tailwind V4に対する理解が、おそらくデータカットオフのタイミングから、 あまりできていないためエラーが頻発、もしくは意図通りのデザインにならない。
解決方法：
- 1. Web検索させて最新ナレッジを理解させる
- 2. それでもダメな場合は、Tailwind v3にダウングレード
- npm uninstall tailwindcss
npm install tailwindcss@3.4.17
MCPを利用する際の注意
MCPを利用する際にサーバーの設定方法も一部変更があるので、最新情報を理解してもらったほうが安全。 特にファイルシステムへのアクセス権限設定は重要。
最終的なテキスト調整
デザインが固まったら、最後は自分の手でテキストを仕上げる。 Claude Codeが生成したコードは優秀だけど、微妙なニュアンスや「らしさ」は人間にしか出せない。
直接編集のポイント
- • VSCodeでファイルを開いて、該当箇所を直接修正
- • 「ですます調」「だである調」の統一
- • 微妙な言い回しの調整（「〜だが」→「〜だけど」など）
- • ブランドトーンに合わせた表現の最適化
AIは素晴らしいパートナーだけど、最終的な「味付け」は自分でやる。 これが、本当の意味での「協働」だと思う。
所要時間
ステップ3とステップ4で約10時間
でこのサイトは構築されています。
利用ツール：
Claude Code
制作物：
デザインシステム開発と実装
ステップ5：デプロイ／サイトのクローズド検証
本サイトはVercelでデプロイしている。git、github、Vercelの説明は細かくしないけど、 サーバーレスで簡単にサイト公開できるのでおすすめ。
Vercelデプロイの手順
# 1. GitHubにリポジトリを作成
git init
git add .
git commit -m "Initial commit"
git remote add origin [your-repo-url]
git push -u origin main
2. Vercelでプロジェクトを作成
- • vercel.comにログイン
- • "Import Project"をクリック
- • GitHubリポジトリを選択
- • そのままDeployをクリック（設定は自動検出）
デプロイエラーへの対処
ローカルで開発しているよりもVercelのほうが型エラーなど厳密なので、 ある程度デプロイエラーが発生する前提で実施する。
エラー対処の流れ：
- 1. Vercelのビルドログを確認
- 2. エラーメッセージをそのままClaude Codeにコピペ
- 3. 修正をコミット＆プッシュ
- 4. 自動的に再デプロイが実行される
- 5. 一定回数（通常2-3回）繰り返すとエラーが解消
フィードバックループ
本番化して実際に利用してフィードバックを得る流れ：
- 1. Vercelの自動生成URLでアクセス
- 2. スマホ、タブレット、PCで確認
- 3. 問題点をメモ
- 4. Claude Codeで修正
- 5. git commit & push で自動デプロイ
利用ツール：
Vercel、Claude Code
ステップ6：最終調整と公開設定
外部にサイトを公開するための最終準備をしていく。 Hubspotのフォームを組み込んだり、独自ドメインの設定、OGP設定、SEO対策など、 Claude Codeと相談しながら優先度高い内容のみ実装。
HubSpotフォーム統合
1. HubSpotでフォームを作成
2. 埋め込みコードを取得
3. Contactページに組み込み
4. カスタムCSSでデザイン統一
独自ドメイン設定
1. VercelのDomainsセクションへ
2. サブドメインを追加
3. DNS設定（CNAMEレコード）
4. SSL証明書の自動発行を待つ
OGP画像の作成
Claude Codeは画像生成機能はないが...
• OGP用の画像をHTMLで作成してもらう
• ブラウザでキャプチャ
• ogp-image.pngとして実装
SEO基本設定
• 各ページのメタデータ設定
• sitemap.tsの実装
• robots.txtの作成
• 構造化データの追加
エラー対応
• 404ページの作成（not-found.tsx）
• エラーバウンダリー（error.tsx）
• ユーザーフレンドリーなエラー画面
• 開発環境でのエラー詳細表示
アクセス解析設定
• Vercel Analyticsの導入
• @vercel/analyticsパッケージ追加
• layout.tsxに組み込み
• リアルタイムでのアクセス状況確認
公開前の最終チェックリスト
- □ すべてのリンクが正しく動作するか
- □ フォームが正常に送信されるか
- □ モバイル表示が崩れていないか
- □ ページ読み込み速度は適切か
- □ エラーページ（404）は用意されているか
- □ アナリティクスは設定されているか
利用ツール：
Vercel、Claude Code、Hubspot
終わりに
つくりながら考える、がサイト制作においてもできるようになったのは画期的。
プレゼン資料をつくる感覚でマクロ、ミクロの両視点でディレクションするだけで、 一定レベルのサイトは完成する。
これから始める人へのアドバイス
1. 完璧を求めない
最初から完璧なサイトを作ろうとせず、まずは動くものを作る。 デザインは後から整えられる。
2. エラーを恐れない
エラーメッセージは友達。Claude Codeに貼り付ければ解決してくれる。
3. 定期的にコミット
壊れても戻せるように、こまめにgit commitする習慣を。
あなたも生成AIを活用したWeb開発に挑戦してみませんか？