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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - 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」という新しいメディアを使って、 利用者に 「安心感」「見やすさ」「明確さ」などを提供するために、 いくつかの工夫をしてみましょう。

グループ化

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

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

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

  スタイルの例:
  h2 {margin-top: 2em}
  </pre>
  -注釈など、本文とは別のブロックに枠線やマージンを設定しておくと、
  本文との区別ができる
  #pre(novervatim){{
  div.note {
    margin: 1em;
    barder: gray thin dotted;
  }
  </pre>
  
  
  **整列 [#j128ceb2]
  ページ内の要素を、
  ある規則にしたがって整列させることで、
  まとまったデザインを提供することができます。
  -marginやpaddingの値を統一
  #pre(novervatim){{
  スタイルの例（もっとも楽な例）:
  body {margin-left: 5em}
  </pre>
  -floatを使って、左右に配置する
  
  
  ただし、次の点に注意しましょう。
  -安易に中央揃えにすると、まとまりがなく・退屈な印象をあたら得る場合がある
  -ひとつのページに、右揃え・中央揃え・左揃えが混在していると、まとまりがなくなる
  
  **繰り返し [#z3d19e9f]
  同じサイト内のページ同士で、
  統一したデザインのルールを繰り返すことで、
  一貫性や統一感が生まれます。
  
  また、どのページも同じ表現方法・操作方法なので、
  利用者は内容が理解しやすくなります。
  
  一貫性や統一感を持たせるには、次のようにしましょう。
  -同じサイトのページでは、共通したスタイルシートを利用する
  -同じサイトのページでは、要素やスタイルの指定には統一したルールを用いる
  -小見出しに使うマーク（●、■など）を統一する
  -箇条書きに使うマークや記号を統一する
  
  
  **コントラスト [#c2dab9d3]
  文字の大きさや形・色などを要素によって変えて、
  要素ごとの違いを視覚的にはっきりさせることで、
  情報の構造を明確にしたり、
  利用者の目をひきつけたりすることができます。
  
  単純に色のコントラスト（濃淡）だけでは、
  表現に限界があります。
  マージンなどの配置を使ったコントラストを使えば、
  メリハリのあるページを作ることができます。
  
  
  
  
  次へ進んでください。
  ----
  #navi2(Lecture/InfoDesignB2004/11th,prev,toc,next)