KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/11th/visual_design の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/11th/visual_design へ行く。

*視覚効果のデザイン [#l59de843]

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

「''紙''」を媒体とするメディアには、
長い年月に培われた、さまざまな工夫がされています。
-「雑誌」「新聞」...段組、見出し
-「書籍」「辞書」...「はじめに」「この本の使い方」

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

#ref(id01.png,nolink,視覚効果のデザイン)

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

たとえば、次のような工夫が考えられます。
-見出しの前にマージンを多くとると、
「章」「節」の視覚的な配置がはっきりする
#pre(novervatim){{
スタイルの例:
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]
文字の大きさや形・色などを要素によって変えて、
要素ごとの違いを視覚的にはっきりさせることで、
情報の構造を明確にしたり、
利用者の目をひきつけたりすることができます。

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


&br;
&navi2(Lecture/InfoDesignB2004/11th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2004/11th,prev,toc,next)

}}