お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

配色がスーパー苦手でも、これならきっと何とかなるっていう2パターン

どうもこんにちは。JBです。
私は配色が超絶苦手でして、美術の先生に「何か色塗る前の方がよかったね!」とせせら笑われるレベルで色をのせるのが苦手です。
曲がりなりにもデザインをやっているので、「こりゃないわ…」と思われるわけにはいかない…!そんなわけで、配色苦手な人でも何とかなる色使いを調べてみましたよ。

これならきっと失敗しない

アプリの配色デザインをいくつか挙げながら見ていきたいと思います!英語のアプリが多いのはPttrnsで探したからです。

Pttrns – Mobile User Interface Patterns

それではいってみましょう!

白〜グレー×アクセント1色

そりゃうまく行きます。無彩色と色1つなんで、ぶつかりようがないってもんです。ブランドなどのキーカラーを使っている場合が多いですね!

Airbnb

Airbnb contentAirbnb-menu

キーカラーが明るい水色。写真がメインのコンテンツなら、他要素はこんな感じですっきりしていた方が分かりやすいですね!

Vine
Vine

Foodspotting
Foodspotting
濃いグレー(または黒)を使うと、モダンな感じが強くなりますねー

Snapguide
Snapguide
無彩色の部分に多少色味を持たせると、雰囲気を演出することが出来ます。この場合ベースカラーが黄みがかっているので、暖かみが出てますね!

最近はアクセントカラーに強めの色を使っているのをよく目にします。エメラルドグリーンとかサーモンオレンジが人気ですよね。
アクセントカラー1色とか言ってしまいましたが、リンクカラーとかは別の色を使っていることも多いので、そこはよしなに。アクセントに複数色を使う時、どうしてもうまく行かない場合は、彩度や明度に統一感を持たせると比較的マシな感じになります。

同色の濃淡グラデーション

こちらもぶつかりようがないので安心です。色彩理論的には「ドミナントカラー配色」。色相は近い色で、明度・彩度を変えた配色ですね!

UNIQULO RECIPI
ほぼ1色ですが…タブのハイライトがベースカラーより1段濃い色で表されています。ファッションとレシピが色で連動しています。シャレてるなあ。

UNIQLORECIPEUNIQLORECIPEUNIQLORECIPE-timer

Cloak
image-5

TriplAgent
TriplAgent
このアプリも上の例は濃淡グラデですが…
カテゴリ選択部分はすごくカラフルです。こちらは色相のグラデーションですね!

TriplAgent-2TriplAgent-3

比較的彩度を近い色を使っているから(そうじゃない色もありますが…)まとまりがつくんでしょうか…ね…?
何も考えずこんな風に出来るセンスが欲しい。

ちなみに同色濃淡グラデーションは、色相をあまり変えないで彩度や明度を変えるとうまいこと出来ます。カラーピッカーのHSBで作ると分かりやすいですよ。

まとめ

配色と言われると、「何、5色くらい使った方がいいのかしら…」とか思いがちですが(私だけですかね)、キレイに見えて、最終的な意図がきちんと表現できれば色数は少なくてもOKだと思います。
そのかわり、コンセプトや想定ユーザーの好みと傾向、利用シチュエーションなどじっくり考えて、ぴったりの色を練ることが必要になってきそうですね。

勉強すれば克服できる分野ではありますが、慣れないうちは、こんな配色に頼ってみてもいいかと思いますよ!
それではー

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00