設計の道具
試作は、確かめたいことに合わせて作ります。見た目、内容、動きのうち、本物に近づけるのは要る軸だけです。
図の中身を文字で読む
- ワイヤーフレーム 構造だけ モックアップ 見た目あり・動かない プロトタイプ 操作できる
- 見出しの例 見出しの例
- 申し込む 申し込む 押下中
- 議論が構造に集中する 見た目の合意形成に使う 遷移・手順の長さ・迷いを検証
- 早く作れる。案を捨てやすい 静止画には状態と振る舞いが出ない 捨てる前提で作る
- 忠実度は3軸ある。全部を上げる必要はない
- 見た目（配色・書体） ／ 内容（実際の文言とデータ） ／ 動き（遷移とアニメーション）。検証したい軸だけを上げる。
ひと目で#
- ワイヤーフレーム
- 飾りなし。構造と優先順位だけ
- モックアップ
- 色と書体あり。静止画
- プロトタイプ
- 操作できる。遷移と手順を確かめる
- 忠実度
- 完成品にどれだけ近いか。3つの軸がある
- イテレーション
- 作る、確かめる、直すの周期
忠実度の3軸#
| 軸 | 低 | 高 |
|---|---|---|
| 見た目 | グレーの矩形、手描き | 実際の配色と書体 |
| 内容 | ダミーテキスト | 実際の文言とデータ |
| 動き | 静止画 | 遷移とアニメーション |
全部を上げる必要はありません。 手順が妥当か確かめるなら、見た目は粗くてよく、内容と動きだけを本物に近づけます。
図の中身を文字で読む
- 確かめたいことが決まると、上げる軸が決まる
- 3本の軸は別々に動かせる。左端が低、右端が高。
- 見た目 内容 動き
- 手順が長すぎないか
- 粗いプロトタイプ
- 見た目の方向を決める
- モックアップ
- 何をどこに置くか
- ワイヤーフレーム
- 内容を上げると実文言の長さが分かり、見た目を上げると方向の変更に抵抗が生まれる。上げない軸には理由を書く。
使い分け#
| 確かめたいこと | 作るもの |
|---|---|
| 何をどこに置くか | ワイヤーフレーム |
| 見た目の方向 | モックアップ |
| 手順の長さ、迷いやすさ | 粗いプロトタイプ |
| 動きの心地よさ | その部分だけ細かく作ったプロトタイプ |
| 実装への引き渡し | 状態と振る舞いを含む仕様 |
間違えやすいところ#
- ダミーテキストのまま進める実際の文言は長さが違い、レイアウトが変わる
- 早い段階で忠実度を上げる完成度が高いほど、方向を変える抵抗が生まれる
- 正常な状態だけを作るエラー、空、読み込み中、長文が抜ける
- 静止画だけで引き渡す状態と振る舞いが伝わらず、実装する人が推測することになる
- 数値だけを伝えるトークン名で伝えれば、テーマを変えても追随する
- 作った本人が検証する使い方を知っているので、迷いが再現されない
- 試作のコードをそのまま本番に流用する試作の質が本番に残る
引き渡しで伝えるべきこと#
値だけでは足りません。状態（hover、フォーカス、押下、無効、読み込み中、エラー、空）、可変（文言が長い場合と短い場合）、優先順位（収まらないときに何を残すか）。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、料金ページの改修で、依頼主が最初に求めたのは「完成イメージが見たい」でした。確かめたいことを聞き直すと、「プランが3つに増えても迷わず選べるか」。見た目ではなく、内容と手順の話です。下のシートで内容=高（実際の料金と文言を入れる）・動き=高（タップで遷移する）・見た目=低と決め、グレーの矩形のままの試作を半日で作って触ってもらいました。出た指摘は「初回の料金がどこか分からない」の1件だけで、色の話は一度も出ていません。見た目から作っていたら、この指摘は色の感想に埋もれていたはずです。
確認する#
- 確かめたいことが1つに絞られてから、作るものが決まっている
- 高くする軸と上げない軸の両方に、理由が書いてある
- 試作に実際の文言と数字が入っていて、ダミーテキストが残っていない
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
構造を合意するならワイヤー、見た目を合意するならモックアップ。忠実度は3軸で別々に上げる。
構造合意=ワイヤー、見た目合意=モックアップ
この場面のほかの困り事と、そのまま貼れる部品は迷わせないにまとめてある。逆引きには全188件。
作るものを決める#
作るものから考えると迷います。先に確かめたいことを1つに絞り、高くする忠実度の軸を決めると、作る設計物はほぼ逆算で決まります。
記入済みの見本は、架空の案件「常盤野市の整体サロンのサイト制作」です。
# 設計物の選定シート（常盤野市の整体サロンのサイト制作）
## いま確かめたいこと
トップから予約の申し込みまで、迷わずたどり着けるか。
## 高くする忠実度の軸
内容=高。実際の料金と文言を入れる。ダミーテキストでは長さが違い、判断がずれるため。
動き=高。タップで画面が遷移する。手順の長さを確かめたいため。
## 作る設計物
粗いプロトタイプ。画面はグレーの矩形でよい。
## 上げない軸
見た目=低のまま。完成度が上がるほど、方向を変える抵抗が生まれるため。
## 確かめ方
課題テスト5人。手順の長さでつまずいたら、入力項目を減らしてもう一周。
切り替えとコピーは JavaScript で動きます。無効の場合も、見本入りの記入欄と下の Markdown はそのまま読めます。
出典#
- Nielsen Norman Group「UX Prototypes: Low Fidelity vs. High Fidelity」
- Interaction Design Foundation「What is User Interface (UI) Design?」