生成AIでページを追加しても、既存サイトになじませるための3つのコツ

ページを追加するたびに、サイトが少しずつばらばらになる。原因は、たいていデザインのセンス不足ではない。

ページを追加するたびに、サイトが少しずつばらばらになる

コラムを追加した。サービスページを一枚増やした。キャンペーン用のページを急いでつくった。

そのときは問題ないと思っていたのに、気づくと、ページごとに見出しの大きさが違う。ボタンの形が違う。使われているフォントも微妙に違う。スマートフォンで見たときの余白も、ページによってばらばらになっている。

一つひとつは小さな違いです。けれど、積み重なるとサイト全体が「なんとなく安っぽい」「しっかり管理されていない」ように見えてきます。

多くの会社では、個性を出すために崩しているのではありません。担当者が変わったり、部分的な修正を重ねたり、急いでページを追加したりするなかで、既存サイトのルールを維持できなくなった結果として、少しずつ崩れていきます。

この記事では、WordPressなどのCMSで運用している既存サイトに、生成AIを使って新しいページやパーツを追加するとき、サイト全体の印象を崩さずになじませるための3つのコツを紹介します。

サイトが崩れる原因は、デザインのセンス不足ではない

サイトの見た目がばらばらになると、「デザインを整え直さなければ」と考えがちです。

しかし、原因は必ずしもデザインのセンス不足ではありません。むしろ多いのは、既存サイトにどんなルールがあるのかを確認しないまま、新しいページやパーツを追加してしまうことです。

WordPressなどのCMSで作られたサイトには、すでにさまざまなルールがあります。

見出しには見出しの階層があり、本文には本文の文字サイズがあります。ボタン、カード、囲み枠、画像の配置にも、テーマやサイト独自の設定が使われています。フォント、色、余白、コンテンツの幅、スマートフォン表示の切り替え方も、CSSやテーマの設定によって決まっています。

つまり、新しいページをつくるときに、毎回ゼロから見た目を考える必要はありません。

先に確認すべきなのは、「何を新しく足すか」ではなく、すでにあるものの中から、何を使えるかです。

まずは、既存のパーツを使う

新しいページを追加するときは、次の順番で考えます。

優先すること	確認する内容
既存のパーツを使う	見出し、ボタン、カード、囲み枠、画像レイアウトなどに既存のものがないか
既存の設定に合わせる	フォント、色、文字サイズ、余白、コンテナ幅が既存ページと合っているか
既存のクラスを再利用する	同じ役割のCSSクラスやコンポーネントがすでに定義されていないか
新設は最後にする	既存パーツでは実現できない理由があるか、その範囲を説明できるか

たとえば、見出しを目立たせたいからといって、ページごとに文字サイズや色を個別指定する。ボタンを目立たせたいからといって、新しい形やアニメーションを追加する。

こうした変更は、そのページだけを見れば魅力的に見えるかもしれません。しかし、サイト全体で見ると、既存のルールから外れたパーツが増えていきます。

既存のパーツを使うことは、表現を諦めることではありません。サイト全体の一貫性を守りながら、そのページの役割を果たすための設計です。

「個性」と「崩れているだけ」は、どこで分かれるのか

サイトのすべてを完全に揃える必要はありません。写真の見せ方や、特定のキャンペーンページの表現など、部分的に変化をつけることはできます。

ただし、その変化が「個性」として受け取られるには、崩していない部分が守られていなければなりません。

見出しの見せ方は少し変えていても、本文の読みやすさ、ボタンの役割、問い合わせへの導線が一貫している。キャンペーンページだけ表現を変えていても、サイトのフォントや色、コンテンツ幅は共通している。

このように、変えてよい範囲と、変えてはいけない範囲が決まっていれば、変化は意図した表現として受け取られます。

反対に、ページを追加するたびに見出し、フォント、余白、ボタン、画像の扱いまで変わっているなら、それは「あえて崩している」のではなく、既存のルールを維持できていない状態かもしれません。

生成AIにコーディングを頼むとき、いきなり「ページを作って」と言わない

最近は、生成AIにHTMLやCSSを書いてもらい、サイトの一部を自分で修正したり、新しいページを追加したりすることもできます。

これは便利な方法です。ただし、生成AIにいきなり「サービス紹介ページを作って」と依頼すると、生成AIは一般的には整って見える、新しいデザインを考えて出力します。

そのデザインが、今のサイトになじむとは限りません。

生成AIに依頼するときは、作りたいページの内容だけでなく、既存サイトのルールを先に渡すことが大切です。

具体的には、次のような情報を共有します。

渡す情報	生成AIに理解させること
既存ページのHTML	見出し、ボタン、カードなどの構造
既存のCSS	クラス名、色、フォント、余白、コンテナ幅
CSS変数	サイトで使っている色やサイズの基準
テーマやテンプレートの設定	CMS側で決まっている表示ルール
参考にしたい既存ページ	新しいページをどのページになじませたいか
使ってはいけないもの	新しいフォント、色、大幅な装飾など

そして、依頼の仕方も変えます。

「新しいデザインを提案してください」ではなく、次のように依頼します。

以下の既存サイトのHTML、CSS、テーマ設定を前提に、サービス紹介ページの一部を作成してください。

最優先することは、新しいデザインを提案することではなく、既存サイトになじませることです。

・既存の見出し階層（h2、h3）を使う
・既存のフォント、色、文字サイズ、余白、コンテナ幅を優先する
・既存のボタン、カード、囲み枠のクラスがあれば再利用する
・新しいCSSクラスを作る前に、既存クラスで実現できないか確認する
・新しいフォント、色、装飾、ブレークポイントは追加しない
・既存CSSを上書きする場合は、その理由を説明する
・PCとスマートフォンの両方で、既存ページと同じルールになるようにする
・最初に、読み取った既存のデザインルールを整理してからコードを出力する

以下が既存サイトの情報です。
［既存HTML］
［既存CSS］
［テーマ設定］
［参考ページ］

ポイントは、生成AIに「それっぽいページ」を作らせるのではなく、既存サイトのルールを読み取ったうえで、そのルールの中に新しいページを組み込ませることです。

うまくいけば、新しく追加したページなのに、もともとサイトにあったかのように、しれっとなじませることができます。

生成AIの出力を、そのまま公開しない

既存のHTMLやCSSを渡しても、生成AIがすべてを正確に理解できるとは限りません。クラス名を読み違えたり、CMSの仕様と合わないコードを出したり、スマートフォン表示で意図しない崩れが起きたりすることがあります。

そのため、生成AIがコードを出したら、公開前に次の点を確認します。

確認項目	見るポイント
見出し	既存ページと同じ階層、サイズ、見た目になっているか
フォントと色	新しいフォントや色を勝手に追加していないか
パーツ	既存のボタン、カード、囲み枠を再利用しているか
余白と幅	既存ページと同じ間隔、コンテンツ幅になっているか
スマートフォン表示	横にはみ出したり、文字が読みにくくなったりしていないか
既存ページへの影響	追加したCSSが、ほかのページを壊していないか

生成AIを使うことで、部分的なコーディングのハードルは下がります。しかし、サイト全体のルールを理解し、何を守るべきか判断するのは、依然として人の役割です。

自社で確かめる3つの質問

1. その違いは、ページや自社の役割と結びついているか。 なぜこのページだけ見た目が違うのか、理由を一文で説明できるでしょうか。「キャンペーンページだから」「職人の人柄を伝えるページだから」など、役割や伝えたい価値と結びついているなら、意図した変化かもしれません。ただ「目立たせたかった」「生成AIがそう提案したから」だけなら、もう一度見直したほうがよいでしょう
2. 何を変えてよく、何を揃えるのか決まっているか。 担当者が変わっても、制作会社が変わっても、同じ判断ができるでしょうか。「ここは自由にしてよい」「ここは既存の設定を使う」という線引きが言葉になっていなければ、次のページを追加するときに、また別の判断が生まれます
3. その違いによって、顧客の行動を邪魔していないか。 見出しは読めるか。情報を比較できるか。必要な仕様や価格にたどり着けるか。問い合わせ先が迷わず見つかるか。表現を変えることはできます。しかし、読みやすさ、探しやすさ、比較しやすさ、問い合わせやすさまで損なってはいけません

三つの質問に答えられるなら、その違いは残してよいかもしれません。答えに詰まるなら、それは個性ではなく、既存サイトのルールを維持できていないだけかもしれません。

まとめ：新しいページは、ゼロから作らなくていい

サイトに新しいページを追加するとき、毎回新しいデザインを考える必要はありません。

まず、既存の見出し、フォント、色、余白、ボタン、カード、CSSクラス、CMSの設定を確認する。次に、すでにあるパーツを優先して使う。どうしても新しいものが必要なときだけ、理由と使用範囲を決める。

生成AIにコーディングを依頼する場合も同じです。既存のHTMLやCSS、テーマ設定、参考ページを渡し、「新しい見た目を発明する」のではなく、「既存のルールを優先して、サイトになじむように組み込む」と伝えます。

そうすれば、部分的にページを追加しても、サイト全体の印象を壊さずに済みます。

新しいページなのに、もともとそこにあったように見える。

そのくらい、しれっとなじむページをつくることが、CMSでサイトを運用するうえでの、ひとつの品質なのだと思います。

この記事の根拠・出所

この記事は、ひきだしがWebサイトの診断・構築・運用支援の実務から整理した見解です。特定の学術調査や統計を根拠とするものではありません。