デザイン

デザイン

UIのアイコン、種類と機能を知って効果的に利用しよう!【小さいながら大きなインパクト】

2,275 views

読了時間 : 約1分39秒

UI上のアイコンは決しておろそかにしてはいけません。小さいながらも重要な意味をもち、さまざまな問題を解決してくれるのです。かつてスティーブ・ジョブズは、詳細こそ重要であり、正しくできるまで時間をかける価値があると語っています。今回は重要なアイコンの種類と機能について見てみましょう。

 

 

説明をするアイコン

この種のアイコンは説明のために使われます。特定の機能やカテゴリーをアイコンで説明しているのです。時には直接操作するアイコンではなかったり、より詳しく説明するためのラベルがついていることもあります。人間にとってわかりやすく作ることで、CTA用の要素を素早く簡単に認識してもらえます。アイコンだけで意味を認識したユーザーはあまりラベルには注意を払いませんが、それでもラベルを付けることは誤認識を低下させるのに効果的です。

icon①

 

 

操作用アイコン

操作用アイコンはユーザーが操作を行うプロセスに直接組み込まれており、ナビゲーションの核となるものです。クリックやタップが可能で、ユーザーの操作に反応してアニメーションを起こします。このアイコンの目的は操作によって起動する機能をユーザーに知らせることです。

icon②

 

 

装飾用アイコン

これらのアイコンは機能面よりも見た目でユーザーにアピールします。機能面には関係ないからとおろそかにしていいものではなく、デザインをターゲット層の好みに合わせることが必要です。デザインとターゲットの好みが一致すれば、優れたUXとユーザーの好印象を生み出してくれます。装飾用アイコンは季節特有の機能や特別なオファーを提供する際に使用されることが多いです。

icon③

 

 

アプリアイコン

アプリアイコンは、異なるプラットフォームに対しても製品のブランドを届けられる優れものです。通常はアプリのロゴを冠したデザインに仕上げられます。アイコンによってはブランドや企業のイメージカラーとロゴを合わせてデザインされることもあります。市場を調査し、他の製品と混同されない、独自のデザインを作れるよう気を配るべきでしょう。

icon④

 

 

ファビコン

ブラウザ内に表示される、製品やブランドを象徴するアイコンです。ユーザーがブラウズ中に素早く手がかりを得るのに使われます。ブランドを認識させたり、サイトのプロモーションに使用できます。

 

 

 

小さなアイコンに、これだけの種類と機能があることを知っていただけたでしょうか?デザインの際にはその種類と目的を把握し、細かな部分まで時間をかけて調整しましょう。それだけの価値がアイコンにはあるのです。

 

 

 

 

※本記事は、Small Elements, Big Impact: Types and Functions of UI Icons.を翻訳・再構成したものです。

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

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

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

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

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

無料

 

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

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

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

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

 

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

 

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

 

アプリDLはこちらから↓

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

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

無料

 

おすすめ新着記事

おすすめタグ