注意点
- GeminiとCodexを勝ち負けで断定しない
- Gemini、Google、OpenAI、Codexの公式サイトのように見せない
- 検索順位や売上などの結果を約束する書き方をしない
- Google Driveやスプレッドシートの操作範囲を広く断定しない
- APIキー、認証情報、DB情報、秘密鍵を貼らない
- AdSense、Search Console確認タグ、robots.txt、ads.txt、.htaccess、DB、cronを触らない
調査側に頼むこと、実装側に頼むこと
ページを作る作業では、どこまでを文章で決め、どこからコードにするかの境目がはっきりしません。次のように分けると、手戻りが減ります。
- 調査側（Gemini）に頼む：載せる項目の洗い出し、見出しの順番、表にする列の設計、読者がつまずきそうな箇所の指摘。文章と構造の話です。
- 実装側に頼む：HTMLへの落とし込み、既存ページと同じ見た目の適用、内部リンクの追加、sitemapへの登録。繰り返しになる作業です。
- 自分でやる：載せる内容そのものの判断、数字と固有名詞の確認、公開の可否。
逆にしてしまうと、たいてい失敗します。調査側にコードを書かせると既存サイトの構造と合わず、実装側に構成から任せると、載せるべき内容が抜けたページができます。
見た目が崩れる原因はほぼ1つ
「AIに作らせたら見た目が崩れた」という場合、原因の大半は基準となる既存ページを示していないことです。指示の中に次の3つを入れると、崩れ方が激減します。
- 基準ページを指定する：「このページと同じ構造で」と、実物のURLかHTMLを渡します。文章で「シンプルな見た目で」と伝えても再現されません。
- 触ってよい範囲を限定する：「
<main>の中だけ。head、ヘッダー、フッターは変更しない」と書きます。 - 既存のクラス名を使わせる：新しいCSSを増やさせないことが、統一を保つ最短の方法です。
スマートフォンでの表示は、特に表で崩れます。横に長い表を入れる場合は、はみ出したときに横スクロールできる形になっているかを、実機か画面幅を狭めた状態で確認してください。
公開前に自分の目で見る5点
生成されたコードは、動いているように見えても抜けが残ります。次の5つは毎回確認してください。
| 確認箇所 | よくある問題 |
|---|---|
| title と description | 他のページと同じ文言が入ったまま |
| canonical | 基準にしたページのURLが残っている |
| robots メタ | noindex が付いたまま公開される |
| リンク先 | 存在しないページへのリンクが混ざる |
| 見出しの階層 | h1が2つある、h2を飛ばしてh3になっている |
2行目と3行目は、既存ページを複製して作ったときに必ず起こります。特にrobotsメタの付け忘れ・消し忘れは、公開したつもりのページが検索に出ない原因になり、気づくまでに時間がかかります。
関連ページ
GeminiとCodexを連携して使う流れGemini側のCodex連携ワークフロー親ページGeminiで作った構成案をCodexに渡すにはGemini側のCodex指示書ページGemini・Google Drive・Codexで素材を整理してページ化するにはGoogle Drive素材整理ページGeminiとCodexで作ったページを公開前に確認するにはGemini側の公開前チェックページGeminiとCodexの違い比較親ページへ戻ります。GeminiとCodexでホームページを作るにはホームページ制作の流れを確認します。Gemini・Google Drive・Codex連携素材整理の流れを確認します。GeminiとスプレッドシートでCodex作業を整理作業管理の流れを確認します。GeminiとGoogle Workspaceの使い方Google連携の親ハブです。Gemini安全ハブ安全注意を確認します。Codex側のHTML/CSS反映を見るcodexguide.jp の関連ページへ移動します。