Top > Lecture > InfoDesignB2004 > 11th > visual_design
AND OR

視覚効果のデザイン

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

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

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

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

視覚効果のデザイン

グループ化

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

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

  • 見出しの前にマージンを多くとると、 「章」「節」の視覚的な配置がはっきりする
    スタイルの例:
    h2 {margin-top: 2em}
    
  • 注釈など、本文とは別のブロックに枠線やマージンを設定しておくと、 本文との区別ができる
    div.note {
      margin: 1em;
      barder: gray thin dotted;
    }
    

整列

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

  • marginやpaddingの値を統一
    スタイルの例(もっとも楽な例):
    body {margin-left: 5em}
    
  • floatを使って、左右に配置する

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

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

繰り返し

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

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

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

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

コントラスト

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

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


次へ進んでください。


}}


Attach file: fileid01.png 324 download [Information]

Reload   Diff   Front page List of pages Search Recent changes Backup Referer   Help   RSS of recent changes
Last-modified: Tue, 11 Mar 2014 02:20:22 HADT (2993d)