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
210
自作アプリのアイコンを作った話
at student.apk
aosa4054
April 25, 2019
Tweet
Share
More Decks by aosa4054
See All by aosa4054
Now in Android Overview
aosa4054
1
1.1k
LazyVerticalGridに学ぶ 非スクローラブルなグリッドの作り方
aosa4054
0
680
実用 Picture in Picture
aosa4054
2
810
Other Decks in Design
See All in Design
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
Museum Heist
allykae
0
120
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
ZKK_001.pdf
nicholaspegu
0
1.5k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
aya_murakami_portfolio
ayakaimi1101
0
1.1k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
TUNAG BOOK 2024
stmn
0
470
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Building Your Own Lightsaber
phodgson
104
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Gamification - CAS2011
davidbonilla
80
5.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Code Review Best Practice
trishagee
66
17k
Building Adaptive Systems
keathley
40
2.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
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
まとめ • 世の中のアプリを⾒てみよう • ゼロからやろうとするとキツいので 道筋を描くことが効果的 • 楽しい!