【デザイナー不要】ワイヤーフレームをAIで作成する方法

「参考にしたいサイトはあるけれど、どう自社向けに落とし込めばいいかわからない」

「ワイヤーフレームの作成にデザイナーの工数を取られて、企画が前に進まない」

私たちも日々のWeb制作の中で、こうした場面に何度も突き当たってきました。

Webページの制作では、企画段階で参考サイトを集め、その構成を自社の要件に合わせて組み替え、ワイヤーフレームに落とし込む工程が欠かせません。

しかし、参考サイトの構成を読み解いて整理し、さらに「パクり」にならないよう差別化しながらワイヤーフレームに仕上げるには、相応の時間と専門的な視点が必要です。

そこで今回は、生成AIに参考サイトを読み込ませて構成を分析させ、オリジナルのワイヤーフレームを作成したプロセスを、制作の流れに沿って紹介します。

デザインの専門知識がない方でも、企画のたたき台を短時間で用意できるようになります。

ワイヤーフレームのAI作成が最適な理由

そもそもワイヤーフレームとは、Webページの構成要素をどこに配置するかを示した設計図のことです。

色やデザインを作り込む前に、情報の並びや導線を固めるための土台にあたります。

結論から言うと、ワイヤーフレームのAI作成では、参考サイトの構成分析から差別化の設計、ワイヤーフレームの出力までを一気通貫で進められます。

その理由は、AIが参考サイトのURLを読み込んで、ページの構成を構造的に整理できるからです。

人間が一つひとつの要素を目視で書き出す代わりに、AIに「このサイトの構成を分析して」と指示するだけで、見出しの階層やセクションの並びを一覧化してくれます。

さらに、整理した構成をもとに「参考サイトと同じにならないように差別化して」と指示すれば、独自の切り口を論理的に提案させることも可能です。

構成案が固まれば、そのままワイヤーフレーム（SVGやHTML形式）として出力させ、Figmaなどの編集ツールに取り込む流れまでつなげられます。

実際に今回作成したワイヤーフレームの全体像が、以下です。

担当者紹介ページの「一覧ページ」と「詳細ページ」を、AIだけで土台までつくりました。

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

ここでは、ワイヤーフレーム作成にAIを活用する具体的なメリットを3つに整理して紹介します。

メリット① たたき台が短時間で用意できる

最大のメリットは、デザイナーが着手する前の「たたき台」を短時間で用意できる点です。

ゼロからワイヤーを起こすのではなく、AIが出力した構成を叩き台にすることで、議論のスタート地点を一気に前へ進められます。

メリット② 差別化ポイントを可視化できる

AIに参考サイトとの違いを表形式で出力させれば、「どこを、なぜ変えたのか」が一目でわかります。

これはクライアントや社内へ構成を説明する際の資料としてそのまま活用でき、合意形成がスムーズになります。

メリット③ 編集できる形式で出力できる

AIはワイヤーフレームをSVGやHTMLといった編集可能な形式で出力できます。

出力物をFigmaに取り込めば、テキストや図形が独立したレイヤーとして扱えるため、その後の調整作業もスムーズです。

実際にワイヤーフレームをAIで作成してみた

ここからは、参考サイトをもとにオリジナルのワイヤーフレームを作る具体的な手順を、5つのステップで紹介します。

今回は自社サイトの「担当者紹介ページ」を作る想定で進めます。

手順① 参考サイトのURLをAIに読み込ませて構成を分析する

まずは、参考にしたいサイトのURLをAIに渡し、ページの構成を分析してもらいます。

「このサイトの構成を要素ごとに整理して」と指示すると、ページタイトル・リード文・一覧部分・各カードの中身・CTAボタンといった具合に、構成要素を分解して一覧化してくれます。

一覧ページと詳細ページのように複数階層がある場合は、それぞれのURLを読み込ませると、ページごとの構成を個別に把握できます。

まずは、参考にしたいサイトのURLをAIに渡し、ページの構成を分析してもらいます。

「このサイトの構成を要素ごとに整理して」と指示すると、ページタイトル・リード文・一覧部分・各カードの中身・CTAボタンといった具合に、構成要素を分解して一覧化してくれます。

一覧ページと詳細ページのように複数階層がある場合は、それぞれのURLを読み込ませると、ページごとの構成を個別に把握できます。

手順② クライアントのイメージと掛け合わせて構成案を作る

次に、参考サイトの構成と、クライアントから共有されたイメージ（手描きのラフや要望メモなど）を掛け合わせ、自社向けの構成案を作らせます。

たとえば担当者紹介ページであれば、次のような2層構造で整理すると進めやすくなります。

• 一覧ページ：ページタイトル／リード文／担当者カード一覧（顔写真・名前・一言・属性タグ）／各カードのCTA
• 詳細ページ：メインビジュアル／プロフィール／自己紹介文／メッセージ／Q&A・動画／利用者の声／固定CTA

このように「一覧から詳細へ」という導線まで含めて構成を設計させることで、単なる要素の寄せ集めではなく、回遊を意識したページ設計に仕上がります。

手順③ 「パクりにならないように」と指示して差別化案を出す

参考サイトをそのまま真似てしまうと、独自性のないページになるだけでなく、権利面のリスクも生じます。

そこで「参考サイトのパクりにならないように差別化して」と明確に指示し、違いを表形式で出力させます。

実際に出力させた差別化のイメージが、以下の表です。

このように違いを言語化させておくと、なぜその構成にしたのかを根拠を持って説明できます。

最終的に問題がないかは人の目で判断する前提で、AIを差別化の発想出しに使うのが効果的です。

手順④ 構成案をもとにワイヤーフレームを出力させる

構成案が固まったら、それをもとにワイヤーフレームを出力させます。

「この構成をワイヤーフレームとして、編集できる形式で出力して」と指示すると、SVGやHTML形式でレイアウト案を生成してくれます。

一覧ページと詳細ページをそれぞれ出力させれば、ページ間のつながりも含めて全体像を確認できます。

まずはブラウザ上でプレビューし、要素の過不足をチェックしましょう。

実際に出力されたワイヤーフレームが、以下です。

手順③で言語化した差別化案（一覧の絞り込みフィルタ、Q&A・動画、他の担当者への横断ナビ、下部のスティッキーCTAなど）が、そのままレイアウトに反映されているのがわかります。

手順⑤ 出力をFigmaに取り込んで編集する

最後に、出力したワイヤーフレームをFigmaに取り込みます。

Figmaにはデザインを補助するFigma AIの機能もありますが、今回はAIが出力したSVGを取り込む方法を紹介します。

ブラウザ版のFigmaでも、SVGをコピーしてキャンバス上に貼り付ければ取り込めます。

貼り付けると、テキストや図形・ボタンがそれぞれ独立したレイヤーになるため、そのまま位置やサイズを調整できます。

実際にFigmaへ取り込んだ様子が、以下です。

左のレイヤーパネルを見ると、カード内の「Avatar（顔写真）」「Name（名前）」「Tag（属性タグ）」「CTA Button」が一つずつ独立したレイヤーとして並んでいます。

選択した「Name」テキストは、右のパネルから位置・サイズ・文言・色を直接編集できます。

ワイヤーフレームをAIで作成する際のよくある質問

Q. Figmaのデスクトップアプリは必須ですか？

必須ではありません。

ブラウザ版のFigmaでも、AIが出力したSVGをコピーしてキャンバスに貼り付ければ取り込めます。

ただし、プラグインを使った自動の書き込みなど一部の機能はデスクトップアプリが必要になるため、用途に応じて使い分けるとよいでしょう。

Q. 出力されたワイヤーフレームは本当に編集できますか？

はい、編集できます。

SVG形式で出力したものをFigmaに貼り付けると、テキスト・図形・ボタンがそれぞれ独立したレイヤーとして扱われます。

後から要素を動かしたり、文言を差し替えたりすることが可能です。

Q. 参考サイトの「パクり」にならないか心配です。

「参考サイトと同じにならないように差別化して」と明確に指示することで、独自の構成を提案させられます。

とはいえ最終的に類似していないかは人の目で確認することが重要です。

AIはあくまで差別化の発想を出す補助役と捉え、判断は制作者が行いましょう。

Q. ワイヤーフレーム以外のAIツールでも代用できますか？

構成の分析や設計図の作成であれば、URLの読み込みやファイル出力に対応した生成AIであれば対応できます。

専用のワイヤーフレーム作成ツールと組み合わせれば、さらに効率的に進められます。

まとめ

今回は、生成AIを使ってワイヤーフレームを作成する方法を解説しました。

参考サイトの構成分析から差別化の設計、ワイヤーフレームの出力、Figmaへの取り込みまでをAIで進めれば、企画段階の工数を大幅に削減できます。

デザイナーが着手する前のたたき台が短時間で用意でき、クライアントへの説明資料にもそのまま活用できます。

まずは、手元にある参考サイトのURLをAIに読み込ませて構成を分析させるところから始めてみてください。

AIで土台を素早く作り、仕上げは人が担う。

この組み合わせが、これからのWeb制作のスタンダードになっていくはずです。