このページで整理すること
Geminiでデザイン方向性や文章構成を整理し、CanvaやFigmaの素材方針も確認しながら、CodexでCSS反映とスマホ表示確認へ進めます。
GeminiとCodexは、どちらか一方が常に正解というものではありません。調査や構成、実装、公開確認のように段階を分けると、AIを使ったWeb制作やコード作業が安全に進めやすくなります。
Geminiでできること
- 情報や素材を整理する
- 文章や見出しのたたき台を作る
- Google系ツールの文脈で作業を整理する
- 比較表や作業リストの下書きを作る
Codexでできること
- HTML/CSSや既存ファイルを確認する
- 内部リンクやsitemapを確認する
- GitHub差分や公開前チェックを行う
- 作業報告を読み、人間が判断しやすい形にする
一緒に使う流れ
- デザインの目的を決める
- Geminiで構成とトーンを整理する
- 素材の権利と配置場所を確認する
- CodexでCSSとHTMLへ反映する
- スマホ表示と読みやすさを見る
使い分け表
| 作業 | Geminiで見ること | Codexで見ること |
|---|---|---|
| 構成案 | 見出しや順番を整理 | HTML構造に落とす |
| 素材整理 | 使う素材の候補を整理 | 配置場所とaltを確認 |
| CSS調整 | 方向性の相談 | 実装と表示確認 |
| スマホ表示 | チェック観点を出す | 崩れを確認する |
デザイン案をAIに出させる時の頼み方
「良いデザインを考えて」と頼むと、当たり障りのない案しか出てきません。案の質は、渡す情報の種類で決まります。
| 渡すもの | 渡し方の例 | 効果 |
|---|---|---|
| 読む人 | 「初めてこの分野に触れる人向け」 | 情報量と言葉の難易度が決まる |
| 読んだ後にしてほしいこと | 「詳細ページへ進んでもらいたい」 | 導線の置き方が決まる |
| 載せる情報の優先順位 | 「まず結論、次に理由、最後に補足」 | 構成が決まる |
| 制約 | 「画像は使わない」「1画面に収める」 | 現実的な案になる |
逆に言うと、この4つは人間が決めるべきことです。ここを決めずに頼むと、AIが勝手に想定した読者に向けた案が返ってきます。案が的外れに感じる時は、AIの性能ではなく渡した情報が足りていない可能性を先に疑ってください。
案を採用する前に確認すること
出てきた案をそのまま実装すると、後から困ることがあります。実装前の確認点を挙げます。
- スマホでも成立するか：横並びの構成は狭い画面で崩れます。訪問者の多くはスマホからです。
- 実際の文章量で崩れないか：案の文字数と、実際に入れる文章の量は違います。長くなっても破綻しない構成か確認します。
- 既存ページと揃うか：1ページだけ雰囲気が違うと、同じサイトに見えなくなります。
- 作った後に維持できるか：凝った作りは、後から自分で修正できなくなることがあります。
最後の項目は見落とされがちです。作る時は問題なくても、半年後に自分で直せない構造だと、そのページは更新されなくなります。長く使うページほど、自分が理解して手を入れられる範囲の作りにしておく方が、結果的に長持ちします。
やってはいけないこと
- GeminiやCodexを公式情報の代わりとして扱わない
- Geminiだけで自動的にサイトが完成するような書き方をしない
- Codexのコード出力を確認なしで採用しない
- Google DriveやGeminiまでCodexが扱える前提で進めない
- APIキー、認証情報、DB情報、秘密鍵を貼らない
- AdSense、Search Console確認タグ、robots.txt、ads.txt、.htaccess、DB、cronを軽作業で触らせない
- 成果保証や順位保証を書かない
FAQ
GeminiとCodexはどちらを先に使えばいいですか？
調査や構成を先に整理したい場合はGeminiやChatGPT、実ファイルへ反映したい場合はCodexが使いやすいです。
GeminiだけでWeb制作は完結しますか？
構成や文章の整理には使えますが、HTML/CSS反映、公開前チェック、内部リンク確認はCodexや人間確認と分ける方が安全です。
Codexへ渡す時に何を書くべきですか？
対象URL、対象ファイル、やること、やらないこと、停止条件、確認項目を書いて渡すと安全です。
公式情報はどこで確認しますか？
機能、料金、提供状況は変わることがあるため、重要な判断では各提供元の最新情報を確認してください。