Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

62384887995a0ce07ec4f86b89f5ec9e?s=47 aosa4054
April 25, 2019

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

at student.apk

62384887995a0ce07ec4f86b89f5ec9e?s=128

aosa4054

April 25, 2019
Tweet

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. #様々なW をAdobeフォントで物⾊

  28. #様々なW をAdobeフォントで物⾊ モチーフごとのロゴのイメージを浮かべた • 線っぽかったらウイスキーボトルに • 四⾓かったらロックグラスに

  29. オッ! 線だ!

  30. None
  31. ※イメージ図

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

  33. アイコン作成

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

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

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