067 AI屋さんの Gemini CLIとFirebase Hostingで作る、AIチャットボット付き無料ホームページ
こんにちは
今回は、プログラミングの専門知識がなくても、対話AI（Gemini CLI）とGoogleのサービスを組み合わせて、高機能なホームページを無料で公開する方法をご紹介します。
完成イメージは、AIによる顧客対応チャットボットが埋め込まれた、本格的な静的ウェブサイトです。
この記事で実現すること
- Gemini CLI でホームページのHTML/CSSコードを自動生成する。
- nano banana 拡張機能でサイトに使用する画像を生成する。
- Firebase Hosting を使って、作成したサイトを無料でインターネットに公開する。
- Dify というツールで、独自の知識を持ったAIチャットボット（AIエージェント）を作成し、サイトに埋め込む。
なぜこの組み合わせなのか？
-
開発不要: Pythonやサーバーレス、バックエンドアプリの開発知識は一切不要です。全て自然言語での指示で完結します。
-
無料: Firebase Hostingは寛大な無料枠があり、個人や小規模なプロジェクトなら実質無料で運用できます。
-
簡単: Gemini CLIとの対話でコードが生成されるため、HTMLやCSSを一行も書かなくても始められます。
-
高機能: Difyを使えば、専門知識なしでRAG（Retrieval-Augmented Generation）という技術を活用したAIエージェントを作成し、自社サービスや商品について回答させることが可能です。
ステップ1：Gemini CLIでホームページの骨格を作る
まずは、Gemini CLIに指示して、ホームページのデザイン案とHTMLコードを作成してもらいましょう。
gemini "モダンでシンプルなデザインの、ITコンサルティング会社のトップページを作成して。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力して。"
1. 美味しいパン屋さんのホームページ
ターゲット: 焼きたてのパンの温かみと、シンプルで洗練されたイメージを伝える。
プロンプト例:
「美味しいパン屋さんのトップページをデザインして。モダンで温かみのあるシンプルなデザインを希望します。焼きたてのパンの写真をメインビジュアルとして使い、メニュー、店舗情報、シェフのこだわりを簡潔に表示してください。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力してください。JavaScriptはシンプルなスライドショーの実装にのみ使用してください。」
2. 高級宝飾店（宝石、ダイヤなど）のホームページ
ターゲット: 宝石の輝き、高級感、信頼性を、過剰な装飾を排したミニマルなデザインで表現する。
プロンプト例:
「高級宝飾店のトップページを作成してください。ダイヤモンドの輝きを際立たせる、黒、白、ゴールドを基調としたミニマルでエレガントなデザインを求めます。メインビジュアルは高解像度のダイヤモンドのクローズアップを使用し、ブランドコンセプト、コレクション、コンタクト情報を表示します。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力し、JavaScriptは商品画像にマウスオーバーした時の微細なアニメーションにのみ使用してください。」
3. ファッショナブルな高級リゾートホテルのホームページ
ターゲット: 洗練された非日常感、贅沢な空間、最新のトレンドを取り入れたファッショナブルなイメージを伝える。
プロンプト例:
「ファッショナブルな高級リゾートホテルのトップページを作成してください。インフィニティプールと青空の写真を最大限に生かした、大胆でモダンなレイアウトを希望します。予約ボタンを最優先し、客室、アクティビティ、レストランの情報をミニマルなタイポグラフィと合わせて表示してください。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力し、JavaScriptはスクロール時のパララックス効果にのみ使用してください。」
4. クリエイティブ系スタートアップのコーポレートサイト
ターゲット: 革新性、柔軟性、そしてプロフェッショナルなイメージを、カラーを効果的に使ったシンプルなデザインで表現する。
プロンプト例:
「新しいクリエイティブ系スタートアップ企業のトップページを作成してください。鮮やかなアクセントカラーを効果的に使用したモダンでクリーンなデザインを求めます。私たちの提供するサービス、チーム紹介、ビジョンをインフォグラフィック風に簡潔にまとめてください。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力してください。JavaScriptはヒーローセクションの文字をわずかにフェードインさせるアニメーションにのみ使用してください。」
5. オーガニックコスメブランドのECサイトトップページ
ターゲット: 自然素材の優しさ、透明感、そして環境への配慮を感じさせる、シンプルで清潔感のあるデザイン。
プロンプト例:
「オーガニックコスメブランドのECサイトのトップページを作成してください。白とアースカラーを基調とした、シンプルで清潔感のあるデザインを希望します。主力商品の写真、ブランドの哲学、お客様の声を分かりやすく配置し、購入への導線を明確にしてください。HTML、CSS、JavaScriptをインラインで記述した単一のHTMLファイルで出力し、JavaScriptはナビゲーションバーをスクロールで固定表示する機能にのみ使用してください。」
このコマンド一つで、ウェブサイトの土台となるHTMLファイルが生成されます。
ステップ2：nano bananaで画像を生成する
次に、サイトに彩りを加える画像を nano banana 拡張機能で生成します。
/nanobanana image "未来的でクリーンなオフィスのイメージ画像" --style photorealistic
生成された画像をHTMLファイルに組み込みます。
ステップ3：Firebase Hostingで世界に公開する
ホームページのファイルが準備できたら、Firebaseを使って公開します。
-
Firebaseプロジェクトを作成: GoogleアカウントでFirebaseコンソールにログインし、新しいプロジェクトを作成します。
-
Firebase Toolsをインストール: パソコンに
firebase-toolsをインストールします。npm install -g firebase-tools -
初期化とデプロイ:
firebase login firebase init hosting # (指示に従って設定を進める。公開ディレクトリは 'public' が一般的)生成された
publicディレクトリに、先ほど作成したHTMLファイルを配置します。firebase deploy
これだけで、あなただけのホームページがインターネット上に公開されます。
【Gemini CLI Pro-Tip】
さらに、Gemini CLIを使えば、これらのFirebaseコマンドを覚える必要すらありません。「デプロイして」と自然言語で指示するだけで、Geminiがコマンドを実行してくれます。コマンドの暗記から解放され、より直感的に開発を進められます。
ステップ4：DifyでAI顧客対応エージェントを埋め込む
最後に、サイトを訪れた人からの質問に自動で答えるAIエージェントを設置します。
-
DifyでAIエージェントを作成:
- LLMの実態はGeminiです、
- Difyの公式サイトにアクセスし、新しいアプリケーションを作成します。
- ナレッジベースに、あなたのサービスに関する情報（PDF、テキスト、ウェブサイトURLなど）を登録します。これにより、AIはあなたのビジネスに詳しくなります（これがRAGの仕組みです）。
-
埋め込みコードを取得:
- 作成したアプリケーションの設定画面から、埋め込み用のHTMLスニペットをコピーします。
-
HTMLに貼り付け:
- Gemini CLIが生成したHTMLファイルの
<body>タグの末尾あたりに、コピーしたスニペットを貼り付けます。
- Gemini CLIが生成したHTMLファイルの
-
再デプロイ:
- 変更を保存し、再度
firebase deployを実行します。
- 変更を保存し、再度
これで、あなたのサイトにAIチャットボットが表示されるようになります。
実際にこの技術を活用したサンプルサイトがこちらです：
まとめ
Gemini CLI、Firebase、Difyといったツールを組み合わせることで、アイデアさえあれば誰でも簡単に、無料で、高機能なウェブサイトを公開できる時代になりました。
コーディングの壁を感じていた方も、ぜひこの機会に自分だけのウェブサイト制作に挑戦してみてはいかがでしょうか.
目次
今回も、対話AI（Gemini CLI）とGoogleのサービスを組み合わせて、高機能なホームページの完成です、
067 AI屋さんの Gemini CLIとFirebase Hostingで作る、AIチャットボット付き無料ホームページ
おめでとうございます、
ー以上ー