UXってなんだろう⑩〜ワイヤーフレームはAIが作る時代に、それでも変わらないこと〜
こんにちは。デザイナーのスギヤマです。
前回の第9回では、ペーパープロトタイプについてお話しました。鉛筆と紙で画面の構造を確認するステップです。
次の工程では、本来ならば「Figmaを開いてワイヤーフレームを作る」という答えになります。実際、デザインを学ぶ上ではそのステップを踏むことに大きな意味があると今でも思っています。
ただ、正直に書くと、最近の現場ではその順番が少し変わってきています。今回は、「本来のフロー」と「今起きていること」を両方お伝えしながら、それでも変わらないことを整理したいと思います。
本来のフロー：ワイヤーフレームという「骨格」を作る
ペーパープロトで画面の構造を確認したら、次はそれをデジタルに起こします。このとき最初に作るのが「ワイヤーフレーム」です。
ワイヤーフレームとは、画面の骨格だけを描いたものです。色はモノトーンを使用します（黒だけを使うという流派もありますが、google ux design professional certificateではグレーも許容されていましたので、厳密にこう、という形はないと考えます）。画像は四角い枠だけを使用し、テキストはダミーを置きます。
なぜいきなり色を使わないかというと、色やフォントがあると、「この青、ブランドに合うかな」「フォントが気になる」という方向に議論が引っ張られてしまうからです。この段階で確認したいのは見た目ではなく、「この画面に何を置くか」「ユーザーはどの順番で操作するか」という構造の話だからです。
Figmaでワイヤーフレームを作るとき、最初に覚える操作は4つ
● フレームを作る（Fキー）：画面の枠を作ります
● 四角を置く（Rキー）：ボタンや画像枠を四角で表現します
● テキストを置く（Tキー）：ラベルや見出しを書きます
● 複製する（Cmd+D）：繰り返しのパターンを素早く作れます
これだけで、ペーパープロトで描いた画面をFigmaに起こすことができます。ここで大事なのは「きれいに作ること」ではなく、「チームで同じ画面イメージを持てること」です。
プロジェクト初期におけるワイヤーフレームのイメージ（一部ぼかしをいれています）
現場で起きていること：AIがワイヤーを作るようになった
ここから少し、最近の現場の話をします。
先日、一緒に仕事をしたデザイナーが、ワイヤーフレームをAIで作成していました。Figmaで手を動かすのではなく、AIにプロンプトを渡して画面を生成していたのです。
実は自分自身も、今進めているプロジェクトで似たようなことをやっています。USMで機能を洗い出したあと、ペーパープロトを作り、その写真をClaudeに読み込ませてプロンプトを生成し、Claude CodeでHTMLベースの動くプロトタイプを作ってチームに共有しています。
Figmaのワイヤーフレームという工程が、いつの間にかすっ飛んでいました。
ペーパープロトを読み込ませてClaudeCodeで作成した画面（ぼかしをいれています）
「なんかズレてる」の正体
では、AIで作ったワイヤーフレームの品質はどうだったのか。
あるプロジェクトでAIを使ってワイヤーを作り、チームで見てみると、何かがズレている雰囲気がありました。形にはなっている。でも、どこかしっくりこない。
原因を探ると、お客様へのヒアリングがまだ薄い段階で作り始めていたことに気づきました。
ユーザーが何に困っているか、どんな状況で使うのか、何を一番大事にしているか。そういった情報が足りないまま、AIに「それっぽい画面」を作らせていた。だから画面は形になっているのに、どこかズレている。そういう状態でした。
これはAIが作ったから起きた問題ではありません。ヒアリングが薄いまま、人間がFigmaでワイヤーを作っても、同じ結果になっていたはずです。
道具が変わっても、変わらないこと
このシリーズを①から振り返ってみると、ずっと同じことを繰り返していました。
● ユーザーリサーチで「私とユーザーのズレ」をなくす
● ペルソナで「誰のための画面か」を具体化する
● USMで「何を作るか」の優先順位を決める
● ペーパープロトで「構造」を手で考える
これらはすべて、AIに何かを作らせる「前」の話です。
ワイヤーフレームをFigmaで作ろうが、AIに生成させようが、Claude Codeで動くプロトタイプを出力しようが、その前に「ユーザーのことをどれだけ理解しているか」が薄ければ、できあがるものもそれなりの形にしかならないのかもしれません。
道具が速くなった分、むしろ「前工程の質」がそのまま結果に出やすくなった、と感じています。
おわりに
ワイヤーフレームをどのツールで作るか、という正解はこれからも変わり続けると思います。Figmaかもしれないし、AIかもしれないし、来年にはまた別の何かが出てくるかもしれない。
しかし、「ユーザーを理解してから画面を作る」という順番は、おそらく変わりません。道具の使い方を覚えることと、ユーザーのことを考えること。その両方を大切にしながら進んでいきたいと思っています。
