はじめに
やあ諸君。デザイナー兼ジャックスパロウのsparrowだ。 さて、前回の「プロダクトロゴ編」に引き続き、今回は配色についてだったな。
配色は下記の項目を念頭に置いて組み立てていく
- 十分なコントラスト比を担保する
- 長期的に効率よく運用が可能
- ダークモードを見据える
- 現実の物理法則のような構造的レイアウトを可能とする
十分なコントラスト比を担保する
カラーパレットを組み立てるうえで重要なポイントのひとつとして、背景色に対する文字色のコントラスト比がある。 これに関してはUIデザイナーに限らず、印刷物等のデザイナーでも必ず考慮するものであり、WCAGにも基準が定義されている。 内容についてここで詳しく説明はしないが、要は 「屋外のような、ディスプレイ上の文字やボタン等が見辛い環境下だったり、ロービジョンの人に対してきちんとコンテンツ提供を可能とする」 ということを考慮しようねということだ。 画像のボタンサンプル、どっちがコントラストが良いとされると思った？ よく利用されがちなのが白文字の方だ。 しかしだな、基準のコントラスト比を満たしているのは濃色文字の方だったりする。こういったコントラスト比の基準は、文字サイズやピクトグラムサイズごとに決まっているので注意する。 reBakoでは似たような青背景に白文字を設定したが、それは既成概念的な「見やすさ」と「コントラスト比をある程度満たした見やすさ」を兼ね備えるハイブリッドとした。
長期的に効率よく運用が可能
多くの場合、複数のデザイナーやエンジニアが携わるため、シンプルで使い勝手がよく長期的に持続可能なものでなければならない。
- それぞれの色が、どこでどのように使われるか
- 色と色の関係性
- 拡張性
たとえ配色パレットを用意したとしても、上記が考慮されていない場合、携わる人それぞれの解釈で利用され、プロダクト全体での整合性や秩序も曖昧になり、開発のコミュニケーションコストが増加してしまう。 ただでさえ作ってる側が曖昧なのに、それがユーザーにとって良いものになるのかは言うまでもない。 reBakoのUIでは、曖昧な表現でもあるCaution/Warning（注意色）は敢えて設定していない。 なぜなら、どういったアクションに対してなのか、どこで利用するべきなのか、人それぞれの解釈になりがちで、コストや懸念に対して利用した場合にもたらされるメリットが小さいと考えたからだ。 もうひとつ、安全色は必ずしも「青系」や「緑系」ではなくても良いということ。既成概念の伴ったアフォーダンスに反するものの、その色を利用する箇所やルール、一定の法則さえ守られていれば低い学習コストで認識してもらえるはずだからだ。
ダークモードを見据える
実装がスタンダードとなりつつあるダークモード。 もともとは健康意識の高いユーザーに支持されはじめ、現実世界でブラインドを下ろしたりサングラスを利用するのと同様、目の保護を目的としたモードだ。 しかし最近ではダークモードの美しさを主とした利用が多くを占めているようだ。また、Spotifyの開発ディレクターは「カラフルでアーティスティックな音楽やカヴァーアートの美しさを際立たせるには、ダークモード環境が適している」と『Fast Companyのインタビュー』でいっているように、コンテンツによっては違う目的としてダークモードが主として扱われる場合もある。
reBakoは、居場所や環境を問わないオンライン上でのコミュニケーションが目的として作られているため、もちろんダークモード対応を見越して配色を組み立てている。 予めダークモードを見越したパレットを設計していないと、すでにあるすべての色を再定義する必要性が出てきてしまうんだ。
現実の物理法則のような構造的レイアウトを可能とする
かつてUIデザインは、現実世界を模倣したデザイン表現をすることで、すでにある知見で素早く使いこなせることを目指した「skeuomorphism（スキューモーフィズム）」という手法がスタンダードだったんだ。 ものすごく簡単にいうと、立体表現やシャドウ表現が多用されたものだ。 しかし時代は変わり、過度な表現を限りなく削り落とし、Z軸の階層構造を「色の明度の差異」で表す手法である「フラットデザイン」がスタンダードとなった。
こういったデザイン手法のトレンドは常に変化していて、「フラットデザイン」だとリアクション可能な要素なのかなど、そういった部分で無理あるよねといった流れでドロップシャドウが付加されたり、現実世界の法則にある程度寄せた「Material Design」が主流となり、最近ではさらに立体感までついた「Neumorphism（ニューモーフィズム）」なども話題になっている。
まさに時代は繰り返す。
重要なのは、どの手法を使うのかではなく、それぞれの手法が何を解決するためにその表現を取り入れたのかを探求や理解をして、最適な表現を導くことにあると考える。
上述のような点を考慮して配色や表現を組み立てたものを下記に貼っておく。
俺自身は「絶対の正解」は無いと思っていて、だからこそデザイナーが常に考えてアップデートしていくものであると思っている。 ひとつだけの正解があるならば、誰でも作れるようになるが、なんら代り映えのしない退屈なプロダクトの世界になってしまうだろう。
今回はここまでだ。 おっと、「じゃあ完成したものを説明しろ」と言われそうだな。 実際に完成した配色に対して「ここはこうで」と説明するよりも、前提知識を入れたうえで、完成したものを自由に眺めてもらう方が「発見」する楽しさがあるだろう？正解なんてないんだよ。おわかり？
次回は『UI/UXの気遣い』について紹介していこうと思う。
諸君、お嬢さん！今日という日を忘れるな！ 捕らえ損ねちまったな、キャプテン・ジャック・スパロウを！
