ワイヤーフレームの作成は、サイトやLPの制作で最初に来る工程です。そして、想像以上に時間を取られる工程でもあります。
当社も以前はデザインツールで作っていました。1本あたり3〜5時間。レイアウトを組み、要素を並べ、文言を入れる。作業自体は難しくありませんが、とにかく時間が溶けます。しかもワイヤーフレームは最終成果物ではなく、関係者と認識を合わせるための途中の道具です。そこに半日かけるのは、どう考えても割に合いませんでした。
今は、この工程をAIに任せています。この記事では、実際に案件で使っている2つの作り方とその使い分け、そして作ったあとにどう合意まで持っていくかを書きます。ツールの紹介記事ではなく、当社が実務で回している手順そのものです。
ワイヤーフレームをAIで作る2つの方法
まず結論です。作り方は2つあり、新規に作るのか、既存ページを直すのかで使い分けます。
| 作り方①：HTMLで組ませる | 作り方②：実ページに差し込む | |
|---|---|---|
| 向いている場面 | 新規のLP・サイトをゼロから設計する | 今あるページの一部を改修する |
| 見た目 | グレー基調のワイヤーフレーム | 既存サイトのデザインそのまま |
| 強み | 制約がなく、構成を自由に作り込める | 「実装したらこう見える」がそのまま分かる |
| 渡し方 | HTMLファイルをブラウザで開いてもらう | 画像（スクリーンショット）で見せる |
この2つは競合しません。目的が違います。 ゼロから構成を考える場面では、既存デザインという制約がないほうが議論しやすい。逆に既存ページの改修では、周囲のデザインと馴染むかどうかが論点そのものなので、実物に差し込まないと判断できません。
作り方①：文章で書いて、AIにHTMLで組ませる
新規のLPやサイトを設計するときの作り方です。手順は拍子抜けするほど単純です。
- 構成を文章で書く — 「ファーストビューにこの訴求、次に課題提起、その次に3つの強みを横並び」といったレベルで構いません。箇条書きで十分です
- AIに渡して「HTMLで組んで」と伝える — これだけで、ブラウザで開ける形のワイヤーフレームが出てきます
- 見ながら直す — 「この要素をもっと上に」「ここは2カラムに」と会話で修正します
最初の一歩としては、これだけで十分です。 文章で書いたワイヤーフレームをそのまま渡して「HTMLで組んで」と言うだけで、そこそこのものが出てきます。デザインツールの操作を覚える必要も、テンプレートを選ぶ必要もありません。
グレー基調で作るのがコツです。色や画像を入れ込むと、構成の議論をしているのに「この色はちょっと」という話が始まってしまいます。ワイヤーフレームの段階で決めたいのは並び順と情報量なので、見た目の情報はあえて削ぎ落とします。
HTMLで作る利点は、関係者が全員そのまま見られることです。デザインツールのアカウントを持っていない人にもファイルを渡せますし、スマートフォンでの見え方もその場で確認できます。そして後工程では、そのHTMLが実装の出発点になります。
作り方②：既存ページに差し込んでモックアップを作る
既存ページの改修を提案するときの作り方です。こちらは少し特殊なので、詳しく書きます。
やることは、ブラウザで対象ページを開き、提案する要素をページの中に直接差し込んで、その状態でスクリーンショットを撮ることです。ページを作り直すわけではありません。今あるページに、提案分だけを足した状態を作って撮影します。
この方法の価値は一点に尽きます。フォント・配色・余白・見出しの様式が、既存サイトと完全に一致することです。作り直したモックは、どれだけ丁寧に作っても必ずどこかがズレます。そして実装段階で「イメージと違う」が起こります。実物に差し込んでいれば、そのズレが原理的に発生しません。
実際にやるときのポイントを挙げます。
- 差し込む場所の兄弟要素と、同じ書き方を踏襲する — 既存ページの構造を先に調べ、隣接する要素と同じ形で作ります。これをやると馴染み方が段違いになります
- 新しく足すCSSには独自の接頭辞をつける — 既存のスタイルと干渉させないためです
- 撮影前に、画面に固定されている要素を消す — 追従ヘッダーなどをそのままにすると、ページの途中に写り込みます。当社も一度これで撮り直しました
- 2枚撮る — 提案部分だけを写した単体の画像と、前後との位置関係が分かる画像。この2枚があると、議論が「その要素自体の是非」と「置き場所の是非」に分かれて進みます
AIで作るなら画像生成よりHTMLが向く理由
「AIでワイヤーフレーム」と聞くと、画像を生成する方法を思い浮かべるかもしれません。当社はその方法を採っていません。最大の理由は、正確に直せないことです。
ワイヤーフレームは一発で決まりません。見せて、意見をもらい、直す。これを何度か繰り返す前提の道具です。つまり、作る速さより直す精度のほうが重要になります。
ここで画像生成は不利です。「この見出しの文言だけ変えたい」と依頼しても、画像は毎回作り直されるため、指示していない部分まで一緒に変わってしまいます。要素の位置がずれる、直前まで合意していた並びが崩れる、といったことが起こる。1箇所直すたびに全体を確認し直すことになり、修正を重ねるほど収束しなくなります。
HTMLで組んでおけば、この問題が消えます。「この見出しを」「この3つ並んでいるブロックの2番目を」と要素を特定して直せるので、変更が指定した箇所だけに収まります。触っていない部分は前のままである、と保証されている状態で議論を進められます。
副次的な理由も3つあります。
- 日本語が崩れない — 画像生成モデルは日本語の文字を正確に描けないことが多く、文言そのものが議論の対象になるワイヤーフレームでは支障になります
- 既存のデザインを再現できる — 改修提案では既存サイトのフォントや余白の再現が要りますが、生成画像でそれを狙うのは現実的ではありません
- そのまま次の工程に渡せる — 「この見た目にしてください」と画像を渡すより、構造を持ったものを渡すほうが早く、認識のズレも起きにくい。ワイヤーフレームを作る作業が、そのまま実装の準備を兼ねます
作ったワイヤーフレームを、どう共有して合意まで持っていくか
ワイヤーフレームは作って終わりではありません。見てもらい、意見をもらい、直して、合意する。ここまでが本番です。
そしてHTMLで作っていると、この工程にも仕掛けを足せます。当社はワイヤーフレームの隣にコメント欄を並べた画面を用意し、セクションごとに意見を書き込んでもらう形にしています。スクリーンショットを資料に貼り付けて、別のファイルでコメントをもらう、という往復が必要なくなります。
これは、やってみて分かった副産物でした。AIに任せると速いだけでなく、細かい仕掛けを足す手間もほとんどかからないのです。「ここにコメント欄をつけて」と言えば付く。従来なら「あったら便利だが、そこまで工数をかけられない」と諦めていた類のものが、気軽に作れるようになりました。
依頼に対して思っていた以上に忠実に出てくる、というのも実感です。細かく指示すれば、その通りのものが返ってきます。
AIでワイヤーフレームを作って変わったこと
一番大きかったのは、時間ではなく議論の進み方でした。
文字だけで構成を説明していた頃は、認識が合っているかどうかが最後まで分かりませんでした。ビジュアルがあると、その場で「ここは違う」「これは良い」と反応が返ってきます。議論が明らかに前に進むようになりました。
その結果として、制作段階での手戻りが減りました。作り始めてから「思っていたのと違う」が出るのが、制作でもっとも高くつくパターンです。ワイヤーフレームの段階でビジュアルを合わせておけば、そこで潰せます。作業時間が短くなったこと以上に、この効果のほうが大きいと感じています。
AIで作るワイヤーフレームの限界
正直に書きます。この作り方で、優れたデザインが出てくるわけではありません。
意匠として際立ったものを作るとか、細かいニュアンスを詰めるといった領域は、今のところ人の仕事です。余白の微妙な取り方、書体の選び方、写真の雰囲気。そうしたものは、この方法では出てきません。
ただし、ワイヤーフレームの段階でそこまでの再現度は必要ありません。この工程で決めたいのは、何をどの順番でどれだけの分量で置くか、です。意匠の作り込みはその後の話で、そこは引き続き人が担えばいい。工程を分けて考えれば、割り切れます。
逆に言えば、表現そのものが勝負になるサイトでは、この方法だけで進めるべきではありません。デザインを専門とする方に依頼したほうが、期待に沿う結果になります。
よくある質問
Q. デザインツールを使えなくても作れますか。 A. 作れます。作り方①は、構成を文章で書いてAIに渡すところから始まります。ツールの操作を覚える必要はありません。出てきたHTMLはブラウザで開くだけで見られます。
Q. 出てきたものをそのまま公開できますか。 A. ワイヤーフレームは認識合わせのための道具なので、そのまま公開する前提では作りません。ただし作り方①で作ったHTMLは、実装の出発点として使えます。作った資産が捨てられない、というのは利点のひとつです。
Q. 既存サイトに要素を差し込む方法は、サイトに影響しませんか。 A. ありません。自分のブラウザ上で表示を一時的に変えて撮影しているだけで、公開されているサイトそのものには一切手を加えていません。
Q. どちらの方法から試すべきですか。 A. 作り方①です。構成を文章で書いてAIに渡し、HTMLで組んでもらう。ここが一番手軽で、効果も分かりやすい工程です。既存ページへの差し込みは、実際に改修提案の場面が来てからで構いません。
まとめ：まずは構成をAIに渡すところから
ワイヤーフレームをAIで作る方法は2つあり、新規ならHTMLで組ませる、既存改修なら実ページに差し込む、という使い分けになります。どちらも、デザインツールを操作する時間をほぼ丸ごと省けます。
ただ、本当の価値は時間の短縮ではないと考えています。作るのが速くて手軽になると、見せる回数を増やせます。 早い段階でビジュアルを見せられるので、議論が具体的になり、制作に入ってからの手戻りが減る。半日かかる作業だった頃には、そもそも「とりあえず作って見せてみる」ができませんでした。
まず試すなら、手元にある構成案をそのままAIに渡して「HTMLで組んで」と言ってみてください。それだけで、想像より使えるものが出てきます。
当社では、LP・サイトの制作と改善を、この進め方で担当しています。マーケティングの視点で構成を設計し、公開したあとの更新運用まで含めてお引き受けします。ご相談はお問い合わせから承ります。