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
190
自作アプリのアイコンを作った話
at student.apk
aosa4054
April 25, 2019
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Now in Android Overview
aosa4054
1
920
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
0
590
実用 Picture in Picture
aosa4054
2
730
Other Decks in Design
See All in Design
Ride or Die Animatics
warwatkar
0
140
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
0
350
素晴らしき余白の世界
kasumidyaya
0
100
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
30
2.5k
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
290
モデル・デザイン入門
akitsugu7935
0
460
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
350
プロダクトデザインは子育て/Product design is parenting
medley
0
280
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
300
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
The Cult of Friendly URLs
andyhume
73
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
BBQ
matthewcrist
79
8.7k
Scaling GitHub
holman
457
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Docker and Python
trallard
33
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
GraphQLとの向き合い方2022年版
quramy
29
12k
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
まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい!