アプリの色をコントロールする話
こんにちは。暑い夏をお過ごしですか？そんな夏も後半戦ですね。
それでは2回目の連載です。
前回はスマホアプリのアイコンやボタン、ページ遷移のあり方についてお話ししました。
今回は色の使い方をお話ししましょう。
色が私たちに教えてくれること
みんな誰しも色に印象がありますね。
赤といえば、青といえば、黄色といえば…..
それは個人的な経験や好みのこともあれば
生活・社会習慣の中で身につけたこと（例えば信号の色、パソコンの色、美味しい食べ物の色、季節の色…）もあります。
色はただ色が付いているという現象には収まりません。
私たちには色を見て多くのことを察知する能力が備わっています。
色の印象は、そのものを特徴づけます。レモンといえば黄色、エアコンといえば白色、教室の机は木の茶色……それは例えディスプレイの上であっても同じです。
ディスプレイ上での現象には触覚がありませんから、視覚の担う役割は大きいです。
あなたがオリジナルのブランドやアプリを作ろうと思ったら、できるだけ印象に残る（あるいは目立つ）色を使って、他と差別化できたらと考えるでしょう
しかし、例えメインカラーを決めたからと言って、その色だけでは世界で独立してくれません。
珍しい色やユニークな色を使うことよりも、色に触れる文脈を丁寧に設計することが大切です。
色と出会う場所
まずメインカラーを決めると思います。
単に青！と言っても青にもかなり幅があるので、どのくらいの青なのか明確にする必要があります。同じ系統の色を使う他のブランドと見比べながら、カラーパレットの上で根気よく検討しましょう。
また色を決めるときは色相（いわゆる赤・青・黄色などの色のこと）に目がいきがちですが、視認性を考えると「明度差」（色を白黒に変換した時の差）を気にすることも大切です。例えばテキストをメインカラーでおくとき、地の白に対してどれくらいのコントラストがあるのかによって読みやすさが変わります（地にメインカラーをおいた白字のボタンなどを作る時もそうです）。
十分な明度差があるかどうかはこういったサイトを利用すると確認できます。
メインカラーを決めたらその周りの色に付いて考えていきます。
あなたが決めたそのメインカラーが世界の中心として、
例えばテキストの大部分に使われる黒、注意書きやエラーに使われる赤、背景に使う白やグレー、リンクを示す青、オンラインを示す緑などアプリ内で使われる色全てについて定義する必要があります。定義は16進数表記（英語でHexと呼びます）で行います。
こうした複数の色の統一感には「彩度」の統一が不可欠です。
ただ、この彩度を見極めるのが一番厄介です。色相や明度よりも差がわかりにくいところがあります。彩度とは絵具のチューブから出た状態が一番が高く、他の色を混ぜていくとだんだん下がっていくというものです。RGBで考えるなら、(255,0,0）などMAX値の255または最低値の0に振り切っているほど高く、３つの値がよればよるほど低くなります。
彩度を理解するには慣れが必要ですので、普段からものを見る時に気にしていると良いです。こういったカラーパレットのサイトを参考にするのもいいと思います。
こうして色の三属性「色相」「明度」「彩度」を考えるとあなたのアプリオリジナルのカラフルなパレットが出来上がります。
こうしてメインカラーの立ち位置が明確になっていくのです。
色を決めたら、登場頻度をコントロールすることが大切です。
メインカラーをアプリ内で頻繁に使う場合もあれば
アイコン以外ではほとんど使わない場合もあります。
Twitterはあらゆるところにメインの青色を使っているのに対し
Instagramはアプリ内ではストーリーの表示とアイコンにのみ使用しています。
メインカラーの色にもよりますが、アプリ内で多く使えばそれだけ明るくテンションの高い印象を受けますし、少ない頻度で代替に黒などを使えばそれだけクールな印象を与えます。メインカラーをルールなく使いすぎると、ユーザーから見れば何をしたらいいのか、焦点のボケた印象を与えるので、ここぞという主要なアクションのところにだけ使うのが最も効果的です。
Teleddyの色は何色？
Teleddyは青色とオレンジ色のハイコントラストのロゴマークを採用しています。
二つの立場、違う場所に住む人、光と影を表現しています。
またアプリ内では、ロゴの青と別にボタンの青を定義しています。こうして２種類の青を使うことで、青とオレンジのハイコントラスト・アプリ画面の落ち着きの両方を実現させました。
このロゴの青はアプリロゴにも珍しくかなり鮮やかな色味です。（大抵ディスプレイなので印刷よりはどのロゴも鮮やかに見えますが、それでも実は彩度を落としていることが多いです。）
Teleddyでは背景に、”白に限りなく近いグレー”を多用することでこの鮮やかさを中和させています。ホームページなども同じですね。真っ白の地と対比されるよりも十分な落ち着きが発揮されています。また他のアプリとの差別化にもなります。
Teleddyにはセンシティブで真面目なコンセプトがありますから、このような演出に至っています。
最後に
色についての見解を深めたいなら、とにかくいろんな色のパターンに触れることが大切です。ブランディングデザイン集みたいな本を読んで見るのもいいと思います。たくさんの本がありますが、あくまで一例として”少ない色数でのブランディング”をまとめたおすすめの一冊を載せておきます。
もし色の概念について理解を深めたいなら、歴史的な一冊ゲーテの「色彩論」をおすすめします。特に前半の概念部分が面白いです。（後半は頭が痛くなるほど細かい話が続くんですけどね.....）色の概念をこんな主観的に自由気ままにまとめた本は後にも先にもこれくらいでしょう。彼は詩人なので持ち前の感性でまるで日記のように考察しています。
スキ・フォロー・アプリのインストールよろしくお願いします！
HP： https://teleddy.com
Instagram：https://instagram.com/teleddy_official?igshid=1k6tz2au3elroTwitter https://twitter.com/nakamurasan_tl?s=21
Twitter： https://twitter.com/teleddy_jp
アプリのインストールはこちら
AppStore: https://apps.apple.com/jp/app/teleddy/id1468250007
GooglePlay: https://play.google.com/store/apps/details?id=com.linoft.teleddy
この記事が気に入ったらサポートをしてみませんか？