← カリキュラムに戻る

デザイン | はじめて

仕事で使えるデザインは、見た目より判断しやすさで決まる

資料やバナーを整えているのに、伝わらない人へ。装飾を足す前に、見る人が迷わず判断できる順番をつくります。

情報の順番と余白を整理して伝わりやすくするイラスト
この端末に保存

デザインを改善するとき、色やフォントから変えがちです。

見た目は変わっても、読む順番や重要度が整理されていなければ、見る人の迷いは残ります。

仕事で使えるデザインの最初の仕事は、情報の優先順位を見える形にすることです。

この記事で持ち帰ること

この記事では、考え方を知るだけでなく、自分の仕事で一度試せる状態まで進めます。読みながら、いま困っている場面を一つ思い浮かべてください。

  • 最初の情報を一つにする
  • まとまりと余白をつくる
  • 次の行動を一つにする

先に、この記事の結論

デザインを直すときは、次の3つを確認します。

  • 最初に見る情報が一つあるか
  • 情報のまとまりが分かれているか
  • 次にする行動が見えるか

1. 最初に見る情報を一つにする

すべてを目立たせると、何も目立ちません。タイトル、結論、数字など、最初に見てほしいものを一つ決めます。

資料このページの結論は『まず対象業務を一つ選ぶ』

画面最初に押してほしいボタンは一つだけ強調する

2. 情報をグループに分ける

関連するものを近づけ、関係のないものとの間に余白を置きます。線や装飾を増やす前に、配置で関係を示します。

見づらい状態

  • 見出しと説明が離れている
  • 同じ重要度の箱が多い
  • 余白が均一で区切りがない

判断しやすい状態

  • 見出しの直下に要点がある
  • 重要なものだけ大きくする
  • まとまりごとに余白を変える

3. 次の行動を見せる

情報を読んだあとに、何をすればよいかが分からないと、資料はそこで止まります。行動を一つに絞って置きます。

確認
誰が見るか初めて読む担当者
何を判断するかこの施策を試すか
次の行動チェックリストを一つ埋める

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

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

1. 最初の情報を一つにする

見る順番を設計する観点です。最初に理解してほしい結論を一つ決め、サイズ、位置、余白で優先度を示します。すべてを強調すると順番は消えます。

最初の情報を一つにする」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。

2. まとまりと余白をつくる

情報の関係を見せる観点です。近い情報をまとめ、別の役割との間に余白を置きます。線や色を増やす前に、配置だけで関係が伝わるか確認してください。

まとまりと余白をつくる」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。

3. 次の行動を一つにする

操作と状態を誤解させない観点です。色だけに意味を持たせず、文字や形でも区別します。小さい画面と第三者の視線で、結論と次の行動を確かめます。

次の行動を一つにする」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。

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

変更前このページの結論は『まず対象業務を一つ選ぶ』

変更後最初に押してほしいボタンは一つだけ強調する

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

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

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

手順ごとの確認点

仕事で使えるデザインは、見た目より判断しやすさで決まる」を実務で使うときは、次の手順を一度に終わらせません。各段階で短い記録を残すと、途中で迷っても一つ前の判断へ戻れます。

  1. 最初に目に入るものを確認する

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

  2. 重要度が同じに見える要素を一つ減らす

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

  3. 関連する情報を近づける

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

  4. 次の行動を一つだけ残す

    四つ目の作業では、変更前と同じ条件で結果を確認します。差がなければ、対象の選び方と変更内容のどちらを見直すか決めます。

  5. 第三者に結論を10秒で言ってもらう

    最後の作業では、今回だけ通用した条件と、次回も使える判断を分けます。使える条件と使わない条件の両方を残してください。

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

整えたのに伝わらない

見た目ではなく情報の優先順位を確認します。タイトルだけを読み、ページの結論と判断してほしいことが分かるか試してください。

どこを見ればよいか迷う

強調が多すぎます。主役を一つ残し、同じ大きさ、太さ、色の要素を減らして視線の入口を作ります。

小さい画面で崩れる

横幅だけを縮めず、読む順番へ一列に並べます。補助情報を後ろへ移し、主要な操作が最初の流れに残るか確認します。

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

実践課題の完成条件

課題は「1枚の資料を3分で見直します。」です。資料を作っただけでは完了にしません。次の四項目を第三者が読み取れる状態まで整えます。

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

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

仕事で使うときの確認順

一度にすべてを変える必要はありません。次の順番で確認すると、どこを直したかと、その変更が効いたかを追いやすくなります。

  1. いま困っている人、業務、場面を一つに絞る
  2. 変更前の状態を、数字または観察できる行動で残す
  3. この記事の判断基準を一つだけ使って変更する
  4. 同じ条件で変更後を確認し、次に残す改善を決める

よくある失敗

知識を増やすこと自体を目的にすると、実務は変わりません。また、複数の改善を同時に行うと、何が結果へ影響したか分からなくなります。最初は一つの場面、一つの変更、一つの確認指標に絞ってください。

実践課題

1枚の資料を3分で見直します。

  1. 最初に目に入るものを確認する
  2. 重要度が同じに見える要素を一つ減らす
  3. 関連する情報を近づける
  4. 次の行動を一つだけ残す
  5. 第三者に結論を10秒で言ってもらう

課題を終えたら確認すること

完成物を一人に見せ、説明を足さなくても要点と次の行動が伝わるかを聞きます。伝わらなかった箇所は、情報を足す前に、順番と具体例を見直してください。

まとめ

デザインは、きれいに飾ることではなく、見る人の判断を助けることです。

  • 最初の情報を一つにする
  • まとまりと余白をつくる
  • 次の行動を一つにする

作った資料や画面の改善点を、整理したい方へ

制作物と、誰に何を伝えたいかを持って、個別相談の内容をご覧ください。

個別相談・1on1の内容を見る

学びをアウトプット

ここで得た学びをXで投稿しませんか?

指定ポストを引用し、学んだことを自分の言葉で残せます。

Xで学びを投稿する
次のLesson伝わるデザインの4原則