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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Mitsuya0
May 09, 2017
Design
1
900
Googleのアイコンを分類してみた
何となく興味があったから眺めてみました。
アイコン上手い人に色々聞きたい所存。
Mitsuya0
May 09, 2017
Tweet
Share
More Decks by Mitsuya0
See All by Mitsuya0
弁当を作ろう
mitsuya0
0
620
Splatoonのブキを3DCGでつくってみたハナシ
mitsuya0
0
180
SplatoonでUX白書の4段階の話をする
mitsuya0
0
370
Other Decks in Design
See All in Design
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
visional_engineering_and_design
2
510
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
4
670
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
480
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
130
ドルちゃん
design_dolphins
0
540
The Spring Festival
jisun
0
190
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
9
2.9k
Correspondence:共に生成していく過程
akiramotomura
0
180
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
140
kintone_aroma
kintone
0
1.3k
文化のデザイン - Soft Impact of Design
atsushihomma
0
130
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
0
210
Featured
See All Featured
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
43
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
55
49k
Un-Boring Meetings
codingconduct
0
190
Mobile First: as difficult as doing things right
swwweet
225
10k
Marketing to machines
jonoalderson
1
4.6k
New Earth Scene 8
popppiees
1
1.4k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
170
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
63
Evolving SEO for Evolving Search Engines
ryanjones
0
110
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Technical Leadership for Architectural Decision Making
baasie
1
220
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で単調に見えないように処理してるのが素晴らしいすね。 意外と色々見えて勉強になりました。