すべての情報を載せたのに、どこから読めばよいか分からない資料があります。
近接、整列、反復、対比という四つの原則は、情報の関係と優先順位を見える形へ変えるための手がかりです。
装飾を上手にする技法だけではありません。
架空の研修案内を使い、どの原則がどの問題を直すのかを確認します。
四つを機械的に足すのではなく、読者が迷う原因に合う操作を選びます。
この記事で学ぶこと
- 情報同士の関係を距離で表します。
- 同じ役割の要素に共通する外見を使います。
- 最も伝えたい箇所を選び、強調の差を付けます。
近接で同じ話題をまとめる
近接は、関連する情報を近づけて一つのまとまりに見せる原則です。
講師名と紹介文が離れ、別の写真に近いと、誰の説明かを誤解するかもしれません。
枠線を引く前に、関係する要素の距離を縮め、別のまとまりとの距離を広げます。
研修案内なら日時と会場を開催条件としてまとめ、内容の説明とは間を空けます。
項目名とその値は近くし、次の項目との境界は分かる程度に空けます。
すべてを同じ間隔にすると、まとまりがなくなります。
距離は装飾の好みではなく、情報の関係から決めます。
ただし近づけすぎると、文字が詰まり読みにくくなります。
長い文章や複数の操作がある場合は、まとまりの内部にも必要な間隔を残します。
二つのボタンが近すぎて押し間違えるなら、同じグループでも距離を広げる必要があります。
意味のまとまりと操作のしやすさを両方見ます。
確認するときは、文章を細かく読まずにどこで区切れるかを見ます。
読者へ指でグループを示してもらい、意図と違えば距離を直します。
色や線を増やす前に、位置だけで関係を表現できるかを試すと、簡潔な構成にできます。
同じ四原則でも、文字中心の報告と写真中心の案内では使い方が変わります。
型をそのまま写すのではなく、元の資料がどの関係を示すために距離や大きさを変えたかを見ます。
参考資料を観察するときも、装飾の名前より情報の役割へ注目してください。
整列で読む入口と比較軸を揃える
整列は、文字や図の端、中心、基準線を意図的に揃えることです。
配置の基準が毎回違うと、見る人は項目の始まりを探します。
左端を揃えるだけで読み始める位置が明確になり、複数行の説明も追いやすくなります。
架空の参加条件一覧では、項目名の列と説明の列を揃えます。
「日時」「会場」「対象」の後ろを空白文字で調整するより、表や整列機能を使う方が修正に耐えます。
金額を比較する表では桁や単位を揃え、何が比較対象なのかを明らかにします。
中央揃えが常に悪いわけではありません。
短いタイトルや一つの数値を見せる場面では使えます。
ただし長い本文を中央にすると、行ごとに読み始める位置が変わります。
用途に合わせて選び、一枚の中で理由なく左揃えと中央揃えを切り替えないでください。
整列は見えない線を共有する考え方です。
写真、見出し、本文の端を合わせると、枠を使わずにつながりを示せます。
まず基準線を二、三本に絞り、各要素がどこへ揃うか確認します。
少しずつずれた配置を残さないことが、雑然とした印象を減らします。
反復で同じ役割の読み方を揃える
反復は、同じ役割の見た目を繰り返す原則です。
見出しの書体、余白、番号、ボタンの形が揃うと、別の場所でも何を表すか推測しやすくなります。
単に同じ色を使い回すことではなく、意味と表現を対応させることが要点です。
講座の三つの特徴を並べるなら、見出し、説明、図の順番と大きさを揃えます。
一つだけ説明が極端に長ければ、枠の高さを無理に固定する前に文章の粒度を確認します。
異なる量の情報を見た目だけ揃えると、文字を小さくしてしまうなど別の問題が生じます。
反復する部品には変更のルールを残します。
主要な申込みボタンは同じ色と文言、補助リンクは別の表現にするなどです。
外見が同じなのに動作が違う要素は混乱を招きます。
押せない見出しをボタンと同じ形にする場合も、誤解が起きないかを確かめます。
例外が必要なら、その意味が伝わる差にします。
締切の注意は通常説明より強くできますが、ページごとに違う警告表現を作る必要はありません。
反復のルールがあるからこそ、例外が見つけやすくなります。
統一する部分と意味を持って変える部分を分けてください。
対比で重要度と違いを示す
対比は、サイズ、太さ、明るさ、位置などに差を付け、違う役割を見分けられるようにする原則です。
すべてが同じ強さでは、最初に見る場所が決まりません。
最重要の結論を一つ選び、補足との差を作ります。
強調を増やすほど大事さが伝わるわけではありません。
研修案内では講座名を大きくし、対象と日時を次の階層に置きます。
本文の一部だけ強調するなら、その箇所を読むだけで要点が伝わるかを確かめます。
太字が一段落全体に広がっていたら、強調ではなく通常の文字になっています。
強調する目的を一つずつ説明してください。
色で対比を作る場合は、明るさの差も確認します。
赤と緑が違って見えることだけに頼らず、ラベルや形を併用します。
小さく薄い文字を補足にすると、そもそも読めない人が出る可能性があります。
優先順位を下げることと、読めない状態にすることを区別します。
対比の強さは実際の表示で判断します。
大画面で目立つ文字がスマートフォンでは窮屈になることがあります。
最初に目に入る場所を第三者に聞き、意図した結論ではなく装飾が先に挙がるなら、強さの配分を見直します。
四原則を問題に合わせて使う
四原則は一つずつ独立しているわけではありません。
日時と会場を近づけ、左端を揃え、他の情報と同じ項目表現を使い、締切だけ強調する、と組み合わせます。
ただし修正を始めるときは、何が分からないかに対応する原則から使うと理由を追えます。
架空の修正前は、日時が講師紹介の下、会場が申込ボタンの横にありました。
まず近接で開催条件をまとめ、整列で項目を揃えます。
次に見出しの反復を整理し、最後に申込先へ対比を付けます。
装飾から直すより、情報の構造を先に整える順番です。
適用後は「きれいになったか」だけでなく、読者が日時、場所、対象を見つけられるか確認します。
四原則を守ったつもりでも、文章の内容が不足していれば判断はできません。
デザインの原則は、不足する説明や誤った数字を補ってくれるものではありません。
修正前後を残し、どの操作がどの迷いに対応したか短く書きます。
次の資料でも同じ問題を発見しやすくなります。
原則を暗記する到達点ではなく、現在の画面の問題を言葉で説明し、必要な操作を選べる状態を目指してください。
原則の説明を他の担当者へ渡す場合は、修正前後を一組にします。
「整列を守る」だけより、「価格と単位の列を揃えたので比較しやすい」と書く方が再現できます。
操作と読者の利益をつなげて残すと、次の制作で目的を持って応用できます。
実践課題
実践課題：一枚を四原則で修正する
一枚の資料を四原則で点検し、修正前後を保存します。
元資料と完成時の表示サイズを用意し、まず文章の不足や誤りを確認してください。
四原則を一度に全部使う必要はなく、最も大きな迷いを直す操作から始めます。
- 関係する情報のまとまりを囲む
- 読み始める基準線を揃える
- 同じ役割の見た目を統一する
- 最重要の一か所へ差を付け、読者で確認する
架空の完成例「問題＝日時と会場が別の場所にあり探しにくい。近接で一群へまとめる。整列で項目名の列を揃える。反復で他の条件欄と同じ書式にする。対比で締切を見つけやすくする。」
自己確認
- 距離が情報の関係を示す
- 同じ外見が同じ役割に対応する
- 強調したい箇所を一つ説明できる
まとめ
近接はまとまり、整列は読む入口、反復は共通の読み方、対比は違いを示します。
四つを飾りとして加えるのではなく、読者が迷う理由に合わせて使います。
まず既存資料で探しにくい条件を一つ選び、位置から直してください。
- 情報同士の関係を距離で表します。
- 同じ役割の要素に共通する外見を使います。
- 最も伝えたい箇所を選び、強調の差を付けます。
