第10回 サイトの個性に合わせたホームを | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

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

第10回 サイトの個性に合わせたホームを


検索エンジンの普及などにより、最初にユーザーが閲覧するページがサイト内のどのページになるのかは予測しにくくなっていますが、サイト全体のトップページ「ホーム」が多くのユーザーの基点になることに変わりはありません。どのページを最初に訪れたとしても内容に興味を持てば、次に何のサイトか知りたくてホームに来ることが考えられます。また、迷ったらホーム、とりあえずホームと、多くのユーザーはホームに回帰します。今回はそのホームの役割について考えてみます。

(解説:石田優子)

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


ホームでサイトの概要を知らせる


サイトの運営者や制作者は、そのサイトが何のサイトで、何ができるのかを知っています。このため、はじめて、しかも偶然の検索結果などからたどり着いたユーザーにとっては、まったく未知のサイトであることを忘れてしまいがちです。ユーザーも当然知っているという前提を捨て、そのサイトが何のサイトであるのかを知らせるようにしてください。

知らせ方としては1行程度の説明文(タグライン)がよく使われています。主要サービスがひとつの場合、また何のサイトかわかりにくい場合などに有効です。しかし、タグラインも必須ではありません。サイトのサービスが多岐に渡る場合などは、短文では説明しきれません。

また、主要サービスがひとつといっても、不動産屋やレストランといった説明するまでもないサイトであれば、タグラインは不要です。著名なサイトや内容が多岐に渡る場合も、ナビゲーションメニュー名などに工夫して、そのサイトのサービス一覧を見やすくするほうがよいでしょう。

注意が必要なのは、まだ一般には浸透していない概念のサイト、たとえばWeb 2.0系のサービスサイトなどです。この場合は、「○○とは」といったサービスの概念説明への導入部もホームでは重要になります。

ホームとわかるデザインに


ユーザーがぱっと見ただけで、そこがホームとわかるように、ほかのページとは異なるデザインにしておくほうがよいのですが、ひと口に「ホームらしいデザイン」といってもさまざまなものがあります。オーソドックスな手法としては、ホームではサイトロゴを大きく上部に配置し、ほかのページではロゴの全体か一部を左上などに小さめに配置するというものです。

また、最近ではホームのみ、上部にサイトのバナーを入れているものも目立ちます。上部にグローバルナビゲーションメニューを配置している場合は、左端に「ホーム」メニューを作り、ホームであれば、そのメニューを目立つ色に変えて表示しているものもあります。

プロモーションサイトなどでは、ホームのほとんど全画面をFlashや画像を使って、そのプロモーションで伝えたいイメージにしてしまい、そのほかの要素は画面下部などに小さくまとめているケースもあります。

どれが最もよいデザインとは、一概にはいえません。そのサイト規模、目的、全体のナビゲーション構成を踏まえた上で、それぞれのサイトの「ホームらしさ」を打ち出せればよいのです。競合サイトを調べ、他サイトとの明確な差を見せるポイントも、デザインを考える上では忘れないようにしておいてください。

ホームに入れる内容


サイト名、および全体を案内するナビゲーション、この2つはホームに不可欠な要素です。それ以外に何を入れるか、特にページ上部に何を配置するかは、サイトによって異なります。ニュース系のサイトならば更新記事一覧、オンラインショップならばキャンペーン商品、大手企業サイトならば各ブランド紹介など、ユーザーがほしい情報、サイト運営側が見せたい情報の中から優先度の高いものを吟味してください。

そのほか、これだけはどのサイトでもほしい要素として、問い合わせ窓口とサイト運営元の表記、あるいは該当ページへの直接リンクがあります。サイト運営元が会社の場合は、たいてい会社概要があるのですが、ブランドサイトなどでは、運営元も住所も電話番号もどこにも記載していないことがあり、ユーザーに不信感を持たせます。

オーソドックスなホームのレイアウト例
オーソドックスなホームのレイアウト例。最近はナビゲーション構成も多様化してきているので、構成はあくまでも一例と考えてほしい

さらにオンラインショップでは「特定商取引法」の通信販売に関する事項(※)で、代表者または責任者の氏名その他明記することが義務付けられている項目がありますので、会社概要中か独立ページとして記載しなければなりません。それに加えて、ある程度の規模のサイトならば検索ボックス、企業サイトならば個人情報保護方針が必要でしょう。

他サイトが入れているからと、あれもこれもと欲張ると、ページがごちゃごちゃしますので、上に挙げたような必須要素以外は、見せたいポイントを絞るようにしてください。

※特定商取引法の通信販売に関する事項について詳しくは、経済産業省に解説ページがあります。
http://www.meti.go.jp/policy/consumer/tokushoho/gaiyou/tsuuhan.htm


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

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在