AI時代のウェブ制作新常識：効率を最大化する「共通部固定×コンテンツ差分」生成術
たーさん
「AIにWebサイトを作らせているけれど、ページを増やすたびにデザインが微妙にズレてしまう……」 そんな悩みを抱えていませんか？
AI（ChatGPTやClaudeなど）を使ったウェブ制作で、最も効率が良く、かつ破綻しない手順。それは、「共通部分を先に確定させ、以降はコンテンツ内部のみを出力させる」という方法です。
今回は、私が実践しているこの制作フローと、そのまま使えるプロンプトを公開します。
なぜ「一気に全部」作らせてはいけないのか？
AIは非常に優秀ですが、一度に長いコードを出力させると、以下のような問題が発生しやすくなります。
- ・出力の揺れ：ページごとにヘッダーの余白やフォントサイズが微妙に変わってしまう。
- ・コードの省略：記述が長くなると、AIが勝手にコードを中略してしまい、コピー＆ペーストが困難になる。
- ・管理の複雑化：共通部分の修正が必要になった際、全ページを修正し直す必要が出てくる。
これを防ぐのが、「器（共通パーツ）」と「中身（コンテンツ）」を完全に分けて考える戦略です。
ステップ1：土台となる「共通パーツ」を確定させる
まずは、ヘッダー、フッター、サイドバー、そしてサイト全体の基本ルール（カラーパレットやタイポグラフィ）を定義します。
推奨プロンプト
指示：
以下の要件に基づき、ウェブサイトの「共通パーツ（Header, Footer, Sidebar）」のHTMLとCSSを作成してください。
要件：
・レスポンシブ対応（モバイルファースト）
・メインコンテンツ部分は <main id="content"> として空けておくこと
・全体のスタイルは :root 変数（メインカラー、フォント等）で管理すること
・シンプルで清潔感のあるビジネス向けデザイン
ここで出力されたコードを「絶対的な正解」として、自分のローカル環境やエディタで固定します。
ステップ2：コンテンツを「差し込み式」で生成する
共通部分が固まったら、次はその中に流し込むコンテンツだけをAIに生成させます。この際、「HTMLと対応するCSSをセットで出させる」のがポイントです。
推奨プロンプト
指示：以下の「確定済みレイアウト」を前提に、新しいページのメインコンテンツ部分（<main>の中身）のみを作成してください。
確定済みレイアウト（共通コード）：[ここにステップ1で作成したHTML/CSSを貼り付け]
今回の制作ページ：「お問い合わせページ（フォームを含む）」
出力条件：
・HTMLは <main id="content"> 内に記述するコードのみ出力すること
・CSSはこのコンテンツ専用のものを出力すること
・共通コードのクラス名と競合しないよう、独自の接頭辞（例: .pg-contact-）を使用すること
・文字数制限を超過する場合は出力を分けること
この方法なら、AIは「メインコンテンツ」という狭い範囲に全エネルギーを注げるため、クオリティが劇的に向上します。
最後の「10%」が、サイトの完成度を左右する
このフローを使えば、誰でも短時間で80〜90%の完成度までサイトを組み上げることができます。しかし、AIにも苦手な領域があります。
- ・クロスブラウザ対応：iPhoneのSafariだけで表示が崩れる。
- ・微細な動的ギミック：複雑なスクロールアニメーションやフォームの挙動。
- ・SEOと表示速度：検索エンジンに好まれる構造的な最適化や軽量化。
これら「どうしても自力では解決できない細かい調整」や「プロの目から見たブラッシュアップ」が必要になったときは、ぜひ私、タドワークスにご相談ください。
AIで効率化した土台があるからこそ、短納期・適正価格での最終調整が可能です。
投稿者プロフィール
