認識不和を解消する「ワイヤーフレーム×生成AI」～デザイナーのための新時代ワークフロ～

はじめに

クライアントやディレクターと綿密な打ち合わせを重ね、方向性を合意したはずなのに、初校提出時に「イメージと違う」と覆されてしまう。「もっと明るく」「ワクワクする感じで」といった抽象的なフィードバックを前に正解が見えず、パターン出しに疲弊していく。

クリエイティブの現場において、こうしたコミュニケーションエラーによる実制作後の手戻りは、プロジェクトの遅延やコスト増大に直結する深刻な課題です。

本コラムでは、この「実制作後の手戻り」を根本から防ぐため、ワイヤーフレームと生成AIを組み合わせた実践的なアプローチをご紹介します。

初期段階でステークホルダー間の認識不和を解消し、デザイナーが本来のクリエイティブに集中できるワークフローの構築を目指します。

なぜ「合意したはず」のデザインが覆るのか

「スタイリッシュに」「信頼感を打ち出して」。事前の打ち合わせで頻出するキーワードですが、言葉が持つイメージは個人の経験や背景によって千差万別です。デザイナーが「余白を活かしたミニマルなデザイン」を想定していても、クライアントは「リッチでエフェクトの効いたグラフィック」を思い描いているかもしれません。
この「言葉の解釈のズレ」を視覚化しないまま、PhotoshopやIllustratorでの緻密な実作業に入ってしまうこと。これが、いざ形になった瞬間に「思っていたものと違う」という悲劇を招く最大の要因です。従来のワークフローには、このズレを早期に発見し、修正する仕組みが不足していました。

ワイヤーフレームを「下絵」にし、ビジュアルをAIに翻訳させる

これまでイメージのすり合わせといえば、既存の参考サイトを集め、「レイアウトはA案、配色はB案のイメージで…」とクライアントの脳内で合成してもらうのが一般的でした。しかし、これはクライアントにとって負担が大きく、意図が正確に伝わらないリスクも伴います。
そこで有効なのが、情報設計の基盤であるワイヤーフレームを「下絵」とし、生成AIの画像参照機能（Image-to-Imageなど）を組み合わせる手法です。
テキストの指示だけでAIにデザインを生成させると、レイアウトが破綻しがちです。しかし、デザイナーが作成したワイヤーフレームを「骨組み」として読み込ませることで、実際の構成を保ったまま「スタイリッシュ」「親しみやすい」といった様々なテイストへの「肉付け」が瞬時に可能になります。抽象的な言葉を、具体的なビジュアルへ素早く翻訳するのです。

認識不和を解消する「AIモックアップ提示」の3ステップ

この新しいワークフローは、具体的に以下の3ステップで進めます。

ステップ①：ワイヤーフレームで「情報設計」を確定させる

まずは通常通り、ターゲットや目的に合わせて要素の配置や導線を整理したワイヤーフレームを作成します。

この段階では見た目のデザインには踏み込まず、情報の構造と機能のみをクライアントと合意します。この精緻な骨組みこそが、後のAI生成のクオリティを左右する重要な基盤となります。

ステップ②：生成AIを使って「複数パターンの肉付け」を行う

合意したワイヤーフレームを生成AIツール（Stable Diffusion、Midjourneyなど）に読み込ませます。

ヒアリング時のキーワード（例：「先進的・ブルー系」「温かみ・暖色系」など）をプロンプトに入力し、ワイヤーフレームの構造を維持したまま、トーン＆マナーの異なるビジュアルラフを複数パターン生成します。

ステップ③：高解像度なラフで合意形成し、「認識不和」をなくす

ここで生成したA・Bのビジュアルモックアップをクライアントに提示し、「A案（静的で先進的）とB案（温かみがあり親しみやすい）、どちらの方向性が今回のターゲットに刺さるでしょうか？」と問いかけます。

クライアントは「打ち合わせでは『先進的』と言ったけれど、実際のビジュアルを見比べると、B案の方が今回のサービスには合っているね」と、自身の潜在的なニーズに気づくことができます。

言葉だけのやり取りでは絶対に埋まらなかった「スタイリッシュと言っていたが、実際に見るともう少し柔らかい方がいい」といった好みのズレ（＝認識不和）を、実制作の前に完全に解消できるのです。

【実践例：同じワイヤーフレームから異なるトーンを生成する】

たとえば、BtoB向けのクラウドツールのランディングページ（LP）を制作するとします。デザイナーは「左にキャッチコピー、右にメインビジュアル、下に3つの特徴」というシンプルなワイヤーフレーム（線画）を作成し、クライアントと構成を合意しました。

次に、このワイヤーフレームを生成AIに読み込ませ、意図的にテイストを分けたプロンプトを入力します。

パターンA：クライアントの言葉通り「信頼感・先進的」を表現した場合の例

UI/UX design, B2B SaaS landing page, hero section, corporate blue and white color palette, clean and minimal, abstract geometric 3D objects, futuristic, highly detailed, 8k --ar 16:9 （ワイヤーフレームのレイアウトを維持したまま、青と白を基調としたクリーンで幾何学的なデザインを生成）

パターンB：ターゲット層に合わせて「親しみやすさ」を提案した場合入力したプロンプト（指示）の例

UI/UX design, B2B SaaS landing page, hero section, warm pastel color palette, orange and yellow tones, soft 3d character illustration, friendly, approachable, highly detailed, 8k --ar 16:9（ワイヤーフレームのレイアウトは同じまま、暖色系で丸みを帯びた、柔らかい3Dイラストを用いたデザインを生成）

AIを「合意形成のツール」とし、本来の仕事に注力する

制作終盤での大規模な修正は、デザイナーのスキル不足ではなく、「完成形に対する共通認識の欠如」に起因することが大半です。
ワイヤーフレームと生成AIの掛け合わせは、クリエイターの仕事を奪うものではなく、関係者間のデザイン解像度を一気に引き上げる「強力な合意形成ツール」として機能します。
このAIモックアップを用いたすり合わせを挟むだけで、その後に発生し得る膨大な修正工数は未然に防げます。
※AI生成物をそのまま商用利用するには著作権等の確認が必要ですが、あくまで「内部の方向性確認用ラフ」と割り切って活用することで、法的リスクを抑えつつプロセスの恩恵を最大限に受けることができます。

まとめ

AIによって浮いた時間と精神的リソースをどこへ向けるか。
それは、ピクセル単位の美しいあしらい、ユーザー体験を深く追求したUI/UX設計、あるいはブランドの核となるコンセプトメイキングといった、より本質的なクリエイティブワークです。
「言った・言わない」の不毛な手戻りをなくし、デザイナーが真に価値ある仕事に集中する。それこそが、これからの制作現場に求められるスマートなAI活用法と言えるでしょう。