ウェブデザインにおける効果的な背景の使い方
Post on:2009年4月14日
sponsors
ウェブデザインにおける効果的な背景の使い方をSmashing Magazineから紹介します。
Backgrounds In Web Design: Examples And Best Practices
以下、その意訳です。
ウェブデザインのスタイルは常に進化しており、大きな変化の一つに背景の使い方があります。
背景の重要な役割は、ウェブサイトへの興味を視覚的にひきつけることです。
背景はウェブサイトのテーマを支えるものであり、あらゆる可能性を考慮し設計を行う必要があります。
ここではウェブデザインの最近のトレンドをふまえた、背景のベストプラクティスを紹介します。
1. The Basic Background Structures
良い背景を設計する際に、背景の基本構造を知る必要があります。
Body Background
bodyの背景は、昔から使用されている背景です。
主にイメージ、イラスト、テクスチャ、パターンなどを使用します。
Content Background
コンテンツの背景は、別のレベルの背景です。
これはテキスト、イメージ、データやインフォメーションを効果的に見せるために使用します。
1-1. Content and Body Background Layered
最初の構造は、複数のレイヤを持つ背景です。一番下にbodyの背景があり、コンテンツの背景をその上に重ねていきます。
レイヤを重ねるアプローチとして、よく使用されるスタイルの一つです。大きなイメージの背景を使い、コンテンツの背景をその上に重ねていきます。
主要なコンテンツにはソリッドな背景を使い、タイトルなどには半透明の背景を使用しています。
このウェブサイトは、コンテンツのエレメントが互いに離れているレイアウトになっています。
ここで使用されている複数のレイヤの背景構造は一般的なものです。コンテンツには横幅を指定した背景があり、その幅をこえた箇所には一番下に配置した背景が見えています。
1-2. Content Directly on Body Illustration or Texture
次の構造的なテクニックは、背景の上に直接コンテンツを設置するものです。主にbodyの背景がイラスト、テクスチャ、イメージの場合に使用されます。
このテクニックを使用するには、カラーバランスに細心の注意を払って、慎重に設計する必要があります。背景とテキストのコントラストを充分にとり、リーダビリティ・スキャナビリティに気をつけてください。
このウェブサイトでは、イラストを使った背景の上に直接、コンテンツやテキストやイメージを配置しています。テキストの色はホワイト、背景の色はブルーを使用し充分なコントラストをもち、読みやすいです。イメージは境界を強調し、背景から分離しているように配置しています。
1-3. The Body and Content Background as One
最もシンプルで基本的な構造は、bodyの背景をコンテンツの背景としているものです。これは通常、1色かごく少ない色数を使用します。
このウェブサイトは、1色の背景を使用した構造です。
2. Wrapper/Header Backgrounds
ウェブサイトには、優れたデザインの背景を設置する場所がたくさんあります。その場所の2つがヘッダとラッパーです。
ヘッダとラッパーに背景を使用する際のポイントを紹介します。
2-1. Standard Header Background
ヘッダの背景に、イラスト、イメージ、テクスチャなどを使用します。これは重要な内容を遮らないで、ウェブサイトを鮮やかにする簡単な方法です。
境は滑らかに
独立したヘッダをデザインする時、その境のデザインは丁寧にする必要があります。ヘッダとコンテンツの背景の色やスタイルにコントラストを使ってもよいでしょう。また、ハーモニーを持たせることも効果的です。
このウェブサイトでは、ヘッダの背景がコンテンツに見事に溶けこんでいます。急激に変わるのではなく、フェードを使用しています。
Function Web Design & Development
このウェブサイトはしだいに変化する効果とは異なるアプローチですが、同じような効果をだしています。大きな使用されていないスペースを無意味かと思うかもしれませんが、それはナビゲーションとコンテンツを区分けするのに大きな効果を与えています。
2-2. Flowing Illustrated Wrappers
イラストやグラフィカルな背景を使用することは、ウェブサイトにパーソナリティを持たせる非常に良いテクニックです。
グラフィックの端はbodyの色に
イラストやグラフィカルな背景からプレーンな背景への移行箇所は重要です。bodyの背景色は、グラフィックの接点と同じ色にします。
他のデザインと矛盾させない
ウェブデザインでは一貫性は重要なポイントです。背景のイラストを制作するときは、ウェブサイトの他の箇所と同じスタイルで行い、カラーパレットも同系統のものを使用します。
タイポグラフィやボーダーなどのエレメントに手書きのスタイルを使用しており、イラストも同様に手書きのスタイルを使用しています。
コンテンツエリアにグラフィックを流し込む
グラフィックをコンテンツの後ろに配置するだけでは、レイアウトにスムーズさが生まれません。しかし、イラストの一部分をコンテンツに重ねるとスムーズなレイアウトになります。
レイアウトを利用してグラフィックを拡張
グラフィックを背景の全体に配置します。
このサイトでは、下にもイラストが配置されています。ページを通じて、テーマを持たす効果があります。
3. Full Body Backgrounds
背景をbodyでフルに使用する際、いっそう慎重になる必要があります。背景のビジュアルを拡張するためのテクニックがいくつかあります。
コンテンツを差し引かない
背景を設計するとき、美しい背景がコンテンツをダメにしないようにします。
背景のコントラストとコンテンツのエレメントに注意してください。背景があまりにも不釣り合いな場合、コンテンツは良いものには見えません。
分離にはハイライトやベベルを
背景やエレメントを異なる色で分離する際には、ハイライト（基本的にはベベル）を使用します。
上の例では、背景の色が変わる境で、繊細なハイライトが使用されています。
同じサイトの例です。
一番上のラッパーの背景の色は、一番下のラッパーの色より暗いです。そして、このラッパーの間には２つのラインがあります。上は暗い色で、下は明るい色です。ベベルを使用するとすっきりと見せることができます。
ベベルはわずかなコントラストをつける素晴らしいテクニックです。もしベベルを暗い背景で使用する場合は、ハイライトを使用します。ハイライトは高いコントラストをもった色の場合に適しています。使い方はベベルと同じように1pxのラインで使用します。
同じサイトの上部です。
上部の明るいグレーとグリーンを分離するのにホワイトの1pxのライン、グリーンと暗いグレーを分離するのには明るいグリーンの1pxのラインを使用しています。
パララックス効果
たいていのウェブサイトでは、複数のレイヤ状態ではない背景を使用するでしょう。このテクニックは手間のかかるものですが、面白い効果を得ることができます。
このサイトは、空と地上のグラフィックでパララックス効果を使用しています。またブラウザのサイズを変更した際にも空や雲は動きますが、地上は動きません。
このサイトは3つのレイヤを持ち、パララックス効果を生み出しています。奥行きを感じるデザインが効果的です。
低いコントラストのパターンやテクスチャ
非常に繊細なテクスチャはデザインにディテールを加えます。コントラストの低いパターンは、ユーザーの気をそらすことなく、ウェブサイトを魅力的なものにします。
繊細なパターンが繰り返されて、背景に使用されています。使用している色はコントロールされたものとなっています。
わずかなコントラストをもったパターンを使用しています。こういったテクスチャはユーザーを引き込むのに役立つビジュアルを提供する効果があります。
テクスチャとイラストの一体化
若干のウェブサイトでは、テクスチャとイラストをどちらか一つだけ使用します。しかし、なぜそのテクニックを一体化して使用しないのでしょうか？
二つを一体化させることで、ユニークなビジュアルを提供することができます。
イラストと木のテクスチャをミックスさせています。イラストと木のテクスチャは微妙にコントラストが異なります。
ディメンション効果
照明やイラストを使用して、ディメンション効果を加えます。これはビジュアルを拡張し、印象深いものにします。
美しい3Dの照明効果を使用しています。ディメンションは背景や全てのエレメントで魅力的にみえ、ユーザーの注意をつかみます。
4. Create Seamless Tiles or Repeat Backgrounds
良い背景を作成する最も簡単な方法は、画像を繰り返して使用することです。これは大きなイメージを必要としません。しかし、繰り返しの背景を作成するときに、大切なポイントがあります。
大きいイメージを繰り返す
本当に良い背景を作成するには、大きい画像を使用するべきです。このウェブサイトでは背景画像のサイズは約1000pxで、それを繰り返して使用しています。
境をきれいに
何よりも重要なことは、画像の境がきれいにつながることです。両端は正確に同じ色で、形は正確につながらなくてなりません。
使用している背景画像を縮小したものです。
水面も雲も、微妙なグラデーションも全て左右の境が一致しています。
目立つオブジェクトは削除
繰り返しの背景を使用する際、オブジェクトが目立って繰り返しているなら、それは削除してください。背景のイメージが、滑らかで途切れない１つのイメージにしたい時には注意を払うポイントです。画像が大きいほど、この目立つオブジェクトを見つけるのが難しいです。
グラフィックは一つのセクションに設置
繰り返すイメージをマスクするもう一つの方法は、背景を一つのセクションに設置することです。
同じサイトの上部を拡大したキャプチャです。
この島のイメージは繰り返しては使用されません。これは重要なポイントで、背景が繰り返して使用されていることになかなか気づくことができません。
5. Content/Wrapper Background Techniques
コンテンツの背景には、繊細なものを使用しないとコンテンツを台無しにしてしまうことがあります。
5-1. シンプルなグラデーション
グラデーションを正しく使用すると、退屈なデザインを活気つかせることができます。
上の例の背景でグラデーションが無い場合を想像してみてください。それは非常に退屈なものになってしまいます。
このようなシンプルなグラデーションは非常に効果があります。
5-2. 繊細なテクスチャ
テクスチャを使用するのも効果的な背景のテクニックの一つです。テクスチャを使用することはウェブサイトのテーマを補強することができます。ただし、過度なものを使用しないでください。テキストが読みやすいよう繊細なテクスチャを使用します。
コンテンツの背景はbodyに似たテクスチャですが、よりざらついていないテクスチャを使用しています。
5-3. 背景にフェード
これは単純なテクニックですが、正しく使用すると非常に効果的なものになります。
ラッパーの背景がbodyの背景の上に配置されており、下にいくにつれ薄くなり、bodyの背景と一体化しています。
5-4. ボーダーのスタイル
ラッパーのボーダーと端をbodyの背景を一貫したスタイルにします。
コンテンツの端にbodyの背景と同じスタイルをもったテクスチャとパターンを使用しています。
5-5. 半透明なレイヤ
背景に半透明のレイヤを使用します。その際、背景とテキストのコントラストは充分にとってください。また、背景を透明にしすぎないようにします。
上の例の透明度は完璧です。下にあるグラフィックは充分に見ることができ、テキストも読みやすいものとなっています。
sponsors
