デザイン

デザイン

UIデザインによるユーザーが認識しやすいアイコンとは?アイコンデザインの基本原則

本記事は、Checklist for Using Icons In UI
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

332 views

読了時間 : 約4分0秒

ユーザーインターフェースのグラフィックとして最もよく使用されるエレメントが、アイコンです。よいアイコンとは、どのようなものなのでしょうか?

 

この記事では、ユーザーにとって適切なアイコンを確認するための、シンプルなチェックリストをシェアしたいと思います。

 

1. 分かりやすさ

 

分かりやすさは、素晴らしいインターフェースに必要不可欠な要素です。ところが残念なことに、アイコンには分かりやすさが欠けてしまいがちです。

 

アイコンの役割は、何よりもその意味を表すということです。アイコンが分かりやすく内容を表現していないと意味がないですし、画面がうるさくなるだけです。

 

“ラベルを見なくても内容が分かるアイコンこそが、最高のアイコンである”

 

たった少しのシンプルなルールに気を配るだけで、無意味なアイコンを使わずに済むのです。

 

ユーザーがよく知っているアイコンを使うようにしよう

 

ユーザーはこれまでの経験に基づいてアイコンを認識します。そのため、見たこともない独創的なアイコンよりもよく見かけるアイコンを使った方がよいのです。

 

・ユニバーサルアイコンに準拠する:家やプリンター、ゲーム、検索といったアイコンは、何も説明せずとも誰もが理解できます。

・調査結果を参考にする:ライバルの使っているアイコンを参考にしてみましょう。

 

意味が似ているアイコンを同時に使うのは避けよう

 

様々な意味を持つ図柄のアイコンは避けるべきです。例えば『ハート』と『星』はどちらも、気に入っていたりお気に入りに追加したりする意味を持っています。この2つのアイコンを同時に使ったら、ユーザーは困惑してしまいます。

 

アイコンの意味が伝わるかどうかテストする

 

「ユーザーは毎日このアプリを使っています。だからユーザーにとってこのアイコンは見慣れています。」という報告を信じてはいけません。意味が伝わっているか、必ず自分たちでテストすること!

 

アイコンのテストで有効なのは5秒ルールです。相手にアイコンを見せて、どんな意味で使われていると思うか答えてもらうのです。

 

答えるまでに5秒以上かかるのであれば、そのアイコンが効果的に意味を伝えていると考えにくいです。

 

スケーラビリティをチェックする

 

アイコンが小さいサイズ(約15×15px)でも認識できるかチェックしましょう。

 

見慣れない形のアイコンにはラベルを付ける

 

それでも珍しい形のアイコンにしたいなら、テキスト入りのラベルを一緒に表示する方法もあります

 

自分ルールでアイコンの意味を変えない

 

アイコンの意味を変えるだけで、ユーザーはすぐに混乱してしまいます。ユーザーの想定と異なる意味をアイコンに与えてしまうと、ユーザーにとっては訳が分かりません。

 

“アイコンの再編は不要です!”

 

たとえわずかな意味の違いであっても、ユーザーの認識度は大幅に低下します。

 

Google Docsは長い間ハンバーガーのようなアイコンを使用していました。主流なインターフェースは、メインナビゲーションメニューを表すようなアイコンを使っています。しかしGoogleはそのアイコンを再定義し、『戻る』アクション用に使ったのです。つまりユーザーがアイコンをクリックすると、Google Docsのホームに戻ってしまうという仕様でした。

 

2. 目に優しいデザインを

 

イラストや色やアイコンからブランドイメージを伝えることは可能です。うまくいけば、アイコンがデザインの美しさを確実に引き立ててくれます。

 

グラフィックの細かさは削減しよう

 

アイコンを含め、UIのエレメンツを作るうえでKISSの原理が非常に重要です。アイコンをできるだけシンプルに、そして次の2つのルールに則って、不必要な複雑さを与えないようにしましょう。

 

①使用する色の数を制限する:使用色は3~4色に留め、簡潔なデザインにしましょう。

 

②グラフィックは細かすぎないようにし、オブジェクトの基本的な特徴を押さえる:図式的なデザインは様々な画面や解像度でも同じように表示されるので、簡潔なデザインが望ましいのです。

 

アニメーションのエフェクトで見る楽しさを与えよう

 

アニメーションには、分かりやすい機能的な一面に加え、ユーザーを楽しませるという側面も持っています。例えば状態を変更する場面でアニメーションを使えば、通常よりもダイナミックなエクスペリエンスを作れるのです。

 

3. 適度なサイズ感

 

ユーザーにとってデバイス内のアイコンは、よくタッチする部分になるはずです。スマートフォンの画面内で、アイコンのスペースがほとんどないというのは、多くのデザイナーが陥りがちなミスです。タッチされるアイコンをデザインする際は、指で不自由なくタッチできる程度の大きさにするよう心掛けてください。タッチスクリーンを想定した理想的なサイズは7~10mmです。また、タップを誤らないようにパディングを追加するのもお忘れなく。

 

4. 統一感

 

統一感があるというのは、デザインの重要な基本です。

 

“統一感のあるデザインこそが、最も優れたデザインである”

 

類似するエレメントが同じような見た目と機能となっていれば、ユーザビリティもラーナビリティも向上します。

 

本質的な統一感

 

アイコンセットには視覚的な統一感が不可欠です。いまあなたが製品に使用しようとしているアイコンにも統一感が必要です。理想的なのは、全てのアイコンが同一人物によってデザインされたような見た目です。ここでは、統一感を演出するためにチェックすべきポイントをいくつかご紹介しましょう。

 

・全てのアイコンに同じ色か同系色を使用する

 

・全てのアイコンが同じ形と特徴(縞模様の幅など)を持つ

 

プラットフォームの統一感

 

使用するプラットフォームとアイコンにも統一感が必要なことを忘れてはなりません。ここは最もユーザーの目につくポイントですよ。

 

系列製品の統一感

 

系列製品があるのなら、全ての製品で同じ(あるいは似ている)アイコンの形式を使いましょう。

 

おまけ

 

アプリに最適なアイコンを見つけるというのはいつも、本当に骨の折れる作業です。そうした作業を少しでも楽に進めてほしいので、今回は素材提供元のリストをシェアしようと思います。このリストは定期的に更新しますので、便利なヒントを提供できるはずです。

Icons – UX Pro

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ