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
230
自作アプリのアイコンを作った話
at student.apk
aosa4054
April 25, 2019
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Now in Android Overview
aosa4054
1
1.3k
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
0
730
実用 Picture in Picture
aosa4054
2
860
Other Decks in Design
See All in Design
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
160
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
290
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
680
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.4k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
120
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
390
minpaku-community-scrum-patterns
norinity1103
1
420
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
佐藤千晶|ポートフォリオ
chimi_chia
0
160
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
200
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Visualization
eitanlees
148
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Code Reviewing Like a Champion
maltzj
525
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Cult of Friendly URLs
andyhume
79
6.6k
A designer walks into a library…
pauljervisheath
208
24k
Six Lessons from altMBA
skipperchong
28
4k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
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
まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい!