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