Webサイトを制作するならぜひ読んで欲しい！ロゴがWebサイトに与える影響とは

インターネットの普及によって、どんな企業やお店でも、マーケティングツールとなるWebサイトを持つことは重要になりました。

ところで、ロゴがWebサイトにどのような影響を与えるのかご存知でしょうか？

今回は、ロゴがWebサイトに与える影響について解説いたします。

 

 

 

 

 

ここに注意！Webサイトに掲載するロゴ

「ロゴは以前作ったから持っている」という企業やお店で、これから新しくWebサイトを作る、またはリニューアルするという場合は、掲載するロゴに注意が必要です。

ロゴのどんな点に注意が必要なのか、なぜ注意が必要なのかを詳しく解説していきます。

 

 

Webサイトの掲載に適していないロゴデータ

「ロゴはすでにある」という企業やお店は多いと思いますが、「データ」としてお持ちでしょうか？

ロゴのデータとして持っておいた方が良いデータ形式は、下記のものがあります。

 

●aiデータ…印刷物全般に使える
●jpgデータ…データ容量が軽い画像データ
●pngデータ…Webサイトで使用するのに向いている

※詳しくはこちらの記事の【STEP4-完成ロゴ納品】でも解説していますので、ぜひご覧ください。

 

新規またはリニューアルでWebサイト制作を依頼する際にロゴデータが必要になりますが、随分前にロゴを作っている場合、「名刺や封筒などの印刷物しか無い」ということも少なからずあると思います。

 

「印刷物からロゴをスキャナーで取り込めば、Webサイトに使えるんじゃ無いの？」と思われるかもしれませんが、スキャンしたロゴデータは、Webサイトへの掲載に限らず、どんな制作物に使用するにも適しているデータとは言えません。

特に、名刺などの小さい印刷物からスキャンしたデータは画質が悪く、Webサイトに掲載した際にギザギザしていたり、ぼやけてしまうことがあります。

企業やお店の「顔」となるロゴがキレイな状態で掲載されていないと、サイトを訪れた人はどう感じるでしょうか？

どんなにキレイにカッコよくWebサイトを作っても、ロゴがキレイな状態で掲載されていないと、サイト訪問者は企業やお店に対して「残念な印象」を持ってしまいます。

 

もしロゴデータが無く、印刷物からスキャンするしかない場合は、ロゴをデータ化(Adobe Illustrator［アドビ イラストレーター］を使ってトレースする等)した上で、Webサイトに掲載することをおすすめします。

 

 

 

デザインが古いロゴ

ロゴを「トレンドのデザインに合わせなくてはいけない」という決まりはありません。

ですが、ロゴのデザインはWebサイトのデザインと合わせる必要はあります。

 

Webサイトを新規またはリニューアルする場合、最新または流行りのWebデザインを取り入れると思いますが、その際、Webサイトのデザインが新しいのに対して、ロゴのデザインが「古い」となってしまうこともあるでしょう。

ロゴとWebサイトのデザインが合っていないと、サイト訪問者は「違和感」を感じてしまいます。

 

また、サイト訪問者がロゴデザインに古さ(伝統的というよりも時代遅れといった印象)を感じてしまうと、企業やお店に対しても古さを感じてしまいます。そうなってしまうと、サイト訪問者に良い印象を持ってもらえません。

 

「ココロゴ」では実際に、Webサイトのリニューアルに合わせてロゴデザインもリニューアルしました。

※ロゴデザインのリニューアルについてはこちらの記事で詳しく紹介していますので、ぜひご覧ください。

 

 

せっかくサイトを訪れる人がいても良い印象を持ってもらえなければ、思うようなブランディングができません。

 

すでにロゴがあったとしても、Webサイトのデザインに合わせてロゴをリニューアルする方が、より効果的なブランディングが行えるでしょう。

 

 

 

Webサイトと色が合っていないロゴ

Webサイトを作るのが新規・リニューアルいずれの場合でも、ロゴの色がWebサイトの色と調和が取れていることは重要です。

Webサイトとロゴの色合いを合わせることでWebサイト全体に統一感が出るので、サイト訪問者に「信頼感」や「安心感」を与えることができます。

 

もし、Webサイトのデザインを優先してロゴとは全く違う色合いにしてしまうと、ロゴが悪目立ちしてしまいます。

 

 

Webページ上でロゴが占めるスペースは小さなものですが、Webサイトの色合いと合っていないだけで「素人っぽいデザイン」に見えてしまうので、企業やお店に対するサイト訪問者の信頼度が低くなってしまいます。

 

すでにロゴがある場合は、Webサイトの色合いをロゴの色合いに寄せる方が良いでしょう。

もしWebサイトの色合いを優先したい場合は、先ほどのデザインの話と同様、Webサイトの色合いに合うロゴを新規またはリニューアルで作成することをおすすめします。

「ココロゴ」のロゴリニューアルでは、Webサイトリニューアル後のデザインが先に確定していたので、そちらに合わせる感じでロゴデザインの変更を行いました。

 

 

 

 

配置も重要！ロゴはWebサイトのどこに配置する？

ロゴがWebサイトに与える影響は、ロゴの見た目やWebサイトデザインとの調和だけではありません。

実はロゴの配置も、Webサイトに影響を与えています。

 

「とりあえず、どこか適当に配置しよう」はNG！

Webサイトのデザインが良ければ、ロゴはどこに配置してもOK！…ではありません。

 

どんなにオシャレでカッコいいWebサイトを作っても、ロゴがサイト訪問者の目にしっかり入っていないと、サイトを離脱した後で「あのおしゃれなWebサイトは、どこの企業(お店)だったっけ…？」となってしまいます。

そうなると、せっかく作ったWebサイトが無駄になってしまいます。

 

では、ロゴはWebサイト上で、どこに配置するのが良いでしょうか？

 

視線の動きを意識して、ロゴの配置を決めよう！

視線の動きには、実はパターンがあります。

最も自然な視線の動きは「上から下」になりますが、その動きには“3つのパターン”があることがわかっています。

 

グーテンベルク・ダイヤグラム

「同じボリュームの情報が均等に配置されている時、視線は左上から右下へ動く」というパターンのことです。

「グーテンベルク」は、活版印刷技術において活躍した「ヨハネス・グーテンベルグ」の名前が由来となっています。

「横書き」が主流の欧米では、「グーテンベルク・ダイヤグラム」が主に使われています。

 

 

Zの法則(Zパターン)

「左上→右上→左下→右下に視線が動く」というパターンです。

視線の動きを繋げるとアルファベットの“Z”の形になるので、「Zの法則」と呼ばれています。

 

「見る範囲」が決まっているチラシや雑誌などは、このパターンを意識して目に留めて欲しいキャッチコピーや写真を配置しています。

 

 

Fの法則(Fパターン)

「左→右→少し下がった左→右→下…に視線が動く」というパターンです。

こちらも先ほどの「Zの法則」と同じように、視線の動きを繋げるとアルファベットの“F”の形になるので、「Fの法則」と呼ばれています。

「Fの法則」は上の方から下へ下へと視線が動いて行くので、Webサイトを閲覧する際の視線の動きに当てはまりますね。

 

 

さて、この3つの視線の動きのパターンで共通していることがありますが、おわかりでしょうか？

そうです、全てのパターンで「視線の動きは左上から始まっている」のです。

つまり左上にロゴを配置しておけば、自然とサイト訪問者の目に入る訳ですね。

 

Webサイトは、ページを移動しても「ヘッダー(Webサイトの上部)」のデザインは変わりません。

サイト訪問者がどのページへ移動してもロゴは常に目に入りやすい場所(「ヘッダー」の左側)にある為、ロゴを覚えてもらいやすくなる=認知度を高めることができます。

 

また、心理現象として、接触する回数が多いほど親近感を覚える「ザイオンス効果」も期待できます。

 

ロゴが何度も目に入ることで、サイト訪問者はロゴに「親近感」や「好意」を持ち、やがて企業やお店に対しての「親近感」や「好意」に繋がっていくのです。

 

もちろん、「左上以外の場所に配置してはいけない」ということではありませんが、「これから認知度を高めて行きたい」といった場合には、視線の動きを意識してロゴを配置した方が良いと言えます。

 

 

以上のように、Webサイトにおけるロゴは、ただ掲載しておけば良いというものではありません。

近年はスマートフォンユーザーの増加により、Webサイトへアクセスする人も増加しています。

これまでは「とりあえずWebサイトを作っておけばOK」だっかかもしれませんが、どの企業やお店でもWebサイトを持つようになった今、「Webサイトがサイト訪問者にどのような印象を与えるのか」を踏まえたWebサイト制作が求められています。

 

Webサイト制作を依頼する際は、ついWebサイトの見た目(デザイン)の方に気を取られてしまうと思いますが、ブランド価値を高められるよう、ぜひ効果的にロゴを活用してくださいね。