第9回 Webページの設計

9.1 はじめに

学習内容

  1. 企画案において明確化された目的・内容に基づいて，伝えたい情報が適切に読み手に伝わるよう，ページを構成する要素(文章，画像，リンクなど)の配置を考える
  2. 要素の中でも特に重要である文章を題材に，情報(この場合は文章)を構造化して記述する練習を行う

学習目的

今週は，先週に引き続き設計を行います．先週はWebサイト全体の設計を行いましたが，今週はページ単体の設計を行います．ここでの目的は，企画過程によって明らかにされた伝えたい内容を適切に読み手に伝えることができるよう，ページ内の構造について考えていくことです．特に，Webページでは情報を伝えるための要素として文章が使われることが多いため，分かりやすい文章(＝構造化された文章)を記述する練習を行います．

キーワード

構造化

参考文献

9.2 ページ構成要素の決定と配置

先週に引き続き，今週も設計について扱います．先週Webサイト全体の構造設計を行ったのに対し，今週は1つのページ単体の設計について学びます．

設計の概略

Webページは，内容が適切に伝わり，かつ使いやすくなるよう設計されることが望ましいと言えます．おおまかな手順としては，以下の通りです．

  1. 皆さんがページで伝えたい情報を，どのような要素によって表現していくのかを考えます．要素というのは，文章や画像，アイコンやボタン，リンク，箇条書き，見出しなどのことです(例えばこの教材では，主に文章とそれを補う画像によって情報を伝達しています)．
  2. 要素をページ中にどのように配置するかについて考えます(すなわち，ページのレイアウトを行うことです)．

Webページの設計は，単に見栄えのよい，格好の良いページを作るために行うのではありません．映像や画像を派手に使った華美なページは確かに人目を引きますが，往々にして読み手のことを考慮していない使いづらいページになってしまいがちです．映像や画像はうまく使うことができれば非常に効果的ですが，ページが表示されるまでに時間がかかるなど欠点もあります．自分が伝えたい情報を伝えるためにはどのようなレイアウトが適しているか，様々なページを参考にしながら考えてみましょう．

以下に，一般的なページ設計のガイドラインを提示しますので，参考にして下さい．合わせて，→6.4 Webサイトの批判的閲覧 で利用したチェックシートも参考にしてみましょう．

Webページ設計のガイドライン

(出典：「学校で教わっていない人のためのインターネット講座」，有賀妙子・吉田智子著，北大路書房，1999，p100)
・閲覧対象者
閲覧対象者によって，ページのレイアウトは違ってきます．同じ内容を伝えるのでも，対象が大学生であるか小学生であるかによって，表現方法は異なります．対象者として外国人を想定している場合には，日本語以外の言語にも対応する必要があります．
・一貫性
なるべく，全ページにわたって一貫性のあるレイアウトにしましょう．毎ページ異なったレイアウトでは，読むほうは疲れてしまいます．
・バランス
一般的に操作性と読み易さのバランスをとるために，わかりやすい文章とそれを補う比較的小さな画像を用いたレイアウトを行うべきです．読み手は皆さんのページをくまなく読んでくれるとは限りません．そこで，最も伝えたいことが伝わるように，読み手の注意を適切に導く必要があります．しかし，読み手の注意を引くために大きな画像などを用いると，ページの読み込みに時間がかかるなどページの操作性は低下してしまいます．最高でも10秒以内にはページが表示されるようにしましょう．
・色のコントラスト
読みやすいページにするために，背景色は薄い色を選び，文字は背景上でもはっきりとわかりやすい色にします．
・強調
視覚的な強調(大きな文字，画像，線など)は控えめに使いましょう．ページの多くの部分に強調を使いすぎると効果がないだけではなく，雑然とした印象を与えてしまいがちです．よく考えてから使いましょう．
・ページの長さ
長いページの場合，スクロールしないと全てを見ることができません．あまりにもスクロールの幅が大きいと，ページは使いにくくなってしまいます．ページの長さはその内容によって様々ですが，一般的には印刷した時に1〜3ページ程度に収まるくらいが適当であるとされています．
・ページの横幅
画像などがブラウザのウィンドウ幅を超えてしまうと，読み手は横スクロールを強いられることになります．横スクロールは非常に面倒な作業です．画面サイズが小さな場合でも，横スクロールを必要としないような設計を心がけます(横幅の大きな画像や表組みは使わないなど)．

●　宿題

以上のガイドラインを参考にし，トップページのレイアウトを行いましょう．先週宿題として課したサイト構造図とともに，トップページのレイアウト図（手書きで構いません）を次週提出して下さい．

分かりやすい文章の必要性

文章が全くないというページもありますが，Webページで情報発信を行う際に最も使われる要素は文章です．また，Webページ上の文章を読むことは，本を読む以上に疲れます．それゆえに，Webページを作成する際には，わかりやすい文章(＝構造化された文章)を書くことが特に重要になります．→9.3 情報の構造化 では，情報の構造化の例として，構造化された文章の作成方法について解説を行います．

9.3 情報の構造化

読みやすい文章とはどのような文章のことを言うのでしょうか．また，読みやすい文章を書くためにはどのようなことに気をつければよいのでしょうか．

構造化の考え方

次の2つのページにある文章を読み比べてみましょう．どちらのページの方が読みやすいでしょうか．また，その理由について考えてみましょう．

一目見るだけで，ページAの文章ははじめから終わりまで途切れずに続いているのに対し，ページBにある文章は見出し，パラグラフ(段落)がつけられているということがわかります．あるまとまった文章を理解しようとするとき，人間はその文章の内容をいくつかの意味のまとまりに区切るとともに，見いだされた意味のまとまり同士の関係を手がかりにしながら，文章全体の意味を把握しようとします．見出しやパラグラフは，読み手に文章の意味のまとまりを適切に把握させるための指標として機能します．ページBの文章のように，意味のまとまりに基づいて適切に構成された文章を，構造化された文章と呼びます．

構造化というと難しそうですが，要は文章同士の関係を明らかにしながら，論旨の流れがわかりやすいように全体の構成をつくりあげていくことです．ここでは読みやすい文章を適切に構造化された文章と捉え，適切に構造化された文章を作成するための練習を行います(決して，人の心をうつ文章，奇抜な文章を書くための練習ではありません)．

構造化された文章の作成

ここでは，構造化された文章を作成するための基礎であるパラグラフ作成を中心に解説します．

(1)パラグラフを作成する

パラグラフ(段落)とは，内容的に関連のある複数の文(センテンス)の集まりで，それによって一つの考えを表現するものです．1つのパラグラフが1つの意味のまとまりを表しており，複数のパラグラフを論理的につないだものが文章全体となります．適切なパラグラフを作成することは，構造化された文章を書くための第一歩です．以下に，パラグラフを作成する際のガイドラインを示しますので，参考にしてください．

●　パラグラフ作成のガイドライン

(出典：「理科系の作文技術」，木下是雄著，中公新書，1981)
・1つのパラグラフには1つのトピック
1つのパラグラフには，内容的には1つの話題(トピック)だけを書くべきです． 2つ以上の話題(トピック)を1つのパラグラフに書くことはお勧めしません． 逆に，同じ事柄についての話が続いているにも関わらず，改行して別のパラグラフを作成することもお勧めしません．
・トピックセンテンス
そのパラグラフにおける話題(トピック)についての中心的な考えは，1つの文(トピックセンテンス)によってまとめられるべきです．トピックセンテンスは，書き手がそのパラグラフで主張したい内容を端的に表現するものであるべきです．
・トピックセンテンスとその展開文
多くの場合，1つのパラグラフは，トピックセンテンスとそれを支えるいくつかの文から成りたっています．トピックセンテンス以外の文は，トピックセンテンスによって表現された主張をより具体的に説明するものであるか，他のパラグラフとの関係を明らかにするための文である必要があります．つまり，トピックセンテンスと関係のないことを書いてはいけません．
・トピックセンテンスの位置
トピックセンテンスは，パラグラフの冒頭にあると読みやすく，目をひきます．日本語の文章においては，最も伝えたい内容がパラグラフの最後に置かれることがよくあります． 確かに，我々が物事を考える際の自然なプロセスに従って文章を書いていくと，そのようになりがちです．しかし，主張を明確に伝えるためには，原則的にはパラグラフの第一文にトピックセンテンスを置くように心がけます．読み手が論旨を把握するためにはその方が都合がよく，書き手も論旨の流れを自覚しやすくなります．

(2)見出しをつける

小さな意味のまとまりであるパラグラフを複数論理的に結合することによって，大きな意味のまとまりが作られたら，見出しをつけます．見出しは，読み手が文章を読み進めていくための指針(どのような内容についての文章なのか，事前に見出しを読むことによって予測することができます)となります．そのため，見出しは文章の意味内容を適切に示す必要があります．

●　練習問題

以下のページに構造化されていない文章が記載されています．これから皆さんには，この文章を構造化(適切なパラグラフを作成し，必要に応じて見出しをつける)してもらいます．構造化した文章はHTMLで記述して下さい．HTMLにおけるパラグラフや見出しの作り方については，→7.4 HTMLの基礎 を参考にしてください．

なお，HTMLは以下のテンプレートをコピー&ペーストして頂いて構いません．構造化されていない文章は下のリンク先からコピー&ペーストして下さい.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<title>exercise</title>
</head>
<body>



</body>
</html>
→構造化されていない文章