初心者向け講座早見表
前回のWeb系コラムでは印刷する可能性のあるWebページを準備する際の注意点についてのお話をしました。
今回は、皆さんがWebを閲覧している際に何気なく目にしている「アイコン」を使用するメリットと注意点に関するお話をしていきたいと思います。
Webサイトデザインの上でアイコンが大切な理由は、そもそも人間は文字を読むよりも、絵を見る方が理解が早いという点にあります。
例えば、アイコンと似た意味を持つ単語である「ピクトグラム」。
ピクトグラムの典型的なデザインは、非常口の場所を示す絵柄です。
ピクトグラムの起源は、文字が生まれるよりも前と言われています。現代社会においても、ピクトグラムは情報の在りかや注意を促す場合、国や言語を問わずに広く利用されます。通常一色のみで作られ、一見して何が在るのかを教えてくれる図柄が、ピクトグラムです。そのようなピクトグラムの特徴を兼ね備えたものがアイコンです。アイコンはWebの世界でも広く使われており、シンプルなものからピクトグラムに比べてデザイン性が増したものまで、幅広く利用されています。
アイコンを使用することの最大のメリットは「少ないスペースでも、多くの情報を掲載可能である」という点です。
例えば各種ソーシャルネットワークを表すアイコンがあります。
IT media
これらを文字に置き換えるとかなりスペースを取ってしまいますし、またそれぞれのSNSをすでに使用している人、言い換えればアイコンの意味自体をすでに理解している人に向けて表示しているという意味合いもありますので、WebにおけるSNSの表示についてはアイコンを使用するということは、多くの皆さんがすでに慣れ親しんでいる印象を私自身は受けます。
もう一つの例をご紹介しましょう。
コース一覧
弊社の事例で恐縮ですが、弊社Webサイトの講座一覧では、リストに掲載されている一つ一つの講座名の横に、講座のカテゴリを示すアイコンが並んでいます。これにより、講座名を全部読まなくても、その内容を一目で想像しやすいようになっています。このアイコンの情報をすべて文字で置き換えるとすると、スペースも不足してしまいますし、ユーザーの立場で考えてみても、すぐに情報が把握できずに困ってしまうと思います。
このように、アイコンはデザイン上のワンポイントとなるだけでなく、上手に活用することでユーザーの理解を早める事にも役立つという点も、アイコンを使用することのメリットの一つであると私自身は考えています。
一方で、アイコンを使用する際には「誰もが一目で情報を理解できる」ことが求められます。裏返せば、一見してどのような意味を持っているかが分かりにくいアイコンについては、ユーザーの混乱やコンテンツ内容の誤解に繋がりやすいため、逆効果となってしまうこともあることに注意しなければなりません。
例えば「書籍5冊分を意味するアイコンを作成して下さい」と言われても、困ってしまうかもしれません。アイコンの素材を無料で探すこともできますが、なかなかぴったりしたアイコンが見つからないケースもあると思います。そのような場合には、思い切って文字のまま掲載し、分かりやすさを優先することが必要となるケースもあります。あるいは、アイコンとその説明書きを別の場所に用意したり、マウスオーバー時のツールチップ（ヒントテキスト）を活用するという対処方法もあります。
いずれの場合も、アイコンを配置する「必要性」を是非忘れずに意識していただければと思います。アイコンには「デザイン上のワンポイント」「優れた視認性」「ユーザーの理解促進」というメリットがある一方で、理解しにくいアイコンについては逆効果となる可能性も高いため、配置には細心の注意が必要です。分かりやすく、デザイン性に富んだWebサイト制作の上で、ご参考としていただければ幸いです。
（担当：斉藤 万幾子）
