Design
デザイン
color
配色

色の悩みを解決してくれるアプリやサービス

アプリを開発するときに、いつも色で悩みます(色って難しいですよね)。
今回は、色についての悩みを解決してくれる色々なサービス(色だけに)を紹介します。

色の名づけどうする?

まずは、色の名づけです。

たとえば、アプリでこんな色をつかうことになりました。

color01.png

毎回カラーコードを入力するのは大変なので、定数にカラーコードを登録しようとします。しかし、そのとき、ハタと手が止まります。

定数の名前はなににしよう? と。

濃い青だからdarkBlueで、普通っぽい青はbuleで、緑っぽい青はgreenBlueで、ってわけがわからんわー! となります。

そんなときに活躍するのが、Coolorsです。

color02.png

こちらのサイトでは、カラーコードだけでなく、色の名前が表示されます。この名前をつかえば、名づけで悩むこともありません。

また、名づけルールが統一されるので、チームで開発するときにも混乱しませんし、作業を引き継ぐときにも間違うことはありません。

これって何色?

外を歩いているとき、ネットを見ているとき、アプリをつかっているとき、この色いいな、アプリにも使いたいな、ということがあります。

でも、何色なのかわからなくて困ってしまう。そんなときに、写真や画像から色を調べてくれるのがAdobe Color CCというサービス、またはAdobe Capture CCというアプリです。

こちらがアプリの画面です。

color03.PNG

写真を選択すると白丸が現れるので、タップで調べたい色の場所に移動します。そうすると、画面上側に白丸の位置の色が表示されます。

color04.jpeg

つぎの画面では、選んだ色の詳細を見ることができます。

さきほど紹介したCoolorsでも写真や画像から色を調べることができます。お好みで使いわけてください。

どんな配色にしよう?

色の悩みといえば、配色があります。
色の組み合わせが悪いと、重要な情報に気がついてもらえず、ユーザーが迷子になってしまいます。

そんなときに便利なのが、さきほども紹介したAdobe Color CC、またはAdobe Capture CCというアプリです。

color05.PNG

このようにいくつかあるルールから選ぶだけで、キーとなる色をもとに、配色のサンプルを作成してくれます。

color06.jpeg

こちらは補色を選んだサンプルです。
このように、とても簡単に見やすくてステキな配色を作成することができます。

また、こちらの配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめもオススメです。

「自然(英; Nature)」、「フード(英: Food & Drink)」、「旅行(英: Travel)」、「ライフスタイル(英: everyday)」4つにカテゴリー分けされた写真を参考に、配色決めでつかえる100種類のカラーパレット組み合わせをご紹介します。

color07.png

説明文に書いてあるように、なんと100種類もの組み合わせが紹介されています。
どの組み合わせにもステキな写真がついているので、実際にその色をつかったときのイメージがしやすいところもいいですね。

おまけ

色についての悩みを解決してくれる便利なサービスやアプリを紹介しました。

最後にもうひとつ、おもしろいアプリを紹介します。

それは、コピックコレクションです。

もともとは、コピックというアルコールマーカーを管理するためのアプリなのですが、アップデートでおもしろい機能が追加されました。

たとえば、写真や画像から色を選択すると近い色のコピックを教えてくれたり、使用した色を記載してイラストをSNSにシェアしたりできます。

color08.PNG

また、こちらのように補色を表示したり、

color09.PNG

色名の由来を見ることもできるので、いろいろな色を眺めているだけでも楽しいです。

いろいろなサービスやアプリを活用して、楽しく色で遊びましょう。