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

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

aosa4054
April 25, 2019

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

at student.apk

aosa4054

April 25, 2019
Tweet

More Decks by aosa4054

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. ⾃⼰紹介

    View full-size slide

  4. Shota Ara(あおさ)
    • ⼤学4年⽣
    • Twitter: aosa4054
    • GitHub: aosa4054
    少し前に⾃作アプリをリリースしました

    View full-size slide

  5. Whiskeynote
    • ウイスキーの味を簡単にメモできるアプリ
    • ローカルDBにデータを出し⼊れするシンプルな作り

    View full-size slide

  6. アイコン作成

    View full-size slide

  7. Before After

    View full-size slide

  8. • Androidアプリっぽくない
    • アイコンっぽくない
    • ワインっぽい

    View full-size slide

  9. • Androidアプリっぽくない
    • アイコンっぽくない
    • ワインっぽい
    変えよう!!

    View full-size slide

  10. やったこと

    View full-size slide

  11. • ガイドラインの読み込み
    • 他のアプリのアイコンを調べてみる

    View full-size slide

  12. • ガイドラインの読み込み
    • 他のアプリのアイコンを調べてみる

    View full-size slide

  13. アイコンの例

    View full-size slide

  14. アイコンの例
    ❶ ロゴのみ

    View full-size slide

  15. アイコンの例
    ❶ ロゴのみ ❷ ロゴ+アプリ名 ❹ アプリ名
    ❸ アプリ名のロゴ化

    View full-size slide

  16. ❶ ロゴのみ
    ❷ ロゴ+アプリ名
    ❸ アプリ名のロゴ化
    ❹ アプリ名

    View full-size slide

  17. ❶ ロゴのみ
    ❷ ロゴ+アプリ名
    ❸ アプリ名のロゴ化
    ❹ アプリ名
    • ゼロからロゴを作る難易度が⾼い
    • そもそも⼀度ロゴ制作でミスってる

    View full-size slide

  18. ❶ ロゴのみ
    ❷ ロゴ+アプリ名
    ❸ アプリ名のロゴ化
    ❹ アプリ名
    • アイコンに⼊れるには⻑いアプリ名
    “Whiskeynote”
    • Wだけではブランディングが難しそう

    View full-size slide

  19. ❶ ロゴのみ
    ❷ ロゴ+アプリ名
    ❸ アプリ名のロゴ化
    ❹ アプリ名
    • “Wを使う”というヒントがあれば
    なんとかロゴが作れるのではないか
    • ウイスキーっぽいモチーフを
    ⼊れられる

    View full-size slide

  20. ❶ ロゴのみ
    ❷ ロゴ+アプリ名
    ❸ アプリ名のロゴ化
    ❹ アプリ名

    View full-size slide

  21. アイコンのイメージ決め

    View full-size slide

  22. やること
    ❶ウイスキーのモチーフ作成
    ❷ “W”探し

    View full-size slide

  23. ウイスキーっぽいモチーフ #とは
    • ⼀⽬でウイスキーとわかる
    • ⼩さくてもわかる

    View full-size slide

  24. ウイスキーっぽいモチーフ #とは
    • ⼀⽬でウイスキーとわかる
    • ⼩さくてもわかる

    View full-size slide

  25. #様々なW をAdobeフォントで物⾊

    View full-size slide

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

    View full-size slide

  27. オッ!
    線だ!

    View full-size slide

  28. ※イメージ図

    View full-size slide

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

    View full-size slide

  30. アイコン作成

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide