第11回 個々のページのありかた | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

タイトル画像、Webユーザビリティ―信頼を生む“使いやすさ”のデザイン

第11回 個々のページのありかた


ホームから順に閲覧していくユーザーだけでなく、検索結果から偶然どこかのページにたどりつくユーザーが多いことは前回もご説明しました。検索エンジンとSEOの普及により、あるキーワードで検索したユーザーが、ホーム以外のページを最初に閲覧する確率は以前より高まっていますが、1ページを見ただけでそのサイトから離れてしまうユーザーが多いのが現状です。そのため、どのページを最初に見たとしても、そこでユーザーをキャッチして、ユーザーの目的、サイト側の目的まで到達させるような工夫が必要になります。

(解説:石田優子)

著者プロフィール用イラスト [プロフィール]
いしだ・ゆうこ●クロッシングフィンガーズ代表。ユーザーエンパワーメントという手法により、ユーザー視点に立ったサイト構築、コミュニティ運営のコンサルティングなどを行っている。近著に『Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。』がある。
(イラスト:MIKAさん)
クロッシングフィンガーズ:http://www.crossingfingers.org/
KeiYu HelpLab:http://www.keiyu.com/


ユーザーは簡単には画面をスクロールしない


ユーザーはまず内容に興味を示さない限り、画面をスクロールしませんし、また、スクロールしない範囲でも隅から隅まで読むわけではありません。ざっと眺めた数秒で、そのページに自分が求めている情報がありそうかどうかを判断し、勝負は決まります。

このためページ上部に重要な情報を配置することはもちろんですが、最初は横スクロールしないですむ範囲の幅を考えることも大切です。

現在は画面解像度1,024×768ピクセルがもっとも利用者数が多く、次が1,280×1,024ピクセルです。しかし、ブラウザを画面全体に広げて閲覧するユーザーは少なく、また画面全体に広げていてもRRSフィードなどのサイドバーを表示している場合もあります。このため1,024ピクセル全体を最初から見ないとわかりづらいページはお勧めできません。

横幅に関してはCSSによるレイアウトが標準となりつつありますが、CSSでリキッドレイアウトにするか、横幅固定にするかは、サイトのデザインにより、どちらがよいとも一概にはいえません。

横幅固定の場合は、今はまだ760から770ピクセルぐらいが多いようです。あまり右側の情報は、検索ボックスのような目立つパーツを除き、ページ上部でも最初には見られにくいと考えてよいでしょう。

固定幅のWebサイトのページをゾーニングした図
リキッドレイアウトなら固定幅の場合のように、右側が切れることはないが、まだ固定幅が多い現在、ユーザーが最初に見るのは上部、左側、中央部分で目につくところぐらいで、最初から右側に注目するユーザーは少ないだろう

ページ上部に入れる内容


どこのサイトかを示すサイト内で統一されたIDのロゴと、そのページの内容を明確に示す見出しは必須要素です。

ナビゲーションメニューはグローバルナビゲーションを上、ローカルナビゲーションを入れるなら左、もしくは右、あるいは大規模サイトでは左右両側という例が増えていますが、1つだけナビゲーションメニューを入れるとすれば、他ページにも導くために上部が効果的でしょう。

これら各ページ共通の要素に加えて、そのページの内容を示すコンテンツが入ります。

読み物系のページならば、最後まで読まなくてもわかるように、そのページの概要を最初に持ってくるのがWebライティングの基本です。ショッピングサイトなどでは、ポンと商品写真を置き、商品名、価格を添えることで目を引くこともできます。ショッピングサイト以外でも、文章だけよりも、写真や図版をページ上部に入れることで単調なイメージを破ることができます。

ただし、商品写真にしてもそのほかの画像にしても、ページ上部の縦横全体を占めるような大サイズは、プロモーションサイトなど最初からきちんと意図したインパクトを狙ったものでない限り、そこでユーザーを引かせてしまいます。文章や余白とのバランスを考慮して小さめのものを配置してください。

ユーザーにさらなる興味を持たせる


検索結果などから、あるページにたどり着き興味を持ったユーザーを、ほかのページにも導きやすくする工夫が必要です。商品ページを最初に見たユーザーがホームに戻って、そこから注文ページで商品を探し直さなければならないのでは不便です。個々の商品説明の横にカートボタンを用意し、クリックすれば注文したり、買い物を続けられたりできるようにしておけば、ユーザーの迷いが減ります。

ショッピングサイト以外でも、興味を持った部分のすぐ側に詳細ページや関連ページへのリンクがあれば、ユーザーは目的のページにたどり着きやすいでしょう。

読み物ページならば、記事の終わりにバックナンバー一覧を添えることで他ページに導くこともできます。下までたどり着いたユーザーにとっては、最初に見た瞬間と異なり、右端がスクロールバーに近く、目に付きやすい位置になります。

Webサイトのページをゾーニングした図。ページ下部は他ページへの移動手段となるリンクを配するゾーン。
ページ最下部にグローバルナビゲーションを置く以外に、検索ボックスを入れたり、お問い合わせやヘルプを入れたりしている場合もある

そしてページ最下部も重要です。最後までスクロールしたところから他ページにリンクされていないと、ユーザーはブラウザの「戻る」ボタンでサイトを離れるという行動に移ります。ページ上部のグローバルナビゲーションをページ最下部にもテキストリンクで入れるのがオーソドックスな手法ですが、これをアレンジするなどして最下部も有効活用してください。


次回につづく
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在