シンプルな色と形を使ったiOSアプリのアイコンを形別に分類してみた
こんにちは!Goodpatchのゆきです。シンプルな色と形を使ったiOSアプリのアイコンを色別に分類してみたの記事から引き続き、今回はシンプルな色と形を使ったiOSアプリのアイコンを形別(Circle / Triangle / Square / Pentagon / Hexagon / Heart / Star / Bookmark / Check / Phone / RSS / Bird / Cloud / Rocket / Plane / Pin / Alphabet)に分類してみました。
取り上げているアイコンの中には、2つの特徴を持っていて、2つの項目に当てはまるものがありました。 ※アイコンの枠は形に含まれていません。
今回はアイコンを形別に並べています。形に注目しながら、スクロールしてみて下さい!
目次
CIRCLE

Circulr

NYC Subway Realtime
TRIANGLE

Trigonomics

Triangulon
SQUARE

SQUAREX
PENTAGON

Geometrics
HEXAGON

Gree

Keep Shopping
HEART

We Heart Pics

Rebtel

WannaDo
STAR

MyRSS

Retweets!

Reeder 2
BOOKMARK

Momento

Those Days
CHECK

QuickIn

ToDo 7

T-Todo

WannaDo
PHONE

Rebtel

Speed Dial

Viber
RSS

fyuz

feedoon

Feedpie RSS Client
BIRD

CLOUD

WD My Cloud

Nebulous Notes Lite

SkyDrive
ROCKET

Skyrocket Company

Anyplan
PLANE

Flights Search
PIN

Mapic Share Where

Pin Drop
ALPHABET [ A ]

A-Card

ADrive Mobile
ALPHABET [ g ]

Google+

Google Search
ALPHABET [ G ]

Groupon

GULFSIP Video Call
ALPHABET [ P ]


Path
ALPHABET [ Q ]

Quora

Quizlet
ALPHABET [ v ]

Vimeo

Vine
ALPHABET [ y ]

Yummmy
形について
自分の会社 / サービスのロゴの図形、ロゴタイプのアルファベットをそのままiOSアプリのアイコンの形として使うことは分かりやすく、どの会社 / サービスのアプリなのか、どういった内容のアプリなのか、ということが連想しやすくなります。他の会社 / サービスと関連しているクライアントアプリの場合は、その会社 / サービスを連想するような形を使うと分かりやすいと感じました。アルファベットを使っているアイコンのほとんどでは、ロゴタイプの頭文字を1文字だけ使っていて、その1文字は文字としてだけではなく形としてデザインされ、認識されているため、文字と形の境界線について考えさせられました。
このようなロゴに関連した形も含め、全体を3つのケースに分けて考えることができました。幾何学的な形を使って抽象的な表現をしているケース、アプリの内容やコンセプトを表すモノの形を使って具体的な表現をしているケース、そしてシンプルな形を組み合わせて使っているケースです。幾何学的な形は美しく、ぱっと見たときに分かりやすいですが、こういった抽象的な形からアプリの内容は想像しにくいのではないでしょうか(Greeの場合はロゴの図形に六角形を使っていて、知っている人は想像がつくかもしれません)。



アプリの内容を表すモノの形からはToDo 7 : チェックマーク→タスク管理、Speed Dial : 受話器→電話、Pin Drop : ピン→位置情報、SkyDrive : 雲→クラウド、といったアプリの内容を想像することができました。また、サービスのコンセプトを表すモノの形を使っているアイコンも存在するような気がしていて、Anyplan : 「速いスピードで目標に向かう」→ロケット→ロケットの形というように、コンセプト→モノ→形という流れを想像しました。





さらに、いくつかのシンプルな形を組み合わせて使っているアイコンについて気になりました。例えば、同じハートという形を使っていても、Rebtel はハートと受話器、Wannado-Manage はハートとチェックマーク、というように別の形と組み合わせています。この様にシンプルな形を組み合わせることで、シンプルさを保ちつつ、個性を出すことができるのではないかと思いました。


「シンプル」について
シンプルだと思ったアイコンをよく見てみると、色がグラデーションになっていたり、形のパーツや角数が多かったりして、人間は何をシンプルと感じるのか、ということについて考えさせられました。「シンプル」とは何か、考えながら分類をしてみて、人間がまとまった色とまとまった形と感じられるものはシンプルなのではないかという考えに至りました。その為に使う色と形の種類を絞って選択することが必要で、その結果、フラットなアイコンになりやすい気がします。もちろんフラットでなくてもシンプルなアイコンは存在するし、逆にフラットでもシンプルとは言えないアイコンも存在します。


まとめ
色と形のそれぞれについて、ぱっと見ただけでは気付けなかったことが、分類することで見えてきました。シンプルなアイコンにおいて、色と形がどう使われるべきか、という定まったルールが見つかったわけではないけれど、色と形の使われ方はいくつかのケースに分けることができました。特にコンセプト→モノ→色、コンセプト→モノ→形という流れは発見でした。このフレームに沿って、アイコンの色と形について考えてみると、何か新しい発見があるかもしれません。
皆さんはどう感じましたか?
この連載は以上です!