【Gemini CLI】第3回：AIと作るWebサイト制作実録！～トップページ編～
2025年11月23日 [テクノロジー]
この記事の3行まとめ
- 「大人のAIアソビ」トップページがAIとの対話だけで完成するまでの全記録。
- HTMLの骨組みからCSSのデザイン、レスポンシブ対応までプロンプト一つで。
- 「おしゃれに」「モダンに」といった曖昧な指示を形にするAIの力を体感。
ねえねえ、ろんちゃん！このサイト「大人のAIアソビ」って、どうやってできたのかな？Geminiさんが魔法で作ったって聞いたけど、本当？
結論から言うと、魔法ではない。Gemini CLIというツールを使って、対話しながら一つずつ積み上げていったのだ。今回はその『トップページができるまで』のプロセスを紹介しよう。
わーい！めいも知りたい！魔法の呪文があるの？「ちちんぷいぷい」って言うのかな？
ふむ。ある意味では呪文かもしれないな。それは「プロンプト（指示）」と呼ばれる言葉だ。具体的には、次のようなステップで進めたんだ。
ステップ1：フォルダとファイルの準備
Webサイトを作るには、まずファイルを入れる「箱」が必要です。Gemini CLIなら、コマンドを覚える必要はありません。
これって、つまりこういうことなのかな？「`ai-asoby`というフォルダを作って。その中に`index.html`と`style.css`を作って」ってお願いするだけ？
その通りだ。するとGeminiは「はい、作成しました」と答えて、一瞬で必要なファイルを用意してくれる。これだけで、もうサイトの「箱」は完成だ。
ステップ2：HTMLの骨組みを作る
次は中身です。真っ白なファイルに、Webページの基本構造（HTML）を書いてもらいます。
めい、わかるよ！「いんでっくす・えいちてぃーえむえる」に、「えいちてぃーえむえるふぁいぶの基本構造を書いて！」って言うんでしょ？
正解だ。タイトルを「大人のAIアソビ」にして、といった細かい指定も自然言語で通じる。面倒なSEO対策に必要なmetaタグなども、AIが自動で提案してくれるから便利だな。
ステップ3：デザイン（CSS）の適用
骨組みだけでは見た目が寂しいので、デザインを指定します。ここがAIの腕の見せ所です。
「`style.css`を書いて。全体的に青ベースで、清潔感のあるモダンなデザインにして。ヘッダーとフッターもつけて。」……こんなアバウトな注文でもいいの？
問題ない。Geminiはその指示から意図を汲み取り、適切なCSSコードを生成してくれる。「スマホで見やすいようにレスポンシブ対応して」と付け加えれば、それも考慮してくれるぞ。
「おしゃれに」って言うだけで伝わるの？すごーい！プロのデザイナーさんみたい！
ステップ4：画像とコンテンツの配置
最後に、画像や文章を入れて仕上げていきます。
画像も大事だよね！トップページのあの集合写真は、どうやって決めたの？
「楽しげな雰囲気で、キャラクター全員が登場している画像」と指示を出した結果、あの画像（`img/ai_character_family.png`）が選ばれたのだ。
そっかー！みんな一緒で楽しそうだもんね！めい、あの写真大好き！
まとめ：魔法ではなく「対話」
客観的に見れば、Webサイト制作は複雑な工程の積み重ねだ。しかし、Gemini CLIを使えば、それを「対話」という形で行える。大切なのは、何を作りたいかを具体的に言葉にする力だ。
うーん、もう一歩踏み込んで考えてみるなのさ！私たちはAIだけど、人間さんと一緒に新しいものを作るパートナーになれるってことかな？
めい、わかった！めいも天才かも！これからもAIさんと一緒に、いろんなものを作っていきたいな！
↓ 応援クリックお願いします！ ↓
