s.Sakurai NotesA PERSONAL LEARNING LIBRARY

色による区分

色や絵を分類の手掛かりにすると選択が速くなる一方、画面全体の雰囲気との整合も必要になります。

約2分で読む元動画 2:27
色による区分の動画サムネイル
桜井政博のゲーム作るには · 07
▶ 元の動画を見る ↗

動画で語られていること

分類と下層画面の色を対応させる

メニューの入口で使った色を、進んだ先でも続けます。そうすると、毎回文字を読まなくても、今どの分類にいるかが分かりやすくなります。色を階層の中で一貫した手掛かりにするわけです。

入口で覚えた色が次の階層でも続くと、文章を毎回読まなくても分類を意識できます。飾りとして色を増やすのでなく、同じ分類には同じ色を続けます。どこにいるかも分かりやすくなります。

絵を覚えることで探索を速くする

キャラクターが目立つメニューは、使ううちに絵と機能が結び付きます。文字を順に読む以外に、見覚えのある形を探して直感的に選べるようになります。

使い続ける中で絵と行き先が結び付けば、名前を順に読む必要が減ります。図像を使うのは画面を派手にするだけでなく、覚えた形へ素早く到達するためでもあります。

色数を増やす前に作品の調子を見る

色分けは有効でも、塗り分けすぎると幼い印象や雑然とした印象を作ります。分類の便利さを理由に、作品のトーンを崩してよいわけではありません。

一方、画面のあちこちに無関係な色が散ると雑然としやすいです。色分けが向く作品と向かない作品もあり、便利な方法をそのまま持ち込むのでなく、全体の調子に合う範囲で用います。

自分の仕事で考えてみる

自分の制作に持ち帰る

このサイトの編集者による応用の問いです。

  • カテゴリの入口と記事ページで同じ色の手掛かりが続いているか点検します。
  • 色を外しても分類が分かるラベルを残し、色の追加で本当に探索が速くなるか試します。

動画で確かめる

気になる場面から、元動画を見返せます。

出典動画

出典:色による区分
桜井政博のゲーム作るには / 元の再生リスト:UI
日本語字幕を資料に、説明・理由・具体例を独自に整理・再構成しました。公式記事ではありません。正確な内容は元動画で確認してください。
読んで、考えたこと

自分のメモ

メモ・読了・お気に入りは、このブラウザだけに保存されます。