2001年5月6日
ここではDTP的な内容の視覚度、ジャンプ率、文字構成の3原則、書体のイメージについてまとめてみました。Webページのデザインにもあてはまると思います。
視覚要素とは、文字に対しのイラストや写真などのイメージ的な表現をいいます。Webページ全体の中で視覚要素が強まると楽しく、親しみやすい印象になり、反対に文章中心になると格調高く、クールで堅い印象になります。親しみやすいWebページにはイラストや写真の割合を多くするといいですね。
※写真の視覚度はイラストに比べて一般的には低めです。
ジャンプ率とは、文字のサイズ差のことです。新聞の見出しのように大きな見出しと本文の小さい文字の組み合わせの場合はジャンプ率が高いことになります。低いジャンプ率は静か、落ち着いている、格調高い印象です。低いジャンプ率の場合は余白をたっぷりとるとさらに上品な印象を与えます。高いジャンプ率は活気がある印象を与えます。ただしWebページ全体との一体感がなくなることもありますからバランスに注意します。
Webページのレイアウト作業でイメージやタイトルの位置を決めるときには、グリッド(格子)線に沿うのが原則です。拘束すると理知的･男性的に、外すと自由きまま･女性的･活気なイメージになります。
版面率は余白量になります。余白を多く取ると上品に、版面率を下げると情報あふれる表現になります。プロのデザイナーの人は大胆に余白をとります。それに対してクライアントは「余白をもったいない」と思います。世の常です。大胆に余白を使う!! いいデザインの基本だと思います。
タイトルなど一番伝えたいこと物を大きくしたり、余白をあけることによって、すっきりさせ主役を明らかにします。また準主役は主役から離すとバランスがいいと言われています。良いデザインの見本は「ねこすず」さんのホームページだと思います。さすがプロのデザイナーさんです。
文章のレイアウトでは3つの基本組型があります。
合理的、理知的、標準的、ビジネス向き。これは通常のl>書籍などでおなじみの左に文章の書き出しが揃えられた段組のことです。
優雅、上品、格調高い。料理のメニューなどでおなじみの文章がセンタリング(中央揃え)された文章です。
ゴシック体は新鮮で理性的、明朝体は穏やか、筆文字は伝統的で保守的なイメージです。そして太文字は自信、元気、男性的で、細文字は都会的、女性的、優雅さ、繊細さをイメージします。
行と行の間隔は2/3から全角が標準。詰めすぎると下品で読みづらい、広げると間延びします。英文と比較し日本語では行間が詰まって表示されます。またMacと比較しWindowsはこの行間が詰まって表示されます。この行間を調整するにはCSSを使用します。
視覚的に重い物を下に、軽い物を上に置くと安定して落ち着いたデザインになります。逆にすれば不安定で目を引くデザインになります。
Webページで使用する色を選択するときは、色相や彩度(鮮やかさ)、明度(明るさ)を考慮します。基本的なことは
同系色でまとめたうえ、補色をアクセントとして使います。
背景色は白や黒、グレーなどの無彩色を使用します。
Webページのメディア特性を知ることも大事です。見る時間が短いWebページは細部の美しさより軽さを重視した方がいいと思います。今回勉強したのは以上の通りです。以下に当Webサイトがバラバラなのかはわかりました。まだまだ勉強が足らないです。ビジネス的なWebページにするには、イメージより写真。文字の大きさはあまり変えずに、格子状に配列、文章は左右揃えにしてゴシック体のフォントを使えばいいようですね。以上で、「Webページを作成する前に」は終了です。もし今までの中でご質問やご意見があればi@E-mailやi@BBSでお送り下さいね。
Update: Wed, Mar 31, 2004 / 9:26:24 AM