こんにちは、田中啓之（ひろくん）です。僕は「3方よしAI共創コンサルタント兼おうちCEO」。この度はAI氣道さんの配信にゲストで来てくださった高崎翔太さんとのライブをもとに、僕の視点でわかりやすく、かつ実践的に噛み砕いてまとめました。目的はシンプル：プログラミングが苦手な人でも「打ち込むだけでAIが動く」体験を安全に始められるようにすることです。
まずは本文に入る前に、配信で触れた重要なタイムスタンプを整理しておきます。動画にアクセスしやすくするため、時間と章立ての目安を並べます（リンクはここにないですが、動画プレイヤーで該当時間にジャンプしてください）。
目次
- 🎯 僕がこのライブで伝えたかったこと
- 🖥️ ターミナル（CLI）へのアレルギーを治すプロセス
- 🧩 実演の全体像：ホームページの内容をMD化する流れ
- ⚠️ ライブで起きたトラブルとその改善策
- 📂 実務で使える：Gemini CLIとVS Codeの組み合わせ
- 🌐 公開の仕組み：GitHub、Vercel、ドメインの流れ
- 💡 僕の現場での活用アドバイス（中小企業・個人事業主向け）
- 🔁 ライブの失敗から学ぶ「リベンジの設計」
- 📣 if塾からのお知らせ（高崎さんの取り組み）
- 🔍 FAQ（よくある質問）❓
- 🧭 最後に：僕の想いと次の一歩
🎯 僕がこのライブで伝えたかったこと
僕の一人称で言うと、「プログラミングできない人でもAIと共創する道筋を作る」ってのが今回のテーマでした。僕自身、技術系は得意ではなかったし、最初は“黒い画面”にめちゃくちゃ抵抗がありました。だけど、AIが助けてくれる今はそのハードルがグッと下がってきているんですよね。
高崎さんと話しているうちに、僕が感じたポイントは3つ。
- CLI（ターミナル）に対する心理的抵抗は、慣れと正しい導線でかなり軽くなる。
- AI（今回はGemini）をターミナルから動かすと、作業の自動化とドキュメント生成が驚くほどスムーズ。
- 作ったものを公開する流れ（GitHub → Vercel → 独自ドメイン）は思ったより親切になっている。
今回は「打ち込むだけでAIが動く」を実演しようとして、実際に高崎さんが自分のホームページのソースをブラウザからコピーしてGemini CLIに渡し、Markdown（MD）として整形させるところまでやりました。実演は完璧にはいかなかった部分もありましたが、そこも含めて学びが多かったので詳しく書きますね。
🖥️ ターミナル（CLI）へのアレルギーを治すプロセス
正直に言うと、黒い画面とかコマンド行ってだけのインターフェース、「なんだこれ？」ってなりましたよね。高崎さんも言っていたように、エンジニアはダークモードを好む生き物だと。僕も白だと目がチカチカする派です。でもそれは経験則の話で、本質は「ターミナルは命令を打つだけのツール」ってことです。
ターミナルへの抵抗を減らすステップを僕なりにまとめると：
- 小さく始める：最初から大掛かりなことをやらない。簡単なコマンド一つから。
- スクショを活用する：わからない画面が出たらスクショしてAIに質問する。これだけで調べる時間が激減する。
- 寄り添える指導者を持つ：基礎を習得するまでは、寄り添い型の指導が重要（高崎さんの言う「絆創者」ね）。
- GUIと併用する：VS Codeなどのテキストエディタがターミナル操作を楽にしてくれる。
高崎翔太: 「治療するとかで卵アレルギーに少しずつ卵食べさせるように、ターミナルも少しずつ慣れれば大丈夫」（意訳）
僕も昔はターミナルで手が止まっていましたが、ChatGPTやGeminiなどの強力なAIアシスタントがある今、「わからない」をそのままにしないで済むようになりました。スクショを撮って相談する、という行為自体がスキルになってきてます。
🧩 実演の全体像：ホームページの内容をMD化する流れ
実演のゴールは、既存のWebページ（高崎さんのif塾のページ）の内容をソースからコピーして、Gemini CLIを使ってMarkdown（MD）形式の「使用書（仕様書）」にまとめることでした。手順はシンプルに見えますが、実際には細かな落とし穴がいくつかあります。
手順概要（高レベル）
- ブラウザで対象ページを開き、右クリック → 「ページのソースを表示」
- 表示されたHTML/CSS/JSのコードを全コピー（Command + A / Ctrl + A）
- Gemini CLIを起動し、コピーしたコードを指示文とともにペースト
- AIに「このホームページの内容をMDで省略せずに使用書としてまとめてください」と指示
- 生成されたMDファイルをローカルの指定フォルダ（例：Desktop/test-homepage）に保存
- VS Codeなどで確認し、必要なら修正・追記
ただ、実際のライブでは「ペーストができない」「長すぎてバグる」「どのフォルダに保存されたかわからない」などのトラブルがありました。これがライブの面白さでもあり、学びでもあります。
⚠️ ライブで起きたトラブルとその改善策
ここは非常に実践的。録画をご覧の方もここが参考になるはずです。ライブ中に起きた問題と、それに対する僕の改善案（実務で使える）を列挙します。
問題1：CLI上で長文のペーストが効かない
原因：
- ターミナル（特にブラウザベースのCLI）は大量テキストのペーストでバッファが追いつかないことがある。
- ペーストイベントが特殊キー（Shift+Enter, Option+Enterなど）に依存している。
対策：
- まずはVS Codeのようなローカルエディタを使い、そこからファイルを保存してCLIで読み込ませる。
- 分割してペーストする（HTMLをセクションごとに切る）。
- CLIの設定で行末の入力方式（Option+Enterなど）を確認する。MacならOption+Enter、WindowsはCtrl+Enter等。
問題2：どこにファイルが保存されたか分からない
原因：
- CLIコマンドに保存先を指定していなかった。
- 権限やパスの問題で別のデフォルトフォルダに保存されることがある。
対策：
- コマンド実行時に絶対パスを指定する（例：/Users/username/Desktop/test-homepage/）。
- VS Codeで該当フォルダを開いた状態でCLIを起動する（ワークスペースを合わせる）。
- 必ず生成後にCLIに「保存先を教えて」と質問して確認する習慣をつける。
問題3：長いソースを一気に処理すると表示が乱れる（バグ）
原因：
- ブラウザベースのエディタやCLIが大量のHTML/CSS/JSを扱いきれない。
- ネットワークやAPIレスポンスの遅延。
対策：
- HTMLをまずは小分けで渡す。重要なテキスト部分だけ抽出して渡すことから始める。
- 事前に「この部分だけ抽出してMD化して」と明確にプロンプトを作る。
- VS Codeのようなローカルツールで一旦整形してからAIに渡す。
これらはどれも、作業フローを「分割して検証」する習慣でかなり防げます。僕は特に「まずは小さく動かす」を強くおすすめしますよ。
📂 実務で使える：Gemini CLIとVS Codeの組み合わせ
ここからは実務寄りの推奨フローを書きます。ライブではターミナルだけのデモを試みましたが、安定運用にはVS Codeを導入するのが良いです。理由は以下の通り。
- テキスト編集が楽（ペーストや検索・置換がGUIで可能）
- 拡張機能でGitやTerminalが統合される
- ファイルの保存先が明確になりやすい
僕のおすすめワークフロー：
- ブラウザでページソースをコピー → VS Codeにペーストして一旦保存（index.html）
- VS CodeからGemini CLIを呼び出し、”このindex.htmlを省略せずにMarkdownの使用書にしてください” と依頼
- 生成されたMDファイルをVS Codeで確認・整形
- ローカルで問題なければGitHubへコミット → Vercelでデプロイ
この流れの良い点は、途中でAIが出した内容を人間が編集できるため、品質が上がること。AIを完全に信頼しすぎず、人が最終確認する文化を作ることが重要です。
🌐 公開の仕組み：GitHub、Vercel、ドメインの流れ
高崎さんが説明してくれた点で、僕が特に重要だと感じたのが「公開までの心理的な壁が下がっている」こと。かつてはサーバーを借りてApacheやnginxを設定して…と一手間も二手間も必要でしたが、今は違います。
典型的な公開フロー：
- ローカルで作った静的サイト（HTML/CSS/JS）をGitHubにpush
- Vercel（またはNetlify）でGitHubリポジトリを連携
- Vercel側で自動デプロイが走る → 公開URLを受け取る
- 必要ならドメインを取得（お名前.com等）してVercelに紐付け
ポイント：
- サーバーを借りる必要がなく、無料枠でスタートできる
- SSLやHTTPSの設定はVercelがほとんど自動でやってくれる
- GitHubのアカウントだけ作っておけば、公開の敷居はかなり低い
ただしセキュリティ面はゼロではないので、ログインが必要な機能やAPIキーを扱う場合は別途対策が必要です。静的サイトであればリスクは低めですが、GitHubのアカウント乗っ取りなどには注意を払ってください。
💡 僕の現場での活用アドバイス（中小企業・個人事業主向け）
僕は会社経営者であり、家庭を守る主夫でもあります。実際にAIを使っている視点から、あなたが明日から実践できることを具体的に列挙します。
即効でやるべき3つ
- GitHubアカウントを作る（メールアドレスがあればOK）
- VS Codeをインストールして、エディタに慣れる
- 自分の会社やサービスのトップページのソースを取得して、AIに要約・MD化してもらう
やり方のコツ：
- 最初から全自動でやろうとせず、まずは「要約」や「箇条書き化」から始める
- AIが作ったMDをそのまま使わず、人の目で必ずチェックする（誤訳や抜けがあるため）
- 文化として「AIがやったことは人が最後に確認する」をルール化する
僕の経験では、AIに任せられる作業は膨大です。企画書の草案、顧客へのメール文面、トップページのキャッチコピー案、FAQの初稿。人間はそれを磨けばOK。これは時間を生み出す強力な武器になりますよ。
🔁 ライブの失敗から学ぶ「リベンジの設計」
今回のライブでは最後に「来週リベンジ」という流れで終わりました。僕はこれをすごくポジティブに捉えています。なぜなら失敗はネタになるし、学びが生まれるからです。
リベンジプラン（僕からの提案）：
- 事前準備：VS Codeを全員にインストールしておく（ホスト側が手順を配布）
- テストデータ：長過ぎるHTMLは避け、数KB程度のテストページを用意する
- 保存先の明確化：デスクトップ/test-homepage のように事前にフォルダを作る
- チェックリストを用意：ペーストできない→分割、保存先不明→絶対パス指定など
- 役割分担：1人が画面共有、もう1人が手元操作、もう1人がチャットで質問対応
こういう小さな運営改善で、次回はもっとスムーズにかつ学び多い会になるはずです。ライブは「生の学び」を提供する場。トラブルも教材の一部ですから、視聴者にとっての価値は大きいです。
📣 if塾からのお知らせ（高崎さんの取り組み）
高崎さんからの告知もありました。if塾ではAI導入やバイブコーディング、さらに8月にはMinecraft合宿のオンライン開催があるそうです。お子さんの夏休みの過ごし方にもピッタリだし、AIやプログラミング、クリエイティブ力を育てる良い機会ですね。
僕からの補足：こういった合宿や短期集中は「つまずきを一気に解消する」のに最高の場。日常ではできない集中学習と、同じ目的の仲間がいることでモチベーションが保てます。家庭で育児や仕事に追われている人ほど、短期集中は効率的です。
🔍 FAQ（よくある質問）❓
Q1: ターミナルって本当に必要ですか？
A1: 必須ではないですが、便利です。VS Codeのようなエディタと合わせることで、ターミナル操作をGUIへ柔らかく繋げられます。初期はGUI中心でOK。慣れてきたら徐々にCLIを覚えていきましょう。
Q2: GeminiやChatGPTにホームページの全コードを渡してもセキュリティは大丈夫？
A2: 公開されているページのソースは通常問題ありませんが、APIキーや個人情報が含まれている場合はNGです。基本的には公開情報のみを渡す、もしくはその部分をマスクしてから渡すのが安全です。
Q3: 自分でドメインを取るべきですか？
A3: ブランド性や信頼性を高めたいなら取るべきです。費用も年数千円から。まずはVercelの無料サブドメインで運用し、必要に応じてドメインを取るのが王道です。
Q4: AIが生成したMDの品質が低かったらどうする？
A4: 人が編集する前提で使ってください。AIは「生産性を引き上げる草案作成ツール」です。必ず目視で確認し、表現や誤認の修正を行いましょう。
Q5: GitHubアレルギーがあるんだけど、回避策は？
A5: GitHubを直接触らず、VercelのGUIからアップロードできるサービスもあります（ただし推奨はGitベースのワークフロー）。最初はGitHubでアカウントを作るだけにして、徐々に慣れるのが良いです。
🧭 最後に：僕の想いと次の一歩
僕は「分身AIで社長無人化計画‼︎ 50kgダイエットした主夫社長のひろくん」です。今回のライブを見て改めて感じたのは、AI時代は「人の得意を伸ばす」ための道具だということ。技術ができる人だけが得をする世界じゃなくて、苦手を持つ人がAIを使って補うことで、より多くの人にチャンスが広がるはずです。
僕の行動指針を一つ共有すると、「成功 ＝ 考え方 × 熱意 × AI共創能力」です。これ、理屈はシンプルだけど、実行に移すときに差が出ます。だから僕は今日もAIを使って、家族の時間を守りながら会社を走らせる仕組み作りを続けています。
次回リベンジでは、VS Code上でGemini CLIを安定的に動かし、生成したMDを確実に所定のフォルダに保存するところまで見せたいと思います。視聴者の皆さん、ぜひ一緒にやりましょう。分からないところがあれば僕にコメントください。寄り添って一緒に越えていきますよ。
最後にもう一度、高崎翔太さん、そしてAI氣道チャンネルの皆さん、ありがとうございました。僕はこれからも「あなたが頑張らなくても回る仕組み」を分身AIと作っていきます。一緒にやりましょうね！
では今日はこのへんで。ひろくんでした。
補足：すぐに使えるチェックリスト
この記事の内容をすぐに試したい方向けの、シンプルなチェックリストを置いておきます。順番に進めれば、今回のライブでの流れを再現できます。
- GitHubアカウントを作成する（メールアドレスがあればOK）
- VS Codeをインストールして、基本操作（ファイル作成・保存・ターミナル起動）に慣れる
- テスト用フォルダを作る（例：デスクトップ/test-homepage）
- ブラウザで対象ページのソースをコピーして、まずはVS Codeに貼り付けて保存する
- 小分けにしてAIに渡す（重要なテキスト部分だけ抽出して試す）
- 生成されたMDは必ず人の目で確認し、必要があれば修正する
- 問題なければGitHubにコミット→Vercelなどでデプロイして公開を確認する
注意：APIキーや個人情報などは必ずマスクしてからAIに渡してください。公開ソース以外の情報を無造作に入力しないことが安全対策の基本です。
もしよければ、実際に詰まった箇所ややってみた結果をコメントで教えてください。次回リベンジ配信に向けて、みなさんの疑問を拾ってフォローします。
GPTs研究会はこちら！ |
|
無料！AI最新情報コミュニティ |
| 今すぐGPTs研究会をチェック！ |
