自己紹介：本サイトに関して |
このサイト全体は、いろいろと考慮して決めた設計方針で統一してあります。設計の基本として重視しているのは、使い勝手を良くすることと、書いてある内容を把握しやすいことです。あまり凝った手法は用いていませんが、ページ数の多いサイトを作成するときは、参考になる部分があるでしょう。設計のポイントをまとめたので、もし気に入った考え方や方法があれば利用してください。
サイトに含まれる情報の量が増えるほど、全体の内容を把握しやすく整理してみせることが重要となります。全部の情報を一気に作るわけではありませんが、増えるごとに全体の構成を変えたのでは、作業量が増えて無駄です。また、一部のページで内容を変更する必要も出てきます。それよりも、最初から全体の構成を整理して作るほうが賢い方法です。ただし、最初に予定しなかった新しいコーナーを追加することもあり得るので、それを追加しやすいようにだけはしておきます。
内容の把握で重要なのは、目的の情報が苦労せずに見付けられることです。全体の情報量が多いので、複数のコーナーに分けることで対応します。同時に、全体の構成ルールを直感的に理解させることも必要です。コーナー扉ページと内容ページの２階層で構成し、かなり単純化してあります。表紙ページも最近更新ページも、１つのコーナーのように扱って、最上位のない２階層として見せています。
コーナー分けでは、各コーナーで扱う内容を素早く理解させることも大切です。コーナー扉ページでは、コーナーのタイトルに続き、コーナーの目的を短い文章で説明します。その下には、コーナー内の内容ページへのリンクをインデックス形式で並べます。コーナー内を小コーナーに分け、それぞれに中見出しを付けて分類します。コーナー内の全ページが含まれているので、ここを見るだけで目的のページが見付けられるはずです。
インデックスの一番最初に、中見出しのないリンクが付いていることもあります。これは、そのコーナーに関する説明ページです。できるだけ入れるようにしていて、背景や考え方を説明したいコーナーには、２ページ以上の説明ページを用意することもあります。
新しく追加したコーナーは、当然ですが内容ページがほとんど含まれていません。それでも、どんな内容を扱うのが伝える必要があります。それを満たす目的で、「準備中」との表示を付けながら、中見出しや内容ページのタイトルを用意します。中身はありませんが、どのような内容を扱うのか、大まかには把握できるはずです。「準備中」の項目は、内容を予告する役目も持っています。
個々の内容ページでも、できるだけ分かりやすく作成します。内容の区切りで中見出しを挿入するだけでも、読みやすく仕上がります。中見出しには、本文の要旨を短く表した文を付けるのがポイントです。中見出しだけ見て、大まかな内容を把握できるからです。
もう１つ、ページ内の要点を強調する意味で、枠線付きの箇条書きを本文中に挿入することがあります。重要な内容を目立たせ、後から見たときに探しやすくできます。このような目的には、箇条書きが最適で、必要に応じて、字下げによる階層表現も用います。この部分は、HTMLのTABLEタグで作ります。単純に囲んでいるだけなので、作るのは簡単です。
ページ数が多い場合は、使い勝手を良くする点も大切です。主に考慮するのは、表示を速くすることと、行き来の回数を減らすことです。
表示速度の向上では、できるだけテキスト中心で作ります。他のページへの移動ボタンも、文字で作ってあります。どうしても図が必要なときは、色数を４色以下で済ませるように努力します。写真もグレー化し、256階調を誤差拡散法ディザ付き16階調に変換します。中間調を見せたい写真でだけJPEGを用います。なお、図や写真にキャプションを付けるときは、図や写真の上側に付けたほうが読みやすくなります。雑誌や本と違って、ページ全体を一気に見れず、上からスクロールして見るからです。
全体を２階層で構成したことは、行き来の回数を減らすのにも効果があります。加えて、コーナー間の移動を素早くできるように、コーナー扉ページの一番上に、コーナー切り替えのリンクを用意しました。この部分の表示位置は、コーナーを切り替えてもまったく変わりません。コーナーを連続的に切り替えたとき、ユーザーが混乱しないようにと考慮したからです。同じ形式の切り替えリンクは、各コーナー扉ページの一番下にも付けてあります。
個々の内容ページでは、最上部と最下部に、ページ切り替えのリンクを付けました。トップ、コーナー扉、前ページと次ページの４つを含んでいます。トップ以外のリンクは、漢字と矢印文字の全角２文字を組み合わせてあります。矢印文字は、役目を素早く判断するのに役立ちます。漢字の１文字は、正確な意味を伝えるのに役立ちます。加えて、全角文字の２文字分の面積は、１文字よりもクリックしやすいスペースを確保できます。
内容ページのから扉ページへ戻るリンクでは、小コーナーの先頭に移動するように設定しています。今まで見ていたページに関係する箇所へ戻ったほうが、見ている人の迷いは少ないでしょう。
以上は、見る人のことを考慮した工夫です。それ以外に、作る側にとって役立つ工夫も必要です。ページ数が多いときは特にです。最低限として考えたのは、フォルダ名やファイル名の付け方です。
まず、コーナーごとに２文字の半角英字を割り当てます。これがコーナーごとの略号で、コーナーのフォルダ名にもなります。そして、コーナー内の全ファイルで、ファイル名の先頭に略号を付けます。コーナー略号が「ED」なら、コーナー扉ページは「ED.html」です。拡張子を除いた部分がコーナー略号だけのファイル名は、コーナー扉ページを表します。新しいコーナーを追加するときは、２文字の略号を決めて、それ用のフォルダを追加するだけです。
コーナー扉以外のページは、コーナー略号の後ろに３桁の数字を付けて「ED123.html」のようにします。この３桁にも意味があります。最初の１桁は、コーナー内の小コーナーの区切りです。通常は１〜９の値を持ち、９つの小コーナーを持てます（もし足りなくなったらアルファベットを使うつもりです）。ゼロだけは特殊で、中見出しのないコーナー説明のページに用います。２桁目の数字は、小コーナー内の区切りを表します。ただし、10個以上で１区切りになることもあるので、厳密に区切りを表すわけでもありません。最後の３桁目の数字は、基本的にページ連番として用います。ただし、連番は１から付け始め、ゼロだけは特別です。ゼロは小コーナーや区切りの説明ページに割り当て、実際の中身ページは１から始めます。たとえば、小コーナーが200から始まるときは、200に小コーナーの説明を、201から中身のページを入れます。もし小コーナーの説明を付けないときは、201から付け始めます。
グラフィックのファイル名も、似たような考え方です。特定のページでしか使わないファイルは、対象ページのファイル名の後ろに、番号などを付けた形にします。たとえば、「ED123.html」ページでしか使わない図が２つあるなら、「ED123-1.gif」「ED123-2.gif」とします。もし図の数が10を越えるときは、連番を２桁にして９以下に前ゼロを付けます。このようにすると、図の所属も明確になります。
ファイル名を番号中心に付けられるのは、コーナー分けと小コーナー分けが最初から明確に決めてあるからです。そうでないなら番号管理は難しくて、内容を表す言葉をファイル名として付けなければならないでしょう。ファイル名で内容を表すといっても、英数字しか使えないので、ファイル名の決定や順序の管理は結構面倒です。
以上のようにルールを決めると、番号中心のファイル名が並んでいても、大まかな区切りや役割が把握できます。ファイル数が多い場合は、このような工夫が思った以上に役立つものです。ファイル管理でも、把握のしやすさが重要です。
ここで説明した方法が、誰にとってもベストとは限りません。人それぞれに適した方法は、少しずつ違います。最終的には、自分にあった管理方法を見付けてください。そうすれば、ページ数が増えても、全体を容易に把握できるでしょう。
サイト全体の設計方針 |
