KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/11th/visual_design

視覚効果のデザイン

Webページの制作者にとって、 内容がどれだけ正確に伝わるか、 どれだけの分量の内容を読んでもらえるか、というのは 非常に気になるところです。

「紙」を媒体とするメディアには、 長い年月に培われた、さまざまな工夫がされています。

• 「雑誌」「新聞」...段組、見出し
• 「書籍」「辞書」...「はじめに」「この本の使い方」

「Web」という新しいメディアを使って、 利用者に 「安心感」「見やすさ」「明確さ」などを提供するために、 いくつかの工夫をしてみましょう。

グループ化

関連する情報を、グループにしてまとめておくことで、 情報の繋がり具合や関係を明確にできます。

たとえば、次のような工夫が考えられます。

• 見出しの前にマージンを多くとると、 「章」「節」の視覚的な配置がはっきりする

  スタイルの例:
  h2 {margin-top: 2em}
  

• 注釈など、本文とは別のブロックに枠線やマージンを設定しておくと、 本文との区別ができる

  div.note {
    margin: 1em;
    barder: gray thin dotted;
  }
  

整列

ページ内の要素を、 ある規則にしたがって整列させることで、 まとまったデザインを提供することができます。

• marginやpaddingの値を統一

  スタイルの例（もっとも楽な例）:
  body {margin-left: 5em}
  

• floatを使って、左右に配置する

ただし、次の点に注意しましょう。

• 安易に中央揃えにすると、まとまりがなく・退屈な印象をあたら得る場合がある
• ひとつのページに、右揃え・中央揃え・左揃えが混在していると、まとまりがなくなる

繰り返し

同じサイト内のページ同士で、 統一したデザインのルールを繰り返すことで、 一貫性や統一感が生まれます。

また、どのページも同じ表現方法・操作方法なので、 利用者は内容が理解しやすくなります。

一貫性や統一感を持たせるには、次のようにしましょう。

• 同じサイトのページでは、共通したスタイルシートを利用する
• 同じサイトのページでは、要素やスタイルの指定には統一したルールを用いる
• 小見出しに使うマーク（●、■など）を統一する
• 箇条書きに使うマークや記号を統一する

コントラスト

文字の大きさや形・色などを要素によって変えて、 要素ごとの違いを視覚的にはっきりさせることで、 情報の構造を明確にしたり、 利用者の目をひきつけたりすることができます。

単純に色のコントラスト（濃淡）だけでは、 表現に限界があります。 マージンなどの配置を使ったコントラストを使えば、 メリハリのあるページを作ることができます。

次へ進んでください。

}}