このエントリーをはてなブックマークに追加

Design UI UX

DailyUIシリーズの第5回です。
前回はこちら
 
第5回のお題は「App Icon」。アプリのアイコンです。  
私は自称UXプログラマーなので仕様とユーザー体験にフォーカスして調査&手書きでUIを作っていきます。 ※ 今回はアイコンですが・・・
流れは下記です。

  • 機能が必要な理由考察
  • 機能に必要な要素
  • 理想の体験考察
  • UIの調査(AlexaのThe top 500 sites on the webを中心に)※ 今回は関係なさそう・・・  
  • 私が考える最強のUI

では、やっていきましょう。
 

アプリのアイコンが必要な理由

アプリを楽に起動するため。

アプリアイコンがない世界を想像すると、Webで検索するときのようにスマホでアプリを検索していちいち起動って感じになるので、アプリアイコンがWebのブックマークやデスクトップアプリのショートカット的な役割を果たしている。アプリケーションに名前がないとアプリケーションを起動できないのと同じぐらい、スマホアプリにしてもデスクトップアプリにしてもアイコンのデザインが大切になっていると思う。実際、サービスの名前が思い出せなくてもアイコンを思い出せれば、スマホで起動ができるというぐらい重要度は上がっている。

アプリのアイコンに必要な要素 

サービスを覚えてもらえることと愛着をもってもらえること。

サービスにもよるとは思うが、基本的にはこの2つがないといけない気がする。この2つを達成できていると、アプリを思い出す→探す→使うのサイクルに最低限乗れる。もちろん使った体験も良くないといけないけれど、どこかの広告で見たとか誰かが話題にしてたというときに、触り直そうかなというときにも思い出せるようなアイコンだったら、探して戻れる気がする。愛着もスマホアプリという時点でスマホを毎日触る人にとっては毎日目にするものかもしれないという点でもすごい大事だと思う。

理想のアプリのアイコンにおける体験とは?

押したくなるアイコンかなーーー。
 
個人的に好きなのは、季節ごとのアイコンを微妙に変えているアプリ。たとえ中のUIが変わっていなかったとしても。あまりにもアイコンの変更と押したあとの体験が乖離していると???となるのでやりすぎは禁物だけど。ゲームとかのアイコンだと、◯周年とかコラボ中とか他の業界のサービスと比べても圧倒的にアイコンをガンガン変えるのだが、これもアイコンを一覧で見たときに「何かやってるのかな?」と思わせるのに効果的で、ユーザーとの接点という意味では、イベント等に応じてアイコンを更新していくのもありだなと思っている。

色々なアプリのアイコンを調査してみた

そんなにデスクトップアプリとスマートフォンアプリで大きな差はないと思うのでスマートフォンアプリ(App Store)を調べてみました。

【調査対象】※ 自分がインストールしてあるアプリ中心です
Twitter, Linkedin, Instagram, Facebook, Pinterest, Pixiv, Google Chrome, Netflix, Youtube, niconico, Amazon, メルカリ, ZOZOTOWN, Medium, Note, Reddit, Indeed, Spotify, Airbnb, クラウドワークス, yenta, Taimee, folio, Uber Eats, TED, CREW, AbemaTV, ジモティー,SUUMO, SHOW ROOM, TikTok, Mirrativ
 
 
ロゴの区分けとしてざっくり下記かなーと思います。

  • ロゴ型
    Twitter, Linkedin, Instagram, Facebook, Pinterest, Pixiv, Google Chrome, Netflix, Youtube, nikoniko, メルカリ, Medium, Note, Reddit, Indeed, Spotify, Airbnb, TikTok, Mirrativ
    twitter
     
  • サービス名型
    ZOZOTOWN, クラウドワークス, yenta, folio, Uber Eats, TED, SHOW ROOM
    zozotown
     
  • サービス名+ロゴ型
    Amazon, Taimee, CREW, AbemaTV, ジモティー, SUUMO
    amazon
     
  • その他(キャラクター等)
    ゲーム
    ダンジョンメーカー
    ※ ダンジョンメーカーおもしろいのでぜひ!

 
ここにあげていないだけでも色々見たが、圧倒的にロゴ型が多い。
アイコンという縛りがある以上、視認性を良くするためにアイコンを採用しているんだと思われる。ただ、アイコンだけだとどんなアプリなのかを判断できないものも多く、サービス名もなんのサービスか想像しづらいものだと開いてみないと分からないという状態になっていた。
個人的には、サービス名が何を指しているのか分かりにくいサービスほど、サービス名をアイコンにすべきなんじゃないかと思う。サービス名=サービスとなってしまえば楽だし、逆にサービス名もアイコンも抽象的だとTikTokの様に相当中毒性が高いサービスじゃないと覚えてもらえない気がする。抽象的なアイコンだとどうしても他のサービスと一定被ってしまうし、デザイン力が試される・・・。
自分で言っておいてなんだが、サービス名のアイコンはサービス名が長いと視認性がとても悪くなるため結構難しい。サービス名の影響がこんなところまで・・・。

 
上記でも言ってたんですが、下記のような季節がわかるようなアイコンが好きです。愛着を持ってもらうために、ユーザーがコンテンツを作成するサービスにこういったアイコンを季節やイベント(クリスマス等)ごとに変更する傾向が高いんじゃないかと思ってます。
※ アイコンはShow Room, Mix Channel, nana, minne
showroom mixchannel

nana minne
 

iPhoneの時計のアイコンだけは動くようになっているんですが、気づいてました?
私は、この記事書いているときにアイコンを眺めていて気がついたんですけど笑 これが他のアプリにも開放されるとおもしろいなと思ってます。スマホがめっちゃ重くなりそうですが笑
clock

私が考えた最強のアプリアイコン

おまけです。 気をつけた点は下記。

  • サービス名をロゴに入れる
  • 愛着がわくようなデザインにする

今回は映画のサントラのサービスなのですが、レコードを意識した感じのアイコンにしてみました。(色が逆だし、説明しないで分かれは厳しいですね・・・

DailyUI004
 

レビューお待ちしております!

色々ご意見いただけると嬉しいです。こんな例もあったとかあれば教えてください!

次は第6回です。
(書いたらリンク載せます)

このエントリーをはてなブックマークに追加

© 2018, Udayan28