なぜワイヤー設計は時間がかかるのか

ワイヤーフレーム制作が難航する最大の原因は、「考えること」と「描くこと」を同時にやろうとしているからです。
具体的には、以下のような状態がボトルネックになっています。

• 要件（誰に何を伝えるか）が曖昧なまま、いきなりコンポーネントを配置している

• 情報の優先順位付けと、レイアウト設計を並行して行っている

• ページ全体のストーリーが見えない状態で、部分的なパーツから作り始めている

Figmaは「形にする」ためのツールであり、思考を整理するための場所ではありません。ここをChatGPTに任せて「思考の外部化」を行うことで、ワイヤー設計の負担は一気に軽くなります。

AIワイヤー設計の基本フロー

AIとFigmaの役割を明確に分けることで、迷いのない設計が可能になります。

Step1：要件を言語化する（ChatGPT）

まずは、頭の中にある情報をすべてAIに渡して整理させます。目的、ターゲット、必須コンテンツ、制約条件などを箇条書きで投げ、AIに「今回のプロジェクトで最も重要なポイント」を再定義させます。

Step2：ページ構成案を作る（ChatGPT）

次に、必要なページ一覧とその役割、コンテンツの優先順位を整理させます。この段階ではまだUIのことは考えず、「情報の重要度（ヒエラルキー）」を固めることに専念します。

Step3：セクション単位の構成要素を出す（ChatGPT）

トップページであれば、「ファーストビュー」「課題提示」「解決策」「導入実績」「CTA」といった、“ブロック単位”で必要な要素を洗い出します。

Step4：Figmaに転記して可視化する

AIが書き出した「文字情報」を、Figma上で「図解」していきます。AIが「構造設計」を担い、人間がそれを「可視化」する。この分業により、デザイン作業の解像度が劇的に上がります。

ChatGPTの出力をFigmaに転記する3つのコツ

AIの回答をそのまま画面に反映しようとすると、情報過多で使いにくいUIになりがちです。ここでは、AIの言葉をUIへと「翻訳」するテクニックを紹介します。

1. 文章を「UIブロック」に分解する AIが「ユーザーの課題を提示して解決策を提案する」と出力したら、Figma上では「課題見出し」「課題説明テキスト」「サービス紹介画像・テキスト」という3つのパーツに分解して配置します。

2. 情報量は「3割減らす」前提で AIは丁寧に説明しようとしてテキストを盛りすぎる傾向があります。Figmaへ持っていく際は、「最も伝えたい一言」だけを残し、補足説明は後回しにする勇気を持ちましょう。

3. 最初は「グレーBOX」だけで組む いきなり色や写真を入れない。四角形とプレースホルダー（仮テキスト）だけで構成を作ります。この段階では「綺麗さ」ではなく「情報の流れが自然か」を確認することが重要です。

UI発想支援プロンプト例

実務ですぐに使える、思考を加速させるためのプロンプトセットです。

▼要件をページ構成に落とし込むとき

▼セクション構成を練るとき

▼UXの視点を増やしたいとき

実務での活用例

実例①：採用サイト設計

採用サイトは「とりあえず福利厚生と募集要項」という画一的な内容になりがちです。ここでAIに「求職者が応募前に抱く不安」を分析させると、「働き方の柔軟性」「将来のキャリアパス」「職場のリアルな人間関係」といった要素の重要性が見えてきます。これらをワイヤーの目立つ位置に配置することで、共感を生む構成が可能になります。

実例②：サービスLP設計

「機能説明」ばかりになりがちなLPも、AIを使って「ユーザーの心理ステップ（認知→興味→比較→決断）」を整理することで、各セクションで伝えるべき情報の順番が明確になります。なぜそのボタンがそこにあるのか、論理的に説明できるワイヤーが作れます。

まとめ：AIが「考える土台」を作る時代へ

ChatGPTとFigmaの組み合わせは、デザインを自動化する魔法ではありません。「要件を整理し、構造を作り、発想の幅を広げる」ための協力なタッグです。
AIが「考える土台」を素早く作り、人間が「価値判断と表現」を担う。この役割分担ができるようになると、ワイヤー設計はより速く、そしてより本質的に深くなっていくはずです。

執筆：渡辺彩
編集：blue広報チーム