生成AIが書いたコードで、余白の大きさがページごとにバラつく理由と揃え方

生成AIに何度かやり取りしながらサイトを作っていると、セクションごとの余白がなんとなく揃っていない、と感じることがあります。1つ1つのセクションは整っているのに、並べてみると微妙にガタガタして見える——という症状です。

この記事では、なぜ余白がバラつきやすいのか、その理由と、揃えるためにAIへどう伝えるとよいかを紹介します。

理由：AIは「そのつど」ちょうどよさそうな数値を決めている

生成AIは、指示のたびにコードを新しく書き起こしています。前のセクションで使った余白の数値を必ず覚えていて使い回してくれるとは限らず、「見た目にちょうどよさそうな数値」をそのつど判断して書くことがあります。

その結果、あるセクションでは32px、別のセクションでは28px、また別のセクションでは40pxというように、近いけれど微妙に違う数値が混ざることがあります。1つ1つは間違いではないものの、並べたときの統一感を崩す原因になります。

揃え方1：使ってよい数値をこちらから指定する

「余白は8の倍数（8px・16px・24px・32px・48pxなど）だけを使って」というように、使ってよい数値の候補をあらかじめ指定すると、AIはその範囲内から選ぶようになり、バラつきが減ります。

0からすべての余白を数値で指定する必要はありません。「基本の単位」を1つ決めて伝えるだけで、AIが以降の判断をその単位に沿わせやすくなります。

揃え方2：共通の余白を先に決めてから、本体を頼む

複数ページやセクション数の多いサイトを頼むときは、本体のコードを頼む前に「このサイトで使う余白の基本ルール」を先に決めておくと効果的です。

「セクションとセクションの間は64px」「見出しと本文の間は16px」というように、代表的な間隔をあらかじめ決めて共有し、「以降のセクションもこのルールに沿って」と伝えると、あとから生成する分もルールに沿いやすくなります。

あとから揃え直すときの確認のしかた

すでにできあがっているコードの余白がバラついているかどうかは、ブラウザの開発者ツールで、隣り合うセクションの余白の数値を実際に測って比べると確認できます。

• セクションとセクションの間の余白を、上から順に測る
• 近い数値だが完全には一致していない箇所を洗い出す
• 洗い出した数値を、基本の単位の倍数に丸めて統一する

まとめ

余白のバラつきは、派手な崩れではないぶん見過ごされがちですが、サイト全体の「整って見えるかどうか」に地味に効いてきます。基本の単位を決めて伝える、先に共通ルールを共有する——この2つを意識するだけで、AIが生成するコードの統一感はぐっと上がります。生成AIに作らせたサイトを、あとから自分で直しやすくしておくコツは生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツでも扱っているので、あわせてご覧ください。