初心者向け講座早見表
前回のWeb系コラムでは「アイコン」の意味と、利用するメリット及び注意点についてのお話をしました。
今回は、「アイコン」の使いどころの違いに着目しながら、具体例を見ていきたいと思います。
まずは、アイコンによって情報が分類されているデザインをいくつか見ていきましょう。
有名なところとして、まずはGoogle Mapのデザインを採り上げてみます。ここでは東京セミナールームの最寄である麹町を検索しました。左端を見ますと、最寄の駅の鉄道名が、実際の鉄道のアイコンと一緒に表示されて、視認性を高める役目をしています。アイコンを使用することで、目的地へ移動するための手段の一つである鉄道名の情報をユーザーが把握しやすくなっています。
Webに主軸を置く会社のリクルーティングページです。「ビジネスビジョン」や「ストーリー」などがアイコンになっており、言葉だけではなかなかイメージが湧きにくい内容でも、アイコンを使用することによって理解しやすくなっていることが分かります。
こちらの例にある右上のアイコンも、言葉だけではイメージしにくい内容の理解を助けるために使用されている例です。
続いて、デザインのワンポイントとしてのアイコンのデザインを見ていきましょう。
中央付近にあるメニュー画像には、それぞれワンポイントとしてのアイコンが使用されています。
こちらも上のグローバルメニュー画像一つ一つに、アイコン使用されています。画像の言葉を補助する役目もあり、相乗効果によっていっそう視認性を高めているデザインです。
デザイン要素にもう少し「ワンポイント」を追加したい場合には、小さいアイコンを挿入すると効果的であることも多いと私自身は考えています。
アイコンの特性である「物事を直感的に伝えることを手助けする」点を活用すると、Webサイトの制作やリニューアルなどをより効果的に進めることが可能となります。皆様のWebサイトデザインの向上にお役立ていただければ幸いです。
（担当：斉藤 万幾子)
