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
自作アプリのアイコンを作った話
Search
aosa4054
April 25, 2019
Design
0
200
自作アプリのアイコンを作った話
at student.apk
aosa4054
April 25, 2019
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Now in Android Overview
aosa4054
1
1k
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
0
630
実用 Picture in Picture
aosa4054
2
780
Other Decks in Design
See All in Design
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
270
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
560
PdMを始めたUIデザイナーのリアルな課題
muture
0
750
Baby Bear Genius
yvonnehsuanho
PRO
0
630
root 会社紹介資料 / We are hiring.
root_recruit
1
13k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
13
5.7k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1k
Commune_Brand_Guideline_JA
commune
1
120
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
210
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
110
Making impact with your craft with sociotechnical design
xinyao
1
170
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
140
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
230
Writing Fast Ruby
sferik
624
60k
A Modern Web Designer's Workflow
chriscoyier
692
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
It's Worth the Effort
3n
182
27k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Creatively Recalculating Your Daily Design Routine
revolveconf
216
12k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Transcript
⾃作アプリのアイコンを作った話 2019/4/25 Student.apk aosa4054
私⾃⾝デザインに関する知識が豊富なわけではなく、 このスライドもノウハウを紹介するより 僕個⼈の経験を共有しようというものです。 アイコンの作成にはAdobe Illustratorを⽤いました。 お断り
⾃⼰紹介
Shota Ara(あおさ) • ⼤学4年⽣ • Twitter: aosa4054 • GitHub: aosa4054
少し前に⾃作アプリをリリースしました
None
Whiskeynote • ウイスキーの味を簡単にメモできるアプリ • ローカルDBにデータを出し⼊れするシンプルな作り
アイコン作成
Before After
• Androidアプリっぽくない • アイコンっぽくない • ワインっぽい
• Androidアプリっぽくない • アイコンっぽくない • ワインっぽい 変えよう!!
やったこと
• ガイドラインの読み込み • 他のアプリのアイコンを調べてみる
• ガイドラインの読み込み • 他のアプリのアイコンを調べてみる
アイコンの例
アイコンの例 ❶ ロゴのみ
アイコンの例 ❶ ロゴのみ ❷ ロゴ+アプリ名 ❹ アプリ名 ❸ アプリ名のロゴ化
❶ ロゴのみ ❷ ロゴ+アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名
選定
❶ ロゴのみ ❷ ロゴ+アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • ゼロからロゴを作る難易度が⾼い
• そもそも⼀度ロゴ制作でミスってる
❶ ロゴのみ ❷ ロゴ+アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • アイコンに⼊れるには⻑いアプリ名
“Whiskeynote” • Wだけではブランディングが難しそう
❶ ロゴのみ ❷ ロゴ+アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • “Wを使う”というヒントがあれば
なんとかロゴが作れるのではないか • ウイスキーっぽいモチーフを ⼊れられる
❶ ロゴのみ ❷ ロゴ+アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名
アイコンのイメージ決め
やること ❶ウイスキーのモチーフ作成 ❷ “W”探し
❶
ウイスキーっぽいモチーフ #とは • ⼀⽬でウイスキーとわかる • ⼩さくてもわかる
ウイスキーっぽいモチーフ #とは • ⼀⽬でウイスキーとわかる • ⼩さくてもわかる
❷
#様々なW をAdobeフォントで物⾊
#様々なW をAdobeフォントで物⾊ モチーフごとのロゴのイメージを浮かべた • 線っぽかったらウイスキーボトルに • 四⾓かったらロックグラスに
オッ! 線だ!
None
※イメージ図
※イメージ図 イケそう!!
アイコン作成
意識したこと ❶ ガイドラインに従う ❷ ⾊はたくさん試してみる
イメージさえできていれば ⾊や⾓度の微調整をするだけであとは やるだけ
None
まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい!