見出し画像

Daily UI 005 - App Icon

baco

マイルール

  • Dailyではなく、およそWeeklyで1アウトプットをする。なぜならば、エンジニアとしてのI/Oに時間を割く必要もあるため。

  • アウトプットよりもリサーチを重視する。なぜならば、デザイナーと協業する上での理解を深めることが目的であるため。

  • アウトプットはローカライズする。なぜならば、情報設計の面で各国の文化ごとにベストプラクティスが異なる部分もあるため。

#005 App Icon で考慮したポイント

アプリアイコンに落とし込むサービス

Daily UI 003で構想した「flowerhub」というSaaSのアイコンを作成しました。既にサービスロゴはデザイン済みです。

このロゴは、サービス名の頭文字「F」を抽象化しています。さらに、「ハブ(中心となるプロダクト)から花を咲かせる(顧客ロイヤリティを高める)」という意味も込めています。このロゴをアプリアイコンに落とし込みます。

まずは、世の中にどのようなアプリアイコンが存在するのかを調査します。「グラデーションデザイン」はシンプルなものからカラフルなものまで、一種のトレンドとなっているようです。

限られたスペースに複数のアイコンが並ぶスマホのホーム画面で存在感を出すためなのか、最近のアイコンはどんどんカラフルになってきている。これは、画面の解像度が上がってきている恩恵でもあるが、どんどん没個性にもつながっている。

https://blog.btrax.com/jp/icon-trends/

しかし、今回デザインする「flowerhub」というサービスはB2BのSaaSであり、可処分時間を奪い合う必要性はありません。ユーザーは、仕事中などの必要なタイミングで能動的に起動します。むしろ、それ以外に目立ってしまうと、休暇を阻害する恐れがあります。したがって、他のアプリよりもシンプルなデザインである必要性があると考えます。

ガイドライン

iOS / Androidのガイドラインには目を通しました。

Figma Communityには、App Icon Toolkitという便利なテンプレートが存在するため、そちらを利用して制作します。

アウトプット

前述したシンプルさを追求すべく、白背景にサービスロゴを載せました。

一方で、サービスロゴと同様にベタ塗りにした場合、配色も相まってビジネスアプリとしては軽すぎる印象を受けました。そこで、ビジネスとしての重厚感を持たせるべく、シンプルさを失わない程度にグラデーションを適用しました。

App Storeやホーム画面に適用したイメージはこちらです。


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