売りのコンテンツを目立たせる

多くのユーザが見たがるページがあれば、そのページへのショートカットを、トップページはもちろん、色んなページに設置した方がよい。

どのページをユーザがたくさん見ているか、というのを調べるには、アクセス解析を導入すればよい。
アクセス解析とは、どのページにどれだけの人がアクセスしているか、どんなキーワードをつかってアクセスしたか、などがわかるプログラムである。
アクセス解析には、Googleや忍者ツール、FC2などがある。中でもお薦めはGoogleである。

アクセス解析を導入したら、どのページが人気があるのかを調べよう。
そして、そのページへのリンクをサイト内の様々なページに貼ろう。

検索できるようにする

そのサイト内のコンテンツを検索できる機能をつけよう。
検索機能はページの目立つ場所に設置しよう。ページの上部、つまりヘッダーにおくとよい。
また、検索機能は、すべてのページから利用できるようにすること。

サイトで提供する情報を一覧できるようにする

ユーザがアクセスしてきたときに、そのサイトはどんな情報を提供しているのかを、一目でわかるようにしておきたい。

一目でわかるようにするには、大項目のカテゴリをメニューとして表示しておくことである。これは、グローバルナビゲーションと呼ばれる。
グローバルナビゲーションはすべてのページの、同じ場所に配置しておくことで、そのサイトは何を提供しているのかがわかる。

ユーザはトップページから来るとは限らない。というよりも、殆どのユーザは検索エンジンを利用してアクセスしてくる。ということは、トップーページではなく、ピンポイントに特定のページから入ってくることの方が多い。そのため、どのページでも同じナビゲーションを用意しておけば、別のページを見てもらうことができる。

サイト名とロゴ

サイト名やロゴは必ず全ページに表示するようにしよう。
大きく、デザインを考えるときは、ヘッダー、フッター、メインカラムの3つに分けられる。
このうち、ヘッダーとフッターにサイト名やロゴが表示される。

なぜそうするかというと、殆どのサイトでそういうデザインを採用しているからである。
つまり、ユーザはこれまでの経験から、どのサイトでもそういう風になっているものだと思っているのである。それを、あえて変えてしまうことは、ユーザを混乱させるだけで、何のメリットもない。

また、ロゴにはトップページに戻るリンクを貼っておくのが一般的である。
しかし、ロゴをクリックしたらトップページに戻れるということを、知らないユーザも多くいる。そのため、[ホーム]というリンクをメニューに追加しておくと親切である。

同一デザインに拘る

同じサイトであれば、すべてのページが、ある程度同じデザインで統一されている方がよい。
そうでなければ、ユーザは別のサイトに来てしまったのかと思い、混乱してしまう。混乱は、ウェブサイトからの離脱も意味しており、管理者としてもあまりメリットがない。

特に、同じカテゴリ内のコンテンツは同じデザインにしよう。
それによって、ユーザが、今自分がどこにいるのか、居場所がわかる。

ブラウザを新しく開くか、開かせないか

クリックして別ページを表示する場合に、別のウィンドウを開いて表示するかどうかという話である。
強制的に別ページを開かせるには、a要素に、target="_blank"を指定する。

基本的には、ユーザに選択肢を与える方がよいとされている。
なぜならば、ユーザはブラウザの「戻る」「進む」ボタンを使うことが多いからである。あるページを見て、見終わったら戻るボタンを押して、前のページに戻るのである。
それが、別ウィンドウを開いてしまうと、前のページの戻るという指定ができなくなる。必要ないと思ったら、そのページを閉じる、という手間がかかってしまう。
このようなユーザに対しては、常に同じウィンドウ内で次のページが表示されるように指定しておくのがよいということである。

しかし、別ウィンドウを開くのが悪いとはいいきれない。
例えば、気になる商品や情報をとりあえず開いておいて、後で順々に見たいときには、別ウィンドウで情報を開いておきたいこともある。
リンクをクリックすることで、別ウィンドウを開かせるのであれば、予め断っておくのである。
最も親切な方法は、別ウィンドウを開く場合のリンクを、リンクテキストの隣に小さく用意しておくことである。

階層の深さ

サイトの階層の深さは、大体3階層が理想的とされている。
3階層よりも深くなると、ユーザは迷いやすくなるといわれている。
そのため、できるのであれば、トップページから3階層以内という原則を守ろう。
この3階層というのは、トップページからのクリック数のことである。要するに、トップページから3クリックで求める情報にたどり着ける、ということである。
情報が多すぎて、3階層でまとめきれないのであれば、最大で5階層程度で収めよう。

情報の構造化

グループに分けた情報をさらに、関連付けすることで、そのサイトの構造を決定する。
ウェブサイトにおける構造には、以下の4つがある。

(1) 階層型
(2) 直線型
(3) グリッド型
(4) ウェブ型

(1) 階層型
多くのサイトで使われる構造。あるコンテンツの下に、別のコンテンツがあり、それは別のグループとは関連付けされていない状態。最も、サイトの構造がわかりやすく、ユーザにとっても、自分が今どこにいるのかがわかる。

階層型で注意すべきことは、各グループが他のグループに干渉しないことである。どのグループに入ってもおかしくない、又はどのグループに関係することも若干ずつ入っているような情報を扱うサイトの場合には、他のグループに干渉しないページというのは難しくなる。

(2) 直線型
印刷物で使われている構造。最もシンプルな構造である。すべての情報が並列に並んでおり、他に飛ぶことがない。1ページ目の次には2ページ目が必ず表示され、いきなり5ページ目が表示されることもない。

(3) グリッド型
グリッド型は、図で示せば表のような構造である。それぞれ、隣り合う縦と横のページが関連付けられている。

(4) ウェブ型
ウェブとは蜘蛛の巣である。網目状に関連付けられたページのことで、あるページからあるページに自由にリンクが貼られた状態のことである。
ウェブ型は、自由にリンクを貼ることで表現するため、構造が曖昧になりがちである。このような方法を用いる場合とは、他のコンテンツを参照させたいときなどである。

情報の整理

サイトの構造を考える上で、どのコンテンツがどのグループに属するか、という情報の整理が重要である。
そのためにも、まずはサイトで提供するコンテンツの大項目を決めよう。

大項目を決める方法にはいくつかあるが、その中でも簡単なものが、まずは、思いつく限りのコンテンツを書き出し、出尽くしたら次に、そのコンテンツをグループ分けして5グループぐらいにまとめるのである。
この5グループが、大項目となる。適当な項目名をつけよう。

情報の整理の仕方
情報を整理するには、以下の方法がある。

(1) 50音別
用語集などで使われる。本の索引などを想像すれば分かりやすい。

(2) 地理／場所別
地図や天気などのサイトで使われる。

(3) 時系列
情報系のサイトで使われる。ブログなどがよい例。

(4) トピック別
情報系サイトで使われる。

(5) 作業別
スケジュールなどがそれにあたる。

(6) ユーザ別
ユーザによって見ることができる情報と、見ることができない情報に分けられる。会員用、一般用、初心者用などにわけられることもある。

表示速度

ウェブサイトにアクセスしたときに、すぐに画面が表示されなければ、ユーザはイライラしてしまい、あまりに待たされるようならば、他のサイトに移ってしまう。
ブロードバンドが当たり前の昨今では、それほど待たされることはないかもしれないが、それでも回線が細い場合には、混み合ってきたら中々表示されなくなることもある。
理想的には10秒以内にページが表示されることである。

ページの読み込みが遅くなる理由は、ページのサイズである。
ページサイズは、HTMLファイルに書かれているテキスト以外に、表示しようとしている画像やFlash、CSS、JavaScriptなどの外部ファイルも含まれる。これらの総合計ファイルサイズが、ページサイズとなる。

回線別の最大ページサイズ
56Kモデム --- 65KB
ADSL（1M） --- 1MB

以上のように、回線の速度によって、10秒以内に読み込めるページサイズは変わってくる。
画像や、動画のようなものをたくさん使っていれば、別であるが、普通にウェブサイトを作っていれば、1MBなどという大きさのページになることはあまりない。

重くなるのを避けるテクニック
ページサイズをなるべく軽くするには、以下のことに注意しよう。

(1) ファイルに余計なテキストを書かない
HTML、CSS、JavaScriptなどのファイルに、余計なタグやコメントを書き込まないようにする。特にコメントを大々的に書いてしまうと、その分読み込む速度に影響を及ぼすといわれている。とはいえ、後々ファイルを管理する際にある程度のコメントは必要となる。最低限のわかりやすいコメントを心がけよう。

(2) レイアウトやデザインはCSSでまとめる
HTMLファイルに直接レイアウトや見た目に関する処理を書くよりも、外部CSSファイルに書いたほうがよい。フォントサイズ、色、レイアウトといったデザインは、他のHTMLファイル内でも同じものを使うことが多い。それならば、外部CSSファイルに、まとめて書けば、1つ設定するだけで、複数のHTMLファイルに適用することができる。

(3) CSSの設定をなるべく字数の少ないものに変える
例えば、border-left、border-top、border-left、border-bottomの4つを指定するのであれば、一度に、borderプロパティで指定する。また、0pxとしたいのであれば、0とだけ記述する、というように、なるべく少ない字数で収まるようにする、ということである。
ちまちまとした感じに思えるかもしれないが、こういう細かい積み重ねが大事である。

(4) 画像の画素数は下げる
画像処理ソフトで、画像のサイズを変更したときに、色の数を減らすなどしてなるべく画像のサイズを落とすようにする。特に、画像を鮮明にする必要がないような場合には、ギリギリまで下げよう。

(5) 広告などの貼り付けは最低限にする
アフィリエイトなどの広告をベタベタと貼ると、これが結構なサイズを持っていることがある。特に、JavaScriptを読み込むようになっている広告の場合は、複数のJavaScriptを読み込むようになっていると、かなりの時間を要することがある。実際に表示してみて、あまりに重いようならば、広告を減らそう。

(6) 目安をユーザに知らせる
ファイルをダウンロードする場合には、そのファイルのサイズや、ダウンロードにかかる所要時間などを書いておくと、ユーザがどのくらいの時間がかかるのかが事前にわかるため、待っていられるようになる。

ディスプレイ領域

サイトの幅を固定幅に選択した場合、その幅をいくらにするか、という話である。
固定幅にするならば、ディスプレイの幅に合わせるのがよい。
現在では、ディスプレイの幅は1280ピクセルが一般的かもしれないが、少し古かったり小さいディスプレイでは、800ピクセルもまだ健在である。そこで、サイトの基本的な幅は最低800ピクセルが考えられる。
しかし、画面内にサイト全体が表示されなくても、メインの記事が読める幅であれば、問題ないと考えると、大体900ピクセルくらいまでは許容範囲ではないだろうか。

固定幅か可変幅か

デザイン面で考えることの一つに、サイトの幅をいくらにするか、ということがある。
まず、サイトの幅を考える上で、サイトの幅を固定にするか、可変にするかを選択しなければならない。

固定幅か可変幅か
紙とウェブの最大の違いは、固定幅と可変幅である。
印刷物は、幅を変えることができないため、必ず固定幅になる。固定幅であれば、1行の文字数も決められる。しかし、ウェブの場合、ウィンドウのサイズを変えれば表示する領域も変わる。

幅を固定にすることの利点は、一行の文字数を決めることができることにある。
目で追うのに疲れない一行の文字数というのは、大体20～40字と言われている。
字の大きさや、字間を変更して文字数を調節することで、40字以内に収めることができる。

可変幅の利点とは、ブラウザのウィンドウサイズを変更しても、常に全ての情報がウィンドウ内に収められるということである。幅を固定してしまうと、その幅よりも小さいサイズでウィンドウを表示したら、すべての情報を読み取るには、横にスクロールしなければならなくなる。
幅を固定にすることは、ウェブの強みである可変を拒否することになる。

固定にするか可変にするかは、デザインにもよるし、好みも入ってくるかもしれない。
最大限ウェブの利点を使うのであれば、可変であるべきという意見もある。

しかし、固定幅を否定することもできない。
固定幅は、可変幅による利点が得られないことを補う利点がある。
それが、文字数の固定による読みやすさと、デザインのしやすさである。
幅を固定にすることで、一行の文字数を決めることができる。これは、読み手にとって、読みやすい環境を与える。
そして、幅を固定にすることは、ウィンドウのサイズが変わっても見た目が崩れないことになる。これは、サイトの運営者側にとって、作りやすい環境を与える。
つまり、読み手と作り手の双方に利便性を与える、固定幅のレイアウトには捨てがたいものがある。
よって、固定幅か可変幅かは、好みが入ってくるのである。

title要素をまじめに考える

　HTMLのtitle要素をまじめに考えよう。
　title要素は、各HTMLファイルに必ずつけよう。title要素は、そのページのタイトルにあたる。これは、そのページをブラウザで表示したときに、ブラウザの一番上の欄に表示される。また、検索エンジンは、title要素がある場合には、優先的にtitle要素の内容を、検索結果の見出しとして表示するようになっている（title要素がない場合は、内容を適当に表示する）。そのため、title要素に書かれたテキストは重要になってくる。
　あなたが検索エンジンを使って、何かを検索したときに、検索結果に表示されたサイトを実際に見てみようとする動機は何だろうか？以下の2つのうち、どちらかに属さないだろうか？

(1) より上位に表示されたコンテンツ
(2) 内容の説明文が自分の求めているものに近そうなコンテンツ

　(1)の仕組みは、検索エンジンの動作によるもので、より上位に表示するためには、内容が充実していること、他者から人気のあるサイトであること、SEOにもきちんと取り組んでいること、など、様々な要素が絡んでくる。検索エンジンの検索結果の上位に表示するための考え方については別の機会に説明する。
　ここでは、(2)の説明をする。検索結果に表示される見出し文や概要は、すべてそのページの内容が反映される。検索エンジンが勝手に説明文を作ってくれるわけではない。あなたがそのページで書いた内容が表示されるのである。つまり、その文章を見て、興味を持った人があなたのページにアクセスしてくるのである。アクセスしてもらうには、見出しや概要が人をひきつける内容でなければならない。最初に書いたように、title要素に書いた内容は、検索結果の見出しに相当する。検索結果の概要は、ページ内の冒頭に書かれた内容や、主要な文章からの引用になる。あなたが本を読もうと思うときは、その本のタイトルをみないだろうか。次に目次をみないだろうか？つまり、人は、タイトルや見出しに、それ以下に書かれている内容が凝縮されていると考えるものなのである。このタイトルをおざなりに書いてしまえば、それだけあなたは損をしていることになる。
　ウェブオーサリングソフトなどを使っていると、title要素をきちんと設定しなければ、「無題」などとされることもある。「無題」と表示されているウェブページほどみっともないものはないし、非常にもったいないことをしている。

title要素の入力方法
　title要素の重要性は理解してもらえたと思う。次は、具体的な入力方法である。ただ闇雲にタイトルを入力すればいいというものではない。基本は、そのページ内を端的にあらわす内容にすることである。そのページ内の情報を端的にあらわすためには、そのページ内の重要なキーワードとなる言葉をタイトルに盛り込むことである。しかし、そのために、タイトルがやたらと長くなったり、支離滅裂な日本語になってしまうのはいただけない。検索エンジンで上位に表示されても、人が読んだら意味不明なものでは、あまり近寄られない。
　タイトルは、ブラウザの上の欄に一文がすべて読める程度の長さにするのが望ましい。具体的には、30～40字であろう。もっと短くてもいいかもしれない。ただし、これにあまり拘り過ぎなくても、例えば、ウェブサイトの名前を入れておくのも、SEOとしては有効な場合がある。だから、最初にページの概要がわかる見出し文を入力し、その後にスラッシュなどで区切ってウェブサイト名を表示しておく、という方法もある。非常に短い略称でウェブサイト名を表示することができる場合は、最初にサイト名を持ってくるのも有効である。そのサイトが有名であれば、ユーザは、それを見たときに、「あ、あのサイトなのか、ならば安心だ」となる。アマゾンがいい例である。

情報には3クリックで辿りつく

　ユーザビリティの高いサイトにおいて、よく言われるのが、3クリックで求める情報にたどり着く、という原則である。
　これは、何も完璧に守る必要はない。まずは、サイトの目的や目標合ったコンテンツを考えよう。そして、いくつかのコンテンツを考えたら、どのように配置するか、サイトの構造を決めて、そのコンテンツがどこに位置するかを決める。そして、それらのコンテンツを求めるユーザがどのようにアクセスしてきて、サイト内でどのように動き、最終的にサイトの目的・目標を満たす動作をユーザにさせるには、どのような導線をつければいいかのシナリオをつくる。
　こういった導線作りが第一である。しかし、それ以外に、人気のあるページを調べ、そのページは別のページからリンクを貼っておき、いつでもワンクリックでそのページにジャンプできるようにしておこう。
　人気のあるページを調べるには、アクセス解析を導入するのがよい。アクセス解析には、様々なものがある。最も単純なものでは、サーバがつけるログである。これは、レンタルサーバでは殆ど提供されないので、有料サーバを借りた場合に有効な調査方法である。それ以外にも、GoogleAnalyticsや、忍者ツール、FC2などもアクセス解析ツールを提供している。これらを導入して、どのページがユーザのアクセス数が高いのかをチェックしよう。
　アクセス数をチェックしたら、「アクセス数ランキング」などのサイドボックスをサイト内に表示させ、そこに上位5番くらいまでの順位を表示させる、といった工夫をするだけで、ユーザを誘導することができるようになる。

ユーザの身になって考える

　大抵の人は、客観的に考えることは難しい。生き物というのは、自分が生きていかなければならないため、人のことよりも自分のことを考えるのは当たり前だ。しかし、自分のためになるからこそ、人のことを考える、という思考が必要である。客観的に観ることで、その結果が自分にかえってくるということである。
　すごい技術があるとする。JavaScriptやFlashでグリグリと画面が動くインタラクティブなものにしようと考えるかもしれない。しかし、それは果たしてこのサイトにユーザが望んでいるものだろうか？それを導入することで、サイトの目的や目標を達成させることに近づくのだろうか。
　もし、その技術を導入することで、ユーザが見たい情報にたどり着くのに1ステップ多くなるのであれば、それはユーザにとっては不親切な技術に過ぎない。あなたの一時的な満足感は満たされるかもしれないが、長期的にはユーザが離れていくことになるので、当初の目的が達成できなくなり、あなたの満足感も満たされなくなっていく。
　ユーザが求めているのは、サクサクと動くサイト、すぐに情報にたどり着けるサイトである。その上で、あなたの目的・目標に誘導できるように作るのが、あなたが第一に考えなければならないことである。

競合サイトの研究

　今作ろうとしているウェブサイトは、よほどニッチなニーズであるか、新しい内容でない限り、誰かに先を越されていると考えた方がよい。
　では、先を越されているからといってやるのをやめるべきかというと、そうでもない。まずは競合サイトがどのようなサービスを提供しているのかを実体験してみよう。それには、競合サイトにアクセスして、そこで一ユーザとしてサイトを利用してみるのがよい。もし、そのサイトがECサイトであるならば、商品の購入手続き（支払の一歩手前でよい）や、会員登録をしてみることである。このとき、入力間違いをわざとしてみよう。その結果、どのような処理をするようになっているのかをチェックする。また、サイトの構成はどうだろうか。コンテンツにはどのようなものがあるだろうか。そのほか、サイト内検索の動作、どのようなコンテンツやサービスにトップページからのショートカットがついているか、他のページからショートカットなどで目立たせているのは何か、宣伝はどこに張り付いているか、なども見よう。
　これらをすべてチェックして、気づいたこと、よい点、悪い点、改善点などを、逐一メモしていこう。そして、いい点は取り入れ、悪い点は気をつけるようにすると、競合よりもよいサイトを作ることができるようになる。