ChatGPT・ClaudeでHTMLを作るときのコツ！ワイヤーフレームをうまく使ってみよう【現役エンジニア監修】

ChatGPT・ClaudeでHTMLを作るときのコツ！ワイヤーフレームをうまく使ってみよう【現役エンジニア監修】

「ChatGPTやClaudeにHTML/CSSを作ってもらったら、なんだかAIっぽいデザインにしかならない…」

「意図したレイアウトと全然違うコードが出力されて、修正に余計な時間がかかる…」

生成AIを使ってWebページを作成しようとして、このような違和感を覚えたことはありませんか？

実は、生成AIに一発で綺麗なWebサイトを作らせようとするのは間違いです。現役エンジニアが実践しているコツは、「ワイヤーフレーム（画面の骨組み）」を生成AIに作らせてから段階的に実装すること。

この記事では、生成AIでワイヤーフレームを作るメリットと、最小限の手間でクオリティの高いHTMLを出力させる実践テクニックを解説します。

なぜ生成AIが作るHTMLは「AIっぽい」デザインになるのか？

結論から言うと、生成AIに「構造（HTML）」と「デザイン（CSS）」を同時に考えさせているからです。

AIに対して「かっこいいカフェのランディングページをHTML/CSSで作って」と指示すると、AIの頭の中では以下のような処理が同時に走ります。

• どんなセクションが必要か？（構造）
• どんな見出しや文章にするか？（コンテンツ）
• 何色にして、どんなフォントや余白にするか？（デザイン）

人間のデザイナーでもこれらを一瞬で同時にこなすのは困難です。AIも同様に、デザインの装飾にリソースを奪われ、レイアウトが崩れたり、AIが好みがちな紫や青のグラデーション・ネオン調の配色に寄ってしまったりします（いわゆる“AIっぽい”デザイン）。

この問題を解決するのが、構造とデザインを切り離す「ワイヤーフレーム手法」です。

生成AIでワイヤーフレームを作る4つのメリット

HTMLを書かせる前段階として、生成AIにワイヤーフレーム（画面構造の可視化）を作らせることには大きなメリットがあります。

1. 少ない情報量で設計に集中できる

装飾や細かいCSSプロパティを排除し、「どこに何を配置するか」というレイアウト構造だけに思考を集中させることができます。人間側もAI側も設計のズレにすぐ気づけます。

2. 出力トークンが劇的に少ない

HTML/CSSのフルコードを出力させると数千トークンを消費しますが、テキストベースのワイヤーフレームならわずか数百トークンで済みます。

3. レスポンスがとにかく早い

トークン量が少ないため、AIからの返答が数秒で返ってきます。試行錯誤（試行錯誤のループ）を高速で回せるため、開発全体のスピードが跳ね上がります。

4. 軽量・高速モデルでも高品質に動く

ワイヤーフレーム作成は、GPT-5.6 Lunaのような高速・低コストのモデルで十分に進められます。画面の目的、必要なセクション、優先順位を具体的に渡せば、実装の土台になる精度で構造を整理できます。出力が曖昧なときだけTerraやSolのような上位モデルに切り替えると、速度とコストを両立しやすくなります。

「小さいところから大きくの法則」で進めよう

Web開発やプログラミングにおける生成AI活用の鉄則は、「最小の情報量と最小のモデルで始め、段階的に大きくする」ことです。

最初から完成形を求めず、骨組み、トンマナ、実装の順で肉付けしていくことで、AIの迷走を防ぎます。レイアウトと見た目のルールを別々に確定させるため、結果的に修正が少なくなります。具体的な流れは、次の実践ステップで確認してください。

実際にどうやってやる？実践ステップ

実装を急がず、まず画面の構造を決め、その次に見た目のルールであるトンマナを固めます。HTMLとCSSは、この2つの設計を入力として作るものです。

ここでは、最初の設計とトンマナの決め方を説明します。HTMLやCSSに進む前に、Step 1〜3を確定させるのがポイントです。

Step 1: テキストでワイヤーフレームを作成する

まずはチャット画面で、ワイヤーフレームを出力させるプロンプトの「型（テンプレート）」を試行錯誤してみましょう。

おすすめのプロンプト例：

あなたはUI/UXデザイナーです。

これから作成するWebページの「ワイヤーフレーム」を線と文字だけで出力してください。



【制約事項】

・CSSや装飾の提案は一切不要です。

・画面のレイアウト構造と構成要素だけを視覚的に可視化してください。

・ヘッダー、メイン（各セクション）、フッターの役割を明確にしてください。

こういった形で可視化されたワイヤーフレームを見て、「3カラムじゃなくて2カラムにしよう」「Heroセクションの上に告知バナーを入れよう」といった調整をテキストで指示します。

Step 2: レイアウトを確認・修正する

ワイヤーフレームを出したら、見た目の話に進む前に構造を確認します。ここで直すのは、セクションの順番、情報の優先順位、PCとモバイルでの並び方です。

• 最初の画面で、誰に何を伝えるかが分かるか
• 各セクションが、次に読んでほしい内容へ自然につながるか
• 重要な操作やCTAが、情報に埋もれていないか
• モバイルで1カラムになったときも、理解しやすい順序か

修正は「ヒーローの直後に導入事例を置く」「料金表より先に機能を説明する」のように、配置の変更として指示します。この段階で合意できれば、後からHTMLの構造を大きく直す手間を減らせます。

Step 3: ワイヤーフレームの次にトンマナを設計する

ワイヤーフレームで「何をどこに置くか」が決まったら、HTMLやCSSを書く前にトンマナを決めます。ここでいうトンマナは、サイトや画面全体で守る見た目のルールです。

• 想定する利用者と、与えたい印象（信頼感、親しみやすさ、先進性など）
• ベースカラー、アクセントカラー、背景色
• 見出し・本文の書体と、文字サイズの強弱
• 余白、角丸、罫線、影の使い方
• ボタンやカードなど、繰り返し使うUIの形

たとえば「BtoBの管理画面。落ち着いた青を基調に、情報密度は高めだが窮屈に見せない。角丸と影は控えめ」のように、短いデザイン方針としてAIに渡します。色名や雰囲気だけで終わらせず、避けたい表現も指定するのが重要です。これでHTMLとCSSの生成時に、派手なグラデーションや画面ごとに異なるUIが混ざりにくくなります。

Step 4: 構造に沿ったセマンティックなHTMLを生成する

構造とトンマナが確定したら、ワイヤーフレームをそのままHTMLの意味づけに変換します。header、main、section、nav、footerなどを使い、見た目のためだけのdivを増やしすぎないように指示します。

AIには、確定したワイヤーフレームとトンマナに加え、「見出しはh1から順に使う」「ボタンはbutton、ページ遷移はaを使う」といった制約を渡します。これで、CSSを当てる前から読みやすく保守しやすい骨組みになります。

Step 5: CSS / Tailwindで実装する

最後に、決めたトンマナをCSSまたはTailwindへ落とし込みます。最初から装飾を盛り込むのではなく、レイアウト、文字、色、細部の順で実装するのが安全です。

• GridやFlexboxでレイアウトを整える
• 書体、文字サイズ、余白をトンマナに合わせる
• 色、角丸、罫線、影を共通ルールとして適用する
• ホバー、アニメーション、レスポンシブの細部を追加する

複雑なレスポンシブ対応や既存UIとの整合が必要な箇所だけ、TerraやSolのような上位モデルへ切り替えます。小さく確認しながら進める方が、完成後の手戻りを抑えられます。

補足：型が固まったらスキル化すると楽になる

ワイヤーフレームとトンマナの作り方にしっくりくる型ができたら、それを「スキル化」しておくと、次回以降の設計が楽になります。これは画面を作る工程ではなく、同じ品質で素早く始めるための準備です。

• ChatGPTの場合: Custom GPTs や Custom Instructions に登録する
• Claudeの場合: Projects の System Prompt に保存する
• その他: 単語登録やメモ帳にプロンプトテンプレートとして保存しておく

毎回長々と指示を書かなくても、「〇〇のランディングページのワイヤーを作って」と一言頼むだけで、設計をすぐ始められる環境を整えます。

失敗しないための2つのコツ

コツ1：線と文字だけで設計させる

AIに「HTML形式でワイヤーを作って」と頼むと、余計な<div>タグやインラインスタイルを書き始めてしまいます。「アスキーアート（文字の組み合わせ）」や「Markdownの箇条書き」に限定することで、純粋なレイアウト設計に集中させましょう。

コツ2：最初はCSSを凝らせない

ワイヤーフレームが確定し、HTML化する段階になっても、最初は「FlexboxやGridを使った骨組みのレイアウトCSS」にとどめます。色、シャドウ、アニメーション、グラデーションなどの装飾系CSSは一番最後に追加するのが、AIの出力をブレさせないコツです。

まとめ：構造と装飾を分けるのがAI開発の近道！

生成AIを使ったHTML作成で「AIっぽくなる」「意図通りにならない」と悩んだら、ぜひワイヤーフレームからのアプローチを試してみてください。

• まずは線と文字だけでワイヤーフレーム化（可視化）する
• 次に色・書体・余白・UIのルールとしてトンマナを設計する
• 構造とトンマナが確定してからHTML/CSSに起こす

この「小さいところから大きくする」フローを意識するだけで、AIの出力精度は劇的に向上し、トークンコストも削減できます。自分の開発スタイルに合わせた「プロンプトのスキル化」を進めて、快適なAI駆動開発を手に入れましょう！