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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - 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ページの制作者にとって、 内容がどれだけ正確に伝わるか、 どれだけの分量の内容を読んでもらえるか、というのは 非常に気になるところです。

利用者への 「安心感」「見やすさ」「明確さ」などを提供するために、 いくつかの工夫をしてみましょう。

グループ化

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

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

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

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

  /pre>

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

    pre> スタイルの例: div.note {

     margin: 1em;
     padding: 1em;
     barder: gray thin dotted;

    }

    /pre>

整列

繰り返し

コントラスト