最新AI情報満載！毎日無料朝LIVE実施中！GPTs研究会はこちら
朝LIVEブログをメルマガで毎日お届け！AI氣道.jp無料メルマガ
おはようございます、ひろくん（田中啓之）です。今日は年始の超参加型LIVEで実施した「AI診断サイトをゼロから作る」セッションの振り返りと、現場で出たノウハウを余すところなくまとめました。
朝7時からのライブで、みんなと一緒に「アイデア出し → 設計 → 実装（コーディング） → 公開 → フィードバック」までを一気通貫でやりました。このプロセス、例えるなら「みんなでワイワイ具材を持ち寄って、その場で最高に美味しいお鍋を作る」ようなライブ感で、めちゃくちゃ学びが深かったんですよね。
この記事は単なる実況録ではありません。実際に同じことをやってみたい人が一歩ずつ進められるように、設計上の判断、使ったツール（Bolt.newなど）、セキュリティとデータ設計の注意点、そして公開後の運用（フィードバックループ）まで、ぼくの現場感で具体的に解説しています。
行動原理はいつも通り「愛と感謝の共創」。失敗は美味しいネタになります。楽しみながら一緒に作りましょう！
AI診断フェス特設サイトはこちら：https://ai-shindan.bolt.host/
目次
- プロジェクトの狙いとコンセプト 🚀
- ライブ中に見せたUIとフローのスクショ集 📸
- 実際に使った技術スタックとツール 🛠️
- 設計で明確にした3つの判断基準 🔍
- データベースとセキュリティの実務ポイント ⚠️
- プロンプト設計の実践ポイント ✍️
- 公開からフィードバックループまでの運用計画 🔁
- SNSシェア設計のコツ ✨
- よくあるつまずきポイントと対処法 🛠️
- 実践ワークショップ：ゼロから作るステップバイステップ ✅
- スクショごとの詳細解説と動画リンク 🎯
- ひろくんの忖度ゼロチェックリスト ✅
- まとめ：まずはやってみることが最大の学びだよ 🎉
- よくある質問（FAQ）❓
- 最後にひろくんから一言 🧡
プロジェクトの狙いとコンセプト 🚀
今回のライブの目的は「みんなでワイワイ失敗も楽しみながらAI診断サイトを作る」ことでした。要点は非常にシンプルです。
- 誰でも試せるプロトタイプを短時間で作る（MVP開発）
- 入力（簡易診断フォーム）→ AIで解析 → 結果をSNSで共有できる仕組みを作る
- 運用しながら改善する「フィードバックループ」を回す
設計フェーズで重視したのは「始めやすさ」と「拡張しやすさ」です。最初から豪華なフルコース（高機能なアプリ）を作るのではなく、まずはおにぎり（ユーザーに価値を渡せる最小構成＝MVP）を作って提供し、食べてくれた人の反応を見てから具材（機能）を足していく流れにしました。
ライブ中に見せたUIとフローのスクショ集 📸
このあたりで自己紹介とプロジェクト概要を説明しました。まずは「誰が、何を作るのか」を明確にするのがプロジェクトの第一歩です。
「Waku Waku and AI Surround Fest」から始まった経緯を話した場面。このプロジェクトの種がどこから来たのかを共有し、チーム（視聴者）全員の方向性を揃える大切な時間です。
ここでドメイン（例：ai-diagnosis.bolt.host）とキャンペーンサイト構成を説明。最初は無料のサブドメインでも十分です。コストをかけずに「仮設店舗」を建てて、お客さんが来るか検証するのがコツです。
診断フローの設計図（ワイヤーフレーム）。右側にテスト（診断フォーム）、左側に結果表示というシンプル構成。質問は多すぎると面倒がられるので、一番刺さる診断軸を1〜3個に絞りましょう。
画面に画像をどうフィットさせるかの説明中。料理でいう「盛り付け」です。見た目の安心感は信頼性に直結します。判定結果のビジュアルをどう見せるか、ここで決めておくと後が楽になります。
診断結果を画面で表示する流れをデモ。結果は「テキスト＋チャート＋SNS共有ボタン」のセットが王道です。ユーザーが「誰かに言いたい！」と思った瞬間にボタンがある、その演出を最初に考えておくと拡散力が変わります。
このアプリは「誰でも作れる世界」を目指していると話したパート。実際に使うツールを限定して、初心者でもレシピ通りやれば作れるようにするのがポイントです。
公開（Publish）ボタン周りの説明。ここでセキュリティチェックやエラー検出のフローを組み込みます。料理をお客さんに出す前の「毒見」や「最終チェック」ですね。
デプロイ（Web上への公開）の状況を説明した画面。デプロイは自動化しておくと運用負荷が劇的に下がります。これを「CI/CD」と呼びますが、要は「ボタン一つでお店を開けられる仕組み」を作っておくということです。
ここでSNS連携のURLが画面に出ました。結果をSNSで共有させるためのURLは、パラメータ（診断結果ID）を持たせて短縮します。これによって、どの診断結果が一番シェアされたかが分析できるようになります。
「データをどこに貯めるか」の議論シーン。結果データをサーバー側で保持すると後で分析しやすいですが、個人情報が絡む場合は「鍵付きの金庫（暗号化）」や「処分のルール（保存期間）」をしっかり決めましょう。
QRコード配布についての案内。イベント会場でスマホをかざしてもらうにはQRが最強です。ここからアクセスした人がどれくらいいたか測れるように、計測タグ（UTMパラメータ）を仕込むのも忘れずに。
ランディングページ完成の報告シーン。LPは短く、診断スタートまでのクリック数を減らすのが鉄則です。アクションボタン（CTA）は一つに絞ると迷いがなくなります。
アーカイブとブログ連携の説明。動画やブログで「後から来た人」も楽しめるように、検索流入（SEO）を意識した導線作りが長期的な資産になります。
実際に使った技術スタックとツール 🛠️
ライブで実際に使用したツールと、3方よし的視点での推奨ポイントを整理します。初心者の方でも「これを使えば間違いない」というセットです。
- 開発環境: Bolt.new
ブラウザだけで開発から公開まで完結するAIツール。「こんな診断サイト作りたい」とチャットで伝えるとコードを書いてくれます。 - フロントエンド: HTML/CSS + JavaScript (React)
Bolt.newが自動生成してくれます。今回はキャンペーンサイト向けにリッチな動きよりシンプルさを優先しました。 - バックエンド / データベース: Supabase
ライブ内では「Jenspako（類似ツール）」の話題も出ましたが、実運用ではBolt.newと相性抜群のSupabaseが鉄板です。診断結果やユーザーデータを安全に保存する「クラウド上の金庫」です。 - AI連携: GPT-4o (OpenAI API)
診断ロジックの頭脳部分。プロンプト（指示書）を工夫することで、診断結果のキャラクター性を調整します。 - デプロイ / CI: GitHub + Netlify / Vercel
コードを保存するGitHubと、それをWebに公開するNetlifyなどを連携させると、修正して保存するだけで自動的に本番サイトが更新されます。
設計で明確にした3つの判断基準 🔍
迷ったときに立ち返る基準（判断軸）を持っておくと、開発はスムーズに進みます。
- 早く検証できること
仮説検証の速度を最優先。「30分で試作して味見する」マインドです。 - ユーザーが結果を共有したくなること
ただの結果通知ではなく、感情を動かすUIや文章設計（コピーライティング）が必須です。 - セキュリティとデータ設計の最低限の担保
個人情報を扱う場合は特に注意。暗号化やログ管理など、見えない部分の安全性を確保します。
データベースとセキュリティの実務ポイント ⚠️
ライブでも強調しましたが、診断サイトは「データ」の扱いが信頼の要です。ここは真剣に取り組みましょう。
- テーブル設計: 「診断入力内容」「診断結果」「ユーザー情報」をテーブル（表）で分けます。履歴は匿名化して保存すると、個人情報を守りつつ分析が可能です。
- 個人情報の扱い: 名前やメールアドレスを取得する場合は、必ず暗号化し、利用規約とプライバシーポリシーへの同意を取りましょう。
- 認証とログ: 管理画面には必ず2要素認証をかけましょう。また、いつ誰がアクセスしたかのログを残すのも重要です。
- 公開前チェック: 「サニタイズ（入力データの無毒化）」や脆弱性スキャンを行い、外部からの攻撃に備えます。
プロンプト設計の実践ポイント ✍️
AI診断の「面白さ」と「精度」を決めるのはプロンプトです。ここを適当にすると、毎回言うことが違う信頼できない診断になってしまいます。
- 固定テンプレを作る: 「あなたはベテラン占い師です」「以下のルールで診断してください」「出力はJSON形式で」といった具合に、役割・ルール・形式を定型化します。
- 出力例（Few-Shot）を添付する: 「良い回答例」をAIに見せることで、トーン＆マナーを統一できます。
- 安全フィルタを組み込む: 公序良俗に反する入力や回答をブロックする指示を入れましょう。
- 速度とコストのバランス: 高性能なモデル（GPT-4など）は賢いですが、少し高く遅い場合があります。診断内容によっては軽量モデル（GPT-4o miniなど）を使うのも賢い選択です。
公開からフィードバックループまでの運用計画 🔁
作って終わりではありません。むしろ公開してからが本番、「育てる」フェーズの始まりです。
- 短期（公開後1週間）: エラーが出ていないか監視し、SNSでのシェア数やクリック率をチェック。致命的なバグがあれば即座に直します。
- 中期（1〜3か月）: 診断結果の傾向を分析。「どのタイプの結果が一番シェアされやすいか？」を見極め、文言を磨きます。
- 長期（3か月以降）: 新機能の追加や、他社とのコラボ（スポンサー連携）を検討。診断をきっかけにしたコミュニティ作りも可能です。
SNSシェア設計のコツ ✨
シェアされる診断には、必ず「自分を語りたくなる要素」があります。単なる数値だけでなく、キャッチーな肩書きやバッジを用意しましょう。
- OGP（シェア画像）の動的生成: 診断結果ごとに異なる画像を表示させると、タイムラインでの目立ち方が段違いです。
- シェア文言の工夫: 「私は〇〇タイプでした！」だけでなく、「意外な才能が判明！？」のような引きのある文言をプリセットしておきます。
- シェア後の導線: シェアしてくれた人をメルマガや関連コンテンツへ誘導する「お土産」も忘れずに。
よくあるつまずきポイントと対処法 🛠️
ライブ中に遭遇したトラブルも含め、初心者がハマりやすいポイントをまとめました。
- 画面崩れ（画像がフィットしない）: スマホとPCで見え方が違う問題。CSSで画像のアスペクト比（縦横比）を固定し、
object-fit: cover;を使うと綺麗に収まります。 - 公開時のエラー: デプロイ時にビルドエラーが出る場合、環境変数の設定漏れが多いです。APIキーなどが正しく設定されているか確認しましょう。
- DBの準備不足: 後からデータを保存したくなっても手遅れです。最初は使わなくても、拡張できるスキーマ（設計）にしておくのが吉です。
- SNSシェアのリンク切れ: URLエンコード（日本語URLの変換）処理を忘れるとリンクが開けません。ライブラリを使って正しく処理しましょう。
実践ワークショップ：ゼロから作るステップバイステップ ✅
実際に手を動かしたい人のための、簡易レシピです。
- アイデア出し: 診断テーマを決める（例：「あなたのビジネス共創タイプ診断」）。
- 設計: 「どんな質問をするか？（入力）」「どう判定するか？（ロジック）」「どう伝えるか？（出力）」を決める。
- プロトタイプ作成: Bolt.newを開き、要件を伝えてフォームとAPI連携部分を作ってもらう。
- 内部テスト: 自分で何度か診断し、AIの回答がブレないか確認。
- 公開準備: OGP画像の設定、QRコード作成、LPの微調整。
- 公開: 公開ボタンを押し、URLをSNSで告知。
- 改善: 使ってくれた人の声を聞き、プロンプトやUIを磨き上げる。
スクショごとの詳細解説と動画リンク（タイムスタンプ付き） 🎯
重要なポイントを再確認したい場合は、以下のリンクから動画の該当箇所へ飛べます。
ドメインとランディング設計（06:11）
ドメイン取得は安価なものでOK。重要なのは「ユーザーが迷わない導線」です。LPは診断ボタンまでの距離を最短にしましょう。
診断フロー（06:30）
入力→解析→結果。この3ステップをスムーズに。設問は「3問〜5問」が離脱を防ぐ黄金比です。
結果表示とシェア（09:32 / 17:20）
結果画面には「シェアしたくなるポジティブな一言」を。例えば「あなたは〇〇の天才です！」と背中を押す言葉があると拡散されます。
09:32 結果画面のUI / 17:20 SNS拡散の仕掛け
公開とセキュリティチェック（14:11 / 15:52）
公開前のチェックは自動化できます。外部ライブラリの安全性や、APIキーの隠蔽（.envファイルでの管理）は必須科目です。
14:11 セキュリティスキャン / 15:52 デプロイ作業
QRコード配布とイベント導線（22:07）
リアルイベントではQRコード一択。読み込み後のロード時間を短くする軽量化もUX（ユーザー体験）の一部です。
ひろくんの忖度ゼロチェックリスト（現場で役立つ） ✅
ぼくが現場で判断に使っているリストです。これ通りにやるだけで、トラブルの8割は防げます。
- やる（Do）: 最小限の機能で即公開、OGP（SNS画像）の整備、診断ロジックのテンプレ化、モバイル対応。
- やらない（Don’t・初期）: 複雑な会員登録フロー、最初からの決済連携、過剰な個人情報の収集。これらはユーザーを遠ざけます。
- 必須（Must）: 公開前のセキュリティチェック、DBの自動バックアップ、エラーログの監視。
まとめ：まずはやってみることが最大の学びだよ 🎉
ライブで皆と一緒に作って改めて感じたのは、「完璧を求めて立ち止まるより、不格好でも一歩踏み出す方が100倍学べる」ということ。AI診断サイトは、検証と改善のサイクルをどれだけ速く回せるかが勝負です。
ぼくの経験則では：
- 最初の1週間でのユーザー反応が、その後の改善の全てを決める。
- プロンプトは最初からテンプレ化しておくと後が楽。
- セキュリティとデータ設計は「後で」ではなく「今」やる。
これだけ押さえておけば大丈夫。失敗は成功へのデータ収集です。楽しんでやりましょう！
よくある質問（FAQ）❓
Q. AI診断サイトを作るのに必要な初期コストは？
A. ほぼ無料で始められます。
ドメイン代（年間千円程度〜）以外は、Bolt.newやSupabase、OpenAI APIの無料枠や初期クレジットを活用すれば、プロトタイプはコストをかけずに作れます。アクセスが増えてきたら有料プランへ移行すればOKです。
Q. セキュリティで最低限やるべきことは？
A. 入力データの無毒化とAPIキー管理です。
ユーザーからの入力をそのままプログラムに渡さない「サニタイズ」、そしてOpenAIなどのAPIキーをコードに直接書かない（環境変数を使う）ことが最低ラインです。
Q. AIの出力がブレたらどうする？
A. プロンプトに「出力例」を含めましょう。
AIに「こういう風に答えてね」と具体的な例（Few-Shot）を提示することで、回答のブレを大幅に減らせます。
最後にひろくんから一言 🧡
年始の貴重な時間にみんなで作る体験、本当にワクワクしましたね。ぼくは「分身AIで社長無人化計画」を掲げていますが、その本質はAIに仕事を丸投げすることではなく、「AIと共創して、人間がもっと自由で創造的になること」です。
AIはあくまで道具。主役はあなたと、あなたの周りの仲間たちです。失敗を恐れずに、まずは手を動かしてみてください。
もしこの記事を読んで「作ってみたよ！」「ここが分からない」ということがあれば、ただっち（多田啓二）やぼくにSNSでフィードバックをください。
AI診断フェス特設サイトはこちら：https://ai-shindan.bolt.host/
参考リソース（公式ドキュメント）
記事内で紹介した技術や概念の公式ガイドです。詳細はこちらで確認できます。
- Bolt.new 公式サイト（開発ツール）
- Supabase セキュリティガイド
- Netlify デプロイ手順
- OGP（Open Graph Protocol）仕様書
- OpenAI プロンプトエンジニアリングガイド
ドラクエ風に楽しく本格な無料AI診断！ドラゴンビジネス3はこちら
人生が開花する30日メルマガ：登録はこちら
あなたの富を生み出す神様タイプ診断：診断はこちら
ただっちホームページ：こちら
GPTs研究会はこちら！ |
|
無料！AI最新情報コミュニティ |
| 今すぐGPTs研究会をチェック！ |
