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
210
自作アプリのアイコンを作った話
at student.apk
aosa4054
April 25, 2019
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Now in Android Overview
aosa4054
1
1.1k
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
0
680
実用 Picture in Picture
aosa4054
2
810
Other Decks in Design
See All in Design
太田博三(@usagisan2020)
otanet
0
240
250131_product meetup
motokoishida
0
120
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
180
「デザイン」を信じるには
iflection
0
120
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
920
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
910
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.2k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
540
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
420
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
280
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Designing for Performance
lara
605
68k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Philosophy of Restraint
colly
203
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
4 Signs Your Business is Dying
shpigford
183
22k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Embracing the Ebb and Flow
colly
84
4.6k
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
まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい!