「サイトやランディングページを作りたいけれど、どんな構成にすればいいか分からない」——デザインの前でつまずく人は多いものです。結論から言うと、いきなり見た目を作り込むより、AIと対話して「構成（ワイヤーフレーム）」を先に固めるのが失敗しない順番です。何を・どの順で・どう並べるかが決まってから、色や装飾に進みます。
<!-- FIGURE: 記事全体を表すアイキャッチ（対話でワイヤーフレーム→デザインツールで清書、の流れ） -->この記事では、ChatGPT や Claude などの生成AIを使って、WebサイトやLPの構成案とワイヤーフレームを作る手順を、そのまま使えるプロンプトと一緒に紹介します。専門知識がなくても、たたき台までは十分に作れます。
まず結論：AIは「構成」、デザインツールは「見た目」
作業を役割で分けると、迷いが減ります。
- 構成・文章・情報の並べ方：AIとの対話で決める
- ワイヤーフレーム（画面の骨組み）：AIに文字ベースで書き出させる
- 実際のデザイン・実装：デザインツールやコードで仕上げる
大事なのは、AIに「きれいな完成画像」を求めないことです。画像生成で作ったそれらしいデザイン画は、そのままでは使えず、文字も崩れがちです。AIの得意分野は、見た目そのものではなく「どんな要素を、どの順で置くか」という設計の部分です。
<!-- FIGURE: 「構成=AI」「ワイヤー=AI(文字)」「デザイン=ツール」の役割分担図 -->手順1：目的とターゲットを渡して構成案を出す
サイトの出来は、最初の「誰に・何のために」で大きく変わります。ここを具体的に渡すほど、ずれの少ない構成案になります。
あなたはWebディレクターです。ランディングページの構成案を作ってください。
- 目的：地域の小さなパン屋の予約注文を増やす
- ターゲット：近所に住む30〜40代の家族連れ
- 伝えたいこと：焼きたての時間、予約のしやすさ、素材へのこだわり
- ゴール（読者に取ってほしい行動）：予約フォームへの入力
上から順にセクションを並べた構成案を作り、各セクションに
「見出し案」「載せる要素」「その順番にした理由」を添えてください。
「その順番にした理由」を必ず聞くのがコツです。理由が分かれば、自分で順番を入れ替える判断ができます。理由の弱いセクションは、思い切って削る候補になります。
手順2：構成をワイヤーフレームに落とす
構成が固まったら、画面の骨組みに変換します。AIに文字だけのワイヤーフレームを書かせると、要素の配置がイメージしやすくなります。
先ほどの構成を、文字だけのワイヤーフレームにしてください。
- 上から順に、各ブロックを枠線のように表現する
- 各ブロックに「何を置くか（見出し/画像/ボタン等）」を明記する
- スマートフォンで見る前提で、縦一列の並びにする
- 押してほしいボタン（CTA）がどこに何回出るかも示す
文字ベースなら、その場で「この位置にボタンをもう1つ」「画像を上に」と手直しできます。骨組みが固まってから、実際の作図に進むと迷いません。
<!-- FIGURE: 文字ベースのワイヤーフレーム例（ヘッダー/ヒーロー/特徴/CTAの縦積み） -->手順3：デザインツールで清書する
ワイヤーフレームができたら、Figma や Canva などのデザインツールに移して見た目を整えます。このとき、UX（使い心地）の観点で、AIに最終チェックの相談をすると抜けを拾えます。
このワイヤーフレームについて、使いやすさの観点で気になる点を挙げてください。
- 押してほしいボタンは目立つ位置にあるか
- 情報が多すぎて迷わせていないか
- スマホで指が届きにくい配置になっていないか
改善案は「なぜそう直すか」もあわせて教えてください。
色数は絞るほど垢抜けます。メインの色を1つ、差し色を1つに決めてから広げると、まとまりやすくなります。
やってみて分かったこと（一次体験）
筆者が架空のパン屋のLP構成をこの手順で作ったときは、対話開始から文字ワイヤーフレーム完成まで20分ほどでした。役に立ったのは、「その順番にした理由」を出させたことです。当初はこだわりの素材を先頭に置くつもりでしたが、AIが「初めての訪問者はまず"何の店か・いつ焼けるか"を知りたい」と理由を添えてくれて、順番を入れ替えました。
一方で、AIが出す構成は"よくある型"に寄りがちでした。無難ではあるものの、その店ならではの魅力は、結局こちらが言葉にして足す必要があります。たたき台はAI、味付けは自分、という分担がしっくりきました。
使うときの注意点
- 完成デザインを画像生成で作らせない。文字が崩れ、実装にも使えません。AIは構成と文章まで、と割り切ります。
- 他人のサイトデザインをそのまま模倣しない。参考にするのはよくても、丸写しは避けます。
- 載せる情報の正しさは自分で確認する。営業時間・価格・連絡先などの事実は、AIの推測ではなく実際の情報に置き換えます。
本記事はアフィリエイトリンクを含みます（PR）。ワイヤーフレームやWebデザインの基礎をきちんと学びたい場合は、UdemyPR のような講座を、セール時期に探してみるのも一つの方法です。
まとめ
Webサイトやランディングページ作りでつまずくのは、たいてい「見た目から入ってしまう」からです。順番を変えて、AIとの対話で構成→文字のワイヤーフレーム→デザインツールで清書、と進めれば、専門知識がなくても筋の通ったたたき台が作れます。まずは「誰に・何のために」を一文で書いて、AIに構成案を頼むところから始めてみてください。