Webサイト制作の基本
トップページのデザイン

サイトで最初に表示されるページ、「ホームページ」「フロントページ」「メインページ」などとも言われるこのページは、大抵の訪問者が最初に見るページであり、最もよく訪れるページです。

このページに求められることは

の4点です。

訪問者に信頼感を与える

インターネットは、一般の人にはまだちょっとあやしい世界です。相手の正体がはっきりしないと、不審に思い、サイトの内容を信頼してくれません。したがって、サイトの運営者の身元がはっきる分かるようにするのがまず大切です。また、サイトが継続的にメンテナンスされているのが分かれば、初めての訪問者でも安心できます。

そこで、トップページには、以下の項目を入れてください。

  • 組織の正式名称
  • 組織の所在地・問い合わせ先
  • そのページ自体のURL
  • 最終更新日・更新履歴

組織の正式名称

多くのサイトで、名前を略称のみで記載したり、正式名称は漢字なのに、カタカナ、アルファベットで記載したりしていますが、これでは訪問者がその組織について調べたり、連絡を取ったりする際に困ります。必ず正式名称を入れてください。

  • サイト名が難し漢字、あるいは外国語の場合は、そのひらがなかカタカナ表記も添え、かつmeta要素のdesctiptionやtitle要素などで、ひらがな、カタカナ名も併記するようにしてください。たとえばイタリア語のレストラン名の綴りをいちいち覚えている人はいません。検索するとしたら、覚えているカタカナ語名でしょう。それで入力して検索エンジンでヒットしなければ大きな損となってしまいます。

組織の所在地・問い合わせ先

郵便番号、住所、電話・FAX番号、メールアドレスと、名刺に記載する程度の内容は明記しましょう。(個人サイトの場合は住所や電話番号を公開するのはお勧めできませんが。)

住所は都道府県名から明記してください。いきなり○○市や△△郡から書いているサイトが多いのですが、全国の人が見ているので、○○市では分かりません。

また、トップページから、組織の所在地や概要など、より詳しい情報のページにリンクしておく方が良いでしょう。

  • 「所在地」に地図の画像をそのまま貼り付けたページもありますが、大抵、地図に住所がなく、「○○駅から徒歩5分」ということは分かっても、○○駅がどこの地方か分かりません。地図ページに住所と電話番号も記載しておくと、そのページを印刷するだけで道案内に使えて親切です。
  • 電車の駅の場合は、「西口改札」「地下鉄何番出口」といった改札や出口案内も入れておいてください。
    また地図画像はファイルサイズが大きくなりがちですが、何の警告もなく大きな画像を表示するのは、好ましくありません。住所が知りたいだけなのに、地図画像のダウンロードをじっと待たせるよりも、まず住所のページ(テキスト)があり、そこから地図のページにリンクする方が良いでしょう。
  • 最近は地図をクリックするとGoogle Mapなどにリンクしているケースが増えていますが、Google Mapなどでは目的地以外の色々な情報が入るため、地図を見慣れていない人は迷いがちえです。(Google Mapを掲載していたサイトの方と最近お話したのですが、40分ほど遠回りして道に迷った人がいたそうです。)
    地図作り用のソフト、あるいはWindowsのペイントなどでも構いませんから、目的地および、それまでの道順の目印となる点だけを記載した地図を作成するのが親切です。
  • 意外と多いのが、所在地一覧にに肝心の本社、本部の所在地が抜けているサイトです。漏れなく記載してください。

そのページ自体のURL

フレームを使ったページのリンクからジャンプしたときなど、ブラウザにはリンク元のURLが表示されたままで、現在のページのURLが分からない場合があります。

訪問者に、自分がどこにいるのかはっきり知ってもらうために、ページ自体のURLを書いておきましょう。

最終更新日・更新履歴

サイトがいつ更新されたのかは、サイトの価値を判断する重要な手がかりです。最終更新日が何ヶ月も前になっていると、情報が古びているようで、信頼してもらえません。サイトを少しずつでもこまめに更新し、更新日を常に新しい日付にする努力が必要です。

(一覧に戻る)

訪問者を待たせない

トップページでプラグインを使わない

玄関でベルを押したら、遠くで何かゴソゴソしているけれど、なかなかドアを開けてくれない。玄関が開いたと思ったら、「通過証が必要です。」と言われ、他の窓口に回された。こんな体験をすれば、大抵の人はムッとします。

トップページで、Flashなど、起動に時間がかかったり、プラグインが必要な技術を使うのは控え目にしてください。
私がもっともイライラするのがほとんど全画面のFlashでローディングムービーがあって、読み込みに時間がかかる場合です。
「動きのあるもの」を好むユーザーもいますので、入れないで欲しいとはいいませんが、トップページの場合は、一部のみFlashで、あとは通常のX(HTML)のような、「ハイブリッド」が好ましいと思います。

  • ウェブアクセシビリティ的な観点から言えば、「アクセシビリティに配慮したFlash(これは世の中の99.9%のサイトに存在しません)」の内容は、視覚障害などで音声読み上げソフトを使っているユーザーには、内容がまったく読み取り不可能になります。また、その他の障害の人でも閲覧、操作が困難な場合があります。重要な情報はFlashではなく、テキストで伝えるようにしていただければと思います。

大きな画像を使わない

イラストや風景写真など、大きな画像を先頭に置き、その下に文章やリンクを入れたサイトが数多くあります。この場合、ページをスクロールしなければ、肝心の部分が見えません。そもそも大きな画像を入れること自体お勧めできませんが、特にページの先頭に入れるのは避けましょう。

「Enter」だけのページを作らない

まず、ほとんど画像のみのページがあり、画像もしくはその下に小さく書かれた「Enter」などの文字をクリックすると、はじめて目次ページなどが現れる場合があります。

この「Enter」のページには意味がなく、表示に時間がかかるだけです。エンターティメントのサイトなどでは、効果を上げる場合もありますが、実用目的のサイトでは不要でしょう。

サイトに関係のない「ロゴ」は貼らない

ブラウザ、検索エンジンのロゴなどを貼ったページがありますが、これらをクリックしてブラウザをダウンロードしたり、そのサイトに来て、いきなり検索エンジンで他のサイトを検索する人は少ないと思います。

ロゴの分だけ表示に時間がかかるのですから、不要ではないでしょうか。

(一覧に戻る)

訪問者を疎外しない

表示環境を限定する言葉を入れない

「IE6.0以上でご覧ください。」のように表記したサイトがあります。しかし、他のブラウザや旧バージョンのユーザが、それを見たからといって、そのバージョンのブラウザに切り替えるでしょうか?

あるブラウザに最適化していたとしても、その他のブラウザでも読めるのですし(読めないようでは、それ自体が大問題です。)、このような表記は、訪問者には意味がありません。

「会員登録」を前面に出さない

会員登録をし、パスワードやIDを発行してもらわないと、内容を見ることができないサイトが時々あります。最初からE-Mailアドレスや住所の入力を求められると、訪問者が不安になりますし、煩わしいことこの上ありません。またパスワードやIDを忘れたために、入れなくなって、それっきりという人も出てきます。そもそも入り口に「会員専用」と書かれた店には、入りづらいものです。

まず中をあれこれ見て回って満足してもらった時点で、会員制の部分の特典を説明する方が、流れがスムーズです。

最近多くのオンラインショッピングサイトなどで、ショッピングには会員登録、そしてログインIDおよびパスワード発行を強要しているところが増えています。これはユーザーの囲い込み目的と思われますが、逆効果です。

Cnet Japanの以下の記事のように、ユーザーはIDやパスワードなど忘れてしまいます。
ウェブサイトの会員登録に関する調査--「IDを忘れ困った経験がある」は約9割

シニアに対するユーザビリティの各種調査などでは、IDやパスワードという概念をユーザーが理解できないという報告もありますが、シニアでなくとも、IDとパスワードは面倒で忘れがちなものなのです。
そして、ITリテラシーが高い層にすれば、同じIDやパスワードを複数サイトで使う危険性を考えます。このため、わざわざIDやパスワードを探したり、再発行手続きするよりも、会員登録しないでもよいサイトに流れてしまいます。

一部の大手のオンラインショッピングサイトなどでは、会員登録しないでも購入できる手順も付ける傾向があります。会員登録してポイントを貯めるよりも、いちいちIDやパスワードを覚える面倒より、手軽さを求めるユーザーが多いことは覚えておいてください。

IDとパスワードで成功した例としてはAmazonなどがあるとは思います。しかし、それは「先行」だったからで、AmazonのID(メールアドレス)とパスワードぐらいは覚えていても、他のサイトになると分らなくなるユーザーは多いと思います。

特に中小企業サイトなどでは、セキュリティが重要な場合以外にログインを設けることは顧客を逃がすだけと言えるでしょう。

(一覧に戻る)

目的の場所にスムーズに案内する

サイト内の各ページへのリンク、ほとんどの場合、これが最も大切な部分です。 画面をスクロールしないでも見える範囲に、最も重要なリンクを入れてください。

よく「社是」「会社案内」からはじまり、最後の方に「製品情報」が来るページがありますが、サイトの一番の目的が製品情報の提供なら、「製品情報」から始めるべきでしょう。

また、リンクの数を絞るというのも重要です。数が多すぎると、どれを選択したら良いのか訪問者が迷います。訪問者に特に見てもらいたいページへのリンクのみ目立つように配置し、残りのリンクと区別する方が、効果的です。

  • トップページに限ったことではありませんが、多数のリンクの一覧などを作る場合は、ブロックごとにまとめて区切りを入れると良いでしょう。
  • トップページよりもからかなり下層でも、重要なページ、目立たせたいページには、トップページからの直接リンク(ショートカット)を入れるのも有効です。

(一覧に戻る)