Googleのアイコンを分類してみた

何となく興味があったから眺めてみました。
アイコン上手い人に色々聞きたい所存。

Transcript

1. Google 謹製アイコンを分類してみた
3. Googleのランチャーアイコン、 多数存在していて何かバラバラじゃない？ って思うけどiOSよりもまとまってる感がある⋯
4. それはなぜかを明らかにして 揃ってるぽさを生み出す引き出しを増やそう
5. 分析
6. ざっくり眺めていると 以下の３つから構成されている気がする。 １．色 ２．ベース ３．モチーフ base motif color
7. と思ったらもっと厳密にそれっぽいのがあった。 しかし分類しづらいので前ページの３つでやります。 1. Finish 2. Material background 3. Material foreground 4. Color 5. Shadow
8. ex. allo Base motif Color Shadow + +
9. ex. Adwords Base None motif x 2 Color Shadow + +
10. １．色
11. アイコンに置いての色の使い方は大きく以下の３つに分けられます。 1. 同系色 2. 組み合わせ 3. モチーフ優先
12. 同系色+無彩色の組み合わせで アイコンを抽出すると このようになりました。 ロゴ周辺の色も結構利用しています。 そのまとめ方が上手い⋯。 ｛それぞれの色で意味が見つかるかと思ったが あまりなさそうだ⋯｝ G color G color G color G color １．同系色
13. 基本的にこれらの色の組み合わせで 様々なアイコンが作られています。 2. 組み合わせ
14. その他、色を組み合わせたというよりは モチーフの色を使ったようなアイコンがいくつかあります。 3. モチーフ優先
15. ２．ベース
16. 丸 長方形 入力 正方形 紙 折り紙 五角形 １つ角丸 吹き出し 三角 歯車 ベースとモチーフの差はどこまで⋯という話もありますが このように分けられると思います。 ベースなし none
17. 基本的に丸、四角以外のベースは アプリの役割で分類されそうです。 ちょっとわからないものもありますが。 丸 長方形 入力 正方形 紙 折り紙 五角形 １つ角丸 吹き出し 三角 歯車 新会話 アプリ 汎用ベース ハング アウト Play 設定 ドキュメント ⋯とも 言えない 入力 補助 入力 んー⋯
18. ベースのないモチーフのみのアイコンも多くあります。 これらは色で共通性を担保しているようです。 ベースがなく色もずれているものは 何か違うなって雰囲気に見えます。
19. ３．モチーフ
20. Googleロゴ Chrome キーボード くさび 人 Cardboard 吹き出し 細い4色 現youtube 横棒 美術館 封筒 旧Youtube Google map androidくん コンマ 受話器 ビデオカメラ カード ピン 共通で用いられている モチーフ
21. 白線による構成 白塗による構成 文字ベース 右上 その他Material系ロゴ Play系 その他 モチーフは単発だが 描き方は揃っている
22. まとめ
23. 色 ベース モチーフ 主に「色」でディティールで統一感を作られており それに加えてベースやモチーフが統一されることで 印象が盤石になる気がします。 ベースやモチーフが少し揺れても 色が揃っていると統一感が感じられる用に思います。
24. あと色数多いけどコントラスト弱い配色を防いでるのが見事だなぁと。 今回初めて知りましたが、Finishで単調に見えないように処理してるのが素晴らしいすね。 意外と色々見えて勉強になりました。