AIにWebデザインをさせて実装まで通す手順｜ChatGPTの出力をコードに落とす分岐点

ChatGPTに「おしゃれなWebサイトのデザインを作って」と頼めば、それらしい画面は返ってきます。問題はその先です。出てきた画面を実際のサイトとして形にしようとすると、色コードが分からない、文字サイズが決まらない、スマホでどうなるか誰も決めていない、という状態で止まります。

結論から言うと、AIにWebデザインをさせるコツは「AIに見た目を判断させないこと」です。トーン・文字サイズ・禁止事項を人間側が先に確定させ、AIには「決まったものを再現・展開する役」を担ってもらう。この順番にした案件だけが、デザインから実装まで手戻りなく通ります。

この記事は、美容室・店舗の経営者、そして制作を発注したり自社サイトを内製したりするWEB担当者の方に向けて、実際の制作案件でやっている手順をそのまま整理したものです。

1. 結論：AIにWebデザインをさせる正しい順番

やることは3ステップです。順番を入れ替えないことが唯一のコツと言っていいくらい、順番が効きます。

ステップ	人間がやること	AIにやらせること
①言語化	配色・写真トーン・フォント・余白感・禁止事項を確定する	選択結果を指示文（プロンプト）に整形する
②案出し	方向性の異なる案を3つ見比べて1つ選ぶ	画像ではなくHTMLモックで3案作る
③実装	確定デザインを数値（座標・色・サイズ）で渡す	数値どおりに実装し、差分を検証する

分岐点は②と③の間にあります。「AIが見た目を決めた」まま実装に入るとやり直しになり、「人が決めた見た目をAIが再現する」状態にしてから実装に入ると通ります。 同じAIを使っても、この一点で結果が変わります。

2. 画像で出てきたデザイン案は、なぜ実装で止まるのか

画像生成でデザイン案を出すこと自体は悪くありません。方向性を見るには十分です。ただし画像には、実装に必要な情報が一切入っていません。

• 色は「なんとなくベージュ」であって #F7F5F2 ではない
• 文字は「大きめの見出し」であって40pxでも30pxでもない
• 余白のルール、スマホ幅での折り返し、ボタンを押したときの挙動は決まっていない

つまり画像から実装に入ると、実装担当（AIでも人でも）が全部を推測で埋めることになります。推測で埋めた箇所は、後から「ここ違う」と指摘が入る候補地になります。ここが手戻りの発生源です。

もうひとつ、実務でよく起きるのが「参考サイトを見せてゼロから作らせると、無難な似た系統に寄る」現象です。あるBtoB支援会社のコーポレートサイト案件でも、参考サイトを見ながらAIにデザインさせると独自性のない仕上がりになるリスクが出ました。そこで、参考サイトはトーン&マナー（配色・空気感）の抽出元としてだけ使い、レイアウトやモチーフは独立した複数案を用意して選ぶという進め方に切り替えています。参考サイトの構造や意匠をそのまま持ってくるのは、独自性の面でも権利の面でも避けるべき進め方です。

3. ステップ1：デザインを「言語化」してから渡す

AIに渡す前に、人間側で確定させるものが2種類あります。

トーンの言語化は選択式にすると早い

「どんなデザインが好きですか」と聞かれて言葉で答えられる人はほとんどいません。そこで弊社では、世界観（韓国風・モード・ナチュラル・和モダン・北欧・インダストリアル）、写真トーン、素材テクスチャ、温度感、余白感、カラートーン、フォントの雰囲気などを、ビジュアルの選択肢から選ぶだけで方向性が固まるツールを自社で作り、ヒアリングに使っています。10ステップ選び終えると、そのままAIへの指示文が出力される仕組みです。

ポイントは、言語化を「センスのある人が頑張る作業」から「選ぶだけの作業」に落としたこと。ここが曖昧なままAIに投げると、出てくるものも当然曖昧になります。

タイポグラフィのスケールは最初に表で決める

これは必ず先にやってください。見出し・本文・注記の文字サイズと文字色を最初に一覧表で決め、CSS変数にしてから実装に入るのが正解です。実際に使っている表はこの粒度です。

用途	PC	スマホ	太さ	色
ページ大見出し	40px	30px	700	アクセント色
セクション見出し	30px	24px	700	#2E2A26
小見出し	20px	17px	700	#37322C
リード文	18px	16px	500	#4A443D
本文	17px	15.5px	500	#423C36
注記	14px	13px	500	#6E655C

先に決めておかないと、セクションごとに本文サイズと色がバラバラになり、後から全ページ横断で統一する作業が発生します。ページ数が増えてからでは、修正箇所が数百箇所規模になります。本文は小さすぎ・薄すぎになりやすい（14px台・薄いグレー）ので、最低16〜17px・濃いめの文字色を基準値として先に固定しておくのが安全です。スマホ側はブレイクポイントで変数だけ差し替える設計にしておくと、後からの調整が一箇所で効きます。

禁止事項もセットで渡す

「AIっぽい見た目」は、いくつかの決まったパターンから生まれます。指示の時点で禁止しておけば、初稿から避けられます。

• カード上辺に細いアクセントライン1本を引くレイアウト
• 全セクションが同じカードグリッドの繰り返し
• アイコンカード3枚だけでサービスを説明する構成
• ページごとにヘッダー・フッターのデザインやリンク構成が変わる

4. ステップ2：AIに出させるのは「画像」ではなく「HTMLモック」

案出しの段階から、成果物をHTML/CSSにしてしまうのが実装まで通す近道です。理由は3つあります。

1. 実ブラウザで見られる（スマホ幅でどう崩れるかがその場で分かる）
2. そのまま実装の起点になる（作り直しではなく継続作業になる）
3. クライアント確認用にURLで公開できる（検索避けの設定を入れた仮ページで見せられる）

前述のコーポレートサイト案件では、当初は画面生成系のAIツールを使おうとしました。ところが生成が毎回タイムアウトしてプレビューが取得できず、実務では使えない状態でした。AIツールが不調で止まったときにHTML/CSSを直接書く方法へ切り替えられるかどうかは、納期を守れるかどうかに直結します。 結果的に、方向性の異なる3案をHTMLで組んで提示しました。

• 案A：タイポグラフィ主体・中央グリッド（装飾なし・実装コスト最軽量）
• 案B：整然としたグリッド＋実績数値の帯（実務会社としての実在感重視）
• 案C：非対称レイアウト＋抽象的なラインアート（世界観を保ちたい場合の保険）

3案は「クオリティの高低」ではなく「方向性の違い」で分けるのがコツです。似た3案を出すと選べません。選ばれた案をそのままスタイル定義に落とし込めるので、選定から実装再開までのロスもほぼゼロになります。

5. ステップ3：確定したデザインは「数値」で実装に渡す

ここが最も差が出る工程です。

デザインデータ（Figmaなど）がある場合、実装は「デザインを眺めて似せる」のではなく、デザインの実データを使い切る形で組むのが正解です。具体的には、デザインツールから書き出した原寸画像と、各要素の正確な座標・色・フォント指定をAPIやJSONで取り出し、その数値どおりに配置します。ある小児科クリニックのサイト制作では、この方式で全18ページを実装し、元デザインとの画素差分0.0〜1%台の再現度まで詰めました。

逆に、画面を見比べながら「それっぽく」コードに起こす進め方は、実データを使っていないぶん配色も余白も少しずつズレます。一つひとつは小さなズレでも、全体では「似ているが別物」になり、作り直しになるリスクがあります。

同じ工程で、実務上こういう詰まり方が起こります。先に知っておくと避けられます。

• 色を目視で決めない。 「たぶんこのオレンジ」で拾うと、微妙に違う色が量産される。原本画像からピクセル単位で実測して確定させる
• 文字の幅を実測値のまま固定しない。 ブラウザのレンダリング差で1文字だけ次の行に落ちることがある。幅は自動にして、折り返し位置は明示的に制御する
• 丸い素材は外周まで測ってから切り出す。 内側だけ切ると外周のリングや影が落ち、PCとスマホで見た目が変わってしまう
• 検証は目視ではなく機械で行う。 ヘッドレスブラウザでスクリーンショットを撮り、元デザインと画素単位で比較すれば、人の目では気づけないズレが数値で出る

6. 実装まで通すための設計上のコツ

最後に、デザインと実装を並行させるための実務的な工夫を3つ挙げます。

構造とビジュアルを分離する。 ページの情報構造（見出し・項目・フォーム・投稿タイプ）とビジュアル（配色・装飾・アニメーション）を別々に組める設計にしておけば、デザインが確定する前に構造だけ先に完成させられます。実際、デザイン案の選定を待つ間に12ページ分の構造を組み上げ、確定後はスタイルを差し替えるだけで反映できる状態にした案件があります。デザイン確定待ちの期間がまるごと空き時間になるのを防げます。

ヘッダーとフッターは全ページ同一コードのコピーにする。 ページごとに作ると必ずズレが出て、後から「揃える作業」が発生します。変えていいのは現在地表示とページ固有のメタ情報だけです。下層ページを別の技術で作る場合でも、本体のヘッダー・フッターをCSSごと忠実に再現します。

文字を画像に焼き込まない。 サービス名や見出しを画像に含めてしまうと、文言をひとつ変えるだけでデザインツールに戻って画像を作り直す作業が発生します。文字はできる限りHTMLで出す。これは更新性だけでなく、検索エンジンにテキストとして読ませる意味でも効きます。

7. どこまでAIに任せるかの判断基準

工程	AIに任せてよいか	理由
方向性の言語化	補助のみ	決めるのは事業者。AIは整形役
案出し（複数案の作成）	任せてよい	人が選べる形（HTML）で出させる
最終的な採用判断	任せない	事業の意図が入る領域
数値どおりの実装	任せてよい	AIが最も得意な作業
公開前の検証	半分任せる	機械的な差分検証はAI、最終判断は人

まとめ

AIでWebデザインをするときの分岐点は、ツールの選択ではありません。「見た目を人が決めてからAIに渡すか、AIに決めさせてしまうか」です。

1. 配色・写真トーン・フォント・禁止事項を先に言語化して確定させる
2. 文字サイズと文字色のスケールを表で決め、CSS変数にしてから実装に入る
3. 案出しは画像ではなくHTMLモックで、方向性の異なる3案を出させる
4. 確定デザインは座標・色・サイズの数値で渡し、画素差分で検証する
5. 構造とビジュアルは分離し、ヘッダー・フッターは全ページ共通にする

この順番を守るだけで、AIを使ったサイト制作の手戻りは大きく減ります。逆に、いきなり「かっこいいデザインを作って」から始めた案件は、途中でやり直しが入りやすくなります。

自社サイトやサロンのホームページをAIを使って作り直したい、あるいは制作会社にどこまで任せるべきか判断したいという段階でしたら、まずはこの5項目のうちどれが決まっていないかを確認するところから始めてみてください。決まっていない項目を埋めるだけで、AIの出力の質ははっきり変わります。