パソコン教室のホームページ作成で気をつけた５つのユーザビリティ
教室のホームページを作りました。
こちらです。
- メディアックパソコンスクール鶴ヶ峰教室 http://tsurugamine.web.fc2.com
無料のホームページスペース「FC2ホームページ」というサービスを使っています。
同様のサービスでは、ヤフージオシティーズなどもありますが、広告が入らず、商用利用もＯＫ、メールフォーム等のサービスも無料で用意されているので、お金をかけずに、手軽に始める第一歩として、FC2はお勧めだと思います。
教室のホームページ作りで、特に心がけたのが、「シンプルに分かりやすく」です。
わたしは、Webデザイナーでは無いので、あまり凝ったことは出来ない、ということもありますが、わたしの教室の対象者は、「パソコンの初心者」です。凝ったものだと、うまく操作してもらえない、ことも考えられます。
特に、次の５つのユーザビリティに注意して作成しました。
1.横幅を900ピクセル以内に収める
2,3年前のディスプレイの解像度は、1,024×768ピクセルが主流でした。最近では、ワイド化された1,280×800ピクセル、1,366×768ピクセルが多いようです。なので、横幅が広いサイズのサイトが増えているようです。とはいっても、ブラウザを画面いっぱいに広げない人も多いので、750～900ピクセルぐらいに収めるのが良い、と言われています。画面を3列に分けるレイアウトを採用しているサイトでは、3列目は「表示されない可能性がある」ことを前提に、重要な情報は、置かないようにしたりします。
わたしは、最初、このブログのような3列のレイアウトを考えていましたが、表示されないかも知れない情報を置いておくよりは、シンプルに2列のフォーマットにして、830くらいに収めました。
教室の生徒さんの使い方を見ていると、画面いっぱいに広げる人が多いのですが、「お気に入り」を左に表示していたりしています。また、年配の方は、文字などの表示サイズを大きくするために、解像度を下げて使用している場合もあります。
わたしが対象に考えているユーザにとって、900ピクセルを超える部分は、「無いも同然」と思った方が良さそうだったのです。
2.階層を深くしない
情報をカテゴリ毎にタブで切り替え、タブ毎に、用意されたナビゲーションで、さらに情報を切り替えて、詳しい内容は、また、そこからリンクを辿って・・・、というサイトは多いと思います。決めたスペースに入りきらない程のたくさんの情報がある場合は、「スペースの有効利用」、「コンテンツの整理」、という意味で、タブはとても便利です。パソコン教室のホームページを見ても、そのような作りになっているところは少なくありません。
でも、パソコン教室で掲載する情報量、特に、わたしが作成した「はじめの一歩」のホームページの情報量に、そこまでの区分けが必要だとは思えません。
ユーザは、最初に表示されたページから、次のページへ、制作者の意図通り、リンクを辿ってくれるとは限りません。パソコン初心者なら、尚更です。タブの切り替え、というナビゲーションを知らない可能性もあります。最初に見えていない情報は、そのまま見てもらえないかも知れません。
逆に、１ページに膨大な情報が詰め込まれているのを、楽天市場のショップでよく見かけますが、これは、ページを移ることでユーザが離脱してしまうのを防ぐ効果だけでなく、活気や勢いを演出する狙いもあると思います。
そこまでは、やりませんでしたが、トップページに、「最低限、これだけは伝えたい」ということを盛り込みました。また、情報は、メニューの項目毎に分け、それぞれの内容の見出しを、メニューに書きました。トップページから、1回のクリックですべての情報に辿り着けるようにしたのです。
3.ナビゲーションを統一させる
ぺージによって、画面の上にメニューがあったり、左側にあったり、位置が変わってしまっては、ユーザーは混乱してしまいます。また、画像は、リンクなのか、装飾なのか、はたまた広告（バナー）なのか、クリックしてみないと分からない、というのも、パソコン初心者にとってはツライと思います。せっかく、画像ボタンを用意しても、他の装飾用画像と見分けがつかず、リンクだと理解してもらえなければ、意味がありません。
そこで、すべてのページで、同じヘッダー、同じメニューを用意しました。また、リンクのある画像は、ロールオーバーで、マウスを合わせると、明るくなるようにし、その他の画像と区別がつくようにしました。
ユーザーは、過去の経験を手がかりに、そのWebサイトの操作を覚えます。学習のしやすさがユーザビリティを考える上での基本でもあります。サイト内のナビゲーションを統一しなければ、その学習効果は期待できません。
4.新しくウィンドウを開かない
よく、リンクをクリックすると、新規ウィンドウが開くことがあります。特に、リンク先が、他サイトの場合、新しいウィンドウを開くことが多いようです。
「そのままのウィンドウで他ページに移動すると、ユーザーが戻ってこないから、元のページも表示しておく」という想いからなのでしょうけれど、これは結構、厄介なのです。
1.で、ブラウザを画面いっぱいに広げない人も多い、と書きましたが、教室の生徒さんを見ると、そうでもありません。結構、みなさん、画面いっぱいにしています。そこで、新しいウィンドウが開くと、例え、元のページが後ろのウィンドウに残っていても、見えないので、消えてしまったのと同じです。パソコン初心者にとって、マルチウィンドウというのは、ちょっと難しいのです。
しかも、新しいブラウザの「戻る」ボタンも押せないので、元のページに戻りたくても戻れません。何が何だか分からず、もう、パニック状態です。
「元のページに戻ってきて欲しい」という想いとは、逆の効果になってしまうのです。
今回、作成したホームページには、「教室ブログ」や「フランチャイズ本部のサイト」など、外部リンクも用意してありますが、同じウィンドウに表示するようにしました。
5.カテゴリ分け、メニューの順番に気をつける
情報の整理、コンテンツのカテゴリ分けは、サイトのメニューやページ構成を考える上で、非常に大切な作業です。また、ユーザーに、何をしてもらいたいのか、Webサイトでの目的を明確にして、それに向けた「タスク」を基に、ユーザーを迷わせずに目的達成まで誘導するようなページ構成、ナビゲーションを考えることも重要です。
まずは、様々なパソコン教室のホームページを拝見しながら、思いつくだけ、コンテンツをリストアップしてみました。そこから、「これは、ここに含まれる」「これは、ユーザーにとって重要度が低いのでは？」とランク付けしながら、まとめていきました。
わたしが、作成するホームぺージの目的は、大きく２つあります。
一つは、わたしの教室を知らない人に、興味を持ってもらい、お問い合わせや入会に結びつけることです。
これには、教室のサービス案内や教室の雰囲気を伝えることや、お問い合わせのフォームを用意することが必要です。
もう一つは、教室の生徒さんたちに、ちょっとした仲間意識をもってもらうことです。
教室からのお知らせや、作品を発表する場、そういったものを用意して、「教室と繋がっている感」を、高めるのに役立てられないか、と考えました。一つ目の目的で用意する教室の雰囲気を伝えるためのコンテンツも、生徒さんに協力してもらいながら作れば、一石二鳥です。
メニューは、上から順に、一般向け（サービス案内）から教室内（教室雰囲気）の度合いが高くなるような感じで、並べました。
一般的に、ページの下部に行くほど、ユーザーに見てもらい難くなるのですが、何らかの情報を求めているユーザーはメニューの下部でもクリックします。
まずは、サービス内容で興味を持ってもらい、そこから、教室の雰囲気を見せて、安心して、さらに興味を持ってもらう、という考えです。
また、教室の生徒さんたちは、見たいコンテンツが最初から決まっている（「○○さんが載っているページ」など）ので、メニューの下部にあっても、問題ありません。
ただ、二つ目の目的のコンテンツはまだまだ十分ではありません。今後も継続して、生徒さんとコミュニケーションを取りながら、充実させていこうと思っています。