第９回では，WEBサイト（複数のWEBページのまとまり）全体の設計を行います．WEBサイト全体の設計とは，企画したテーマ，目的に従ってページに載せる内容を明確化し，読み手が迷子になることなく目的とする情報にたどり着くことができるよう，ページ間の関係をデザインすることです．

　主な手順は以下の通りです．

1. 企画に基づいて，ページに載せるべき内容をテーマごとにグループ化する（どのページに何を載せるかを，意味のまとまりという点から明確化する）
2. ナビゲーションを考慮して，サイトの構造（リンク構造及びディレクトリ構造を設計する

　良いサイト構造とは，意味的な内容によって区切られたページ間の意味関係が，リンク構造及びディレクトリ構造といった物理的構造によって適切に表されているものであると言えます．上記の各過程について，具体的に解説していきます．

　企画に従って，ページに載せるべき情報をテーマ，意味内容ごとに分類，グループ化します．１グループがおよそ１ページになります．グループ化を行う際には以下の点について気をつける必要があります．

・１グループには１テーマ

先週学んだパラグラフの作成と同様，内容的にテーマとは無関係な情報は省くか，他のページに含まれるようにしましょう．１つのページに様々な情報があると読み手は混乱してしまいます．また，保守（WEBサイトの更新や修正）を行う際も大変です（テーマごとに明確にページがグループ分けされていれば，どのページを更新すればよいのか混乱することが少なくなります）．

・ページの長さ

読みやすいページを作るためには，１ページの長さが印刷したときに１〜３ページ程度に収まると良いとされています．１ページの長さが長すぎると，読み手はスクロールをしなければならず，ページの操作性が低下するとともに，読みにくいページになってしまいます．

・パラグラフの数

ページの長さとも関係しますが，特に文章中心のページの場合，パラグラフの数は多くても９個ぐらいまでにしましょう．パラグラフの数が多すぎると，読み手は論旨を理解することが難しくなりますし，そもそも，長すぎて読む気を失ってしまいます．

　サイトに載せるべき内容を幾つかのページに分割したならば，次はページ間の関係について考えます．ページに相当する意味のグループ同士の関係やその重要度から，サイト全体の構造を考えます．

　WEBページでは，主にリンク機能によってページ間の関係が規定されます．読み手は，リンクをたどってページ間を移動し，目的とする情報を得ようとします．そのために，サイトの全体構造が適切に設計されていないと，読み手は目的の情報にうまくたどりつけず，サイト内で迷子になってしまうこともあります．

　読み手を，読み手が捜している情報へと適切に導くことをナビゲーションといいます．サイトの全体構造を設計する際には，ナビゲーションの道筋をよく考えなければなりません．

　以下で，もう少し詳しくサイトの構造設計について見てみましょう．

　読み手が目的とする情報に容易に到達することのできるための仕組みをつくり，読み手を適切に誘導することをナビゲーションと言います．本のような印刷物であれば，目次，索引などを手がかりとして，目的の情報を探し出すことができます．しかし，WEBページでは必ずしもそのような仕組みが用意されているとは限りません．WEBページを作る際には，リンクをクリックすることによってどこへ連れて行かれるのか，連れて行かれたページは今アクセスしているページとどのような関係にあるのか，などについて明示する必要があります．ナビゲーションを考える上での具体的な注意点について，以下に示しますので参考にして下さい．

・階層構造の深さ

階層が深すぎると目的の情報にたどりつきにくくなります．短いステップで目的の情報へたどりつけるようにします．

・現在位置の表示

今見ているページがサイトのどこにあるのかがわかるような情報をページに入れるようにしましょう．読み手が迷子になることを防ぐとともに，内容を把握する助けになります．具体的には，下で述べるナビゲーションバーなどを利用します．

・トップページ

トップページには，「ページの目的」「ページの対象者」「どのような情報が提供されているか」を明示します．また，インデックスをつけることも効果的です．インデックスによって，読み手はどの情報がどのページにおいて提供されているのかを把握することができます．

・トップページへのリンク

読み手がサイト内で迷ってしまった場合や，階層を下りすぎてしまった場合のために，全ページにトップページへのリンクを用意すると親切です．

・ナビゲーションバー

ナビゲーションの道しるべとして，ナビゲーションバーを用意することをお勧めします．ナビゲーションバーとは，例えばこの教材ページの上部にあるような「前後ページやトップページへのリンク」を明示的に示している部分です．

・前後ページへのリンク

　本教材のように，同じ階層のページは直線的な構造になります．この場合，前後のページへリンクをはることは有効です．特に，（教材のように）読む順番がある程度決まっている場合，前後ページへのリンクによって読者に直線的に読ませることができます．

・サイトマップ

サイトに含まれる全ページの構造を記述したものが，サイトマップと言われるものです．含まれるページ数の少ないサイトでは必須ではありませんが，サイトの全体像を把握しやすくなり便利です．．

　いよいよ，ナビゲーションのガイドラインやページ間の意味的関係に基づいて，サイト全体の物理的構造を設計します．物理的なサイト構造とは，具体的にはファイル間のリンク構造及びディレクトリ構造に基づいたファイル配置のことです．

　サイト構造の種類には様々なものがあります．簡単なサンプルとして，本オンライン教材がどのような構造を持っているかについて，一部図示します．

　多くのWEBサイトは，このように階層構造を持っています（ただし，例えば9_1.html，9_2.html，9_3.html・・のように，ここでは直線的な構造も使われています）．これは，ナビゲーションの道筋が読み手にとってわかりやすいことや，サイトの保守（更新，修正などサイトの管理）を行いやすいなどの理由によります．

　皆さんが実際にHTMLファイルや画像ファイルを作成し，public_htmlの下に置く時には，第３週で学んだディレクトリ構造を用います．上の図では，赤文字で表された08，09やimgがディレクトリを示しています．

　このように，WEBサイトはディレクトリ構造を利用して構造化されています．皆さんがWEBページを制作する際にも，自ら適切なディレクトリを作成し利用することになります．

　リンク機能はWEBページの大きな特徴となっています．しかし，リンクが多すぎるページは非常に読みづらいページとなってしまいます．出来る限り，読み手を不要なページに連れて行くことのないよう，リンクをつける場合には注意を払います．

　また，リンク先のページについて読み手がある程度予測できるような工夫をします（例えば，適切なリンク文字列を使ったり，説明を入れるなどします）．

• 学校で教わっていない人のためのインターネット講座　有賀妙子・吉田智子著、北大路書房