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

前回のWeb系ブログコラムでは、既存サイトにバナーを追加するにあたって考慮すべき「文字の可読性」についてお話しました。今回はシリーズの最後の第5回目として「面積」について説明したいと思います。

ここでの「面積」とはバナーの大きさ（サイズ）のことを指します。バナーを追加する場合、バナーの配置場所やバナー自体の大きさを自由に選択可能である事はあまり多くありません。既存サイトに新しいバナーを簡単に追加したい場合には、既にいくつかのバナーが配置されている領域に対してのバナー追加を、まず検討すると思いますが、そのようなバナー群の領域は縦または横の幅が固定化されている場合が多いと思います。ここで大切なことは、安易に固定サイズを踏襲するのではなく、必要に応じて柔軟に適切なバナーの大きさを考えていくことです。

一般的にバナーの面積を大きく取れば取る程、閲覧するWebページ上に占めるバナーの面積が増加するためバナーを目立たせることが可能です。言い換えますと、バナーの「面積」を考えることは、どの程度強くバナーをアピールしたいかという程度を考えることであるといえます。私自身はバナーの大きさを変化させる場合、変化させる前の元のサイズを1として、1:2、1:3といった割合になるようにサイズを大きくしていき、サイズの妥当性を検討します。これによって、元のサイズの割合を大きいサイズでも保つため、バナーを配置する領域のリズム感をできるかぎり崩さずに済むと考えています。

参考までに、Google Adwardsのイメージ広告を利用する際にはバナーサイズが以下のように定められていますのでご紹介します。よく使用されるサイズとして、背景色がオレンジのバナー、ビッグバナー、スクエア、スカイスクレイパーが多いと思います。
参照：Google Adwards ヘルプ

広告用のバナーを作製する場合には、このようにあらかじめ指定されたサイズが存在する事が多いので、そのサイズに従ってバランスを調整していくことなります。

バナーの面積を考えることはバナー作製の最初の段階における作業になると思います。面積を決定した後は、シリーズとしてお話しして来たポイント思い出していただき、バランス良く組み合わせることで効果的なアピールを実現しましょう。
これまで「目立つバナーの作製」シリーズでは、追加するバナーをどのようにすれば目立たせることが可能かという視点からいくつかのポイントをご紹介してきました。「色の視認性」のコラムでは、周囲の色との明度差を適切に設けることの重要性についてお話しました。
また、「色の誘目性」のコラムでは、Webサイトごとに目立つ色と目立たない色があるというお話もしました。
面積を大きく取れば取る程、これらのポイントによる効果をより強調することが可能です。一方で、例えば明度差の極端な画像は、バナーの大きさの有無に関わらず非常に目立つことがありますので、これまでのポイントをどの程度のバランスで取り入れるかを考えることは、バナー制作中にいつも気に留めておきたいですね。

この回を持ちましてバナーを既存サイトに目立つバナー追加する際考慮すべきポイントのお話は終了になります。ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

前々回のWeb系ブログコラムでは「既存サイトに新規バナーを追加する」際に検討すべき要素として「色の識別性」ついてお話ししました。今回はシリーズの第4回目として「文字の可読性」について説明したいと思います。

文字の可読性とは、文字の読みやすさのことです。一般的に白い背景色に黒い文字が最も読みやすいとされています。白黒以外の色の組み合わせはコントラストが減少するため、可読性が下がり読みにくくなる場合があります。読みにくい文字はWebサイトのコンテンツの理解を妨げたり、読み手にストレスを与える可能性があるため、文字を配置する場合には文字色と背景色に気を配り、双方の間で十分なコントラストを確保することが重要です。
コントラストについては、「見やすさをコントロールする」のコラムでお話ししたように、コントラストは「色の明るさの差」を意味します。
今回は具体例から文字の可読性を上げるポイントをついて見ていきたいと思います。

Hodogaya Chemical Co.,Ltd.

背景にグラデーションや写真を配置する際、背景色が一色に定まっていないために文字色のコントラストが部分的に低くなる場合があります。その場合、文字に影をつけたり、縁取りを行うなどの装飾を追加することで充分な可読性を確保できます。
ただし、装飾を強調しすぎるとコントラストが強すぎるために却って可読性を下げる場合もあります。装飾を追加する場合は少しずつ影などを適用していくと、イメージ通りのコントラストを得やすいでしょう。

docomo.com

文字を大きく、文字を太くすることによって、文字の可読性が上がります。大きめの文字を配置する場合、次に来る文字は小さく押さえることで、メリハリが付き全体の閲覧がスムーズになります。
上の例では太い文字の周囲の余白を広めに取ることで、すっきりと読みやすくなっています。

dwango

会社情報、経営方針などのボタン画像に使用されている青色が、左上のロゴで使用されている青色と比べてやや暗い色になっていることがポイントです。
ボタン画像では白文字のテキストに、ロゴの青色よりも明度を下げた暗めの青色を使用することで、テーマカラーである青色のイメージを伝えつつも、文字に充分な可読性を与えています。

このように、Webサイト全体の統一感を演出するために、ロゴなどで使用する色と画面上の色を揃える方法があります。読みやすい文字の大きさや太さが確保できるのであれば、特に可読性に影響はない方法ですが、文字は小さくなればなるほど、細いフォントを使用すればするほど可読性は下がります。
文字の大きさなど表現に制限がある場合は、背景色や文字色にやや暗くしたテーマカラー色を使用することで、コントラストを与えることができ、可読性の向上を実現する方法が有効になります。背景色や文字色は多少変更しても、全体のイメージに大きな影響を与えません。文字を配置する場合は可読性を確保することが優先順位としては1番目となりますので、文字のサイズによっては色の明度を調整して可読性の向上を考えることが大切です。

以上の例に示しましたように、可読性を考えた文字配置を心がけることで、読み手にストレスなくメッセージを伝えることが大切です。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

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

緑は自然のイメージを表すために使用されます。明るい緑は、若葉や新緑などを連想させるため、成長を感じさせる印象になります。一方で暗い緑に近付けば近付けるほど、成熟した木々のイメージから安定感や伝統を感じさせる印象になるでしょう。また、緑はアイレストグリーンと呼ばれ、目に優しい色とされています。従って病院や工場などストレスを軽減させたい場所で、緑がよく使用されます。

緑は自然だけではなく、安心、安全のイメージも表します。例えば信号機や非常口階段があることを示す標示には、緑が使用されています。Webでは許可や了解の意味で使用することも可能です。一方で警告や禁止を与える色としては赤が挙げられます。

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

日本ピュアテック株式会社
明るい黄緑は若葉や新緑のイメージで、これから成長していく様子や爽やかな印象を受けます。背景色に白を使用することで、全体がより明るくなり印象が強くなります。
ただし、明るい黄緑と白はあまりコントラストが高くない組み合わせの配色です。このままでは少し頼りない印象になってしまうので、それを補うためにフォントをコントラストの高い黒に設定し、さらにフォントサイズを大きめにすることによって、全体のコントラストを上手に保ち、配色を引き締めています。

八女市奥日向神キャンプ場
キャンプ場のサイトですが、自然や環境をイメージできる緑が全体のテーマカラーとして選ばれています。
自然の色としての緑を選択する場合には、自然の中であまり見かけないような彩度の高い緑は避けるようにするのがポイントです。

Cathay Pacific
濃い緑が広い面で使用され、安全や伝統といった印象を与えることができます。ロゴでも使用されている、やや彩度を抑えた赤が緑とのコントラストとなり、美しい配色となっています。全体の色数を絞りこむことによって、色自体が与えるイメージが強力になります。

（担当：斉藤　万幾子）

前回のWeb系ブログコラムでは「既存サイトに新規バナーを追加する」際に検討すべき要素として「色の誘目性」ついてお話ししました。今回はシリーズの第3回目として「色の識別性」について説明したいと思います。

色の識別性とは、色が持つ効果による物事の識別しやすさのことです。実は、私たちは日常的に色の識別性によって様々な物事を識別しています。例えば温泉に入る際、男湯の暖簾には青系の色、女湯には赤系の色がよく使用されています。従ってどちらに行くべきかを素早く色で判断できます。他にも、スーパーに行った時に食べ物の色味によって新鮮さの区別をすることも識別性を利用しています。また、テレビに接続するAVケーブルのコネクター（接続部分）に異なる色を使用していることがありますが、これは誤った判断が行われにくくするための識別性を利用した工夫の1つです。
前回までのWeb系コラム2回を通して、「色の視認性」と「色の誘目性」についてお話ししてきました。実は識別性の高い色とはこの2つの性質が高い水準であることが多いのです。識別性の高い色が視認性と誘目性の2つの性質を兼ね備えている場合、強力な効果が見られます。

このように無意識に前提としているようなイメージに対して、識別性の高い色を使用することによって視覚に働きかけることが可能ですが、このテクニックはWebにも活用できます。
具体例としてボタン画像があります。例えばショッピングサイトで商品を選択して購入手続きを決定する際、「購入を決定する」ためのボタン画像がある場合がほとんどです。その場合設置されているボタン画像は暖色系の色にした方がいいか、それとも寒色系の色にした方がいいかというお話があります。一般的に、「はい」は暖色系の色、「いいえ」は寒色系の色がよく使用されていることが多いのです。そのため「購入を決定する」ことを判断する相手の心情に無意識に「はい」のイメージを印象付ける一つの手段として、暖色系の色を使用する方が効果的です。また、購入決定ページまで手続きを進めた相手にとっても、「はい」と答える場合に暖色系の色が使われている方が、無意識下の心情としても違和感が無いでしょう。ただし、デザイン上の観点からWebサイトに使用されているテーマカラーの範囲でボタン画像を作成することもあるため、その場合は個別に色を選択することになると思います。

色にはそれぞれ別々のイメージが備わっていますので、色のイメージを活かした色の識別性を利用することにより、心理的な効果を考慮したバナーの制作も可能となります。ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）

前回のWeb系ブログコラムでは「既存サイトに新規バナーを追加する」際に検討すべき要素として「色の視認性」ついてお話ししました。今回はシリーズの第2回目として「色の誘目性」について説明したいと思います。

色の誘目性とは、簡単に言うと「人目の引きやすさ」の事です。
色には目立ちやすい色があります。例えば赤、オレンジや鮮やかな青などは注目を集めやすい色です。一方で濃い灰色や鈍い緑などはあまり目立たない色になります。イメージとしては、鮮やかな原色は色の彩度が高いと考えるとわかりやすいと思います。このような誘目性の高い色をバナーに使用することで、容易に人目を引くことが可能です。

それでは、目立たせたいバナーに誘目性の高い、言い換えれば彩度の高い色を使用するだけで良いかと言うと、そう単純ではありません。バナーに使用する色の組み合わせによっては、第1回でお話した視認性の高さを確保できなくなる可能性もあるので、使用する際には注意が必要です。確認になりますが、色の視認性とは、字やモノの認識しやすさの度合いのことでした。
例えば、誘目性の高い真っ赤な背景色の上に赤いりんごの画像を配置しても画像は目立ちません。逆に何の画像が配置されているかを読み手に判別させるというストレスを与える可能性もあります。その場合は、真っ赤な背景色を修正して、具体的には誘目性を確保するための赤は細い枠線のみで使用するにとどめ、背景色には白かそれに準じた明度の高い色を使用する、といったバナー自体の視認性の高さをしっかりと保つ工夫が大切になります。

別のパターンとして、Webサイトのテーマカラーに誘目性の高い赤などを多く使用するデザインがあります。この場合単純に赤色を使用しても、周りに同じ色が並ぶため、期待する誘目性を実現することは難しいです。その場合は「補色」の性質を利用すること、解決することがあります。補色とは、下の色相環の図で対立する色同士は互いを最も引き立てあう関係にある色のことです。黄色と組み合わせて最も目立つ色は紫ですね。この性質を利用すると、例えば緑をバナーに使用することで、元々誘目性の高い赤が多く使用されているWebページであっても、特定のバナーに誘目性の高さを追加することが可能になります。

鮮やかな色の原色をそのまま使う場合、色の効果をストレートに伝達するにはとても良い方法ですが、デザインとの兼ね合いで少し浮いてしまう場合もあります。その場合は彩度や明度を少し増減させることで全体のまとまりが良くなる場合があるので、試行錯誤を行うことで期待する色を実現できることが多いと思います。

今回は、誘目性の高い色を使用することで人目を引きやすくなるが、視認性を損なわないための工夫の有無も考えながら使用することが大切である、というお話をしました。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）