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

前回のWeb系ブログコラムでは赤色の持つ効果についてお話ししました。今回は「既存サイトに新規バナーを追加する」という状況において、具体的に検討すべき要素について説明したいと思います。

既存のWebページに新たなコンテンツを追加する際、「バナー」を配置することは来訪者を誘導する方法として大変有効です。既存のグローバルナビゲーションボタン（グローバルナビゲーションとは、各Webページに共通して表示されるボタンのことを言います）を改変して新規コンテンツを追加することは、特別な理由が無い限り、あまり実施されません。そこで、レイアウト上のソースコードの追加を少なく抑えるという観点から、新たなコンテンツを既存コンテンツへ追加する場合はバナーの作成を検討することが一般的です。

新規コンテンツをアピールするには、簡単に言うとバナー自体を目立たせる必要があります。人の目を惹き付けるバナーを構成する基本的な要素は以下の5つとなります。

・色の視認性
・色の誘目性
・色の識別性
・文字の可読性
・面積

上記の各要素を検討することは、バナーへ人の目を惹き付けるだけでなく、その後のクリック率を高めるためにも大変有効です。また、上記の要素を自社サイトに当てはめて最適な色を決定することで既存バナーの効果を改善することが可能です。ですので、今回のコラムからしばらく、「既存サイトに新規バナーを追加する」際に考慮すべき5つの要因をシリーズで説明していきたいと思います。

今回は「色の視認性」についてのお話です。

色の視認性とは、簡単に言えば、字やモノの認識しやすさの度合いです。例えば道路にある標識は、周りに木や家があっても情報伝達を実現するために視認性の高い色が使用されています。バナーにも同じことが当てはまります。バナーとは、クリックした先の情報をわかりやすくコンパクトにまとめた標識のようなものですから、バナーの周りにコンテンツがある状態を前提とした色の選択が大切です。

森の中で周りと同系色の木が目立ちにくいことは明らかです。目立つ色（視認性の高い色）とは、背景の色や周りのコンテンツの色から相対的に決定されます。視認性の高い色の相対的な決定の方法は、以下のルールに従っています。

・視認性が高い色は背景色や周りの色との「明度差」が大きい

明度とは、色の明るさの度合いのことです。従って明度差が大きい色として、極端な例として、白背景に黒色の文字のような組み合わせが挙げられます。
既存サイトの多くは背景色が白であることが多いですが、背景色が白の場合はバナーの色が薄目の色では視認性が低い、すなわち目立ちにくいということになります。逆に濃い目の色は明度差の大きさの観点から適した色ということができます。ただし、濃い色ならば全て良いというわけではありません。既存のWebサイトに使用されているテーマカラーの効果を活かす範囲で明度差の大きい色を検討することが大切です。
具体的にはテーマカラーの色の明度を少しずつ落とした色をいくつか作成し、それらの候補から最適な色を選択する方法があります。最初から極端に明度を落とした色を作ることは、テーマカラーの効果を活かしづらくなる可能性が高いためおすすめしません。

今回は背景色や周りの色との明度差を確保することが、目立つバナーを制作する上で検討すべきポイントの一つであるというお話しをしました。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

色の持つ効果についてのシリーズ第三回目のWeb系コラムでは灰色の「主張しない」というポイントについて見ていきました。今回は逆に「主張する赤」を使用する際のポイントと具体例について説明したいと思います。

赤はWebサイトで最も多く使用されている色の一つです。心理的に赤からイメージされるものは「炎」「情熱」「革命」などの「力強さ」と深く関連付けられているため、赤を使用することで小面積でも強い印象を与えることができます。また赤は道路標識に使用されていることからも想像できるように目立ちやすい色ですので、特に重要な情報を伝達する場合によく使用されます。一方、赤を使用する量が多すぎると読み手の注意を分散してしまう可能性があるため注意が必要です。

以下の具体例から赤を使用するポイントを見ていきましょう。

WebCentric

活動的なイメージを表現する赤の選び方です。高い彩度の色を大きい面積で使用すると少し派手な印象を与えることもあるため、彩度を少しだけ下げる工夫が見やすい色使いのポイントになります。

Impulse

赤の明るさを抑えると落ち着いた印象を表現することが可能です。赤は彩度が強いものを大きな面積で使用する場合少しまぶしく感じることもあるため、このサイトのように少し暗めの色を使用し、また薄いグラデーションを加えることで見やすさを保ったまま色のイメージを伝えています。

recetas de rechupete

赤に限らず、暖色系の色には食欲を増進させる効果が存在することが知られています。このサイトでは少しオレンジに寄った、明るさを抑えた赤を使用することで、多様なアイコンから来るポップなイメージと同時にレシピサイトとしての信頼感を演出しています。

TAKE THE WALK

赤と黒の組み合わせは、赤の選び方次第でエネルギッシュなイメージや落ち着いたイメージを表現することができ、印象深いサイトに仕上げることができます。

このように一口に赤といっても様々な赤がありますが、心理的にも機能的にも読み手に「力強さ」や「重要性」というメッセージを伝える点は共通です。「重要性」というメッセージについて逆に考えてみますと、さほど重要ではない情報の表示に赤を使用することは、読み手に「間違った重要性」の印象を与えてしまう可能性がありますので注意が必要です。「力強さ」と「重要性」のどちらに比重を置くかを考える際には、色選びだけでなく文章などのコンテンツ自体の重要性も考慮することが大切なポイントとなります。

今回は赤の持つ「力強さ」や「重要性」というイメージを活用することで、心理的にも機能的にも分かりやすいWebサイトの構築が可能となることをお話しました。今後のWebサイト作りに生かしていただければ幸いです。

（担当：斉藤　万幾子）

前回のコラムでは、Webページ全体を体系的に見せるための基本的なデザインルールについてのお話をしました。今回は、写真などのビジュアル要素をWebページ制作に取り込む重要性について説明したいと思います。

ここでのビジュアル要素とは、写真や図表、イラストやクリップアートなどのイメージ素材のことを指します。
なぜWebデザインにおいて写真などのビジュアル要素が重要なのかといいますと、ビジュアル要素は最も素早く直感的に「メッセージ」を伝える要素の一つだからです。テレビや新聞やインターネットを通じて日々多くの情報が押し寄せてきますが、強力なビジュアル要素の力を利用することで伝えたいメッセージを後々まで残る記憶に繋げることも可能になります。

適切なビジュアル要素を配置することで、以下のようなインパクトのあるWebページを制作することができます。

・Webページの訴求効果を高める
・読み手の興味を刺激して、行動を促す
・重要な情報を分かりやすく伝える

ビジュアル要素を配置する目的は大きく2つに分けることができます。1つ目は純粋にページを装飾するためです。2つ目は情報を伝達するためです。
前者はメッセージに関連があるものであれば、目を楽しませるだけのものでも充分です。一方で、後者は必要に応じてイメージ素材の選択を行うことが効果的です。複雑な概念など文章で説明し尽くせない部分を、「百聞は一見に如かず」のことわざにあるように、一枚の写真がその全てを伝えるということも起こります。たった一枚のビジュアル要素でWebページ全体の雰囲気が変わってきますので、どのビジュアル要素を選択するかはWeb担当者の腕の見せ所と言えるでしょう。

ビジュアル要素にはいくつかの種類があります。

・写真
・図表
・イラスト
・クリップアート

「写真」はビジュアル要素において特に有力なイメージ素材で、Webページデザインの主力です。プロの写真家の写真で感情が呼び起こされるのと同じように、良い写真を使用することによって、情報の伝達や説得、感情の誘発などを実現することが可能です。写真は他のビジュアル要素と比べてより「説得力がある」ビジュアル要素です。従って、このような写真のメリットを上手く活かしWebページの情報にメリハリを付けることも、メッセージをわかりやすく伝えるために大切なポイントです。

このようにビジュアル要素を使うことでWebページのメッセージをよりわかりやすく直感的に伝えることができます。
一方で適切ではないビジュアルを選択することは、Webページで伝えたいメッセージから読み手の注意を反らして逆効果になるため注意が必要です。ビジュアル要素を選択する際は、メッセージを補足するようなイメージ素材を選択するようにしましょう。

今回はメッセージをわかりやすく伝えるビジュアル要素を使用する重要性についてのお話をしました。今後に活かしていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは、情報の関連性を余白の距離差で表現することで、読みやすく理解しやすいレイアウトが可能になるというお話をしました。今回は、WebページやWebサイト全体の見栄えのクオリティを上げる、基本的なデザインのルールについて説明したいと思います。

これまで見やすさをコントロールする、すっきりと見せるコツ、一目で理解できるレイアウトのコツと3つの見やすいページの作り方の基本的なデザインのコツについてお話ししてきました。

今回採り上げるテーマは「整列」です。整列もこれまでの3つのテーマと同様に、見栄えの良いWebサイトを作ろうと思った場合には重要な基本ルールとなります。

個々のパーツはとてもよくできているのにもかかわらず、全体を見ると残念ながら少し雑多な印象を受けるWebページを見たことがもしかするとあるかもしれません。あるいは、自分で作ったものがしっくりこないという違和感を感じる場合もあるかもしれません。このような際は、「整列」がうまく出来ていないことが理由の一つであることが多いのです。

「整列」とは、ページ上のビジュアル要素の位置が他のビジュアル要素と揃っている状態のことを意味します。整列を行う際は、実際に線などを引く必要はありません。ページ全体を構成しているイラストや文章に対して基準となる位置を決め、その位置に従ってレイアウトを行うことによって、ページ全体を体系的で整った印象とすることが可能です。

以下の例では文字が整列のルールに従って配置されています。

ここで整列されている要素は、文字の左端がページの縦方向の線によって揃えられている点と、グループ化された細字の文字の間隔が均等である点です。このように非常にシンプルなデザインにおいても整列のルールを使用することで、レイアウトのまとまりを強調してより体系的な印象を実現することが可能になります。従ってWebページのパーツを配置する際には整列のルールを意識することが大切です。

整列には基本的な形が4つあります。

・左揃え（上記例）
・右揃え
・中央揃え
・両端揃え

一般的にWebでは左端から右端へ視点が移動しやすい傾向があります。従って「左揃え」と「両端揃え」が読みやすい基本形だと言われています。「左揃え」では右端が不揃いになります。そこで左右の端を揃えた基本形が「両端揃え」です。「両端揃え」はあらゆる種類のWebページにおいて本文などに広く使用されます。文字においては上記の基本形をどれか1つに統一した方が、全体的にすっきりした印象になる傾向があります。一方でバナー画像やボタン画像などはその限りではなく、ビジュアル要素のバランスを考慮して基本形を複数組み合わせることもよくある方法です。

今回はWebページに整列のルールを使用することで、全体をより体系的に見せる方法についてお話をしました。Webページをデザインする際は、きちんと整列されたシンプルなレイアウトを心がけることで、読み手に対してメッセージや情報を的確に伝達することが可能となります。今後のWebページ作成・デザインの際にお役立ていただければ幸いです。

（担当：斉藤　万幾子）

前回のWeb系コラムでは、同じデザインを規則的に配置することで、情報量が多いWebページであってもすっきりと表示することが可能であるというお話をしました。今回も簡単にできるデザインの基本的なコツについて説明したいと思います。

通常の紙面と比較して、Webページの場合は比較的短時間で必要な情報を取得しやすいレイアウトが好まれる傾向にあることは押さえておきたいポイントです。伝えたい情報を短時間で理解してもらうには、複数の情報の関連性をすっきりとさせることが重要です。情報の関連性をすっきりと表示するには基本的なデザインのコツを押さえることが大切になります。

今回のお話のキーポイントは、複数の情報の関連性を吟味して、関連の高いものは近い場所にレイアウトし、関連の低いものは離れた場所にレイアウトすることとなります。
言い換えれば、情報の関連性の強弱によって、余白を含めたレイアウトの設定に差を設けることが重要となります。複数の情報の関連性を見極めてデザインへ反映することは、読み手のストレスが少ない、より説得力のあるデザインの実現に繋がります。

以下の簡単な例を見てみましょう。

左側のレイアウトでは4つの文章が規則的に整列しています。見た目はきれいかもしれませんが、タイトル1と下の文章がワンセットかどうか迷ってしまう場合があると思います。一方で、右側のレイアウトではタイトルとすぐ下の文章との余白を狭くする一方で、タイトル2との余白を広くしました。これによって2つの大きなまとまりを一目で把握することができます。このように情報の関連性を余白の差で表現することによって、読み手が短時間で必要な情報を把握しやすいレイアウトを実現することが可能となります。

もう一つの例を見てみましょう。

住友林業ホームサービス株式会社

前回のコラムにてお話した方法と今回の方法を組み合わせることで、さらにWebページが読みやすくなり、結果として短時間での情報取得が容易になります。上記のボタンの例を見ますと、4つそれぞれのタイトルと文章の間の余白が他と比べて狭くレイアウトされ、情報の関連性が一目で分かりやすくなっています。さらに、同じ4つのデザインを繰り返して並べることで情報をすっきりと伝えることも可能となっています。

文章を読むことで情報の関連性を初めて理解できるレイアウトは、ストレスフリーなデザインとは程遠いイメージとなってしまいます。従ってユーザーが文章の読解へ進む前に、情報の関連性をデザイン上の工夫によって伝えることが大切です。

今回は理解しやすいデザインの基本的なコツの一つとして「情報の関連性を余白の距離差で表現する」方法をお話しました。今後のご参考としていただければ幸いです。

（担当：斉藤　万幾子）