Webサイトをつくるうえで
「Web標準を意識するべきなのはわかったけど他に何をやるべきだろう…」
「Webサイトを作るといってもどのように作っていけばいいのかわからない…」
初めてならきっと迷ってしまうでしょう。Webサイトを作るにあたってやるべきことにはどのようなものがあるのか、ということについ て書いていきます。
(『無 粋な「404 Not Found(エラーページ)」でユーザを逃していませんか？』、『訪問者に優しいWebサイト作り』を要約)
A. 何についてのサイトにするかを決める
何についてのサイトにするか、つまりサイトのコンセプトをまず決めなければいいサイトはできません。サイトのメインがあの情報、この 情報…とたくさんサイトに詰め込んだとしても、結局「で、何が言いたいの?」的なサイトに。 サイトを通して伝えたい内容は1つに絞る。これはWebサイトを作成する人の基本中の基本です。
また、「自分のサイトをどのようなイメージのものにしたいか」というのも大切です。そしてそのイメージは色が決めるといっても過言で はないでしょう。例えば「スタイリッシュなものにしたいからこの色を使おう」など。色には色のイメージがありますから、自分の思い描くサイトのイメージに 合う色を使えるといいです。
色を選ぶときにお勧めなサイトはこちら。 → kuler [ws] Color Scheme Designer
B. 404 Not Foundのページを作る
「404 Not
Foundのページ」って何かと聞かれると、「ページが見つからない時に出るあの殺風景なページ」と答えたくなる。あのページで分かってしまうのがすごい
ところで
す。つまりはこいつ↓です。
僕が使っているブラウザは比較的新しい方なのでこのように出てきますが、このようなページにはお世話に(?)なる人も多いはず。そこ で、自分でこのページを作るという方法を使ってみましょう。試しにアドレスバーに適当にうってみてください。404 Not Foundのページが出てくると思います。
貼ってあるリンクやビジターが入力したアドレスが存在しなくて、サイトに合わないような堅苦しいページが出てくるとどうでしょう。ど んな印象を受けますか? 「使えない」と思って去って行ってしまうかもしれません。それだけのことでビジターを逃してしまうのはもったいないので、ビ ジターを上手く誘導するような、ビジターにわかりやすいようなものにしておくのが望まし いです。トップページやサイトマップなどにつながるリンクが貼ってあるとなおいいで しょう。
まあもちろん、そのようなページを表示させないというのも大切なことで すので、しっかりと入念にサイトのチェックをしましょう。
C. サイトマップを作る
サイトマップとは、サイトの構造を示したもので、たいていはそこからサイト内のどのページにも行くことができます。例えば、次のよう なものです。 → ドコモの サイトマップ
このようにサイト内すべてのページのリンクをはっておくことによって、ビジターが行きたいページへ素早く行くことができます。またビ ジターがどこへ行けばいいか迷っても、サイトマップを見れば目的の場所までたどり着くことができます。
つまりこれはユーザビリティの向上になります。また このようなものはフッターに置くなど、すべてのページからつながっているようにするといいです。このドコモの例では、ヘッダーに必ず「サイトマップ」の表 記があります。
D. パンくずリストを作る
このような表記をページの上の方で見た人があると思う。
Top > インフォメーション > 製品情報 > ○○○○
このようなものをパンくずリストといいます。由来は某童話で道しるべとして使ったパンのかけらだそうです。これがあるだけでかなりの 効果 が 得られます。
まず、SEOの効果が期待されます。特定のページへのリンクがこれで増 えるのだから、重要なサイトと認識されて検索されやすくなります。企業 のサイトはほとんどこ れを使っているはずです。
また、ユーザビリティの向上になります。検索エンジンなどで調べた結 果、例のような下の階層のページにアクセスしたとしても、トップページまで簡 単に行くことができます。また階層が分かるので、1つ1つ階層を上がって目的のページを探 す、ということもできます。
これと一緒な理由で、同じ階層にあるページにもリンクが貼られているとなおいいです。
E. 名前をしっかりとつける
「タイトルにサイトのアドレスが表示されて、お気に入りに登録するときにアドレスのまま入ってしまう」 と いった経験はないでしょうか。これ だと後でどんなサイトだったか確認しなければならないなどと面倒な点が多いです。単に登録す るときにわかりやすいような名前で登録すればいいのですが、そういっ た手間をなくすのもウェブクリエイターとして重要だと思いませんか? なのでheadタグの間にはしっかりとtitle タグでタイトルをつけておきましょう。
タイトルの付け方も重 要です。たとえば「私のページ」というタイトルでつけても、内容がどんなものだったか分からなくなるので、アドレスのままと 何ら変わりないです。なの で、タイトルはキャッチーでわかりやすいものにしておくといいでしょう。2階層以下は次のよ うに階層も書いておくといいです。
サ イトのタイトル > インフォメーション > 製品情報 | 企業名など
これだとどんな内容だったか思い出しやすいはずです。
また、サイトにアドレス入力で来る場合もあるということを頭に入れておいてください。 つまり、次のようなファイル名の付け方ではいけません。
「fdfsif0isel.html (適当な名前のファイル名)」、 「how_2_make_website_information_A.html (やたらと長い)」
ディレクトリやファイル名は簡潔で覚えやすいものにしておきましょう。
F. 動作環境を確認する
よく「このブラウザで見て下さい」とか「このブラウザ以外は動作がどうなります」とかいう表示が書かれていることがあります。これで はそ のブラウザを使っていないビジターにとっては不便極まりないでしょう。なので、どんなブラウザを使い、どんな画面でみている人が多いかということをアクセ ス解析な どで調べたり、たくさんのブラウザで自分のサイトを見たりしてCSSの検討をしたりするといいです。CSSでは「CSSハック」というテクニックを使って 特定のブラウザ(バージョン等) には無効にするなどということができるので、サイトのレイアウトが崩れて読めなくなるということはなくなります。僕はInternet Explorer、Safari (Windows版)、Firefox、 Operaの主要4ブラウザとLunascape、Grani、Sleipnir、Google Chromeなど、その他のブラウザで動作確認しています。これだけあれ ばおそらくユーザーをそこまで制限することはないと思います(=アクセシビリティの向上)。そんなにいっぱい確認できない、という場合は主要4ブラウザと 最近伸びつつあるGoogle Chromeに絞ってみるのもいいでしょう。
動作確認しないでもいいようなくらいにしたいのであれば、制限することのないタグやCSSを使ったり、複雑なことをしなかったり、そ のブラウザごとのページやCSSを作ったりすればいいですが、大変な手間と気力が必要です。
以上のようなことをすれば、よりWeb標準の3つの柱の強度を高めることができるはずです。