*視覚効果のデザイン [#l59de843] Webページの制作者にとって、 内容がどれだけ正確に伝わるか、 どれだけの分量の内容を読んでもらえるか、というのは 非常に気になるところです。 利用者への 「安心感」「見やすさ」「明確さ」などを提供するために、 「''紙''」を媒体とするメディアには、 長い年月に培われた、さまざまな工夫がされています。 -「雑誌」「新聞」...段組、見出し -「書籍」「辞書」...「はじめに」「この本の使い方」 「''Web''」という新しいメディアを使って、 ''利用者に'' ''「安心感」「見やすさ」「明確さ」などを提供する''ために、 いくつかの工夫をしてみましょう。 #ref(id01.png,nolink,視覚効果のデザイン) **グループ化 [#adb77fed] 関連する情報を、グループにしてまとめておくことで、 情報の繋がり具合や関係を明確にできます。 たとえば、次のような工夫が考えられます。 -見出しの前にマージンを多くとると、 「章」「節」の視覚的な配置がはっきりする <pre> #pre(novervatim){{ スタイルの例: h2 {margin-top: 2em} </pre> }} -注釈など、本文とは別のブロックに枠線やマージンを設定しておくと、 本文との区別ができる <pre> スタイルの例: #pre(novervatim){{ div.note { margin: 1em; padding: 1em; barder: gray thin dotted; } </pre> }} **整列 [#j128ceb2] ページ内の要素を、 ある規則にしたがって整列させることで、 まとまったデザインを提供することができます。 -marginやpaddingの値を統一 #pre(novervatim){{ スタイルの例(もっとも楽な例): body {margin-left: 5em} }} -floatを使って、左右に配置する ただし、次の点に注意しましょう。 -安易に中央揃えにすると、まとまりがなく・退屈な印象をあたら得る場合がある -ひとつのページに、右揃え・中央揃え・左揃えが混在していると、まとまりがなくなる **繰り返し [#z3d19e9f] 同じサイト内のページ同士で、 統一したデザインのルールを繰り返すことで、 一貫性や統一感が生まれます。 また、どのページも同じ表現方法・操作方法なので、 利用者は内容が理解しやすくなります。 一貫性や統一感を持たせるには、次のようにしましょう。 -同じサイトのページでは、共通したスタイルシートを利用する -同じサイトのページでは、要素やスタイルの指定には統一したルールを用いる -小見出しに使うマーク(●、■など)を統一する -箇条書きに使うマークや記号を統一する **コントラスト [#c2dab9d3] 文字の大きさや形・色などを要素によって変えて、 要素ごとの違いを視覚的にはっきりさせることで、 情報の構造を明確にしたり、 利用者の目をひきつけたりすることができます。 単純に色のコントラスト(濃淡)だけでは、 表現に限界があります。 マージンなどの配置を使ったコントラストを使えば、 メリハリのあるページを作ることができます。 &br; &navi2(Lecture/InfoDesignB2004/11th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/11th,prev,toc,next) }} |