見た目を整えるとき、色や装飾から触ると改善理由が説明できなくなります。
仕事のデザインで先に扱うのは、情報同士の関係と重要度です。
四つの原則を使うと、感覚ではなく、伝達上の問題として修正できます。
この記事で持ち帰ること
この記事では、考え方を知るだけでなく、自分の仕事で一度試せる状態まで進めます。読みながら、いま困っている場面を一つ思い浮かべてください。
- 関連情報を近づけます
- 基準線をそろえます
- 重要度に明確な差を作ります
先に、この記事の結論
近接、整列、反復、対比を順番に確認すると、情報の構造が伝わるデザインになります。
- 関連情報を近づけます
- 基準線をそろえます
- 重要度に明確な差を作ります
1. 近接で関係を示します
同じ意味の要素は近づけ、別の話題との間には広い余白を置きます。囲み線を増やす前に、距離でまとまりを作りましょう。
2. 整列で読む流れを作ります
見出し、本文、画像の端を共通の基準線にそろえます。わずかなずれを減らすだけでも、画面全体に秩序が生まれます。
3. 反復で一貫性を作ります
同じ役割の見出し、ボタン、注釈には、同じ形と余白を使います。毎回違う表現を使うと、見る人に余計な解釈を求めることになります。
4. 対比で優先順位を示します
重要な要素は、サイズ、太さ、色のいずれかで明確に変えます。小さな差を重ねるより、一つの大きな差を作る方が効果的です。
弱い対比
- 文字サイズがほぼ同じ
- 色を多数使う
- すべてを太字にする
強い対比
- 見出しと本文に明確な差がある
- 強調色を一つに絞る
- 結論だけを太くする
確認は白黒と10秒で行います
色を外しても順番が分かるか、初見の人が十秒で結論を言えるかを確認します。説明が必要なら、装飾ではなく構造を直してください。
3つの基準を、実務でどう使い分けるか
ここまでの要点は、三つを同時に満たすための標語ではありません。作業の段階ごとに使う判断基準です。順番を飛ばすと、手段だけが増え、何を改善したのか分からなくなります。
1. 関連情報を近づけます
見る順番を設計する観点です。最初に理解してほしい結論を一つ決め、サイズ、位置、余白で優先度を示します。すべてを強調すると順番は消えます。
「関連情報を近づけます」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。
2. 基準線をそろえます
情報の関係を見せる観点です。近い情報をまとめ、別の役割との間に余白を置きます。線や色を増やす前に、配置だけで関係が伝わるか確認してください。
「基準線をそろえます」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。
3. 重要度に明確な差を作ります
操作と状態を誤解させない観点です。色だけに意味を持たせず、文字や形でも区別します。小さい画面と第三者の視線で、結論と次の行動を確かめます。
「重要度に明確な差を作ります」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。
変更前と変更後の間にある判断
変更前文字サイズがほぼ同じ。色を多数使う。すべてを太字にする
変更後見出しと本文に明確な差がある。強調色を一つに絞る。結論だけを太くする
重要なのは、変更後の表現をそのまままねることではありません。何が曖昧だったために判断できず、どの情報を加えたことで次の行動を選べるようになったかを読み取ります。
自分の仕事へ置き換えるときは、固有名詞や数字だけを差し替えません。相手の状況、止まっている理由、決める必要があることを先に書き換えてください。
変更後の案が長くなった場合は、目的に直接関係しない説明を削ります。短さを優先するのではなく、判断に必要な情報だけが残っている状態を目指します。
手順ごとの確認点
「伝わるデザインを支える4つの原則」を実務で使うときは、次の手順を一度に終わらせません。各段階で短い記録を残すと、途中で迷っても一つ前の判断へ戻れます。
情報を意味ごとに囲みます
最初の作業では、対象と出力を一文で書きます。固有の業務名、相手、利用場面のどれかが入っていると、次の手順で迷いません。
共通の左端へ整列します
二つ目の作業では、選んだ内容と理由を並べます。別の案を採用しなかった理由も一言残すと、判断基準が明確になります。
同じ役割の見た目を統一します
三つ目の作業では、今回扱う範囲を固定します。追加したくなった内容は別のメモへ移し、最初に決めた目的から外れないように進めてください。
最重要要素だけに対比を付けます
四つ目の作業では、変更前と同じ条件で結果を確認します。差がなければ、対象の選び方と変更内容のどちらを見直すか決めます。
十秒見た人に結論を確認します
最後の作業では、今回だけ通用した条件と、次回も使える判断を分けます。使える条件と使わない条件の両方を残してください。
結果が出ないときは、どこへ戻るか
整えたのに伝わらない
見た目ではなく情報の優先順位を確認します。タイトルだけを読み、ページの結論と判断してほしいことが分かるか試してください。
どこを見ればよいか迷う
強調が多すぎます。主役を一つ残し、同じ大きさ、太さ、色の要素を減らして視線の入口を作ります。
小さい画面で崩れる
横幅だけを縮めず、読む順番へ一列に並べます。補助情報を後ろへ移し、主要な操作が最初の流れに残るか確認します。
失敗は、最初からすべてやり直す合図ではありません。対象、根拠、変更、確認のうち、記録が途切れた場所だけへ戻ると改善を続けられます。
実践課題の完成条件
課題は「既存の一枚を四原則で直します。」です。資料を作っただけでは完了にしません。次の四項目を第三者が読み取れる状態まで整えます。
- 誰の、どの業務や場面を扱ったかが一文で分かる
- 変更前の事実と、困っていた理由が分かれている
- 今回変えた箇所と、その判断理由が対応している
- 結果を確認する数字、行動、完成状態のどれかがある
説明を加えないと伝わらない場合は、情報量を増やす前に順番を見直します。第三者が「何を見て、何を変え、どう確かめるか」を説明できれば合格です。
仕事で使うときの確認順
一度にすべてを変える必要はありません。次の順番で確認すると、どこを直したかと、その変更が効いたかを追いやすくなります。
- いま困っている人、業務、場面を一つに絞る
- 変更前の状態を、数字または観察できる行動で残す
- この記事の判断基準を一つだけ使って変更する
- 同じ条件で変更後を確認し、次に残す改善を決める
よくある失敗
知識を増やすこと自体を目的にすると、実務は変わりません。また、複数の改善を同時に行うと、何が結果へ影響したか分からなくなります。最初は一つの場面、一つの変更、一つの確認指標に絞ってください。
実践課題
既存の一枚を四原則で直します。
- 情報を意味ごとに囲みます
- 共通の左端へ整列します
- 同じ役割の見た目を統一します
- 最重要要素だけに対比を付けます
- 十秒見た人に結論を確認します
課題を終えたら確認すること
完成物を一人に見せ、説明を足さなくても要点と次の行動が伝わるかを聞きます。伝わらなかった箇所は、情報を足す前に、順番と具体例を見直してください。
まとめ
デザイン原則は、きれいに見せる技法ではありません。情報の関係と優先順位を誤解なく伝えるための基準です。
- 関連情報を近づけます
- 基準線をそろえます
- 重要度に明確な差を作ります