ウェブサイトの原則

価値あるウェブサイトを目指して
ウェブサイトは、見て読んでもらわないと価値がありません。ウェブサイトは、「見る・読む・聞く」の構成で成り立っています。(「聞く」に関しては、動画や音楽の分野になりますので、今回は省きます。)そして、次に「理解させる」という工程につなげていきます。

モニターの向こう側には、見たり読んだりするユーザーがいることを意識しながら、制作しましょう。

目的・欲求を果たすために

ユーザーは、「知りたい・買いたい」など、何らかの目的や欲求があって、ウェブサイトに来訪しています。そして、以下の行動を介しながら、目的や欲求を果たそうとします。

1. 見る(視覚・イメージ)
2. 読む(視覚・購読・理解)
3. 理解・感情・納得
   (見ると読むの結果)
4. 行動を起こす
   (アクション・問い合わせる・カートに入れる)

ユーザーは、①②③の認識が前提となった上で、④行動に移します。行動に移す前に、まずは見やすく分かりやすく、そして理解しやすいデザインを心がけることが、ユーザーの行動に繋がるのです。

① 「見る」
見やすいウェブサイトとは

ユーザーが、サイトに到着した瞬間、視界に入る「パッと見」の印象は、非常に大事です。「読もう・見よう」とする意思決定は、もはやその瞬間に決まっています。見やすいウェブサイトは、「魅力あるウェブサイト」と直結しますから、魅力あるウェブサイトを作る第3原則は、主に次の通りです。

NGの例

② 「読む」
読みやすいウェブサイトとは

見る＝は、主に写真や画像であり、読む＝テキスト(文章)は、画像と合わせて理解、納得させる役割があります。読みやすいウェブサイトは、内容を理解しやすく、興味や共感に繋がり、お問い合わせや資料請求への行動に結びつきやすくなるのです。

NGの例

「吾輩は猫である」の一節です。左右の文章は、どちらが読みやすいですか？左右のボックスの違いは、どこでしょうか。テキストの大きさ、行間、余白の配慮を心がけましょう。

③ 理解・感情・納得
伝わるウェブサイトとは

見やすさ・読みやすさが前提となり、　的確にユーザーに「伝わっているかどうか」これがウェブサイトの最大最終の役割となります。しっかり伝えることで、ユーザーは情報を知り、感じ取り、行動を起こすというアクションに繋がっていきます。

NGの例

ユーザーを迷子にさせない

ウェブサイトで、非常によくあるのが「ウェブを閲覧中に迷子になってしまう」という点です。

ページ数や情報がたくさんあればあるほど、ユーザーはサイト内で迷子になってしまいます。的確な誘導、リンクを掲示することも、優良なウェブサイトの原則です。

現在のページの把握

ユーザーは、情報を知ろうとするがあまり、サイトの中をうろうろと回遊していきます。サイト内を横断していくにつれ、自分自身が今、どのページを見ているのかわからなくなってしまうのです。迷子になると、本当に知りたかった情報、見つけたかった商品にたどり着けないまま、離脱(サイトを離れてしまう)ことがよくあります。

ウェブサイトの最大の基本は、「どのページにいても、すべてのページに辿ることができる」・「トップページに戻れる」設計をします。サイトマップ・ページ内見出し・パンくずリストなどを設け、迷子にさせない工夫を凝らしましょう。

ロゴマーク・ナビゲーション

通常、サイトの左上、もしくは上部センターにロゴマークを配置します。これは、サイトのタイトルとなります。(いわゆる企業名であったり、ショップ名を掲載してあります)。実際知らない人も、多いのですが、ロゴマークはクリックできる仕様になっています。すべてのページから「ロゴマーク」がクリックできるようになっており、ロゴマークを押すことで、トップページに戻れる仕様になっています。

万が一、迷子になったもロゴマークを押すことでトップページに戻れるという仕組みです。フッターにもロゴマークやパンくずリストを配置することで、迷子にさせない工夫を施します。

サイトマップ

すべてのページの階層を一覧にすることで、目的のページへ着地できるように案内を託します。
▶ ソフトバンクサイトマップページ

パンくずリスト

パンくずリストとは、現在見ているページがどの階層ページに着地しているかを目次のように表した追記リンクです。ページ数が多いサイト、階層が深い構成のサイトなどにはパンくずリストが有効です。

例えば、下記の例は、ヤフオクのパンくずリストですが、パソコン階層下のマックの階層下のノート型の階層に着地していることが分かります。パンくずリストを追うこどで、いつでも、上の階層に戻ることができます。