アイコンの基本的な役割と使い方

アイコンのアイキャッチ

アイコンは、行為・目的・機能などの意味を視覚化することにより、文字よりも小さなスペースで素早く伝える効果があり、直感的に分からないことを避ければ、大体の場合、きちんとその意味は伝わります。

今回は、アイコンの基本的な役割と使い方についてご紹介します。

アイコンの意味を伝える

アイコンは、限られたサイズの中で表現しなければならず、どのモチーフから作られたかによって、情報がどう伝わるかについて大きく左右されます。

以下はamazonのメニューの一例で、今でこそハンバーガーメニューのアイコンは当たり前に使われていますが、登場当初はこのアイコンがメニューのアイコンなのかわからない人の方が多かったと思います。

amazonのハンバーガーメニュー

馴染みのないアイコンやそれだけだとわかりにくいアイコンなどはテキストがあってはじめて情報として成り立つので、あくまでテキストの補足的な役割になり、場合によってはハンバーガーメニューの近くに「MENU」と記載するなど、テキストラベルをアイコンのそばに表示し、その意味を明確にする必要があります。

また、アイコンはそれ単体では何であるか不明瞭な場合が多くありますが、適切な設置ができれば情報を簡潔に伝えやすくすることができるので、サイトやプロダクトに応じて効果的なアイコンの利用をしましょう。

アイコンは文脈によって意味が異なる

アイコン単体では意味が分かりづらく、その配置場所や記載されているテキストで意味が通じるケースがほどんどなので、アイコンだけの利用はよくありません。

ferret のヘッダーのアイコン
ferret のヘッダーのアイコン

アイコンの立ち位置は、あくまで記号です。

物事や対象の形を、簡略化し記号として表現しているものなのでアイコンから伝わる意味がいくつもあったり、曖昧なアイコンは文字とセットにし、機能が複雑で、アイコンとして表現しにくい場合や、アイコンで表現することによって逆にわかりづらくなる場合は文字のみにすることも必要です。

アイコンのトンマナとディテール

アイコンはメニュー、ボタン、コンテンツの見出し等で利用されます。そのページでユーザーをナビゲートするためのアイコンは比較的カラフルでも良いかもしれませんが、メニューで利用されるアイコンは、フルカラーで利用するとそちらに視点が引っ張られてしまうためトンマナとの統一感を図ることも大切です。

googleの検索のリボン
googleの検索のリボン

エレメントの角はスタイリッシュにするのか、まるみを帯びるのか、hoverした時の色味はどうするかなど、アイコンのディティールや全体感を見ながら調整しましょう。

アイコンの位置

一般的に、ユーザーの視線はZ型やF型に動くように、特にテキストが多いホームページでは、左から右へ視線の動きをなぞる傾向が高くなり、アイコンはまず文字よりも先に目に入ります。

その為、アイコンは左にレイアウトするのが一般的で、この配置にすることで、アイコンがテキストを補完し、アイコンと文字を合わせて認識します。

googleの検索のリボン
googleの検索のリボン

アイコンを右に配置すると、降り合うテキストの間の余白によって迷いを与えてしまう為、アイコンはテキストの左に適度な余白を取り配置しましょう。

WEBサイトでよく使う無料アイコン素材サイト

こちらでご紹介するサイトは、どれも個人・商用に利用できるもので画像だけでなくAIのベクターデータとしてもダウンロードが可能で、シンプルなアイコンはSVGとして利用するのもお薦めです。

これ以外ににも、アイコンフォントや素材配布サイトがありますが、利用する際にはコピーライトの記載やサイトへのリンクを利用条件にしている場合もあるので、必ず利用規約を確認するようにしましょう。

FLAT ICON DESIGN

FLAT ICON DESIGNのキャプチャ

フラットデザインに最適なフラットアイコンで、ちょっと流行りの斜めにシャドウっぽいのを入れているところもGOODなポイントです。

FLAT ICON DESIGN

ICOOON-MONO

ICOOON-MONOのキャプチャ

シンプルなモノクロのアイコンを配布しているサイトですが、ダウンロードないで色の指定ができ、ファイル形式もpngやsvgなど色々な種類でダウンロードで切るので便利です。

ICOOON MONO

iconmontr

iconmontrのキャプチャ

シンプルなアイコン素材を掲載している海外の素材サイトで、割合太い線のタッチで描かれた、モノクロのシンプルなアイコンが無料でダウンロードできます。

iconmonstrIcons