8.2 設計の目的と概要

 先週,皆さんにはWEBページの企画を行ってもらいました.企画は,ページの目的や伝えたい内容を明確にするための過程でした.次に皆さんが行わなければならないことは,企画した内容をいきなりWEBページとして書きはじめることではありません.伝えたい内容が適切に読み手に伝わり,かつ使いやすいページを作るためには,もう1つステップを踏む必要があります.それが,今回と次回で説明する「設計」と呼ばれる過程です.

 

設計の目的

 WEBページにおける設計とは,「伝えたい情報を適切に読み手に伝えるために,またページの操作性を向上させるために,ページもしくはページ間の構造を考える」過程だと言えます.レポートの作成過程に例えれば,章立てやアウトラインを考える過程です.

 インターネット上には無数のWEBページが存在していますが,適切な設計がなされたページは必ずしも多くはありません.その結果,内容がわかりにくかったり,そもそも読む気をおこさせない,といったページが氾濫しています.いくら素晴らしい企画に基づいて作成されたページであったとしても,内容が読み手に伝わらなければ意味のないページとなってしまいます.ここでは,伝えたい情報を適切に読み手に伝えることのできるページを作成するために,WEBページの設計について学びます.

 なお,今週は主にページ単体の設計について扱い,WEBサイト全体の構造を設計する作業は次週行います.

設計の概略

 WEBページは,内容が適切に伝わり,かつ使いやすくなるよう設計されなければなりません.おおまかな手順としては,以下の通りです.

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

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

 以下に,一般的なページ設計のガイドラインを提示しますので,参考にして下さい.合わせて,先週授業で利用したワークシートも参考にしてみましょう.

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

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

● 練習問題

自分で見つけたいくつかのWEBページを題材に,以上のガイドラインを確認してみましょう.

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

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