Webサイトやサービスでアイコンが果たす5つの役割と、デザインにおける3つのコツ

多くのWebサイトにおいて、ユーザーはアイコンや画像を頼りにWebサイトを操作しています。中でもアイコンには意味を伝えやすいという特性があり、Webサイトを興味深いものに見せてくれるのです。

なぜ、Webデザインでアイコンを使用するのでしょうか。それは、コミュニケーションがデザインの本質だからです。メッセージを伝えられず、ユーザーの注意を惹きつけられない場合は、提供するすべての情報が無駄になります。

今回は、Webサイトのアイコンが果たす4つの機能と、効果的なデザインをするコツをご紹介します。

Webサイトやサービスでアイコンが果たす5つの機能とは

ユーザーはコンテンツを隅々までチェックしません。軽く目を通し、注目する価値の部分を探すだけです。見出しや文章が読み飛ばされる可能性は非常に高く、その視線はアイコンや画像などのビジュアル要素に惹きつけられます。

1. アクションの内容を伝える

アイコンはあらゆるインターフェイスに備わっています。道路標識、キーボード、タグなどの目的は、情報解釈を手助けし、何故そのアクションを使用すべきか、すぐに理解させる点にあります。

thestorefront
▲出典 :  
thestorefront.com

一般的に、アイコンは段落の区切りと同じ役割を果たします。つまり、指示を出すためのテキストを減らしてくれるのです。

booneselections
▲出典 :  
booneselections.com

ユーザーは基本的にWebサイトを読み飛ばしますから、デザイナーはアイコンを使って要所要所に視線を集めなければなりません。アイコンはユーザーのWebサイトに対する認識を強化し、ユーザーをコンテンツの重要部分まで誘導してくれるのです。アイコンはコンテンツの魅力を高めるのに寄与します。

2. アイコンを使って商品を説明する

 rokivo
▲出典 : rokivo.com

製品の機能やセットオプションを説明するのにも、アイコンは役立ちます。製品リンクの隣に設置された小さなアイコンがあれば、無駄な説明を省きつつ、商品の特徴をすぐに知らせることができます。また、アイコンは、ブランドロゴのように、製品ブランドを認識させるシンボルになることもあります。

3. 注意を引くためにアイコンを使用する

kinnek
▲出典 : kinnek.com

アイコンには、Webサイトのビジュアルを魅力的にするという働きもあります。

しかし、経験豊富なデザイナーは、アイコンがそういったツール以上のものであることを知っています。アイコンは、デザイナーがコンテンツを分離したり、機能に違いを持たせる意味でも重要なツールなのです。

4. スタイルを決める

plowme
▲出典 : plowme.com

スタイルの制定は、ビジュアル面だけでなく、機能性にも影響します。アイコンの目的は、コンテンツの可読性を高めることにありますから、アイコンがWebサイトの他のパーツのスタイルと一致しているかどうかに気をつけてください。

5. ワークフローを直感的にする

brownowlcreative
▲出典 : brownowlcreative.com

アイコンはワークフローを直感的なものにします。矢印マークがあれば視線はそちらに流れ、チェックマークが出れば安心して画面を閉じるでしょう。質の良いアイコンはユーザーが一目見ただけで、それが一体何を指すのかが、すぐにピンとくるようになっています。

優れたアイコンを作るための3つのコツ

1. 短いテキストを添える

life360.com
▲出典 : life360.com

Webサイトやサービスのアイコン作りに一番重要な作業は、ユーザーが各アイコンの意味を理解し、それらを確実に区別できるようにすることです。

テキストこそが、その区別を確実にする解決策です。アイコンの横に小さな見出しを添えることで、ユーザーがアイコンの意味を理解し、迷いなく使用するのに役立ちます。但し、イメージとテキストのバランスをとることをお忘れなく。近接の法則を利用しましょう。

2. リニューアルした機能の、アイコンは目立つようにする

upverter
▲出典 : upverter.com

アプリやWebサイトをリニューアルし、機能を改善したり追加した場合、ユーザーにその魅力をいち早く体験してもらいたいですよね。ならば、その新機能にクリエイティブなアイコンを付けましょう。アイコンによって目を惹くことで、訪問者が新機能を見逃す恐れも少なくなります。

3. 一貫性を保つ

pagodabox

▲出典 : pagodabox.io

アイコンの作成自体に、規則やガイドラインはありません。

唯一の共通ルールは、アイコンがアイテムの内容をビジュアルで表現できており、特定のアクションに向けてユーザーを誘導できる画になっているかどうかということです。

従って、その良し悪しは、ユーザーがその情報を理解できるかどうか、情報がはっきりと強調表示されているかどうかによって異なります。優れたアイコンを実現するには、一貫性を維持する必要があります。

まとめ

Kenil Bhavsar
Kenil Bhavsar / dribbble

アイコンはWebサイトにポジティブでウェルカムな雰囲気を与え、ワークフローを直感的にしてくれます。アイコンがWebサイトのスタイルブランドのと核となる部分を作り上げます。

アイコン作りを極めてみては?

(翻訳:Ayaka Takei)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ