www.wanichan.com

Webデザインレイアウトの基本

デザインやレイアウトを統一する

まずテーマカラーを決める

Webデザインに配慮しないといけないものの一つに配色があります。カラフルな配色とは色数の多さで決められるものではありません。あまり多くの色を使うと雰囲気的に落ち着かなくなってしまいます。

まず、色を構成する要素は以下の3つです。

色相「赤」「青」「黄」などの、一般的に色を区別する色合い
彩度色の鮮やかさの度合い
(原色の赤・黄・青は彩度が高く、逆にクリーム色、肌色などは彩度が低くなります)
明度色の明るさの度合い
(最も明るい色は白で、最も暗い色は黒となります。ワインレッドや群青色などは明度の低い色になり、空色やピンク色は明度の高い色となります)

また、色や暖色と寒色、淡い色と鮮やかな色、暗い色と明るい色といった具合にグループがありますよね。

暖色系

暖かい、優しい
寒色系

冷たい、クール、理知的
鮮やかな色

硬質、アクティブ
淡い色

柔らか、優しい、軽やか
明るい色

軽やか、ポップなイメージ
暗い色

重厚、地味、落ち着き

以上をふまえて、発信したい情報にあったテーマカラーを選択します。できるだけ基本カラーは3色にとどめるようにします。3色では少なすぎる、という場合は同系色でまとめるとOKです。ほかの要素を邪魔しない色をベース色にするとよいでしょう。

とりわけ、鮮やかな赤や黄などのビビットカラーはあくまで部分的にアクセント色として使うと効果的です。

とにかく、閲覧者にとっていかにコンテンツを読みやすいものにするか配慮をしていくことが大切です。

デザイン・レイアウトを統一するために

サブページに進んだら、配色や背景色が変わっていたり、レイアウトやデザインがまったく異なってしまったりすると、サイト訪問者に違和感を与えてしまうことになります。しかし、サブページに移動しても基本的なレイアウトが統一されていると、サイト訪問者は安心してそのコンテンツを利用できます。

Webページレイアウトを簡単に統一するには、Expression Webでは「ダイナミックWebテンプレート」を利用します。ダイナミックWebテンプレートには、設定や書式のほかに、テキスト、画像、ページレイアウト、スタイル、Webページの変更可能な領域などのページ要素を含めることができます。

大まかな流れは以下のとおりです。

  1. 基本となるレイアウトを決定する
  2. Webページごとに変更したい場所(メインコンテンツエリアなど)に編集可能領域を設定する
  3. 手順2をもとにダイナミックWebテンプレートファイルを作成する
  4. そのダイナミックWebテンプレートからWebページを作成する
  5. それぞれのページの編集可能な領域にコンテンツを挿入して仕上げていく

なお、後からダイナミックWebテンプレートを編集して更新すると、すでにそのテンプレートが適用されているWebページにも、その変更内容が反映されます。

Expression Webでは、既存のWebページに後からダイナミックWebテンプレートを適用することもできます。特に、サイトのデザインを全体的に一新したい場合、ダイナミックWebテンプレートを活用することによって、効率的に作業が行えます。

次のセクション
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ