KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/11th/visual_design のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2004/11th/visual_design へ行く。
  • 1 (2004-12-24 (金) 02:20:10)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

視覚効果のデザイン

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

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

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

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

グループ化

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

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

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

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

  /pre>

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

    pre> div.note {

     margin: 1em;
     barder: gray thin dotted;

    }

    /pre>

整列

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

• marginやpaddingの値を統一

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

  /pre>

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

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

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

繰り返し

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

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

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

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

コントラスト

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

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

次へ進んでください。