シンプルな色と形を使ったiOSアプリのアイコンを形別に分類してみた
こんにちは!Goodpatchのゆきです。シンプルな色と形を使ったiOSアプリのアイコンを色別に分類してみたの記事から引き続き、今回はシンプルな色と形を使ったiOSアプリのアイコンを形別(Circle / Triangle / Square / Pentagon / Hexagon / Heart / Star / Bookmark / Check / Phone / RSS / Bird / Cloud / Rocket / Plane / Pin / Alphabet)に分類してみました。
取り上げているアイコンの中には、2つの特徴を持っていて、2つの項目に当てはまるものがありました。 ※アイコンの枠は形に含まれていません。
今回はアイコンを形別に並べています。形に注目しながら、スクロールしてみて下さい!
目次
CIRCLE
![](https://i0.wp.com/a1837.phobos.apple.com/us/r30/Purple/v4/ff/61/df/ff61df94-865e-3125-62ef-260be7df49ce/mzl.tfkuumby.100x100-75.png?w=100&ssl=1)
Circulr
![](https://i0.wp.com/a851.phobos.apple.com/us/r30/Purple4/v4/ac/08/4b/ac084bd5-5228-a562-445b-92b099b6b8b7/mzl.hnjhnvdn.100x100-75.png?w=100&ssl=1)
NYC Subway Realtime
TRIANGLE
![](https://i0.wp.com/a1980.phobos.apple.com/us/r30/Purple4/v4/5e/2d/e0/5e2de0f1-28ab-e38e-b839-2a9deda7d0e1/mzl.eipdubvg.100x100-75.png?w=100&ssl=1)
Trigonomics
![](https://i0.wp.com/a828.phobos.apple.com/us/r30/Purple/v4/8c/aa/d0/8caad007-4fe5-adc2-8d39-87e9aa270a66/mzl.bvnaxnad.100x100-75.png?w=100&ssl=1)
Triangulon
SQUARE
![](https://i0.wp.com/a1557.phobos.apple.com/us/r30/Purple4/v4/45/48/6e/45486ec9-34fb-5c73-0959-1d4eba7bc4f3/mzl.vudblrow.100x100-75.png?w=100&ssl=1)
SQUAREX
PENTAGON
![](https://i0.wp.com/a406.phobos.apple.com/us/r30/Purple4/v4/d7/1e/7b/d71e7bd2-9d09-2c9d-cb48-1e8f53c69554/mzl.khcyjbgg.100x100-75.png?w=100&ssl=1)
Geometrics
HEXAGON
![](https://i0.wp.com/a1414.phobos.apple.com/us/r30/Purple6/v4/46/6a/7a/466a7a6b-5bcc-ce12-0c9e-8387b9f462ed/mzl.mhwtjges.100x100-75.png?w=100&ssl=1)
Gree
![](https://i0.wp.com/a1253.phobos.apple.com/us/r30/Purple6/v4/73/99/c1/7399c1b8-ae45-8442-47e5-55b4aaf09f8a/mzl.mlgqlukb.100x100-75.png?w=100&ssl=1)
Keep Shopping
HEART
![](https://i0.wp.com/a232.phobos.apple.com/us/r30/Purple6/v4/d6/00/5b/d6005bbd-8034-0806-4712-0aae6a5d4120/mzl.jcfwboai.100x100-75.png?w=100&ssl=1)
We Heart Pics
![](https://i0.wp.com/a940.phobos.apple.com/us/r30/Purple6/v4/29/06/34/29063422-b389-330a-000a-8769969ba7e7/mzl.udtciifh.100x100-75.png?w=100&ssl=1)
Rebtel
![](https://i0.wp.com/a1641.phobos.apple.com/us/r30/Purple6/v4/5a/1e/3b/5a1e3b38-93c9-5b7b-e615-a0f826d7fe12/mzl.fktquqmj.100x100-75.png?w=100&ssl=1)
WannaDo
STAR
![](https://i0.wp.com/a1750.phobos.apple.com/us/r30/Purple/v4/ba/51/3f/ba513f44-4bf2-8b1d-d567-b24362d7e108/mzl.lcfbftou.100x100-75.png?w=100&ssl=1)
MyRSS
![](https://i0.wp.com/a469.phobos.apple.com/us/r30/Purple/v4/f5/f0/91/f5f0910e-b1fe-ee16-ad98-fe0d29da9396/mzl.bqjlyhdk.100x100-75.png?w=100&ssl=1)
Retweets!
![](https://i0.wp.com/a758.phobos.apple.com/us/r30/Purple/v4/1f/07/bd/1f07bd26-f03d-4ea1-7ab4-3cb16380ab3f/mzl.jgiwqiif.100x100-75.png?w=100&ssl=1)
Reeder 2
BOOKMARK
![](https://i0.wp.com/a1610.phobos.apple.com/us/r30/Purple6/v4/6d/2b/90/6d2b9062-a5c1-ed66-c706-8052bc685203/mzl.iiobsedz.100x100-75.png?w=100&ssl=1)
Momento
![](https://i0.wp.com/a352.phobos.apple.com/us/r30/Purple4/v4/16/0c/ec/160cecaa-8a2f-b875-ace7-7d2960b2a03a/mzl.oetnrwhc.100x100-75.png?w=100&ssl=1)
Those Days
CHECK
![](https://i0.wp.com/a498.phobos.apple.com/us/r30/Purple4/v4/e8/f8/b0/e8f8b0cf-a6ba-6f6b-93bb-84827c25ec17/mzl.gekgkcjt.100x100-75.png?w=100&ssl=1)
QuickIn
![](https://i0.wp.com/a964.phobos.apple.com/us/r30/Purple4/v4/e8/d7/89/e8d78945-db08-66b0-e0df-935cfefbfe71/mzl.uococwuy.100x100-75.png?w=100&ssl=1)
ToDo 7
![](https://i0.wp.com/a158.phobos.apple.com/us/r30/Purple/v4/8d/78/9c/8d789c04-962f-ea80-db65-1cd0e06861f4/mzl.wslonycm.100x100-75.png?w=100&ssl=1)
T-Todo
![](https://i0.wp.com/a1641.phobos.apple.com/us/r30/Purple6/v4/5a/1e/3b/5a1e3b38-93c9-5b7b-e615-a0f826d7fe12/mzl.fktquqmj.100x100-75.png?w=100&ssl=1)
WannaDo
PHONE
![](https://i0.wp.com/a940.phobos.apple.com/us/r30/Purple6/v4/29/06/34/29063422-b389-330a-000a-8769969ba7e7/mzl.udtciifh.100x100-75.png?w=100&ssl=1)
Rebtel
![](https://i0.wp.com/a1480.phobos.apple.com/us/r1000/120/Purple/v4/8b/42/92/8b42922e-ce84-74b4-fcf9-48470b753cd7/mza_2487212466656698923.100x100-75.png?w=100&ssl=1)
Speed Dial
![](https://i0.wp.com/a1470.phobos.apple.com/us/r30/Purple/v4/ea/08/2c/ea082c65-d846-5fdd-9377-62f7046e7ff2/mzl.idykphyc.100x100-75.png?w=100&ssl=1)
Viber
RSS
![](https://i0.wp.com/a719.phobos.apple.com/us/r30/Purple4/v4/a7/c0/0d/a7c00d24-7909-70f5-4366-f78ff9746ed0/mzl.bnasuyfs.100x100-75.png?w=100&ssl=1)
fyuz
![](https://i0.wp.com/a1475.phobos.apple.com/us/r30/Purple/v4/c1/26/64/c12664bd-555b-fd4f-5b66-b029962c23ee/V4HttpAssetRepositoryClient-mzl.pugpfbeg.png-4023159981816267621.100x100-75.png?w=100&ssl=1)
feedoon
![](https://i0.wp.com/a1960.phobos.apple.com/us/r30/Purple/v4/e3/49/aa/e349aaad-9f2e-99ce-1b5e-c9656bbc57a0/temp..ruzapjpv.100x100-75.png?w=100&ssl=1)
Feedpie RSS Client
BIRD
![](https://i0.wp.com/a551.phobos.apple.com/us/r30/Purple4/v4/5e/af/e6/5eafe66a-c725-add7-c21d-39a759ce7374/mzl.ckdlette.100x100-75.png?w=100&ssl=1)
CLOUD
![](https://i0.wp.com/a232.phobos.apple.com/us/r30/Purple/v4/ab/fa/3f/abfa3f22-7548-aeee-3746-ddc4eab3353c/mzl.rjjpokkq.100x100-75.png?w=100&ssl=1)
WD My Cloud
![](https://i0.wp.com/a950.phobos.apple.com/us/r30/Purple6/v4/63/f1/77/63f17721-c27d-edaa-01a3-c5b12cde4073/mzl.ebxhwuvk.100x100-75.png?w=100&ssl=1)
Nebulous Notes Lite
![](https://i0.wp.com/a1907.phobos.apple.com/us/r30/Purple/v4/f3/18/cb/f318cb4b-852d-9617-4bd7-1aef0a3df562/mzl.nspqjlus.100x100-75.png?w=100&ssl=1)
SkyDrive
ROCKET
![](https://i0.wp.com/a1963.phobos.apple.com/us/r30/Purple6/v4/66/cf/0a/66cf0a1c-b9b3-e25f-fed4-e65e5cdf2dab/mzl.peedhpht.100x100-75.png?w=100&ssl=1)
Skyrocket Company
![](https://i0.wp.com/a250.phobos.apple.com/us/r30/Purple4/v4/7f/6e/b5/7f6eb5c8-011d-51ac-6ce2-3f9f582461cf/mzl.fymdulal.100x100-75.png?w=100&ssl=1)
Anyplan
PLANE
![](https://i0.wp.com/a1294.phobos.apple.com/us/r30/Purple2/v4/a8/00/a3/a800a39f-15a5-9dc9-0726-b69f0b919df7/mzl.pjkgmwec.100x100-75.png?w=100&ssl=1)
Flights Search
PIN
![](https://i0.wp.com/a1429.phobos.apple.com/us/r30/Purple4/v4/a5/84/ef/a584ef3b-83eb-96b4-a9e3-1789efdd2637/mzl.ouuvrcrc.100x100-75.png?w=100&ssl=1)
Mapic Share Where
![](https://i0.wp.com/a1002.phobos.apple.com/us/r30/Purple/v4/b8/64/14/b8641434-a099-dcde-db6d-dbe16bebdab4/mzl.lhkpnbts.100x100-75.png?w=100&ssl=1)
Pin Drop
ALPHABET [ A ]
![](https://i0.wp.com/a4.phobos.apple.com/us/r30/Purple2/v4/b1/0a/2e/b10a2ee8-118f-074a-6798-36935627f132/mzl.sgxgefhn.100x100-75.png?w=100&ssl=1)
A-Card
![](https://i0.wp.com/a565.phobos.apple.com/us/r30/Purple4/v4/46/da/01/46da01a5-a4e7-3919-7039-e70814272f79/mzl.uzxyqztf.100x100-75.png?w=100&ssl=1)
ADrive Mobile
ALPHABET [ g ]
![](https://i0.wp.com/a142.phobos.apple.com/us/r30/Purple4/v4/db/56/c0/db56c02a-f889-d350-5c3f-aa66b0f99bcc/mzl.imxjugpc.100x100-75.png?w=100&ssl=1)
Google+
![](https://i0.wp.com/a1376.phobos.apple.com/us/r30/Purple4/v4/0b/99/64/0b9964b2-4e6f-bbf1-3079-ef6ccb5abc05/mzl.egnflqsj.100x100-75.png?w=100&ssl=1)
Google Search
ALPHABET [ G ]
![](https://i0.wp.com/a1263.phobos.apple.com/us/r30/Purple/v4/6d/24/a3/6d24a321-48ae-2fd8-bc5e-fa729f5b456b/mzl.fzrmqzeq.100x100-75.png?w=100&ssl=1)
Groupon
![](https://i0.wp.com/a1541.phobos.apple.com/us/r30/Purple6/v4/47/9e/da/479edaf8-af29-5f54-0a61-039e1ed4981a/mzl.vdkiilcg.100x100-75.png?w=100&ssl=1)
GULFSIP Video Call
ALPHABET [ P ]
![](https://i0.wp.com/a876.phobos.apple.com/us/r30/Purple4/v4/3a/df/a6/3adfa65e-4bc4-0d54-7663-7cd4dc4f1148/mzl.hlspqyxt.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a341.phobos.apple.com/us/r30/Purple6/v4/76/fb/d2/76fbd2d6-8a3f-87b5-b934-19a1f4178f15/mzl.hvaqeofc.100x100-75.png?w=100&ssl=1)
Path
ALPHABET [ Q ]
![](https://i0.wp.com/a1286.phobos.apple.com/us/r30/Purple4/v4/ec/bb/ae/ecbbaef3-a6f6-7110-e31a-91c2d87dc69b/mzl.ugbsdcsj.100x100-75.png?w=100&ssl=1)
Quora
![](https://i0.wp.com/a1898.phobos.apple.com/us/r30/Purple6/v4/2b/45/08/2b45089e-c746-c5b8-dde7-f2547f796ba7/mzl.asdtiqms.100x100-75.png?w=100&ssl=1)
Quizlet
ALPHABET [ v ]
![](https://i0.wp.com/a1910.phobos.apple.com/us/r30/Purple6/v4/e0/13/6a/e0136a97-7223-e210-a565-77c43d1a49bb/mzl.gjfzgebc.100x100-75.png?w=100&ssl=1)
Vimeo
![](https://i0.wp.com/a326.phobos.apple.com/us/r30/Purple6/v4/c8/e4/c2/c8e4c226-d74c-08dc-7e3b-ade6f4f3bf89/mzl.hjiamvwb.100x100-75.png?w=100&ssl=1)
Vine
ALPHABET [ y ]
![](https://i0.wp.com/a1715.phobos.apple.com/us/r30/Purple4/v4/6e/8e/0e/6e8e0edf-6e90-a2bd-8bf3-381c8d93f375/mzl.zmcyfgut.100x100-75.png?w=100&ssl=1)
Yummmy
形について
自分の会社 / サービスのロゴの図形、ロゴタイプのアルファベットをそのままiOSアプリのアイコンの形として使うことは分かりやすく、どの会社 / サービスのアプリなのか、どういった内容のアプリなのか、ということが連想しやすくなります。他の会社 / サービスと関連しているクライアントアプリの場合は、その会社 / サービスを連想するような形を使うと分かりやすいと感じました。アルファベットを使っているアイコンのほとんどでは、ロゴタイプの頭文字を1文字だけ使っていて、その1文字は文字としてだけではなく形としてデザインされ、認識されているため、文字と形の境界線について考えさせられました。
このようなロゴに関連した形も含め、全体を3つのケースに分けて考えることができました。幾何学的な形を使って抽象的な表現をしているケース、アプリの内容やコンセプトを表すモノの形を使って具体的な表現をしているケース、そしてシンプルな形を組み合わせて使っているケースです。幾何学的な形は美しく、ぱっと見たときに分かりやすいですが、こういった抽象的な形からアプリの内容は想像しにくいのではないでしょうか(Greeの場合はロゴの図形に六角形を使っていて、知っている人は想像がつくかもしれません)。
![](https://i0.wp.com/a1837.phobos.apple.com/us/r30/Purple/v4/ff/61/df/ff61df94-865e-3125-62ef-260be7df49ce/mzl.tfkuumby.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1414.phobos.apple.com/us/r30/Purple6/v4/46/6a/7a/466a7a6b-5bcc-ce12-0c9e-8387b9f462ed/mzl.mhwtjges.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1980.phobos.apple.com/us/r30/Purple4/v4/5e/2d/e0/5e2de0f1-28ab-e38e-b839-2a9deda7d0e1/mzl.eipdubvg.100x100-75.png?w=100&ssl=1)
アプリの内容を表すモノの形からはToDo 7 : チェックマーク→タスク管理、Speed Dial : 受話器→電話、Pin Drop : ピン→位置情報、SkyDrive : 雲→クラウド、といったアプリの内容を想像することができました。また、サービスのコンセプトを表すモノの形を使っているアイコンも存在するような気がしていて、Anyplan : 「速いスピードで目標に向かう」→ロケット→ロケットの形というように、コンセプト→モノ→形という流れを想像しました。
![](https://i0.wp.com/a964.phobos.apple.com/us/r30/Purple4/v4/e8/d7/89/e8d78945-db08-66b0-e0df-935cfefbfe71/mzl.uococwuy.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1480.phobos.apple.com/us/r1000/120/Purple/v4/8b/42/92/8b42922e-ce84-74b4-fcf9-48470b753cd7/mza_2487212466656698923.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1002.phobos.apple.com/us/r30/Purple/v4/b8/64/14/b8641434-a099-dcde-db6d-dbe16bebdab4/mzl.lhkpnbts.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1907.phobos.apple.com/us/r30/Purple/v4/f3/18/cb/f318cb4b-852d-9617-4bd7-1aef0a3df562/mzl.nspqjlus.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a250.phobos.apple.com/us/r30/Purple4/v4/7f/6e/b5/7f6eb5c8-011d-51ac-6ce2-3f9f582461cf/mzl.fymdulal.100x100-75.png?w=100&ssl=1)
さらに、いくつかのシンプルな形を組み合わせて使っているアイコンについて気になりました。例えば、同じハートという形を使っていても、Rebtel はハートと受話器、Wannado-Manage はハートとチェックマーク、というように別の形と組み合わせています。この様にシンプルな形を組み合わせることで、シンプルさを保ちつつ、個性を出すことができるのではないかと思いました。
![](https://i0.wp.com/a940.phobos.apple.com/us/r30/Purple6/v4/29/06/34/29063422-b389-330a-000a-8769969ba7e7/mzl.udtciifh.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1641.phobos.apple.com/us/r30/Purple6/v4/5a/1e/3b/5a1e3b38-93c9-5b7b-e615-a0f826d7fe12/mzl.fktquqmj.100x100-75.png?w=100&ssl=1)
「シンプル」について
シンプルだと思ったアイコンをよく見てみると、色がグラデーションになっていたり、形のパーツや角数が多かったりして、人間は何をシンプルと感じるのか、ということについて考えさせられました。「シンプル」とは何か、考えながら分類をしてみて、人間がまとまった色とまとまった形と感じられるものはシンプルなのではないかという考えに至りました。その為に使う色と形の種類を絞って選択することが必要で、その結果、フラットなアイコンになりやすい気がします。もちろんフラットでなくてもシンプルなアイコンは存在するし、逆にフラットでもシンプルとは言えないアイコンも存在します。
![](https://i0.wp.com/a950.phobos.apple.com/us/r30/Purple6/v4/63/f1/77/63f17721-c27d-edaa-01a3-c5b12cde4073/mzl.ebxhwuvk.100x100-75.png?w=100&ssl=1)
![](https://i0.wp.com/a1294.phobos.apple.com/us/r30/Purple2/v4/a8/00/a3/a800a39f-15a5-9dc9-0726-b69f0b919df7/mzl.pjkgmwec.100x100-75.png?w=100&ssl=1)
まとめ
色と形のそれぞれについて、ぱっと見ただけでは気付けなかったことが、分類することで見えてきました。シンプルなアイコンにおいて、色と形がどう使われるべきか、という定まったルールが見つかったわけではないけれど、色と形の使われ方はいくつかのケースに分けることができました。特にコンセプト→モノ→色、コンセプト→モノ→形という流れは発見でした。このフレームに沿って、アイコンの色と形について考えてみると、何か新しい発見があるかもしれません。
皆さんはどう感じましたか?
この連載は以上です!