情報デザインへ戻る

デザイン学部 | Lesson 05 | 実践

前のLesson文字の階層を設計する

色を役割で使い分ける

好みではなく、分類、状態、行動の役割から色を選びます。

情報デザインコースのイラスト
この端末に保存

進捗画面では緑を完了、赤をエラー、青を操作へ固定します。部署ごとに好きな色を足すと、同じ色が複数の意味を持ちます。

このLessonの結論

好みではなく、分類、状態、行動の役割から色を選びます。

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

  • 基盤色と強調色を分ける
  • 一つの色に一つの役割を与える
  • 色だけに意味を依存しない

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

色は装飾より先に、分類、状態、行動を伝える記号です。役割が重複すると、見る人が判断を誤ります。

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

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

1. 基盤色と強調色を分ける

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

基盤色と強調色を分ける」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。

2. 一つの色に一つの役割を与える

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

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

3. 色だけに意味を依存しない

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

色だけに意味を依存しない」を確認するときは、判断を一文で書きます。根拠にした事実も隣へ置くと、別の選択肢と比べるときに迷いません。

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

変更前目立たせたい箇所へ毎回違う鮮色を使う

変更後基盤色、文字色、主要操作色、状態色へ役割を限定する

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

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

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

手順ごとの確認点

色を役割で使い分ける」を実務で使うときは、次の手順を一度に終わらせません。各段階で短い記録を残すと、途中で迷っても一つ前の判断へ戻れます。

  1. 制作物の全色を一覧にする

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

  2. 各色の役割を一語で記入する

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

  3. 役割が重なる色を統合し、色なしでも意味が通るか確認する

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

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

整えたのに伝わらない

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

どこを見ればよいか迷う

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

小さい画面で崩れる

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

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

実践課題の完成条件

課題は「既存制作物の使用色を役割別に分類し、不要な色を減らします。」です。資料を作っただけでは完了にしません。次の四項目を第三者が読み取れる状態まで整えます。

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

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

つまずきやすい3つの点

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

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

曖昧な目標で終える

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

変更前を残さない

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

そのまま使える作業メモ

対象今回扱う人、業務、場面を一つ書く

現状目立たせたい箇所へ毎回違う鮮色を使う

変更基盤色、文字色、主要操作色、状態色へ役割を限定する

確認何を見れば改善したと判断できるかを書く

実践課題

既存制作物の使用色を役割別に分類し、不要な色を減らします。

上の作業メモを使い、変更前と変更後を並べて保存します。所要時間は20〜30分が目安です。完成度を上げるより、一度試して差を確認することを優先してください。

理解度チェック

  1. 自分の業務では「基盤色と強調色を分ける」を、どの事実で確認しますか。
  2. 自分の業務では「一つの色に一つの役割を与える」を、どの事実で確認しますか。
  3. 自分の業務では「色だけに意味を依存しない」を、どの事実で確認しますか。

答え方の目安対象の業務名、確認する事実、合格とする状態の三つが入っていれば十分です。「意識する」「気をつける」だけで終わっていないかを見直します。

まとめ

好みではなく、分類、状態、行動の役割から色を選びます。

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

学びをアウトプット

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

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

Xで学びを投稿する
次のLesson図解で関係を見せる
0円カワイ大学