0から学ぶアプリの配色

2014-06-04

当方Androidエンジニアをしておりますが、プライベートでアプリを作るとき、画像リソースについてはAndroid組み込みのものを使ったり、Fontawesomeを使ったり、フリー素材を使ったりしています。しかし配色はインターネットに落ちていなくて、自分でやるとイマイチで、いい感じにしたいという気持ちがありました。

そこで、調べたり試行錯誤をして知見が得られたので、配色に悩むエンジニアのために共有します。

3行まとめ

デザインはセンスで行うものではなくロジックで成り立ってる、つまり努力でなんとかできる
Color Scheme Designer 3 便利
配色を学ぶのには下のスライドが一番分かりやすかった

色彩センスのいらない配色講座 from Mariko Yamaguchi

STEP 1. 対象に興味を持つ

〜〜で必要だから勉強しなければって始めてたものが長く続いたことがないので、「もっと知りたい」と興味を持つところから始めました。それで、いろいろ本を見てみましたが、

巨匠に学ぶ配色の基本

この本は有名な絵がたくさん出てきて、その絵が配色によってどういう印象を受けるかということをテーマに、色相の効果、トーンの効果、配色の組み立て方が学べる良本でした。たとえばゴッホの「夜のカフェテラス」を左は鮮やかな反対色で、右は渋いトーンの同色系の2パターンで配色を比較します。

反対色は華やかさを表していて、右の絵はテントの鮮やかな黄色が星空の青色を背景にして輝いていて、見る人を元気づけます。一方で、左の絵のように反対色が効いていないと、閉鎖的で寂しい気分になります。

…という具合で「良く分からないけど配色ってすごいぞ！」という気持ちになりました。

STEP 2. 基礎を学ぶ

冒頭にリンクを張りましたが、色彩センスのいらない配色講座がすこぶる分かりやすかったです。

色の属性

色には3つの属性があります。

色相（色み）
明度（明るさ）
彩度（鮮やかさ）

つまり色とは、なんかセンスがあるっぽい人が感覚的に選ぶものではなく、「色相」「明度」「彩度」の3つの属性を表し、選ぶことができるものです。

配色の与える印象

まったく同じ画像でも、彩度を変えるだけで印象が変わります。

配色に使う色の割合

使う色は3色を基本として、以下のような割合にします。

インテリアやファッション業界でよく使われる60-30-10 Ruleもあります。また、3色では足りないということもよくあり、その場合はカラー分割という手法で色を追加します。

色の選び方

メインカラーの選び方

最初にメインカラーを選びます。明度が低めの色の方が扱いやすいです。あとはイメージや好みや戦略で決めます。

ターゲットユーザーの好きそうな色
競合と被らない色
クリックされやすい色
俺はオレンジが好きなんだ

ベースカラーの選び方

次にベースカラーを選びます。ベースカラーは背景など広い色面を彩る色です。背景などになる色なので、白や明度が高い色が扱いやすいです。

無彩色、もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早いです。

アクセントカラーの選び方

最後にアクセントカラー。少ない色面でアクセントを出すカラーです。メインカラーから離れた色相にすると鮮やかになります。

ポイント

基本的に高彩度の色は扱うのが難しい
純粋な黒は使わないで、他の色を少し混ぜて使うとよい
- 【オタクファッション】どうしてお前らは、黒系のファッションばかり好んで着るの？

STEP 3. 実践してみる

miyagawaさんがやってるRebuild.fmのクライアントアプリを作っていて、最初は本家ウェブサイトのデザインを流用すればいいかなと思っていたのですが、作っていくうちにいくつかのことに気が付きました。

ウェブとアプリで見せるものが違う
- アプリはキャッシュやダウンロードの状態をユーザに知らせる必要がある→同じデザインにしようとしたら無理が出てきた
使うシーンが違う
- 部屋で作業をしながらゆっくり聴くときはウェブ、外で聴くとき (走ってるか自転車乗ってるか) はアプリ→なのでアプリはちょいアクティブなイメージにしたかった

そういうこともあって作り直したいなと思っていました。

STEP 3-1. イメージする

Rebuild.fmは、サンフランシスコあたりから最新のテクノロジー情報 (たまに高度成長期の日本の話も出てくるけど) が流れてくるようなイメージを持ってるので、それを配色に反映しようと思いました。サンフランシスコについて思いを巡らせると…サンフランシスコには行ったことないので、ルパン三世のサンフランシスコが舞台の映画、アルカトラズコネクションを思い出すと、ケーブルカーとアルカトラズとゴールデンゲートブリッジが印象的だったので、青、赤、緑、橙でトーンマップのブライト、ストロングあたりで考えました。

日本色研事業株式会社

もし思い付かなかったら、思い付いたキーワードで画像検索したり、その画像をColorArtに突っ込んだりしてみてもいいんじゃないでしょうか。

サンフランシスコのケーブルカーの画像を入れてみた

STEP 3-2. 配色を考える

Color Scheme Designer 3 というサービスを使いました。

ここでいくつか組み合わせをみて、水色をメインにアクセントに補色のオレンジを採用しました。

STEP 3-3. アプリに適用する

結局ベースカラー2色、メインカラー2色、アクセントカラー1色になりました。

スマホの画面は狭いので、開けた背景画像を使って奥行きを出すことで圧迫感を減らしています。映画では空撮を入れてスケール感を拡げるということがあるらしいです。システムのカラーが青で、操作できるコンポーネントがオレンジになっています。これによってちょっとアクティブなイメージになりました。

所感

デザインも勉強して経験を詰めばいずれできるようになりそう (プログラミングと一緒！)
デザインの勉強は座学と実技をバランス良くやるのが大事と聞いたけど、実践してみると分からないことが出てきてよい (プログラミングと一緒なんだ！)
しかし、配色はデザインのほんの一要素で、さらに今回学んだのは配色の中のほんの一部なので先は長い (プラグラミングと一緒だ…)

Rejasupoem