自作アプリのアイコンを作った話

at student.apk

Transcript

1. ⾃作アプリのアイコンを作った話 2019/4/25 Student.apk aosa4054
2. 私⾃⾝デザインに関する知識が豊富なわけではなく、 このスライドもノウハウを紹介するより 僕個⼈の経験を共有しようというものです。 アイコンの作成にはAdobe Illustratorを⽤いました。 お断り
3. ⾃⼰紹介
4. Shota Ara（あおさ） • ⼤学4年⽣ • Twitter: aosa4054 • GitHub: aosa4054 少し前に⾃作アプリをリリースしました
6. Whiskeynote • ウイスキーの味を簡単にメモできるアプリ • ローカルDBにデータを出し⼊れするシンプルな作り
7. アイコン作成
8. Before After
9. • Androidアプリっぽくない • アイコンっぽくない • ワインっぽい
10. • Androidアプリっぽくない • アイコンっぽくない • ワインっぽい 変えよう!!
11. やったこと
12. • ガイドラインの読み込み • 他のアプリのアイコンを調べてみる
13. • ガイドラインの読み込み • 他のアプリのアイコンを調べてみる
14. アイコンの例
15. アイコンの例 ❶ ロゴのみ
16. アイコンの例 ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❹ アプリ名 ❸ アプリ名のロゴ化
17. ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名
18. 選定
19. ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • ゼロからロゴを作る難易度が⾼い • そもそも⼀度ロゴ制作でミスってる
20. ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • アイコンに⼊れるには⻑いアプリ名 “Whiskeynote” • Wだけではブランディングが難しそう
21. ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名 • “Wを使う”というヒントがあれば なんとかロゴが作れるのではないか • ウイスキーっぽいモチーフを ⼊れられる
22. ❶ ロゴのみ ❷ ロゴ＋アプリ名 ❸ アプリ名のロゴ化 ❹ アプリ名
23. アイコンのイメージ決め
24. やること ❶ウイスキーのモチーフ作成 ❷ “W”探し
25. ❶
26. ウイスキーっぽいモチーフ #とは • ⼀⽬でウイスキーとわかる • ⼩さくてもわかる
27. ウイスキーっぽいモチーフ #とは • ⼀⽬でウイスキーとわかる • ⼩さくてもわかる
28. ❷
29. #様々なW をAdobeフォントで物⾊
30. #様々なW をAdobeフォントで物⾊ モチーフごとのロゴのイメージを浮かべた • 線っぽかったらウイスキーボトルに • 四⾓かったらロックグラスに
31. オッ！ 線だ！
33. ※イメージ図
34. ※イメージ図 イケそう!!
35. アイコン作成
36. 意識したこと ❶ ガイドラインに従う ❷ ⾊はたくさん試してみる
37. イメージさえできていれば ⾊や⾓度の微調整をするだけであとは やるだけ
39. まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい！