2011年2月8日火曜日

ページに統一感を出す方法

スポンサーリンク

よくあるありふれた内容です。
しかし、それだけに効果が期待出来ます。

もしもページに統一感が出ないという場合には、以下の事を確認すると解決するかもしれません。


ページに統一感を出す方法


早速ですが、本題に。
ページの統一感を出すには、以下の項目に気をつけてみてください。

  • 場所ごとのフォントをそろえる
  • 行揃えを1種類にする
  • 見出しのデザインをそろえる
  • ヘッダーとフッターのデザインに関連性を持たせる
  • ワンポイントとなる画像を適宜入れ込む
  • 余白をそろえる
  • ページに使う色数を減らす
  • 背景に色やパターンを使う

以下、詳細です。

場所ごとのフォントをそろえる

場所とは見出しや本文などです。

通常であれば、CSSでpやh2に対してフォントのサイズや書体を指定していると思いますので、まず問題はないはず。

しかし、もしも本文中で無意味にフォントサイズが違ったり、多様な書体を盛り込んでしまっているのならば改善の余地ありです。

もちろん、強調部分に対してフォントに変化を与える事は問題ありません。
ただこの場合でも、強調に用いる装飾は統一するように意識するべきです。

行揃えを1種類にする

センター揃えや左や右が混在すると、読みにくいだけではなく全体がバラバラな印象になります。
出来る限り1パターンに抑えるべきです。

とはいえ、通常であれば選択の余地無く左揃えになると思いますが。

見出しのデザインをそろえる

見出しによく使われるアイコン的な画像や細かい装飾、立体感のためのシャドウなどデザイン的な部分を統一します。

見出しは本文中に繰り返し現れる装飾要素として使えるので、ここを押さえると統一感が増します。

ヘッダーとフッターのデザインに関連性を持たせる

ユーザーが最初と最後に目にする部分は、ヘッダーとフッターです。
この部分にデザイン的に同じ要素を加えれば、ページの統一感が増します。

もっとも簡単なのは、ヘッダーとフッターで同じ色を使う事です。
ラインでも何でも良いので、同じ色が見えさえすれば効果が期待出来ます。

ワンポイントとなる画像を適宜入れ込む

段落の区切りなどにサイトにあった画像を入れ込みます。

見出しのデザインと同様に、何度か繰り返して表示させる事で統一感が増します。
使いすぎるとうるさいですが、必ずしも控えめにする必要はありません。

場合によっては、『上に戻る』や『問い合わせへ』といったボタンデザインに適用しても効果的です。

余白をそろえる

見出しと本文や画像と画像の間など、要素間の余白を統一します。
余白を整理する事により、デザイン的な統一感が出るだけでなく可読性も上がります。

余白の幅を決める場合は、フォントサイズを基準にすると良いかもしれません。
文字は全ての場所に入って来る要素ですし、いろいろなサイズの基準にも使えます。

ページに使う色数を減らす

色数が増えれば統一感を損ないやすくなります。

多くの色数を扱いつつ統一感を出す事もできますが、センスとスキルが必要です。
例えうまくまとめたとしても、見る人によってはうるさく感じる事もありますので注意が必要です。

ちなみに、色数を増やしつつ統一感を出す簡単な方法があります。
それは全色に同じ色を加える方法。
例えば、全色に白を加えてパステルカラー風にするなどです。

背景に色やパターンを使う

背景は、どこまでスクロールしようとも常に見えている部分です。
背景に特徴を出せば、当然統一感が出ます。

すぐに出来るのは背景色の設定でしょう。
特に最近は白地のサイトが多いので、差別化にもつながります。
ただし考え無しに使うと本文の可読性を失いますので、工夫が必要です。

結び


思いつくままに列挙してみました。

ここまで書いておいてなんですが、統一感を出す事がいつも最善とは限りません。
むしろ統一感を出した後に、部分的に統一感を崩すべきだと思っています。

サイトのテーマや目的によって統一感を作る部分統一感を壊す部分の割合に変化をつければ、該当のサイトに適したデザインが可能になるはずです。

スポンサーリンク

0 件のコメント :

コメントを投稿