Gemini CLIとGitHub Pagesで診断サイトを公開した話
家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、ただっちが語った、Gemini CLIとGitHub Pagesで診断サイトを公開したLIVEを紹介するね。
8月27日水曜日のGPTs研究会LIVEは、高崎さん（岐阜塾・プログラミングのプロ）とたくみくん（山﨑琢己・大学生エンジニア）をゲストに迎えた回。テーマは「診断サイトをAIで自動化してGitHub Pagesで公開する」というガチの実演会で、ただっちが以前CanvaやGeminiで仮作成していた診断ツールをベースに、高崎さんがGemini CLIとGitHubの連携方法をその場でリアルタイムに教えてくれたんだよね。ぶっちゃけ視聴しながらメモが追いつかないくらい実践的な内容だったから、流れを追いながら紹介していくね。
GitHubにリポジトリを作るところから始まった
このLIVEでまず「うわ、これガチだ」ってなったのが、開始直後から「事前準備ゼロ状態のただっちのGitHubを、高崎さんがその場で操作しながら教える」っていうリアルさ。GitHubのアカウント設定からリポジトリ作成まで、視聴者と一緒に手探りで進んでいく形式で。「わからないですとかも教えてもらえると嬉しい、どこまでわかんないのかがこちらもわかんない」っていう高崎さんのスタンス、まさにそれを体現してたんだよね。台本ゼロの、完全に生の現場。ぶっちゃけ、こういうLIVEが一番おもしろい。
高崎さんがまず解説したのはリポジトリの概念。GitHubの右上のプラスから「New repository」を選ぶと、ファイルを管理するフォルダみたいなものが作れる——ここがスタート地点。料理でいうと、まず「食材を入れる冷蔵庫」を1個用意する感じかな。難しい言葉を使わず、ツールバーの場所まで指差して教えてくれるスタイル、非エンジニアの私にもめちゃくちゃわかりやすかった。
高崎さん（05:24〜）
「VisualStudioCodeのダウンロードとGitHubのアカウント設定、ここの辺りをやっていただけると、はじめやすい。こちら、事前に作ってあるGitHubなんですけど、だいぶ丁寧に下ごしらえしてあります。こちらの右上のプラスのところを押していただくと、ニューリポジトリっていうのが出ますかね。このリポジトリというのがGitHub上に作るホルダーみたいなもんです。リポジトリーネームのところにはサイトの名前が入ります。」
ただっち（4:31〜）
「ありがとうございます。はい、ゆきちゃんおめでとうございます。おめでとうございまーす。皆さんも質問いただけたら嬉しいです。今日はマニアック会議にはなるかもしれませんが。」
高崎さん
「わかんないよってことが多いかなと思うので、ここわかんないですとかも教えてもらえると嬉しいです。この手の話って、どこまでわかんないのかが、こちらもわかんない。」
「フォルダみたいなもの」っていう表現、ほんとわかりやすいよね。GitHubって聞くとちょっと身構えちゃうけど、実態はファイルの置き場所を作るだけの話。そのことが、じわっと伝わってくる説明だったんだよね。
リポジトリを作ったら次は「README」ファイルの話。エンジニアの世界では、ファイルを作るときにちょっとした説明文を一緒に置いておくのが慣例らしい。たくみくんが「よくマイクラのプラグインとかだとREADMEを読めって書いてある」ってサラッと言ってて、ゲームに引きつけて説明するあたり、さすが大学生エンジニア。こういう例え方、うまいなあって素直に感心した。
このLIVEを見てると、GitHubってエンジニアだけのツールだと思ってたけど、診断サイトの素材ファイルを管理したり、URLで公開したりする場所として「アイデアを形にする人」全員に使えるサービスなんだ、ってことがじわじわ伝わってくる。高崎さんの「ここを乗り越えると、誰でもエンジニアになって仕事をするみたいなこともできちゃいます」の一言、これがぐっと刺さったんだよね。
高崎さん（03:16〜）
「そういうマニアックな話にはなりますけど、今日は進めていけたらと思います。でもここを乗り越えると、いいエンジニアでも誰でもエンジニアになって働く。仕事をするみたいなこともできちゃいます。」
「マニアックな話」って自分で言いながらも、乗り越えた先の世界をちゃんと見せてくれるこのスタンス、いかにも高崎さんらしい。難しい話を難しいままにせず、「できる」という先を示してくれる教え方が、このLIVEを通じてずっと一貫してたんだよね。
また高崎さんは冒頭で、今回のLIVEで扱う内容の位置づけをこんなふうに話してた。「自分の設定したURLにならないと、やっぱり自分のサービスとして打ち出していけないので、そこのあたりをつなげるところの手立てというところを、割と今まで作ってたただっちの診断プールとかのつなげる部分を今日は示していきたい」という意図だ。診断ツール単体を作ることはできても、それを自分のURLで公開する工程が抜けてる人、けっこう多いんだよね。その「最後の一歩」を埋めるのが、今日のLIVEのテーマだったってわけ。
Gemini CLIのファイル操作で出た権限エラーを解決した
このLIVEの核心のひとつが「CLIツールを使ったファイル操作で権限エラーが出る」っていう場面。Gemini CLIやClaude Codeのようなツールは、ターミナルからファイルを読んだり書いたりする作業をAIにやらせることができるんだけど、権限の設定が合ってないとそこでつまずく。ただっちが事前に診断ツールをいくつか作っていて、そのコードをGemini CLIに渡して操作させようとしたら、まさにその壁にぶつかったんだよね。
高崎さんがこの状況について話してた言葉、めちゃくちゃリアルだったんだよね。「ファイルの操作みたいなのがうまくいってんの？いってないの？どっちなんだよ？ってわかんない状態になる」っていう感覚、CLIツールを触ったことがある人なら誰でも「わかる」ってなるはず。その解決策として出てきたのが「うまくいかなかったときは手動で上げる」っていう、いい意味での割り切り。ここ、すごく現実的だなあと思った。
高崎さん（09:31〜）
「する作業自体をジェミニCNIにやらせるってことができるんですが、それのときに権限とかでエラーが出たりとかしてうまくいかないなーってなるときがあって。ファイルの操作みたいなのとかをGitHubの方でもやってくれるっていうのが、GeminCLIとかクロードコードのすごいところなんですが、うまくいかなかったときは手動で上げるっていうふうに思っておくと、精神的に楽です。」
「精神的に楽です」っていうひと言、現場感あって私は好きだった。料理でいうと、全自動の調理家電に頼りきるんじゃなくて、うまく火が通らないところだけ自分の手でひと混ぜする感じ。完璧に自動化しようとして詰まるより、部分的にでも手を動かして進めてしまう方が、圧倒的に前に進むんだよね。
たくみくんが権限エラーの確認方法を実演してくれた場面もよかったなあ。ターミナルで「npm」と「node」のバージョンが入っているかを確認して、入ってなければそれがエラーの原因になるっていう話。コマンドひとつで確認できる手順を実演しながら話してくれたおかげで、「こうやって原因をひとつずつ潰していくんだ」ってことが視聴者にもちゃんと伝わってきた。
たくみくん（17:21〜）
「入ってるようになってますね。geminの？だいたいこれが入ってないってパターンが多いんですけど、あと同じくnodeでどうでます？入ってますね。なかったらこれが入ってねえよって言うんですけど、問題なく入っているので、じゃあなんだ？権限がないっていうことがあるんですね。」
npmとnodeが入ってるのに動かないなら、次は「権限がない」を疑う——この順番の確認、ノウハウとしてすごく参考になった。エラーが起きたとき、闇雲に触るんじゃなくて手順で潰していく。地味だけど、これが一番効くんだよね。
CanvaとGeminiとGPTでそれぞれ診断ツールを仮作成していたただっちは、どれをベースにするかを高崎さんと相談してた。「ジェミニCLIでやるから、ジェミニで作ったのが一番スッといきそうかな」っていう高崎さんの判断で、Geminiで作ったコードをGemini CLIに渡す流れに決まった。コードを全部コピーしてフォルダに貼り付け、VS Codeで開くっていう手順を踏みながら、ターミナルが開く状態までを実演してくれてた。ただっちがこの段階の自分の状態を、けっこう正直に話してくれてたのも印象に残ってる。
ただっち（10:57〜）
「うんとね、とりあえずいくつかで試してみようと思ってGeminとCanvaとGPTでも作ったんですけど、もうちょっとしっかりできたらJSparkに移そうかなと思ってとりあえず仮で作った状態と思っていたところで今日を迎えております。」
「仮で作った状態で今日を迎えた」っていう言い方が、なんともただっちらしくていいんだよね。完璧に整えてから見せるんじゃなくて、現状のままLIVEに持ち込んで一緒に育てていくスタイル。この姿勢こそが、視聴者が一緒に学びやすい場を作ってる気がする。
ナノバナナ（Gemini 2.5 Flash Image Preview）の画像生成を試した
LIVEの途中でたくみくんが突然「新しい画像生成AIを試してみたい」って切り出した。それが「ナノバナナ」って名前でコミュニティ内で話題になってたGemini 2.5 Flash Image Preview。たくみくんが「さっき起きたばっかりなのでまだ全然調べていないというのは正直」って言いながらその場で実演してくれたのが、このLIVEの面白いところのひとつ。台本もレビューもなし、いきなり触ってみる。料理でいうと、届いたばかりの新しい食材を、レシピも見ずにまず切ってみる感じかな。AI Studioのモデル選択からGemini 2.5 Flash Image Previewを選んで、実際に画像生成を試みるっていう流れ。
たくみくん（23:19〜）
「ニューっていうので2.5フラッシュイメージプレビューというので、新しくできているので、これを試していこうと思うんですけど、正直僕は何が得意とか何が苦手とかを全然まだ調べていないというのは正直なんですけど、文字が入るっぽいですけど、なんか文字が微妙みたいなのもちょっとちらっと見たんですけど、まだ普通に生成するのがいいんじゃないですかね。」
「調べてないけど試す」っていうアプローチ、私も好き。仕様を全部把握してから触るより、まず触ってから仕様を理解していく方が、圧倒的に学びが速いんだよね。
実際に生成してみた結果については、たくみくんが「イマージェンっぽい」「全然違いますね、やっぱり」って言いながら比較してた。画像の精度について高崎さんも、元画像の特徴をちゃんと保持してるところを評価してたなあ。視聴者のコメントでも「元画像の特徴を忠実に保ちながら指定された部分だけを自然に編集する原型リスペクト編集」っていう言葉が出てきて、ただっちがそれをLIVE中にそのまま読み上げてたのも面白かった。
たくみくん（29:07〜）
「これだったら文字入れるのはちょっとまだ難しそうな様子がありましたけど画像生成するっていう意味ではやはり対等してきてる感じですかね。おそらくAPIとかでもいずれ出ると思うので、GPキーイメージみたいな感じで使うと、おそらく広がっていく。生成時間も短いですもんね。」
APIで使えるようになったときの可能性まで、たくみくんはすでに考えてた。ここ、けっこうすごいところ。「今できること」だけじゃなく「これが広がったら何ができるか」まで視野に入れてるエンジニア視点が、ちゃんと伝わってくるんだよね。
さらに「今まで作ったキャラクターや画像でお気に入りのやつをどこかの背景に置く」っていう使い方の話も出た。ただっちが「今まではガチャ缶があったのはかなり課題でしたけど、それがなくなるってことなんですね」って言ってて、たくみくんが「またこれ組み合わせたら強そうですね」って返す流れ。一度生成したキャラクターを別の場面に配置する用途で使えるなら、コンテンツ制作に直結するツールになりそう——そんな期待感が、画面越しにもじわっと伝わってきたんだよね。
たくみくん（32:06〜）
「それを例えばどっかに背景指定してこんな背景どころで置いてくださいとかっていうのがしやすい可能性があります。またこれ組み合わせたら強そうですね。tptで生成しその後こっちであの中とか背景とかを変えていくとできやすい。後ろ指定時間がこれ10秒ぐらいできるので相当使えそうですね。」
生成→配置→背景変更の流れが10秒でできるなら、コンテンツ制作の速度は大きく変わる。たくみくんがリアルタイムで試しながらそのポテンシャルを語ってくれたおかげで、視聴者にも可能性がぐっとイメージしやすかったんじゃないかな。
GitHub Pagesで診断サイトをURLつきで公開した
このLIVEのクライマックスのひとつが「GitHub Pagesで実際にURLをつけてサイトを公開する」っていう場面。診断ツールのHTMLファイルをGitHubのリポジトリにアップロードして、GitHub Pagesの設定をオンにすると、世界中からアクセスできるURLが発行される。高崎さんがその手順をリアルタイムで実演してくれた。途中、手動でのアップロードになった場面もあったけど、それこそまさに「うまくいかなかったときは手動で上げる」っていう、さっきの姿勢そのものだったんだよね。
高崎さん（35:10〜）
「一応ネットの仕組みを簡単に解説しますとこのデータをサーバーというとこにポンと上げておけば一応ホームページとして動くようになります。まずはGitHubというエンジニアがみんなとりあえず上げる場所に上げたいということで、おだしょーコミットチェンジ図を押すそれが決定ってことです。」
「エンジニアがみんなとりあえず上げる場所」っていうシンプルな表現、GitHubの本質をついてる。難しく考えず「ファイルを置く場所」として割り切れば、それだけで入り口がぐっと下がるんだよね。
GitHub PagesはSettingsの中のPagesタブから設定する。「Deploy from a branch」を選択してブランチを指定すると、5分程度でURLが発行されるらしい。高崎さんが「なんかゴニョゴニョ処理してる間に、そのうち表示が出てくるかと」っていうゆるい言い方をしてたんだけど、これが逆に、実際に待ってる時間の感覚を正確に伝えてて面白かったんだよね。
高崎さん（41:01〜）
「なのでこのURLを共有すれば、いろんな人がスマホやらタブレットやらパソコンやらから、この診断はみんな受けられるようになります。次回はちょっとそんな感じで。本公開までしちゃっていいですか、これ。」
「本公開までしちゃっていいですか」っていう一言、LIVEならではのリアルさが出てるよなあ。事前に全部決めておくんじゃなくて、その場で相談しながら進んでいく感じ、私はこういうの好きなんだよね。
ただっちはこの段階で「サイトを直す、デザインを直す。理想は一番最後にお名前とメールアドレスとか、あとどのクエの診断の結果だったみたいのをこっちで知りたかったりする」って言ってた。公開はできたけど、まだ機能追加したい部分がある、ってわけ。そこに高崎さんが「GitHubに上げたことによって、今度からいろんな機能を追加しやすくなる」って続けた。たくみくんもその仕組みを、わかりやすい言葉で説明してくれてた。
たくみくん（42:11〜）
「さっきはローカルで、ファイルを作ってそれをGitHubに上げるとやりましたけどGitHubに上げたファイルを直接上げるんですね。要はそうするとアップロードするって作業がいらないって感じですね。」
GitHubにファイルを置いてしまえば、次からの修正はそこを直接書き換えるだけでよくなる。手順が一段シンプルになるっていうことが、たくみくんの言葉でイメージできたんだよね。料理でいうと、毎回買い出しに行かなくても、冷蔵庫に食材が常備してある状態。一度GitHubに上げてしまえば、その後の管理がぐっと楽になる——「リポジトリを育てる」って、そういう感覚なんだと思う。
Genspark AI DeveloperがGitHubと連携して喋るだけでサイトを編集できる
LIVEの後半で出てきた話題が「Genspark AI Developer」。GitHubとリポジトリを連携させることで、AIに喋るだけでサイトのコードを修正してデプロイできるっていう機能だ。高崎さんがこれを紹介したときのテンション、明らかに上がってて、それが画面越しにもちゃんと伝わってきた。「AIでコードを動かす」って理屈ではわかっても、実際にどのサービスをどう組み合わせるかが見えてなかった人には、この説明、かなり解像度を上げてくれる内容だったんじゃないかな。
高崎さん（44:18〜）
「ジェンスパークのAIディベロッパーっていう最近出た機能はGitHubから読み込んでサイトを生成する仕組みです。このAIデベロッパーでさっきのGitHubを接続して、そのファイルを読み込んでってやると、もう喋るだけで編集できるんで。それをやってから公開って感じのほうがいいと思います。」
「喋るだけで編集できる」——これが実現してるなら、コードが書けなくてもサイトを育てていける。診断ツールに機能を追加したいときも、「メールアドレスを収集する機能を追加して」って言うだけで、AIがコードを変更してくれる。ぶっちゃけ、この一言だけでハードルがめちゃくちゃ下がるよね。
……ただ、落とし穴もある。高崎さんが強調してたのが「クレジット消費の大きさ」。一発で大きく動かせる分、コストもそれなりに大きい。便利な道具ほど、火加減を間違えると一気に燃料を食う、っていうやつだね。
高崎さん（45:13〜）
「もしくは、ただAIデベロッパーめちゃくちゃクレジット食います。なので今はほぼもうページはできたんですけどこの後、GitHub上で作られるページは、やっぱりGitHub的なURLになってるので、それを自分の好きなURLに変えたいという方は、ドメイン取得が別途必要になります。」
便利なツールの裏に「クレジット消費が大きい」っていう現実がある。高崎さんが続けて、1日で2万ほど消費したこともあると話してたのが、なかなかリアルだったなあ。だから「Gemini CLIで細かい修正をして、Genspark AI Developerは一発で大きな機能追加をするときに使う」っていう役割分担を推奨してた。
高崎さん（45:39〜）
「一発ジェンスパークに機能の追加の使用書を全部伝えて、一回全部をあらかた加えてもらって微修正をジェミニで。なので次回までに追加したい機能、過剰書きでいいので入ってきてください。」
「次回までに追加したい機能を箇条書きで」っていうのが、続きのあるLIVEシリーズならではの宿題の出し方だなあと思う。一回で全部を完成させようとせず、毎週少しずつ育てていく形式が、視聴者も一緒に成長できる構造になってるんだよね。このLIVEを通じて「Gemini CLIでコードを操作して、GitHubに上げて、GitHub Pagesで公開して、Genspark AI Developerで育てていく」っていう開発の流れが、私の中でもすっきり見えてきた。
ひろくんコラム：「手を動かしながら学ぶ」が最速の入口
今回のLIVEを見ていて一番感じたのは、「完璧に準備してから始める」より「今ある状態でLIVEに持ち込んで一緒に動かす」ほうが、圧倒的に学べるっていう事実。ぶっちゃけ、もうこれに尽きる。
ただっちが「仮で作った状態で今日を迎えた」って言ってたのが、まさにそれなんだよね。エラーが出てもいい、手動でやる部分があってもいい。それよりも「動く状態のものを人前で触る」ことが、次のステップへの最短経路になってる。
高崎さんが「うまくいかなかったときは手動で上げる、精神的に楽です」って言ってたのも、同じ考え方だと思う。料理でいうと、レシピ通りに完璧に仕上げようとして手が止まるより、味見しながら足りない調味料をパッと手で足す感じ。完全自動化を目指して詰まるより、部分的でも前に進む。プロほど早く動いて、詰まったら手動で補う。そのバランス感覚が、このLIVEからびしびし伝わってきたんだよね。
同じように、自分の仕事やビジネスでAIを活用したい方は、ぜひ分身AI.comもチェックしてみてね。AIを「道具として使う」から「分身として育てる」フェーズへの入口として、参考になると思うから。
よくある質問
- Gemini CLIって初心者でも使えますか？
- ターミナルの基本操作ができれば入れます。高崎さんのLIVEではVS Codeのダウンロードとか GitHubアカウント設定が前提として紹介されていました。エラーが出ても手動でカバーしながら進められる形で実演されていました。
- GitHub Pagesは無料で使えますか？
- 基本的に無料で使えます。発行されるURLはgithub.ioドメインになります。自分のドメインで公開したい場合は別途ドメイン取得が必要で、高崎さんも「1000円ぐらいかかるかも」と話していました。
- Genspark AI Developerはどれくらいクレジットを消費しますか？
- 高崎さんが「1日で2万ぐらい」消費したこともあると言っていました。機能追加のたびに大量消費するため、細かい修正はGemini CLIで行い、Genspark AI Developerは大きな機能追加の一発投入に使うのが推奨です。
- ナノバナナ（Gemini 2.5 Flash Image Preview）はどこで使えますか？
- たくみくんがAI Studioから試していました。モデル選択でGemini 2.5 Flash Image Previewを選ぶと使えます。画像生成の品質は向上していますが、文字の生成はまだ課題があります。
- 岐阜塾とはどんな場所ですか？
- 高崎さんが運営している塾で、AIと企業を学べる場所です。不登校などで困っているお子さんへのサポートも行っていて、「好きなことやっていったらいいじゃないって我々は思っております」と高崎さんが話していました。
🎒 IF塾 / ゲタバコ倶楽部
IF塾 塾頭・ハグレ心理士の高崎さんと塾長たくみくん、NPO法人if(AI)理事が運営する学び場。「嫌いな物が極力ない世界」を目指す。
🌐 ゲタバコ倶楽部 🎓 IF塾 📱 高崎さんFacebook🎯 AIと愛で、未来をひらく。「あいあいらぼ。」
起業家・経営者のためのAI実践型コミュニティ。AI実践ワークショップ・AIクリエイティブ会・AI目標達成会が月額5,500円で遊び放題！AIMUNIQ（株）主催。
📱 ただっちのFacebook 🌐 あいあいらぼ。関連記事
- 「何を売るか」より「誰に届けるか」｜AI時代のペルソナ設計
- ChatGPTのスケジュールタスクで毎朝の「AI秘書」をつくる｜予定とタスクに追われない仕事術
- AIで作った画像が「なんか微妙」になる正体｜プロが1秒で見抜く3つのレイヤーとは【ただっち×ともみんLIVE】
🎁 無料プレゼント
Aiport（ClaudeCode AIエージェント実践会）
ClaudeCodeでAI秘書＋分身AI＋AIカンパニーが無料で作れるキット＆解説動画をプレゼント！
▶ 無料で入会してキットを受け取る🤖 AI生成コンテンツについて
この記事はAIツール（Claude Code）を活用して制作しています。構成・文章生成・画像制作にAIを使用し、最終的な内容の確認・編集・公開判断はひろくん（田中啓之）本人が行っています。「分身AIひろくん」（bunshin-ai.com）とは別のコンテンツです。
