ワイヤーフレームとプロトタイピング

白紙のキャンバスの向こうへ

🔄 Quick Recall: 前のレッスンではリサーチデータをデータ駆動のユーザーペルソナに変換した。リサーチが完了し、ペルソナもできた。いよいよインサイトをインターフェースに変換する番だ。

Figmaの白紙のキャンバス。空のアートボード。どこから始めるか？

従来、デザイナーは紙にラフを描き、デザインツールでいくつかの方向を探索し、ソリューションに向けて反復する。機能するが遅い。各バリエーションの構築に時間がかかり、時間的プレッシャーでコミットする前に通常2〜3案しか探索できない。

Figma AIの登場で探索フェーズが変わりつつある。Config 2025で発表されたFigma Makeはプロンプトからインタラクティブなプロトタイプを生成する。しかしツール特有の機能に依存しなくても、汎用AIアシスタントで構造的な探索を劇的に加速できる。

デザインを代行するのではなく、より多くの構造オプションを短時間で考え抜く支援をする。すべてのデザイン判断はあなたが下す。コミットする前により多くの可能性を見るだけだ。

ワイヤーフレームにおけるAIの役割

AIにできること・できないことを明確にしよう：

AIにできること：

レイアウト構造と情報階層の提案
テキストや擬似コードでのコンポーネント配置の記述
素早い可視化のためのHTML/CSSプロトタイプ生成
コンテンツフローとスクリーンシーケンスの提案
類似プロダクトからのパターン特定

AIにできないこと：

プロダクション品質のビジュアルデザイン作成
ピクセルパーフェクトな作業でデザインツールを置換
ブランドに整合する美的判断
デザインシステムの具体的コンポーネントの把握
特定のユーザーにとっての「正解」の感覚

ワークフロー：AIが構造的コンセプトを生成。あなたがデザインツールで評価、組み合わせ、精緻化。

構造探索プロンプト

構築したい画面ではなく、ユーザーのゴールから始める：

以下のユーザーシナリオの画面を設計しています。

ユーザー：[ペルソナ名] — [簡潔な説明]
ゴール：[達成しようとしていること]
コンテキスト：[いつ/どこで/どう使うか]

コンテンツ要件：
- [この画面が表示すべきすべてのコンテンツ]
- [データ、アクション、ナビゲーション要素]
- [必須 vs オプション要素]

制約：
- デバイス：[モバイル/デスクトップ/レスポンシブ]
- アクセシビリティ：[特定の要件]
- デザインシステム：[該当する場合]

この画面の4つの異なる構造アプローチを提案。
各アプローチについて：
1. レイアウトコンセプトを2〜3文で記述
2. コンテンツ階層（最も目立つ→最も目立たない）
3. インタラクションパターンの説明
4. どのペルソナのニーズに最も適しているか
5. 潜在的なユーザビリティリスク

なぜ4案？ 3案は「真ん中を選ぶ」になりがち。5案は多すぎる。4案は圧倒せずに真に異なる思考を強いる。

例：ダッシュボードの設計

実際のワイヤーフレームセッションを歩こう。プロジェクト管理ツールのダッシュボードを、前レッスンのペルソナを使って設計する。

AIが返す可能性のある4案：

スプリットパネルレイアウト — 左パネルにプロジェクト概要とタイムライン、右パネルにタスクリスト。計画重視のペルソナ向き。
タスクファーストレイアウト — フル幅のタスクリストと折り畳み可能なプロジェクトサマリーバー。アクション重視のペルソナ向き。
ウィジェットベースレイアウト — ユーザーが配置を変えられるモジュールカード：進捗、締切、タスク、アクティビティ。カスタマイズで両ペルソナに対応。
タイムライン中心レイアウト — 水平タイムラインを主要素とし、タスクを日付に紐づけ。締切駆動のワークフローに強い。

4つの真に異なるスタート地点が得られた。デザインツールで素早くスケッチし、2と3を組み合わせたハイブリッド（タスクファースト＋オプションウィジェット）を追求するかもしれない。

その探索に10分。午後いっぱいの代わりに。

コンポーネント構造の生成

フルスクリーンレイアウト以外にも、個別コンポーネントの設計を考え抜く支援：

タスクリストに表示する「タスクカード」コンポーネントの
構造を設計してください。

必須：タスクタイトル、担当者アバター、
  優先度レベル、期日、ステータス
オプション：タグ、サブタスク進捗、コメント数

リストビュー（コンパクト）と
ボードビュー（展開）の両方で機能する必要がある。
両バリアントを記述。

考慮事項：
- 期限切れタスクの視覚的表現
- 長いタスクタイトルの処理
- ホバー/フォーカス状態で何を表示するか
- モバイルのタッチターゲットサイズ

✅ Quick Check: AIで4つのレイアウトオプションを生成した後、デザインツールを開く前に何をすべきか？ペルソナと照合する。「計画好きのペルソナはこれを直感的に感じるか？アクション重視のペルソナは遅いと感じないか？」両ペルソナに対応する（または少なくともどちらも苛立たせない）レイアウトがスタート地点。

ユーザーフローマッピング

AIはマルチスクリーンフローのマッピングに特に有用：

プロジェクト管理ツールの「新規プロジェクト作成」の
ユーザーフローをマッピングしてください。

ユーザー：サインアップ直後の新規ユーザー
  （初めてのプロジェクト作成）

要件：
- 必須設定：プロジェクト名、チームメンバー
- オプション：期日、説明、テンプレート選択
- 軽量に感じること（完了まで60秒以内）

フローの各ステップについて：
1. ユーザーが見る画面/状態は？
2. ユーザーが取るアクションは？
3. 受け取るフィードバックは？
4. エラー時の状態は？
5. 戻るまたはスキップする方法は？

以下も特定：
- ハッピーパス（最も一般的なフロー）
- パワーパス（より多くのコントロールを求める
  経験者のフロー）
- ユーザーがフローを離脱しそうなポイント

コードでの高速プロトタイピング

多くのデザイナーが見落とすテクニック：AIでフローコンセプトのテスト用に素早いHTMLプロトタイプを生成する。

モバイルオンボーディングフローの3画面の
簡易HTMLプロトタイプを作成してください：

画面1：ウェルカム
- アプリロゴエリア
- 「始める」ボタン
- 「アカウントをお持ちの方」リンク

画面2：役割選択
- 「どんな目的で使いますか？」見出し
- 3つの役割カード
- 各カード：アイコン、タイトル、一行の説明
- 戻るボタン

画面3：最初のプロジェクト
- 「最初のプロジェクトを作りましょう」見出し
- プロジェクト名入力
- オプションの説明テキストエリア
- 「プロジェクト作成」プライマリボタン
- 「後で」テキストリンク

クリーンなHTML、インラインCSS、最小限のスタイル。
クリック可能に（ボタンクリックで画面遷移）。
モバイルビューポート（375px幅）。

1分以内でスマホでテストできるクリック可能なプロトタイプが完成する。見た目は荒いが、デザイン時間を投資する前にフローを検証できる。

イテレーションパターン

AIが変更のコストを下げてイテレーションを加速：

「もし〜だったら」の探索：

スプリットパネルのダッシュボードレイアウトについて。
もし以下の場合、何が変わるか：
1. 主なユーザーが大型モニターではなく13インチノートPC？
2. 50件ではなく200件以上のタスクをサポート？
3. ユーザーが色覚特性がある場合？
4. リアルタイムコラボレーション表示を追加する場合？

各シナリオでの構造的変更を記述。

レスポンシブ対応：

現在のデスクトップダッシュボードレイアウト：
[レイアウトを記述]

以下にどう適応させるか：
1. タブレット横向き（1024px）
2. タブレット縦向き（768px）
3. モバイル（375px）

各ブレークポイントで何が移動、スタック、
折り畳み、またはまったく異なるパターンに
なるかを記述。

AIからデザインツールへ

実践的なハンドオフワークフロー：

AIで探索 — 3〜5の構造コンセプトを生成（10分）
ペルソナと照合 — どのアプローチがユーザーに最適か？（5分）
ラフスケッチ — 選んだ方向の素早い紙またはロー・ファイデジタルスケッチ（10分）
デザインツールで構築 — デザインシステムコンポーネントでワイヤーフレーム作成（可変）
AIで反復 — コンポーネントレベルの疑問が生じたらAIにオプションを聞く（随時）

重要なインサイト：AIは発散フェーズの探索パートナー。ソリューションに収束させて正しく構築する段階では、あなたとデザインツールの出番。

Key Takeaways

AIは構造探索に使い、ビジュアルデザインには使わない——レイアウトとパターンを提案し、あなたが磨く
構築したい画面ではなくユーザーのゴールから始める
コミットする前に3〜5の意味ある異なる構造アプローチを生成
AI生成のHTMLプロトタイプでデザイン時間を投資する前にフローをテスト
「もし〜だったら」プロンプトでイテレーションを安価・高速に
すべてのAI提案をペルソナと制約に照らして評価

Up Next: 次のレッスンではUXコピーライティングとマイクロコピー——正しい3語がユーザー体験を左右する領域を学ぶ。