スクリーンショット_2018-09-10_16

Daily UI #005 App Icon

今回のお題は、アプリのアイコンです。

Hint: Design an app icon. What best represents the brand or product? Or is it incredibly unique? Does it look great at a distance and does it stand out when put on your home screen alongside other apps?

最近苦手なお題が続きすぎて心折れかけていたのですが、
「そもそも得意なジャンルなんてほとんどないのでは…?」と逆に開き直りました。w

これまでは短時間で要件定義からデザインまで落とし込む練習をしてましたが、これからは背景設定やリサーチもしっかりめにやろうと思います。


まず完成品

今回のお題で、完成したアイコンがこちら。


他のアイコンと並ぶとこんな感じです。


デザイン完成に至るまで <調査編>

勝手が分からなさすぎたので、今回は調査するところから始めました。

1. アプリアイコンに求められる条件は?

・大前提:製品やサービスを体現していること
既にブランドロゴがある場合、それとの一貫性が超大事。

ヤマダ電機のポイントアプリなんですが「ヤマダ電機を想起できるか?」と言われるとギリギリのところだと思います。

・DL前:アプリストアでの見つけやすさ
アプリの「ジャケ買い」はあんまりないとは思いますが、複数の選択肢で迷ったときに「なんとなく可愛い方で」となる可能性はあるかなと思います。

特に情緒価値が強いカテゴリは、アイコンの世界観がかなり大事っぽい…


・DL後:他のアイコンに負けない視認性
ゲーム、SNS、日記系など、暇つぶし用途で使われるアプリの場合、スマホを開いたときに想起してもらえるか、見つけてもらえるかによってアクティブ率が大きく左右されます。


2. 規定やガイドラインはあるのか?

調べた限り、そこまで詳しくはないものの AppleにもGoogleにもデザインガイドラインが存在します。

大変分かりやすいまとめはこちらです…!


私は、特に簡潔であることと普遍的であることを意識しながら作りました。

3. トレンドデザイン、多いパターンは?

 続いて、世の中のアプリアイコンのデザインを観察です。

・ブランドロゴやアイコンをそのまま or 省略
結局いちばん分かりやすい。

ブランドロゴの認知が進んでない場合には分かりづらくなるリスクもありますが、

実際はアイコンの下に必ずアプリ名が表示されるので問題ありません。
限られたスペースを効果的に使うには有効な手段といえます。

その他に見つけた特徴的なパターンとしては、

・白地に黒文字

コントラスト強くて見やすい。なぜか圧倒的にアパレルに多い…

・グラデーションに白で型抜き

これはアプリアイコンに限らず、最近のデザイントレンドの影響ですね。たぶん。

・写真を使ったアイコンが少ない!
他のアプリで使われていないパターンを探していたところ、アプリアイコンに写真を使っているパターンがほとんど見つからないことに気付きました。

特に禁止されているわけではないようなのですが、前述のデザインガイドラインにて、シンプルで、不要な要素が含まれていないアイコンが求められていることに起因すると推測します。


デザイン完成に至るまで <設計編>

アプリアイコンに求められる条件、傾向が分かったところで、自分のアイコンをデザインしていきます。

まず何のアイコンを作るか?ですが、最近ダイエット目的で使い始めた栄養管理アプリをイメージして作ることにしました。

・日々食べたもの、運動記録、栄養価、体重などを記録できる
・メインユーザーはダイエット目的の20代女性
・まだサービスやブランド認知は進んでいないものとする

という前提で設計しました。

1. 色
アプリの性質上、一日の振り返りをする夜の時間帯に多くのユーザーがこのアプリを立ち上げるのではないかという点から、夜更け・夜のイメージで青・青紫を採用しました。

2. モチーフ
ブランド認知が進んでいないことから、サービスの性質を表すようなモチーフを作ることにしました。

・夜に使う → 星、月、おばけ(かわいいやつ)
・体重管理 → 折れ線グラフ、階段
・バランス → レーダーチャート、橋、シーソー、天秤
・1日を記録 → 円グラフ、時

最終的に「一日の時間の流れ」と「栄養バランス」を表現できそうな円のモチーフを採用しました。


3. 汎用性

最終的に円グラフのようなモチーフにしたのにはもう一つ理由があります。
円形のアイコンにも転用できる汎用性です。

note のユーザーアイコンもそうですが、最近円形のアイコンが使われる場面が増えましたよね。

まとめ

正直アウトプットには全然納得してない(恥ずかしさしかない)のですが、過程に時間を割いて、意図を持って設計できたという点では良かったと思います。

ディレクターにビジュアルデザイン力は必要なくても、きちんとリサーチして、意図をもって設計する力は必要なので、これからもそこを鍛えていこうと思います。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでくださりありがとうございます!

気が合いますね ( ˘ω˘)

niri

某Webサービスの UXデザイナー。毎日の学びを残す場所。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。