【あの有名アプリから学ぶ！】アプリのアイコンデザインを改善する3つの施策

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、Nick Babich氏によって投稿されました。

全てのアプリには、アプリストアとホーム画面の両方においてユーザーの注目を集めることができる、美しくて記憶に残りやすいアイコンが必要です。それと同時に、アイコンはユーザーにとって瞬時に識別しやすいデザインにするべきです。

完璧な美しさを備えた、ユーザーにとって分かりやすいアイコンをデザインするために必要なことは何でしょうか？それほど難しいことではありません。本記事においては、そのための3つの施策をご紹介します。

1. 識別しやすいアイコンをデザインする

アイコンは何よりもまず意味を伝えることができなければなりません。ユーザーにアイコンの意味を考えさせるデザインであってはならないのです。

アイコンは、アプリの目的をユーザーに一見で理解してもらうことができる最初のチャンスとなります。アイコンをデザインするときには、次のことを心に留めておいてください。

アイコンは、比喩による連想効果によってアイデアを伝える媒体であり、ユーザーはアイコンから特定の動作を連想するものです。ユーザーに意味を瞬時に伝えることができなければ、アイコンは上手く機能しているとはいえません。

そのため、アイコンを分かりやすくて直感的なデザインにすることが不可欠なのです。

抽象的なアイコンは上手く機能しないことがほとんどであるため、使うのは控えましょう。

ユーザーは、抽象的なアイコンの意味を経験から推測することはできません。アプリ「The Game Center（ゲームセンター）」のアイコンはこの問題の一例です。カラフルで透明ガラスのようなデザインのアイコンは、デザイン自体は良いものの、アイコンの意味を伝えるのは難しいでしょう。

アプリ「The Game Center」のアイコンは何を表しているように見えますか？

ゲームに関連した意味があるように見えますか？

ユーザーにとって識別しやすいアイコンを使用する方が確実です。またアイコンの中には、「家」、「印刷」、「ガラス用品」、「封筒」などほとんど世界共通で同じ意味を持つものもあります。

たとえば、Gmailのアプリのアイコンには「封筒」が使われていますが、世界共通で「封筒」は「メール」の意味として伝わりやすいです。

アイコンの「封筒」そのものが「メール」の意味を伝えています。

2. ミニマリズムを追求する

アプリの本質をよく捉えていてそれをシンプルな形で表現できるアイコンをデザインしましょう。アイコンにとって本質的ではないその他の余分なディテールは全て省略します。

ほとんどのデザイナーは、アプリのアイコンを立派に見せたいと思う傾向があります。しかし時としてアイコンのデザインに多くを詰め込み、その結果アイコンは詳細を作り込み過ぎたデザインとなることがあります。

このような過度に詳細なデザインはかえってユーザーにとって理解の妨げとなり、UXにも影響します。

アプリ名の繰り返し、「見る（Watch）」「プレイする（Play）」などのアプリの使い方についての指示、「無料」という文字だけのプロモーション情報など、アプリにとって本質的ではない言葉はアイコンに表示するべきではありません。

アプリ名はホーム画面上でアプリのすぐ下に表示されるため、アイコンで繰り返して表示する必要はありません。

詳細な画像は小さなサイズでは見にくいため、アイコンのデザインに含めないようにしましょう。

写真の画像やスクリーンショットは使用しないこと

透視投影による3Dデザインはアイコンに使用するべきではありません。

透視投影による3Dデザイン、ドロップシャドウを加えるとアイコンは識別しづらくなります。

アイコンを分かりやすく直感的なデザインにするためには、詳細のバランスを図ることも重要です。

• アイコンに具体的なオブジェクトを使うときには、その種のオブジェクト全てに共通する要素のみをデザインに反映して、その他の要素は省略します。
• 瞬時にユーザーの注目を集めて、ユーザーがアプリを容易に識別できるような「中心点」をアイコンの中に作ります。

良い例：アイコンが「天気」を意味することをユーザーに伝えるために必要な要素は、太陽と雲だけです。

3. 異なる背景上でアイコンをテストする

アイコンはホーム画面の背景上で見やすいデザインにしましょう。

識別しやすくミニマリスズムを追求したアイコンをデザインしただけでは、全てのプロセスを完成したことにはなりません。他のUIと同様に、設計後のテストが必須です。

ユーザーがホーム画面の壁紙にどのようなものを選択するかは予測不可能であるため、予め異なる背景上でアイコンをテストすることが必要です。

アイコンが背景と混同するようなデザインにしてはいけません。次の例では「Stocks」というアイコンは暗い色の背景をバックにすると識別が困難です。

ユーザーがアイコンを探すのに苦労するようなデザインにしないこと

アイコンが背景と同化するようなデザインにしてはいけません。――透明なアイコンを使用するのは避けて、不透明であることを確認しましょう。

透明なアイコンを使用するのは避けましょう。

また、端末の動きに合わせて背景が動く機能を備えたデバイス上でもアイコンをテストしてください。

結論

今、あなたのアプリを完璧に表現することができる美しく魅力的なアイコンをデザインするために時間をかけてください。

TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。

現役のUI/UXデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でUI/UXデザインを習得することが可能です。