Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Googleのアイコンを分類してみた
Search
Mitsuya0
May 09, 2017
Design
0
460
Googleのアイコンを分類してみた
何となく興味があったから眺めてみました。
アイコン上手い人に色々聞きたい所存。
Mitsuya0
May 09, 2017
Tweet
Share
More Decks by Mitsuya0
See All by Mitsuya0
弁当を作ろう
mitsuya0
0
600
Splatoonのブキを3DCGでつくってみたハナシ
mitsuya0
0
160
SplatoonでUX白書の4段階の話をする
mitsuya0
0
260
Other Decks in Design
See All in Design
The Fight
euralisw
0
110
Ride or Die Animatics
warwatkar
0
140
Web 組版の課題とその解法
yamatoiizuka
0
110
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Sociotechnical design for software and human systems
xinyao
2
490
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.3k
UIをもたらすコンテクストの考察
securecat
9
2.5k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Agile that works and the tools we love
rasmusluckow
325
20k
Building Applications with DynamoDB
mza
88
5.6k
Code Review Best Practice
trishagee
55
15k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Bash Introduction
62gerente
604
210k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Adopting Sorbet at Scale
ufuk
68
8.6k
Transcript
Google 謹製アイコンを分類してみた
None
Googleのランチャーアイコン、 多数存在していて何かバラバラじゃない? って思うけどiOSよりもまとまってる感がある⋯
それはなぜかを明らかにして 揃ってるぽさを生み出す引き出しを増やそう
分析
ざっくり眺めていると 以下の3つから構成されている気がする。 1.色 2.ベース 3.モチーフ base motif color
と思ったらもっと厳密にそれっぽいのがあった。 しかし分類しづらいので前ページの3つでやります。 1. Finish 2. Material background 3. Material foreground
4. Color 5. Shadow
ex. allo Base motif Color Shadow + +
ex. Adwords Base None motif x 2 Color Shadow +
+
1.色
アイコンに置いての色の使い方は大きく以下の3つに分けられます。 1. 同系色 2. 組み合わせ 3. モチーフ優先
同系色+無彩色の組み合わせで アイコンを抽出すると このようになりました。 ロゴ周辺の色も結構利用しています。 そのまとめ方が上手い⋯。 {それぞれの色で意味が見つかるかと思ったが あまりなさそうだ⋯} G color G
color G color G color 1.同系色
基本的にこれらの色の組み合わせで 様々なアイコンが作られています。 2. 組み合わせ
その他、色を組み合わせたというよりは モチーフの色を使ったようなアイコンがいくつかあります。 3. モチーフ優先
2.ベース
丸 長方形 入力 正方形 紙 折り紙 五角形 1つ角丸 吹き出し 三角
歯車 ベースとモチーフの差はどこまで⋯という話もありますが このように分けられると思います。 ベースなし none
基本的に丸、四角以外のベースは アプリの役割で分類されそうです。 ちょっとわからないものもありますが。 丸 長方形 入力 正方形 紙 折り紙 五角形
1つ角丸 吹き出し 三角 歯車 新会話 アプリ 汎用ベース ハング アウト Play 設定 ドキュメント ⋯とも 言えない 入力 補助 入力 んー⋯
ベースのないモチーフのみのアイコンも多くあります。 これらは色で共通性を担保しているようです。 ベースがなく色もずれているものは 何か違うなって雰囲気に見えます。
3.モチーフ
Googleロゴ Chrome キーボード くさび 人 Cardboard 吹き出し 細い4色 現youtube 横棒
美術館 封筒 旧Youtube Google map androidくん コンマ 受話器 ビデオカメラ カード ピン 共通で用いられている モチーフ
白線による構成 白塗による構成 文字ベース 右上 その他Material系ロゴ Play系 その他 モチーフは単発だが 描き方は揃っている
まとめ
色 ベース モチーフ 主に「色」でディティールで統一感を作られており それに加えてベースやモチーフが統一されることで 印象が盤石になる気がします。 ベースやモチーフが少し揺れても 色が揃っていると統一感が感じられる用に思います。
あと色数多いけどコントラスト弱い配色を防いでるのが見事だなぁと。 今回初めて知りましたが、Finishで単調に見えないように処理してるのが素晴らしいすね。 意外と色々見えて勉強になりました。