アクセス（Access）講座一覧｜フロンティアリンク
Access/Excel/VBA/Webプログラミングの1日速習講座

前回のWeb系コラムでは「アイコン」の意味と、利用するメリット及び注意点についてのお話をしました。
今回は、「アイコン」の使いどころの違いに着目しながら、具体例を見ていきたいと思います。

まずは、アイコンによって情報が分類されているデザインをいくつか見ていきましょう。

Google Map

有名なところとして、まずはGoogle Mapのデザインを採り上げてみます。ここでは東京セミナールームの最寄である麹町を検索しました。左端を見ますと、最寄の駅の鉄道名が、実際の鉄道のアイコンと一緒に表示されて、視認性を高める役目をしています。アイコンを使用することで、目的地へ移動するための手段の一つである鉄道名の情報をユーザーが把握しやすくなっています。

givery recruting site

Webに主軸を置く会社のリクルーティングページです。「ビジネスビジョン」や「ストーリー」などがアイコンになっており、言葉だけではなかなかイメージが湧きにくい内容でも、アイコンを使用することによって理解しやすくなっていることが分かります。

いい生活

こちらの例にある右上のアイコンも、言葉だけではイメージしにくい内容の理解を助けるために使用されている例です。

続いて、デザインのワンポイントとしてのアイコンのデザインを見ていきましょう。

Goen Girl

中央付近にあるメニュー画像には、それぞれワンポイントとしてのアイコンが使用されています。

大幸薬品 コーポレートサイト

こちらも上のグローバルメニュー画像一つ一つに、アイコン使用されています。画像の言葉を補助する役目もあり、相乗効果によっていっそう視認性を高めているデザインです。

デザイン要素にもう少し「ワンポイント」を追加したい場合には、小さいアイコンを挿入すると効果的であることも多いと私自身は考えています。
アイコンの特性である「物事を直感的に伝えることを手助けする」点を活用すると、Webサイトの制作やリニューアルなどをより効果的に進めることが可能となります。皆様のWebサイトデザインの向上にお役立ていただければ幸いです。

（担当：斉藤　万幾子)

前回のWeb系コラムでは印刷する可能性のあるWebページを準備する際の注意点についてのお話をしました。

今回は、皆さんがWebを閲覧している際に何気なく目にしている「アイコン」を使用するメリットと注意点に関するお話をしていきたいと思います。

Webサイトデザインの上でアイコンが大切な理由は、そもそも人間は文字を読むよりも、絵を見る方が理解が早いという点にあります。

例えば、アイコンと似た意味を持つ単語である「ピクトグラム」。
ピクトグラムの典型的なデザインは、非常口の場所を示す絵柄です。

ピクトグラムの起源は、文字が生まれるよりも前と言われています。現代社会においても、ピクトグラムは情報の在りかや注意を促す場合、国や言語を問わずに広く利用されます。通常一色のみで作られ、一見して何が在るのかを教えてくれる図柄が、ピクトグラムです。そのようなピクトグラムの特徴を兼ね備えたものがアイコンです。アイコンはWebの世界でも広く使われており、シンプルなものからピクトグラムに比べてデザイン性が増したものまで、幅広く利用されています。

アイコンを使用することの最大のメリットは「少ないスペースでも、多くの情報を掲載可能である」という点です。

例えば各種ソーシャルネットワークを表すアイコンがあります。
IT media

これらを文字に置き換えるとかなりスペースを取ってしまいますし、またそれぞれのSNSをすでに使用している人、言い換えればアイコンの意味自体をすでに理解している人に向けて表示しているという意味合いもありますので、WebにおけるSNSの表示についてはアイコンを使用するということは、多くの皆さんがすでに慣れ親しんでいる印象を私自身は受けます。

もう一つの例をご紹介しましょう。
コース一覧

弊社の事例で恐縮ですが、弊社Webサイトの講座一覧では、リストに掲載されている一つ一つの講座名の横に、講座のカテゴリを示すアイコンが並んでいます。これにより、講座名を全部読まなくても、その内容を一目で想像しやすいようになっています。このアイコンの情報をすべて文字で置き換えるとすると、スペースも不足してしまいますし、ユーザーの立場で考えてみても、すぐに情報が把握できずに困ってしまうと思います。

このように、アイコンはデザイン上のワンポイントとなるだけでなく、上手に活用することでユーザーの理解を早める事にも役立つという点も、アイコンを使用することのメリットの一つであると私自身は考えています。

一方で、アイコンを使用する際には「誰もが一目で情報を理解できる」ことが求められます。裏返せば、一見してどのような意味を持っているかが分かりにくいアイコンについては、ユーザーの混乱やコンテンツ内容の誤解に繋がりやすいため、逆効果となってしまうこともあることに注意しなければなりません。

例えば「書籍5冊分を意味するアイコンを作成して下さい」と言われても、困ってしまうかもしれません。アイコンの素材を無料で探すこともできますが、なかなかぴったりしたアイコンが見つからないケースもあると思います。そのような場合には、思い切って文字のまま掲載し、分かりやすさを優先することが必要となるケースもあります。あるいは、アイコンとその説明書きを別の場所に用意したり、マウスオーバー時のツールチップ（ヒントテキスト）を活用するという対処方法もあります。

いずれの場合も、アイコンを配置する「必要性」を是非忘れずに意識していただければと思います。アイコンには「デザイン上のワンポイント」「優れた視認性」「ユーザーの理解促進」というメリットがある一方で、理解しにくいアイコンについては逆効果となる可能性も高いため、配置には細心の注意が必要です。分かりやすく、デザイン性に富んだWebサイト制作の上で、ご参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムではギャラリーのように写真を配置するレイアウトについてのお話をしました。
今回は、印刷する可能性のあるWebページを準備する際の注意点について焦点を当ててみたいと思います。

WiFiやタブレットが普及したとはいえ、紙媒体で情報を取り扱いたいケースはまだまだ多く存在すると思います。
ユーザー側で印刷する必要のある申込書や地図などをWebページで表示する際は、CSSを画面表示用と印刷用に切り分けるということも、一般的に行われるようになってきています。

印刷を行う際は、インクの節約やプリンター自体の制約のため、モノクロで印刷する機会も多いと思います。画面上では情報はカラーで表示されていますが、モノクロで印刷された紙では、その色情報が失われてしまいます。
例えば、赤文字と青文字の違いや、鮮やかな赤色とくすんだ赤色の違いなどの情報は、モノクロ印刷時には再現されません。このような場合の対応策としては、
重要な文字情報については文字自体の太さやフォントサイズを変更することで、モノクロ印刷で色情報が失われたあとでも、情報自体の重要性を再現できるような工夫をすることが一般的です。
重要な情報と重要ではない情報を、文字の形状を変えて区別することで、色情報が失われても優先順位を保持することが可能となります。

net market share

例として、上記画像の中央近くにあるブラウザシェアのグラフを見てみましょう。
このグラフには色情報を失ってもそれぞれの要素を識別できるような工夫がなされています。各要素（ブラウザシェア）に補助用の棒線を用意し、文字情報で各要素の説明を把握可能とすることで、画面上では色による直感的なブラウザシェアを把握しつつも、印刷した紙媒体でもシェアの情報を判別しやすいデザインになっています。
例えば、このグラフ部分をモノクロに加工した場合は以下のようになります。
色による要素の識別はできなくなりましたが、文字による情報自体は取得可能であり、そこからシェア情報を判別することが可能です。

Google Map等の地図に店舗等の場所を掲載することも最近では一般的ですが、
モノクロで印刷すると見づらくなってしまう場合には、別途モノクロ印刷用の地図を用意する必要が生じるかもしれません。
印刷することが予想されるコンテンツにおいては、色情報が失われても必要な情報を判別できるような工夫をすると、ユーザビリティをより向上させることが可能となります。コンテンツ作成の際に、ぜひ参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムではWebサイトをレイアウトする際の情報の優先順位についてお話しました。
今回は、ギャラリーのように写真をたくさん見せるレイアウトについて、具体例を見ていきたいと思います。

cssにおけるfloatというプロパティを使うと、写真や文章等の情報を簡単に横方向に並べることができます。
ネットショップやギャラリーなど、多くの写真を使用するWebサイトでは、様々な色が使用されている写真を目立たせるため、通常はボタンなどの色をあえて目立たせず、背景の色も白や黒などの無彩色を選択することが一般的です。
背景色に赤色や青色などの色を使用すると、写真自体の色が背景色の影響を受けて、別の色に見えてしまうこと現象が発生する可能性が高くなります。ですので、特に商品画像などでは実物の色とディスプレイ上の色を極力近くさせるために、白や灰色や黒などの、無彩色を背景色として選択すると良いです。

Pocky Street

例えば上記のサイトでは、

白背景を活用することで商品の色が目立つデザインになっています。

BEIZ graphics

黒い背景色は、写真家やデザイナーのポートフォリオなどによく使われる背景です。
背景が黒色なので、写真を明るく見せることができます。
文字の色は灰色を使うことが多いです。白色を使うとコントラストが強すぎてしまうと感じられることがあるためです。

REAGAL SHOES

最後に、写真に重ねられているアイコンについて見てみましょう。
上記のサイトでは、商品画像自体が白背景でトリミングされており、その上に矢印のアイコンを重ねて表示するデザインを使用しています。
このようにデザインすることで、商品背景の白色とのコントラストができ、商品画像と矢印の双方を目立たせることが可能となります。

この背景は濃い目の茶色で、無彩色ではありません。しかし、白色で商品画像との間に細枠が設定されています。これにより、茶色自体の効果を受けにくくすると同時に、矢印アイコンや商品画像とのコントラストをつけることに成功しています。

以上、多くの写真を効果的に表示するレイアウトについて、3つの例をご紹介いたしました。デザイン時の参考としていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは余白の持つ役割についてのお話をしました。
今回は、Webサイトに掲載する情報の優先順位について、お話をしたいと思います。

Webサイトに掲載する情報については、重要なものや確実に確認をしてほしいものから、時間があれば一緒に確認をしてほしいもの、あるいは法律や社内規則等のルールによって掲載が義務づけられているもの等、様々な情報が存在します。

従って、Webサイトのレイアウトを考える際には、情報の配置場所をしっかりと決めておく必要があります。言い換えれば、情報に優先順位を設定し、優先順位の高いものから目立つ位置やデザインを割り当てていくことになります。
この際、重要な部分や特に見せたい場所には強い色を置くのが一般的です。
周囲にも強い色があったり、見づらかったりしては、強い色を使っても注意を引くことができません。
通常は強い色を使ったあとは、周囲の色はグレーのような、鮮やかではない色を配置し、また余白を多めに取ることによって色自体をすっきり見せるようにします。
例えば下記のWebサイトでは、左にある強めの配色の周りが、彩度の低い色でまとめられていることが確認できます。

Super Soul

もちろんですが、二番目に目立たせたい場所があった場合、一番目と同じようなデザインにしては、ユーザーはどちらを最初に見たら良いのか迷ってしまいます。従って、二番目に目立たせたいポイントについては一番目よりも控えめな色やデザインを選ぶ必要が出てきます。

FDA

航空会社の予約サイトです。目立たせたいキャンペーンなどのバナーを除けば、空席照会のボタンが一番優先順位の高い箇所になると考えられます。実際にこちらのサイトでは「空席照会」ボタンがユーザーの視線の動きを考えた場合に最も注目されやすい位置である「左側」にあるため、ここから空席情報をすぐに検索することが可能です。
グローバルナビゲーションボタンと同じ色で「空席照会」のボタンが作られているのは、その高い優先順位のためであると考えられます。

ここでのもう一つのポイントは色の違いによる優先順位のつけ方です。
例えば、このサイトでは赤色、青色、水色のボタンが左側にあります。
どのボタンも目を引きつける鮮やかな色が使われていますが、最も視覚の誘引性が高いのは赤色です。
ここでは、このWebサイトに来るユーザーがまず何をしたいかということを主眼に置き、よく使うボタンに対しては色も活用して優先順位を設定していることがわかります。ユーザーの目に入りやすくなれば、クリックされる確率も上がります。
「空席照会」といった重要なボタンには赤色のような鮮やかな色を使うことで、ユーザーの操作性がより上がることに繋がるのですね。

Webサイトのレイアウトを考える際には、情報の優先順位も意識して考えていく必要があることをご紹介いたしました。
ぜひこの視点を活用し、ユーザーにとって使いやすいWebサイトとは何かを考えていただければと思います。

（担当：斉藤　万幾子）