生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方

複数ページのサイトを生成AIに作らせるとき、ページごとに「同じヘッダーとフッターを付けて」と頼んでいるのに、できあがったものを並べてみるとロゴの大きさやリンクの数が微妙に違う——という経験をした方もいるのではないでしょうか。

この記事では、なぜヘッダー・フッターがずれやすいのか、その理由と、揃えるためにAIへどう伝えるとよいかを紹介します。

理由：AIは「ページごとに」ヘッダー・フッターを新しく書いている

生成AIにページを1枚ずつ頼むと、そのたびにコード全体を新しく書き起こしています。前のページで書いたヘッダーのコードをそのままコピーしてくれるとは限らず、「同じような見た目」を毎回あらためて組み立て直していることがあります。

結果として、ロゴの大きさやナビゲーションの余白、リンクの数や並び順といった細部が、ページごとに少しずつ違う仕上がりになります。1ページずつ見ると気づきにくくても、並べて比べると統一感の無さが目立ちます。

揃え方1：ヘッダー・フッターのコードは、1回だけ生成して使い回す

最初のページでヘッダー・フッターのコードを確定させたら、2ページ目以降は「このヘッダーのコードをそのまま使って。書き直さないで」と、具体的なコードを渡して伝えるのが確実です。

「同じデザインで」という言葉だけでは、AIにとって「似た見た目を新しく作る」ことと「同じコードを使い回す」ことの区別がつきません。使い回してほしいときは、その意図をはっきり伝える必要があります。

揃え方2：共通部分と、ページごとに変わる部分を分けて伝える

ヘッダー・フッターのように全ページで共通の部分と、ページタイトルやパンくずリストのようにページごとに変わる部分を、あらかじめ分けて伝えておくと、AIが誤って共通部分まで作り変えてしまう事故を防げます。

「ヘッダーとフッターは共通、本文だけページごとに書いて」と明示するだけで、意図しないずれはかなり減らせます。

すでにズレてしまったときの直し方

複数ページを作り終えたあとにずれに気づいた場合は、いちばん理想に近いページのヘッダーを1つ選び、「このページのヘッダーのコードを、他の全ページのヘッダーとそのまま置き換えて」と、置き換え作業として頼むのが早道です。

「揃えて」とだけ頼むと、また新しく書き起こされてしまい、別の細部でずれが生じかねません。基準にするコードを渡し、置き換えるだけの作業だと明確に伝えましょう。

まとめ

ヘッダー・フッターのずれは、AIが「毎回律儀に書き直している」ことが原因で起きる、生成AIならではの崩れ方です。基準になるコードを1つ確定させ、以降は「使い回す」「置き換える」という指示に切り替えるだけで、複数ページでも統一感のある仕上がりに近づきます。

同じ発想は、セクション間の余白がバラつく問題にも当てはまります。生成AIが書いたコードで、余白の大きさがページごとにバラつく理由と揃え方もあわせてご覧ください。Studioに取り込んだあとにこの問題を根本から防ぐ方法は、Studioのコンポーネント機能の基本で扱っています。