Amazon アソシエイト・プログラム（アフィリエイト）をご利用中のみなさん、こんにちは。
「売れるサイト」を作るためのあれこれをご案内してきましたが、今回は「サイトデザイン」という視点から、ユーザーへのアピール方法を考えてみたいと思います。いかに中身が素晴らしいサイトでも、ユーザーにその素晴らしさが伝わらなくては、リピーターにはなってもらえません。
サイトデザインの観点で一般的に「良いサイト」とは、ユーザーに余計なことを考えさせない、悩ませないサイトです。初めて来た人には、どんなサイトなのか、ここで何ができるのか、どこから始めるのかストレスなしに簡略に伝えることが必要ですし、リピーターにとっては、探したい情報がいつでも簡単に取り出せるサイトである必要があります。
以前の記事でも以下のようなお話をさせていただきましたが、星の数ほどあるWebサイトの中からあなたのサイトのファンになってもらうためには、短時間であなたのサイトに興味を持ってもらう必要があることをご理解いただけると思います。
=================================================================
以前の記事の引用
まったく初めて来た人に、あなたのサイトが何のサイトなのか伝わっているでしょうか？人がひとつのWebサイトを見るのに費やす時間は、想像以上に短いものです。ページをざっと見て、関心のある内容を見つけられない場合は、すぐに立ち去ってしまうでしょう。そうして、その人が再び同じページを訪れることはほとんどありません。
ごく短い滞在時間の中で、あなたのサイトをアピールするためには、パッと見て何のサイトなのかわかるようする必要があります。さらに「また来たい」と感じ、実際にブックマークをしてもらうためには、さらなる努力が必要です。
＞あとで全文を読みたい方はこちら(別ウィンドウで開きます)
=================================================================
それを実現するためのポイントは以下のようなものです。実はごく当たり前のことばかりを書くことになるのですが、あなたのWebサイトが基本を押さえているか確認するためのチェック項目として利用していただければと思います。
１） 基本中の基本、でも無視できないこと
- 背景色、文字の色や大きさ、フォントの組み合わせは適正か
- 使用されている画像の大きさは適切か
- ロードに時間がかかるムービーなどが多用されていないか
- 無駄なポップアップウィンドウが勝手に開くようになっていないか
どれもあえて言うまでのない、あたりまえのことです。これらの基本的な要素はWebサイトがクリアするべき最低限のハードルですから、私たちはこれらのルールがどれだけストレスの軽減に役立っているかを普段意識しません。それだけに、不便を感じる要素がひとつでもあれば、想像以上のストレスを感じてしまいます。当然ながら、閲覧にストレスを感じるサイトにユーザーは定着しません。
適切な背景色や文字の色、大きさなどは、サイトのテーマや対象とするユーザーによって変わりますので、あなたのサイトを見に来るターゲット層にとって一番見やすく、見慣れたスタイルにしましょう。あなたのサイト独自のターゲット層がない場合は、人気のある企業サイトなどを参考に一般的な「お約束」スタイルを利用すると、初めて来た人が戸惑わなくてすみます。文字の大きさは、ユーザー側でブラウザ設定を行うことができますが、もともと読みやすい大きさになっていることがやはり望ましいでしょう。
ブログの普及により、外観という意味での個人サイトの見やすさは飛躍的に向上としたと思います。ブログのテンプレートは上記のような基本ルールを満たしたデザインになっていますから、ブログの利用者もまた、ルールを意識する必要がないわけです（デザインが均一化されることが最良とは思いませんが、ブログは基本的にカバーされるべき要素は網羅しています）。しかし、記事中の文字の大きさ、見やすさなどは自分で管理する必要がありますので、やはりこれらは気にしておくべき事項です。あなたは、あまりに細かいピンクの文字で文章を書いていませんか・・・？
画像やムービーをなるべく軽くすべきという点については、すでにWebに慣れている皆さんには言うまでもないことですね。これぞという時に大きな画像を利用するのは構いませんが（それともサムネイルで代用できませんか？）、無意味に画像を大きくするのはお勧めできません。イメージを大切にする企業サイトのトップページでは、いまだに重くて長いムービーを見せているものもありますが、急いでいるユーザーには不必要な情報にほかなりません。どうしてもムービーを置く必要があるのなら、やはりスキップボタンを（それも分かりやすい場所に）設置しておくべきです。また、画像はサーチエンジンが認識しないということも忘れてはいけません。重要な情報は画像のみでなく、テキストでの情報を併記しましょう。
2) 重要な情報がわかりやすく書かれているか
- トップページの情報は要点を絞って簡潔に
- 重要な情報は画面の左上に配置
- メニューの位置は企業サイトを参考に
- メニューの名前を誰でもわかる言葉にすること
- リニューアルの時にもなるべく同じ言葉を使い、位置の変更も最小限に
「ユーザーは説明文を読まない」ことを理解してページを作ろう
私自身、何かを探していている場合にたまたまサーチエンジン経由で見つけたサイトを開いてざっと見ようとするときには、中身をすべて読むことはしません。ページをざっと見て、そこに必要な情報があるか探し、あればすぐそれを読むなり、クリックしてさらに下層のページに移動するなりするでしょう。ない場合は別のサイトを探すことにします。ですから、説明は長すぎても伝わりません。トップページはあくまでも簡潔に、必要なことだけを絞って載せましょう。
Webサイトを閲覧するとき、人の眼は左から右に、上から下へと動きますから、必然的にページの左上が至上の場所となります。通常Webサイト名や、ロゴ、サイトの簡単な説明などの重要な情報はこの位置に置くことになります。もしもあなたのサイトのタイトルに、サイトの内容を想像できる言葉を使用していない場合は、ページトップ上部で、内容を「ごく簡単に1行程度で」説明しておくと、ユーザーが内容を理解する手掛かりになります。
仮にAmazon.co.jpを全く知らないユーザーがhttp://www.amazon.co.jp/を初めて訪れた際に、画面左上のロゴだけを見て、何のサイトなのか理解することはできないでしょう。そういう場合は、ロゴの近くに「本、CD、DVD・・・の通販サイト」などと書いておけば、一目瞭然です。私たちは、今ではこのような説明書きを使用していませんが、Amazon.comが始まった当初は利用していました。この一言があることで、ユーザーのストレスはひとつ減るわけです。
Webサイト名のほかに、サイトの中身を理解する手助けとなるのは、サイトメニューです。多くのポータルサイトやショッピングサイトがメニューを左列においているのは、「左から右に、上から下に」動く視線を意識したものです。ブログの場合は、記事を書く中央列のほか、右または左列にサイドバーを置くことになりますが、右、左と両方を利用することもできます。両方利用する場合には、より重要な情報を左に置いておくことをお勧めします。上下位置については、ページをスクロールしないで見られる画面内に重要な情報を収めておきましょう。一度決めたメニューの配置は、トップページ以下の下層ページでも同様にしておくとさらに便利です。
また、メニューの名前の付け方にも注意が必要です。一目で内容を想像できるような分かりやすい言葉がやはりベストですから、初めて来たユーザーの立場になってみて、一般に通じる言葉が使われているか考えてみましょう。略語などの利用も、多くの人が知っているものだけにとどめておくようにしましょう。
これらの点を踏まえて、たとえばAmazon.co.jpを見てみましょう。左上にロゴイメージ、そのすぐ下に商品カテゴリーがあります。画面の上部の一番目につく位置に、最も一般的なスタート地点である「検索ボックス」が配置されており、その右に「ショッピングカート」、「ほしい物リスト」が並んでいます。
デザインもなるべくシンプルに、余計なものを置かないことでユーザーを迷わせない工夫がされています。
今回はあくまで例としてAmazon.co.jpを挙げましたが、あなたのサイトのジャンルにあったサイトを参考にすることをお勧めします。
とはいえ、すべてをセオリー通りにしなくても
細かなことをあれこれ書きましたが、必ずしもここに説明したことすべてを厳密に守る必要はありません。あなたのWebサイトには独自のテーマがあるはずですし、それに応じたユーザーの特性があるはずです。あなたはもうWebサイトのデザインに必要な基本事項を知っているのですから、そのうえであなたのお客様の好みに合わせてアレンジを加えることができるわけです。これと思うデザインを試してみて、お客様の反応を見ながら、少しずつ改良を加えていってください。
posted by:
Haruna＠Associates
追伸：この記事に関するご意見・ご要望や、今度取り上げて欲しいテーマなどございましたらコメントくださいませ。お待ちしております。
