Webサイト制作の基本
|
|
サイト内の各ページのデザインを統一してください。見た目の統一感が出るだけでなく、同じ操作でページ間を移動できるので、直感的に操作しやすくなります。 最初にサイト全体のページの種類を分類し（目次ページ、概説ページ、詳細説明ページ、ニュースなど、サイトによって種類はいろいろです。）、それぞれの用途に合わせたページレイアウトのテンプレートを作っておくと、作業効率が上がり、デザインのばらつきも少なくなります。 ページサイズの基準縦サイズ「1ページの文章量は縦スクロールしないでも見える程度に。」という意見と、「ページを切り替えるのは面倒なので、スクロールしても良いから多くの情報を1ページに。」という意見があります。ニュース、娯楽記事など、ざっと眺める内容は短いページ、じっくり読む内容は長いページが適しているでしょう。 長いページにする場合でも、1ページに複数のテーマがあるときは、テーマごとにページを分ける方が内容が明確になります。1テーマに絞って、それが縦スクロール数回分程度だったら、別にページを分けなくても良いでしょう。ぺージをダウンロードしてオフラインで読んだり、プリンタで印刷して読む場合もありますので、あまり細かくページを分けると、不便です。 長文の資料などをWebで公開する場合は、複数ページに分けたバージョンと、1ぺージに全情報を入れたバージョンの2種類を用意すると、オンライン、オフラインのどちらでも利用しやすく親切です。 横サイズ横スクロールしなければならないような画像、テーブルは極力控えましょう。 ユーザーは縦スクロールはしますが、横スクロールまではなかなかしてくれません。 ページ全体の横幅は固定せず、ブラウザの幅に応じて変るようにする（リキッドレイアウト）方が間違いがありません。しかし、リキッドレイウアトにすると、逆に高解像度のPCで閲覧しているユーザーなどにとって、幅が広がると1行数が増えすぎて読みにくくなるという問題もあります。 今のところ固定レイアウトにしても、リキッドレイアウトにしても、750から800ピクセルぐらいで見やすい幅にしているサイトが多いですが、これぐらいが、多くのユーザーには見やすいところと言えるかもしれません。 今後、ディスプレイがより大型化し、画面解像度が上がるとこの傾向は変わるかもしれませんが、その一方、スマートフォンのように携帯電話機能とPC機能を兼ね備えた小型の携帯端末は、低解像度であるため、逆にスマートフォンのような機器を使うＩＴリテラシーが高い層にとって、横幅が広いサイト、Flashなどで重いサイトは使用しづらいということもあります。 横サイズ問題は、時代によって変わりますが、多様なユーザーの閲覧環境を考慮することを忘れないようにしてください。 各ページの構成各ページは、通常以下の部分から構成されます。
ナビゲーション部分ページ間の移動などの操作に使う部分です。別に「バー」のかたちでなくてもかまいませんが、全ページに同じデザインのものを付けると、操作が分かりやすくなります。 代表的なナビゲーションバーには、次の2種類があります。 1.最もよく使われるページへのリンクをまとめたもの 次の例のように、よく使われるページへのリンクを1行にまとめます。他の項目へ1クリックで移動できるのが便利です。最も一般的な方法です。
2.トップページからの階層を表示したもの 次のようにトップページ（HOME）から現在のページまでの各階層を明記し、それぞれにリンクを張ると、自分が今どこにいるか分かりやすく、また来た道を簡単に戻ることができます。
これは、「パンくずリスト」と言われる手法です。アクセス解析などでは、途中段階をクリックするユーザーは少なく、クリックするとすれば「HOME」のみという結果があります。 ナビゲーションバーは、ページの上部と下部の両方に付ける方が親切です。 ページの最初だけ見て他のページに行く人もいれば、最後まで見て次に進む人もいるからです。 見出し各ページの先頭に、そのページの内容が分かる見出しを入れてください。ハイパーリンクによって、同じサイト内、サイト間をジャンプしてくるときに、見出しを見ただけで内容を区別できます。 本文Webページの本文の書き方については、「オンライン向けの文章の組み立て」をご覧ください。 フッタ各ページの一番下に、そのページの更新日、そのサイトの名称、トップページのURL、著作権表記、連絡先メールアドレスなどを入れます。 各ページにこれらの情報を入れるのは、検索エンジンなどで直接ジャンプしてきた場合、それが一体どこのサイトのページか分からないからです。また、ハードディスクにダウンロードしたり、プリンタで印刷した場合なども、そのページの出所が曖昧になります。 そこでフッタなどにこれらの情報を掲載しておくと、そのページがどのサイトのものかが常にはっきりします。 ページタイトルの重要性ここで言う「タイトル」は、HTMLの<TITLE>〜</TITLE>の中身のことで、そのHTML文書全体の内容を記載します。 たとえばこのページのタイトルは、 <title>Webデザイン：個々のページのデザイン(KeiYu HelpLab)</title> です。 一般的なWWWブラウザで表示すると、このタイトルがタイトルバーに表示されますが、それ以外にも次のような場面で使われます。
ブックマークと検索エンジンと言えば、Webサイトを訪問してもらうために最も重要な手段です。サイトの内容がよく分かるタイトルを付けておかないと、そのサイトを訪問してもらえる確率がそれだけ低くなるという訳です。またタイトルは、プリンタでの出力時に用紙に印刷されたり、音声出力ブラウザでページの最初に読み上げられるなど、ページを識別するための重要な意味を持っています。 時々、全ページに同じタイトルを付けている場合がありますが、これではサイト内のどこのページが表示されるのか分からず、ブックマークを付けた場合などに混乱します。各ページで異なるタイトルを付けてください。
|