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

Transcript

1. ⾃作アプリのアイコンを作った話 2019/4/25 Student.apk aosa4054

2. 私⾃⾝デザインに関する知識が豊富なわけではなく、 このスライドもノウハウを紹介するより 僕個⼈の経験を共有しようというものです。 アイコンの作成にはAdobe Illustratorを⽤いました。 お断り

3. ⾃⼰紹介

4. Shota Ara（あおさ） • ⼤学4年⽣ • Twitter: aosa4054 • GitHub: aosa4054

   少し前に⾃作アプリをリリースしました
5. None

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. オッ！ 線だ！

32. None

33. ※イメージ図

34. ※イメージ図 イケそう!!

35. アイコン作成

36. 意識したこと ❶ ガイドラインに従う ❷ ⾊はたくさん試してみる

37. イメージさえできていれば ⾊や⾓度の微調整をするだけであとは やるだけ

38. None

39. まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい！