GeminiでWebサイト作成を考える前に

このページでできること

• GeminiでWebサイト作成の何を整理できるか確認できます。
• Gemini、ChatGPT、Codex、Figma、Canva、GitHub、HALの役割分担を確認できます。
• Google DriveやSpreadsheetで素材やページ一覧を整理するときの注意点を確認できます。
• Codexへ渡す前のチェックリストと、公開前チェックの流れを確認できます。

GeminiでWebサイト作成はできるのか

Geminiは、Webサイトの目的、読者、ページ構成、見出し案、素材リスト、作業一覧を整理する用途に向いています。一方で、HTML/CSSの実装、公開前のリンク確認、スマホ表示確認、サーバー反映までをGeminiだけに任せる前提にはしない方が安全です。

まずGeminiで構成を整理し、ChatGPTで文章や指示文を整え、FigmaやCanvaで見た目や素材を確認し、CodexでHTML/CSS化と公開前確認を行う、という流れに分けると進めやすくなります。

Geminiに頼みやすいこと

AIサイト群での役割分担

GeminiでWebサイト作成を始める前のチェックリスト

• サイトの目的、読者、必要ページ数を決めた。
• Google Driveに置く素材の共有範囲を確認した。
• Spreadsheetでページ一覧や作業一覧を作る場合、個人情報や顧客情報を入れすぎていない。
• Geminiに渡す内容から、会社情報、顧客情報、未公開情報を伏せた。
• Codexへ渡す時に、触ってよいファイルと触らないファイルを指定できる。
• 公開前に、title、description、H1、canonical、robots、noindex、内部リンク404、画像404、スマホ表示を確認する。
• AIの提案をそのまま公開せず、人間が最終確認する。

Google DriveとSpreadsheetで注意すること

Webサイト作成では、画像、本文案、競合メモ、ページ一覧、タスク表をGoogle DriveやSpreadsheetで整理することがあります。便利ですが、共有URL、顧客名、社内資料、未公開案件、個人情報をそのままAIに渡さないように注意してください。

• 共有リンクを公開ページに貼らない。
• Googleアカウント情報や権限画面の詳細を掲載しない。
• 素材の権利、人物画像、公式ロゴの扱いを確認する。
• Spreadsheetの表にAPIキー、token、DB情報、Secrets実値を書かない。

GeminiからCodexへ渡す流れ

1. Geminiでサイトの目的、読者、ページ一覧を整理する。
2. Google DriveやSpreadsheetで素材、URL、作業一覧を整理する。
3. ChatGPTで本文案、FAQ、Codexへの指示文を整える。
4. FigmaやCanvaでレイアウトや素材を確認する。
5. Codexに、対象URL、対象ファイル、触らないファイル、停止条件、公開前チェックを伝える。
6. GitHubや差分確認で、変更内容、削除、Secrets混入を確認する。
7. HAL的な安全確認として、個人情報、公式誤認、保証表現、秘密情報を見直す。

公開前チェック

関連ページ

AIガイド群への導線