シンプルな色と形を使ったiOSアプリのアイコンを色別に分類してみた
こんにちは!Goodpatchのゆきです。現在、Keio Media Designの大学院に所属していて、色と形を使ったコミュニケーションについて研究をしています。
MEMOPATCHでは、シンプルな色と形を使ったiOSアプリのアイコンを分類し、そこから気付いたことを2回にわたって紹介していきます。今回はアイコンを色別(Red / Orange / Yellow / Green / Cyan / Blue / Purple / Magenta / White / Black)に分類してみました。そして次回はアイコンを形別(Circle / Triangle / Square / Alphabet などの予定)に分類してみます。
アイコンは限定された枠の中で、色と形を使ってアプリの特徴を表現しています。シンプルな印象のアイコンを作るには、使う色と形の種類を絞って、選択することが必要です。その選択された色と形について、別々に分類してみることで、色と形の使われ方のポイントが見えるのではないかと考えました。
今回はアイコンを色別に並べています。色に注目しながら、スクロールしてみて下さい!
RED

Path

YouTube

Momento

Quora

Google+
ORANGE

StumbleUpon!

Lumosity

Bonfyre

Loom

Blogger
YELLOW

good weather

Digits Calculator
GREEN

Hulu

Mugic

Vine

Plannah

Note Anytime
CYAN

Vimeo

Skype

QuickIn

Those Days

Fancy

AudioBox


Nebulous Notes Lite

nwplying

Alien Blue
BLUE

ToDo 7

Google Search

Quizlet

SkyDrive

Adobe Photoshop Express


Facebook Messenger
PURPLE

WWDC

Viber
MAGENTA

Freeshot

One Year Letter
WHITE

Gunosy

Google AdSense
BLACK

UBio
色について
自分の会社 / サービスのロゴ、Webサイトなどで元々使っていた色を、そのままiOSアプリのアイコンに使うことは一般的に行われますが、こうして並べてみて、色の使われ方はそれだけではないということに気付きました。
Skype : 空→シアン、Vine : つる植物→グリーン、Bonfyre : 火→オレンジ、といったサービス名が表すモノの色を使っているケースが存在していることが分かってきました。さらに、そのモノからサービスのコンセプトを想像することができました。個人的にはSkype : 「世界中のどこでも繋がる」→空→シアン、Vine : 「ショートビデオがループする」→つる植物→グリーン、Bonfyre : 「会話に火がつく」→火→オレンジ、というようなコンセプト→モノ→色の流れを想像しました。また、Freeshot : Dribbble→マゼンタ、Tracker for Twitter : Twitter→シアン、といったクライアントアプリとして、色を他の会社 / サービスから取ってきているケースも存在することに気付きました。
アプリのアイコンにおいては、元気のイエロー、信頼のブルーというような、色ごとの定まったイメージがある訳ではないけれど、そのアプリの特徴を踏まえると、その色が使われている理由が見えてくることが分かりました。
今回はアイコンを色別に分類してみました。皆さんはどう感じましたか?
次回は形別に分類してみる予定です。お楽しみに!