余白で情報の関係を示す

このLessonの結論

余白を装飾ではなく、まとまりと区切りのルールとして使います。

大切なのは、知識として覚えることではありません。自分の仕事を一つ選び、判断基準を当てはめ、変更前と変更後を比べられる状態まで進めることです。

• 関連する要素を近づける
• 階層ごとに余白の段階を作る
• 外側と内側の余白を区別する

なぜ、うまく進まないのか

余白を感覚で決めると、同じ関係なのに距離がばらつきます。距離の段階を決め、情報のまとまりを見せます。

3つの基準を、実務でどう使い分けるか

ここまでの要点は、三つを同時に満たすための標語ではありません。作業の段階ごとに使う判断基準です。順番を飛ばすと、手段だけが増え、何を改善したのか分からなくなります。

変更前と変更後の間にある判断

重要なのは、変更後の表現をそのまままねることではありません。何が曖昧だったために判断できず、どの情報を加えたことで次の行動を選べるようになったかを読み取ります。

自分の仕事へ置き換えるときは、固有名詞や数字だけを差し替えません。相手の状況、止まっている理由、決める必要があることを先に書き換えてください。

変更後の案が長くなった場合は、目的に直接関係しない説明を削ります。短さを優先するのではなく、判断に必要な情報だけが残っている状態を目指します。

手順ごとの確認点

「余白で情報の関係を示す」を実務で使うときは、次の手順を一度に終わらせません。各段階で短い記録を残すと、途中で迷っても一つ前の判断へ戻れます。

1. 画面上の隣接距離を実測する

   最初の作業では、対象と出力を一文で書きます。固有の業務名、相手、利用場面のどれかが入っていると、次の手順で迷いません。

2. 同じグループと別グループを分類する

   二つ目の作業では、選んだ内容と理由を並べます。別の案を採用しなかった理由も一言残すと、判断基準が明確になります。

3. 8px基準の三段階へ統一して比較する

   三つ目の作業では、今回扱う範囲を固定します。追加したくなった内容は別のメモへ移し、最初に決めた目的から外れないように進めてください。

結果が出ないときは、どこへ戻るか

失敗は、最初からすべてやり直す合図ではありません。対象、根拠、変更、確認のうち、記録が途切れた場所だけへ戻ると改善を続けられます。

実践課題の完成条件

課題は「既存画面の余白を8px単位で測り、三段階へ整理します。」です。資料を作っただけでは完了にしません。次の四項目を第三者が読み取れる状態まで整えます。

• 誰の、どの業務や場面を扱ったかが一文で分かる
• 変更前の事実と、困っていた理由が分かれている
• 今回変えた箇所と、その判断理由が対応している
• 結果を確認する数字、行動、完成状態のどれかがある

説明を加えないと伝わらない場合は、情報量を増やす前に順番を見直します。第三者が「何を見て、何を変え、どう確かめるか」を説明できれば合格です。

つまずきやすい3つの点

最初から対象を広げすぎる

一度に多くを変えると、どの変更が効いたか分かりません。最初は一つの対象、一つの場面へ絞ります。

曖昧な目標で終える

「改善する」「注意する」だけでは、完了を判断できません。何がどう変われば成功かを、観察できる言葉で決めます。

変更前を残さない

元の状態がないと、改善したかを振り返れません。変更前、変更内容、確認結果の三つを同じ場所へ保存します。

そのまま使える作業メモ

理解度チェック

1. 自分の業務では「関連する要素を近づける」を、どの事実で確認しますか。
2. 自分の業務では「階層ごとに余白の段階を作る」を、どの事実で確認しますか。
3. 自分の業務では「外側と内側の余白を区別する」を、どの事実で確認しますか。

まとめ

余白を装飾ではなく、まとまりと区切りのルールとして使います。

まずは小さな一例で試し、結果を見てから対象を広げます。次のLessonへ進む前に作業メモを一つ残すと、学んだ内容を次の仕事でも再利用できます。