こんにちは、田中啓之（ひろくん）です。今回のレポートでは、AI氣道さん主催の「GPTs研究会LIVE」（9月17日配信）で私がゲストの高崎翔太さんと一緒に語った「Gemini CLIを使った診断サイトの自動作成」について、現場で話したことを丁寧に、かつ分かりやすく噛み砕いてお伝えしますよね。私は普段「3方よしAI共創コンサルタント兼おうちCEO」として分身AIで社長無人化を実践しているので、非エンジニアでも実際に動かせる実践的なポイントを中心に書いていきます。
この記事の狙いはシンプルです。プログラミングが苦手でも「AIに頼って自分の診断サイトを作れる」ことを実感してもらうこと。Gemini CLIの役割、実際のデモで起きたトラブルシューティング、メール送信（GASでの実装）への接続方法、そして次に進むための宿題とワークショップ案内まで、現場の会話を再現しつつ、実務で使える手順を落とし込みますよ。では早速いきましょう、ワクワクしながら読んでくださいね。
Table of Contents
- 📌 本日の概要（これを読めば何ができるか）
- 🧭 Gemini CLIとは？（概要と私なりの解説）
- 🛠 Gemini CLIで診断サイトを作る — 実演の流れ
- ✉️ メール送信を実装する（GAS vs Formspree）
- 🗂 質問（診断項目）の作り方とMDファイル管理
- 🔍 デモの振り返りと学び（私の気づき）
- 📚 実践ワークショップ＆次回予告（私の案内）
- 🧩 ケーススタディ：起業初心者向け「お金のマインドブロック診断」
- ⚙️ 実務での運用チェックリスト（導入後に必ずやること）
- 🧠 AIとの共同作業で気をつける“人の役割”
- ❓ FAQ — よくある質問と回答（Gemini CLI・診断サイト編）
- 📝 宿題＆次のアクション（私からのミッション）
- 📣 お知らせ（私のワークショップ＆今後の配信案内）
- 🔚 まとめ — まずは小さく作って、AIと一緒に育てる
- 📷 参考キャプチャ（配信中の重要シーン）
- 最後に一言（ひろくんより） 😊
- 追加リソース（参考）
📌 本日の概要（これを読めば何ができるか）
まずは今回のライブで扱ったことの全体像を箇条書きで示します。ここを把握しておくと、後の各章が読みやすくなりますよ。
- Gemini CLIとは何か：コマンドでAI（Gemini）を直接操作するツール
- 実演テーマ：起業初心者向けの「お金のマインドブロック診断サイト」をAIに作らせる
- デモで確認したこと：HTMLファイルの自動生成、フォーム入力検証の修正、メール送信（デモ環境→本番の差）
- 次回予告：GAS（Google Apps Script）を使ってメール送信を本番化する手順
- 宿題：診断の質問をマークダウン（.md）で整理しておくこと
🧭 Gemini CLIとは？（概要と私なりの解説）
Gemini CLI（コマンドラインインターフェース）はGoogleの大型モデル「Gemini」をローカルやサーバーのコマンドラインから操作できるツールです。ポイントは「コマンドベースでAIにやらせたいことを直接渡せる」こと。GUIでのやり取りよりも反応が早く、ファイル編集や生成、API呼び出しなどの自動化がしやすいってところが特徴なんだよね。
エンジニア界隈では、CLIは必須科目になりつつあるんです。高崎さんも言ってたように「これが使えなかったら失業するレベル」くらいトレンドの中心にある技術なんですよね。非エンジニアの方には敷居が高く感じるかもしれないけど、実はチャットでAIに指示を出すような感覚でCLIを使えることが増えています。今回のライブでも、CLIからファイルを直接編集させて動作確認する流れを見せてもらいました。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=26s ）
なぜCLIが「速い」のか
理由は単純です。GUIで何度もクリックして修正する代わりに、テキストで「やってください」を渡すだけでAIが直接ファイルを編集するから。高崎さんデモでは、CLIからの指示によってindex.htmlの内容が即座に修正される様子が確認できました。手作業で数分かかるところを秒で済ませるのは、やっぱり心地いいです。
🛠 Gemini CLIで診断サイトを作る — 実演の流れ
ここからはライブで実際にやった手順を、私の視点で整理していきます。非エンジニアのあなたでも「やってみよう」と思える具体的手順を強調しますよ。
事前準備（最低限必要なもの）
- Gemini CLIのインストール（GeminiのアカウントとAPIキーの準備）
- テキストエディタ（VSCodeやメモ帳でOK）
- ブラウザ（生成したindex.htmlを表示するため）
- Googleアカウント（GASでメール送信を行うなら）
ここまで揃えば、とりあえず「AIにサイト作らせる」体験が可能ですよ。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=7m4s ）
デモ：AIに「診断サイトを作って」と指示する
ライブで高崎さんがやった基本的な流れは下記のとおりです。コマンドやプロンプトは意外と自然言語でOK。
- Gemini CLIを起動する。
- 「起業初心者向けのマインドブロック診断サイトを作ってください。フォーム、質問、結果ページ、最終的にメールで結果を送信できるようにしてください」と指示。
- AIがプロジェクトフォルダを作成し、index.htmlや必要なファイルを生成。
- 生成されたindex.htmlをブラウザで開いて動作確認。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=12m49s ）
ここで大事なのは「最低限動くものを先に作る」こと。高崎さんのアドバイス通り、最初から完璧を目指すと時間ばかりかかって進まないので、最小要件（フォームが送信できる、結果を計算して表示する、メールアドレスを回収する）を先に作るのが吉です。
よくあるつまずきとライブでのトラブル（実例）
ライブ中に起きたトラブルはとても良い学びになりました。実際に私も何度も同じ壁にぶつかっているので、ここはしっかり共有します。
- フォームのメールアドレス検証が厳しすぎて「正しいメールアドレスを入力してください」と出てしまい先に進めない。
- デモ環境では「送信された」と表示されるが、実際のメールは届かない（デモ→本番の差）。
- AIが生成した質問内容が初期案から変わってしまい、元の質問に戻してほしいときの操作。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=16m48s ）
このケースでは、Gemini CLIが自動でファイルを書き換えてくれるメリットが、同時に「AIが判断したベストプラクティス」に引っ張られるデメリットになることがあります。要するに「AIが勝手に修正した結果が意図と違う」シチュエーションです。
解決策の概略（私が推奨する流れ）
- まずはAIの生成物を信用しつつ、重要な部分（バリデーションルール、送信先メール）は自分の要件で上書きする。
- デモで「送信された」と出るだけではテスト完了にしない。実際に自分の受信箱やGASのログで確認する。
- AIが改変したくない箇所は、マークダウン（.md）ファイルやREADMEで仕様を明確にしておき、AIに「この仕様は変更しないでください」と伝える。
今回のライブでは、Gemini CLIがファイルを直接編集したのを確認し「元に戻してください」とリクエストする場面がありました。こういうときに人間側が介入して「この部分だけはこうして」と具体的に伝えられると、AIとの共同作業がスムーズになります。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=20m11s ）
✉️ メール送信を実装する（GAS vs Formspree）
診断サイトで重要なのは「メアドを回収してリード化する」こと。ページで結果を表示するだけでは十分ではなく、メールで結果を送ったりフォローを入れたりする仕組みが必須です。ライブではFormspreeのような外部サービスをAIが提案しましたが、高崎さんと私の視点ではGAS（Google Apps Script）を使って本番メール送信を安定化する方針が良いと判断しました。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=22m2s ）
Formspreeの長所と短所
- 長所：設定が簡単、サーバー不要、短時間で試験運用可能
- 短所：制限付きの無料プランやブランド表示、細かな制御がやりづらい場合がある
GAS（Google Apps Script）を使う理由
- Googleアカウントがあれば無料で使える。本番での安定性も高い。
- メール本文を自由にカスタマイズできる（テンプレ化、ログ保存など）。
- スプレッドシートと連携してメアド管理が簡単になる。
私のオススメは、最終的にGASを使って「フォーム送信→スプレッドシートに保存→Gmailで結果送信」という流れを構築すること。これで診断サイトのリード獲得ルートが完成します。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=25m45s ）
🗂 質問（診断項目）の作り方とMDファイル管理
診断サイトの「肝」は質問設計です。ライブで高崎さんが提案していたように、質問と回答のセットをマークダウン（.md）で整理しておくと、AIに読み込ませるだけでサイトへ反映できるので運用が楽になりますよね。
マークダウンで管理するメリット
- バージョン管理がしやすい（Gitやクラウドストレージに保存）。
- AIに「このmdファイルを読み込んで質問を生成して」と指示できる。
- 非エンジニアでも編集しやすい。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=28m51s ）
具体的な作り方は次のとおり。
- まずは質問をテキストで列挙する（箇条書きでOK）。
- 各質問に対して選択肢とスコアリングのルールを決める（例：A=0、B=1、C=2）。
- 結果の判定基準を決める（合計点で「初心者」「中級」「上級」など）。
- これをマークダウン形式で保存（例：questions.md）。
- Geminiに「このMDファイルを読み込んでフォームを作って」と指示する。
このやり方の良いところは、AIが質問文をリライトしても、元データが明確に残る点。あとから質問を変えたいときも、mdファイルを更新して再度読み込ませればOKです。
🔍 デモの振り返りと学び（私の気づき）
ライブを見ていて私が特に良いと思ったポイント、反省点、そして実務で活かすための気づきをまとめます。これ、実は経営にも通じるんだよね。
良かった点
- AIがすぐに動作するモノを出力してくれて、実際に画面で確認できるスピード感は最高でした。
- CLI経由で直接ファイルを編集するので、細かい修正が素早くできる。
- マークダウン管理、GASの導入など「実運用を見据えた設計」が議論されていた。
改善が必要な点（注意点）
- AI任せにしすぎると、仕様が変わるリスクがあるので「ここは固定」の部分は明記しておく必要がある。
- デモと本番の差（メールが届くかどうか）を必ず確認すること。見た目でOKでも実動作してないことがある。
- CLI画面の可視性（文字が小さいなど）を改善するためにスクリーン設定を見直す。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=21m11s ）
私はこれを「プロダクト開発のリーンアプローチ」に例えています。まずはMVP（最小実行可能な製品）をAIでさっと作って、実際のユーザー（自分）で試し、問題点を直していけば良い。AIはこの反復サイクルを劇的に速くしてくれるんだよね。
📚 実践ワークショップ＆次回予告（私の案内）
私が主催するワークショップや、今後の配信予定の案内です。今回のテーマは非エンジニア向けなので、次回はGASを取り上げて「メール送信を実装する」回にします。ライブでも話しましたが、宿題として「診断質問を.mdでまとめておく」ことをお願いしました。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=31m4s ）
私のワークショップは「実践的」「非エンジニア歓迎」「分身AIで仕事を回す」ことをモットーにしています。興味がある方はぜひ参加して、一緒に自分の診断サイトを作りましょう。参加者にはテンプレのmdファイルやGASスクリプトのサンプルも配布する予定です。
🧩 ケーススタディ：起業初心者向け「お金のマインドブロック診断」
実務的にどんな診断サイトを作るかのアイデアを具体的に示します。私の受講生には起業初心者が多く、値付けが苦手・お金を受け取ることに罪悪感がある・安売りしてしまうなどの悩みがあるので、それを元に診断を組み立てます。
診断の骨子（例）
- 設問数：8〜12問（短すぎず長すぎず）
- 回答形式：選択式（3段階スコア）
- 判定ロジック：合計点で「安心して価格設定できる」「もう少し自己理解が必要」「まずマインドブロックを外す支援が必要」など
- アクション：結果メールで個別アドバイス＋次回ワークショップへの案内
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=14m56s ）
設問例（実際に私がワークショップで使う想定）
- あなたは商品・サービスの価格を決めるとき、どれくらい迷いますか？（ほとんど迷わない=2 / 少し迷う=1 / すごく迷う=0）
- 顧客に対して「値引き」や「おまけ」をしがちですか？（ほとんどしない=2 / 時々する=1 / よくする=0）
- 自分の価値に自信がありますか？（ある=2 / まあまあ=1 / ない=0）
- お金を受け取ることに罪悪感を感じることがありますか？（ない=2 / たまに=1 / よくある=0）
このようにスコアリングを定義しておくと、AIに「このルールで結果ページを生成して」と指示すれば、フォームのロジックも自動生成してくれます。あとはメール送信をGASで繋げれば、リード獲得のフローが出来上がりです。
⚙️ 実務での運用チェックリスト（導入後に必ずやること）
サイトを公開したら次のチェックを必ず行ってください。私の経験上、ここを見落とす人が圧倒的に多いんだよね。
- フォーム送信が本当にメール届いているか（受信箱で確認）
- スパム判定されていないか（Gmailやメールホスティングのログ確認）
- データがスプレッドシートに正しく保存されているか
- プライバシーポリシーや同意（GDPR等）を明示しているか
- モバイル表示で崩れていないか
- AIが生成した文章に誤情報や不適切表現がないか（人の目で最低1回チェック）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=35m54s ）
🧠 AIとの共同作業で気をつける“人の役割”
AIは万能じゃない。だからこそ人間の役割が重要になります。私が常に強調しているのは「AIを使って速く回すが、人が最終責任を取る」という姿勢です。具体的に私がやっていることを挙げますね。
- 仕様の最終決定：ここだけは人が決める（価格ルール、メール文面、個人情報取り扱いなど）。
- 品質チェック：AI生成文の誤字脱字、トーン、法的リスクを人が確認。
- ログ監査：メールやフォームのログを定期的に確認して問題がないか監視。
- 改善ループ：ユーザー反応を元に質問や判定基準を改善する。
AIに任せられる部分と人がやるべき部分の境界線を明確にしておくと、速く安全にプロダクトを育てられます。失敗しても次に活かせばいいんです、失敗は宝ですよね。
❓ FAQ — よくある質問と回答（Gemini CLI・診断サイト編）
Q1: Gemini CLIはどの程度初心者でも使えますか？
A: 基本的にはコマンドラインに慣れているとスムーズですが、非エンジニアでもチャット感覚で指示出しできるので「やってみる価値」は十分あります。最初はAIに「フォルダを作ってindex.htmlを生成して」といった高レベルの指示を出し、生成物をブラウザで確認しながら直す流れがおすすめですよ。
Q2: デモで「送信しました」と出るがメールが来ない。どう対処すれば？
A: まずは迷惑メールフォルダを確認。次に、フォーム送信がサーバー経由で完了しているか、GASやFormspreeのログを確認してください。デモ表示は「画面上の成功メッセージ」であり、実際のメール送信は別プロセスですから、必ず本番で受信確認をしてくださいね。
Q3: マークダウンで質問を作るとAIはどのように扱いますか？
A: Geminiにmdファイルを読み込ませると、AIは各質問をフォーム項目として解釈してHTMLフォームやJavaScriptバリデーションを生成できます。質問文とスコアルールを明確に書いておくと、判定ロジックまで自動で作ってくれることが多いです。
Q4: セキュリティ上の注意点は？
A: フォームで受け取る個人情報は必ず暗号化やHTTPSで送信すること。GASを使う場合は権限周りの設定を慎重に行い、公開スクリプトにならないように注意してください。また、メール送信はSPFやDKIMの設定をしておくと届きやすくなります。
Q5: Gemini CLI以外におすすめのツールは？
A: Gemini CLIの良さは速度とファイル編集の直接性だけど、UIベースで手早く作るならCanvaや他のAIスライドツールも有効です。ただしWeb開発系はCLIの方が細かい制御が効くので、将来的に拡張したいならCLIを学ぶ価値は高いです。
📝 宿題＆次のアクション（私からのミッション）
実際に動かしてみたい人向けに、私が次回までにやってほしい宿題を出します。これを済ませておくと次回のGAS回が格段にスムーズになりますよ。
- 診断に使う質問をマークダウン(.md)でまとめておく（質問・選択肢・スコア・結果判定基準を記載）。
- Googleアカウントを用意し、GASを触れるようにしておく。
- 可能ならGemini CLIをインストールして起動だけ試しておく（APIキーの準備）。
私がいつも言ってることだけど、小さく速く動くことが一番の学びを生みます。まずは手を動かして、わからないことが出たら一緒に潰していきましょう。
📣 お知らせ（私のワークショップ＆今後の配信案内）
最後に私からのお知らせです。9月29日に開催される「AI×目標達成会」に私も関わっており、今回のような実践的なワークショップを月1で開催しています。特に「ChatGPTのメモリ機能」「MyGPT」「業務の自動化」を中心にした内容が好評で、ブログや業務自動化に直結するスキルが身につきます。
興味がある方はぜひ参加ください。参加者には診断サイトのテンプレファイル（md、GASサンプル、index.htmlテンプレ）を配布予定ですよ。私の合言葉は「脂肪は財宝」。失敗も宝にして、楽しみながらAI活用を学びましょう。
🔚 まとめ — まずは小さく作って、AIと一緒に育てる
今回の配信で学んだ一番大きなメッセージはこれです。Gemini CLIはツールとして強力で、非エンジニアでもAIに指示を出して「動くもの」を短時間で作れます。ただし、AIに全部任せるのではなく「人が意思決定する部分」をしっかり残しておくことが長期的な成功につながります。
私、ひろくんはこれからも「分身AIで社長無人化」をテーマに、現場で役立つノウハウを共有していきます。今回の記事を読んで「やってみたい」と思ったら、まずは質問を.mdでまとめてください。次回はGAS回で、そこでメール送信と本番化を一緒に仕上げますよ。ではまた次回、元気にやりましょう！ワクワク夢中でいきましょうね。
📷 参考キャプチャ（配信中の重要シーン）
以下は配信中に使えるキャプチャの一覧です。各キャプチャの下に動画のタイムスタンプ付きURLを記載しています（動画へ素早くアクセスするための目安）。
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=26s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=82s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=131s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=424s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=542s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=769s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=896s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1008s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1211s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1271s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1322s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1545s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1731s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=1864s ）
（動画リンク： https://www.youtube.com/channel/UCEzawhU9T9apnRMLJBd3e4Q&t=2154s ）
最後に一言（ひろくんより） 😊
AIはツール。だけどツールで世界は変わる。私が50kgのダイエットで学んだことも、事業での失敗も、全部「やってみること」で価値になりました。Gemini CLIも同じで、まずは手を動かして自分で試してみることが何よりの学びです。質問の.mdを用意して、次回のGAS編で一緒に本番化していきましょう。エンジニアじゃなくても、あなたのアイデアはAIで形になりますよ。ではまた次回、元気に会いましょう！
GPTs研究会はこちら！ |
|
無料！AI最新情報コミュニティ |
今すぐGPTs研究会をチェック！ |
