第8回 Webサイトの設計

皆さんが立案した企画案はWebページとして公開されています．ここでは，皆さんの企画が妥当なものであるか否か(企画内容に不適切な内容が含まれていないか，改善すべき点はないか，など)について，簡単なレビューを行います．レビューは教員，TA/SAを含めたクラス全体で行います．→6.4 Webサイトの批判的閲覧 の復習も兼ねて，他の人の企画案に対しても意見を述べましょう．レビューを行うことによって企画案の問題点を見つけ出し，企画をよりよいものにすることがここでの目的です．

具体的な進行は，先生の指示に従って下さい．

第6週では，皆さんにはWebサイトの企画立案を行ってもらいました．企画は，サイトの目的や伝えたい内容を明確化するための過程でした．次に皆さんが行わなければならないことは，いきなりHTMLを書きはじめることではありません．伝えたい内容が適切に読み手に伝わり，かつ使いやすいWebサイトを作りあげるためには，もう1つステップを踏む必要があります．それが，今週と次週で説明する設計と呼ばれる過程です．

　

Webサイトにおける設計とは，伝えたい情報を適切に読み手に伝えるために，またサイトの操作性を向上させるために，ページもしくはページ間の構造を考える過程だと言えます．レポートの作成過程に例えれば，章立てやアウトラインを考える過程です．インターネット上には無数のWebサイトが存在していますが，適切な設計がなされたサイトは必ずしも多くはありません．その結果，内容がわかりにくかったり，そもそも読む気をおこさせない，といったページが氾濫しています．いくら素晴らしい企画に基づいて制作されたサイトであったとしても，内容が読み手に伝わらなければ意味がありません．ここでは，伝えたい情報を適切に読み手に伝えることのできるサイトを制作するために，Webサイト(及び，Webページ)の設計について学びます．

今週は，Webサイト(複数のWebページのまとまり)全体の設計を行います．Webサイト全体の設計とは，企画したテーマ，目的に従ってページ毎に載せる内容を明確化し，読み手が迷子になることなく目的とする情報にたどり着くことができるよう，ページ間の関係をデザインすることです．1つのページ単体の設計については，次週扱います．

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

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

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

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

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

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

・ページの長さ

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

・パラグラフの数

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

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

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

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

(出典：「学校で教わっていない人のためのインターネット講座」，有賀妙子・吉田智子著，北大路書房，1999，p98）

・階層構造の深さ

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

・現在位置の表示

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

・トップページ

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

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

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

・ナビゲーションバー

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

・前後ページへのリンク

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

・サイトマップ

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

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

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

多くのWebサイトは，このように階層構造を持っています(ただし，例えば8_1.html，8_2.html，8_3.htmlのように，ここでは直線的な構造も使われています)．これは，ナビゲーションの道筋が読み手にとってわかりやすいことや，サイトの保守(更新，修正などサイトの管理)を行いやすいなどの理由によります．皆さんが実際にHTMLファイルや画像ファイルを作成し，public_htmlの下に置く時には，→3.1 ディレクトリ で学んだディレクトリ構造を用います．上の図では，赤文字で表された07，08やimgがディレクトリを示しています．

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

リンク機能はWebページの大きな特徴となっています．しかし，リンクが多すぎるページは非常に読みづらいページとなってしまいます．出来る限り，読み手を不要なページに連れて行くことのないよう，リンクをつける場合には注意を払います．また，リンク先のページについて読み手がある程度予測できるような工夫をします(例えば，適切なリンク文字列を使ったり，説明を入れるなどします)．