アプリアイコンのデザインで最低限守るべき3つのルール

Nick Babich

Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

3 Simple Tips to Improve Your App Icon Design (2016-11-17)

AppStoreとホーム画面の両方で目を引くような、美しく印象的なアイコンはどのようなアプリにも必要なものです。同時に、アプリのアイコンはユーザーにとって、すぐに認識できるものである必要もあります。

ユーザーフレンドリーかつ完璧な美しさをそなえたアイコンを作るには何が必要なのでしょうか?

そんなに大変なことではありません。ここでは、3つの簡単なルールをご紹介します。

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

アイコンは、何よりもまずその意味を伝えなければなりません。ユーザーにアイコンが何を表しているかを分析をさせてはいけません。

アイコンは、一目でアプリの目的を伝えるための最初のチャンスなのです。アプリのアイコンをデザインするときは、以下のことを心に留めてください。

アイコンは、比喩的な関連付けによってアイデアを伝えます。これにより、ユーザーはアイコンを特定の目的 または 動作と関連付けます。そして、目的や動作がすぐに理解できない場合は、アイコンは機能しません。したがって、アイコンを明確で直感的にすることは必要不可欠なのです。

Don't

抽象的なアイコンを使用しないようにしましょう。これはほとんどのケースで有効ではありません。このような場合、ユーザーは過去の経験をもとにアイコンの意味を理解することができなくなります。iPhoneのGame Centerのアイコンはこの問題を示す良い例です。アイコンは、ガラスのように見えるカラフルな円のまとまりです。見た目は良いですが、人々は大抵このアイコンが意味するものは何だろうと疑問に思います。

ゲームセンターのアイコンの意味は何でしょうか? ゲームをすることとどのように関連しているのでしょうか?

Do

安全策は、ユーザーが簡単に認識できるアイコンを使用することです。家や、プリント、虫眼鏡や封筒など、ユーザーの誰もがほぼ認識できるアイコンがいくつかあります。例えば、Gmailのアプリのアイコンは封筒を使用しており、これは一般的にメールと関連付けられます。

封筒のイメージは「メール」を示します

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

アプリの本質をつく要素を見つけ、それを単純な形で表現しましょう。そして、アイコンに必要ではない余計なディテールをすべて取り除いて下さい。

ほとんどのデザイナーは、アプリのアイコンを素晴らしく見せようとしたがります。しかし、やりすぎてしまい、アイコンにディテールを盛り込み過ぎてしまうことがあります。このようなディテールは、視覚的ノイズの原因となり、UXに悪影響を与える可能性があります。

Don't

不要な単語を含めないようにしましょう。例えば、アプリの名前を繰り返したり、「見る」や「再生する」などアプリで何ができるかを伝えたり、また「無料」のようなプロモーション目的のみの単語などです。必要不可欠な場合、もしくはロゴの一部となる場合にのみ、単語を使用しましょう。

ホーム画面のアイコンの下にはアプリ名が表示されるので、アイコン内で名前を繰り返さないで下さい。

写真のような詳細を含めないようにしましょう。非常に小さなサイズでは見づらい可能性があります。

写真やスクリーンショットは含めないようにしましょう。

3次元的遠近法を使用しないようにしましょう。3次元的な遠近法やドロップシャドウを使用すると、アイコンを識別するのが難しくなります。

細部のバランスをとることは、アイコンを明確で直感的にするために重要です。

Do

アイコンに対し具体的なオブジェクトを使用するときは、オブジェクト間で共通する特徴のみをいくつか選び、残りは省略しましょう。

すぐに目を引き、アプリを明確に特定する単一で中心的なポイントを持ったアイコンをデザインしましょう。

アイコンが「天気」を意味することをユーザーに伝えるために必要な特徴は、太陽と雲のみです。

3. さまざまな背景でアイコンをテストする

アイコンは、背景に対して判別しやすいものである必要があります。

認識可能でミニマルなアイコンをデザインすることは、プロセスの最後ではありません。他のUIオブジェクト同様、デザインした後に作成された要素のテストを行うことは必須です。ユーザーがホーム画面にどのような壁紙を選択するかを予測することはできません。そのため、異なる写真上でアイコンがどのように見えるかを知る必要があります。

Don't

アイコンが背景と区別できないデザインは避けましょう。下の例では、「Stocks」のアイコンは暗い背景上ではほとんど認識できません。

ユーザーにアイコンを捜させないようにしましょう。

アイコンによって背景を乱さないようにしましょう。透明なデザインを避け、確実に不透明色にしましょう。

透明なアイコンを使用しないようにしましょう。

Do

アイコンを実際のデバイスで試し、動かすたびに見え方が変わるような動的な背景でテストしましょう。


イベント

2017/12/05(火)
Design Thinking Square