ワイヤーフレーム
読み: わいやーふれーむ
ワイヤーフレーム：画面の骨組みとして配置と構造を示す設計図（低精度UI図）
概要
ワイヤーフレームは、Webサイトやアプリの画面を「どんな要素を」「どこに」「どんな優先度で」配置するかを示す骨組み図。色や装飾よりも、情報の構造と導線を整理するために使う。何を決めるものか
- 画面のレイアウト（ヘッダー、本文、サイドバー、フッターなど）
- 情報の優先順位（何を目立たせるか）
- ナビゲーション・導線（どこからどこへ移動するか）
- コンテンツ要素の種類（見出し、文章、画像枠、ボタン、フォーム等）
- 状態や分岐（ログイン前後、空状態、エラー表示など）
目的
認識合わせ
関係者（企画・デザイン・開発・運用）で「何を作るか」を早い段階で揃える。手戻り削減
見た目に時間をかける前に、構造と要件の矛盾を発見できる。情報設計の検証
情報設計（ジョウホウセッケイ：情報を分類し分かりやすく構造化する設計）として、見つけやすさ・迷いにくさを確認できる。粒度（精度）の種類
- ローファイ：手書き・簡易図形中心。検討と議論が速い
- ミドル：コンポーネントや余白感まである程度表現
- ハイファイ：実デザインに近い（ただし一般に「モックアップ」に近づく）
モックアップ／プロトタイプとの違い
- ワイヤーフレーム：構造・配置・導線の設計図（見た目は簡素）
- モックアップ：見た目（色・写真・タイポグラフィ等）を作り込んだ完成見本
- プロトタイプ：実際に操作できる形で動きを確認するもの（クリック遷移など）
作り方の基本手順
- 目的とユーザー行動を整理（何を達成させたいか）
- 必要コンテンツを洗い出し、優先順位を付ける
- 画面単位でレイアウト案を作る（主要画面から）
- 画面遷移・導線を線でつなぐ
- 状態（エラー、空、読み込み）も用意する
- 早めにレビューし、修正を回す
よく入れる注記（仕様メモ）
ありがちな落とし穴
- 文章量を想定せず、実データで崩れる
- 主要導線だけ作って、例外状態が抜ける
- 目的より「見た目の好み」で議論が逸れる
- スマホ／PCの両方を想定せず後で破綻する