最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ
Post on:2012年8月20日
くっきりした大きな写真画像、イラスト、ぼんやりした写真、単色、ホワイト・ブラック、パターンやテクスチャなど、最近のウェブサイトで見かける背景のスタイルとトレンドを紹介します。

Creative Background Styles and Trends in Web Design
下記は各ポイントを意訳したものです。
良い背景とは

ウェブサイトの背景を考える際、重要なファクターがあります。
- まずコンテンツの目的を理解し、それを踏まえる。
- 背景はサイトのブランドと一致させる。
- 背景はテキストが容易に読めるよう配慮(カラーやコントラストやサイズなど)。
- 背景のテーマはサイト全体で一貫したものにする。
- 背景は素早くロードするようにし、サイトのロードを遅れさせたりラグがでないように。
背景のトレンド





洋服や髪型にもトレンドがあるように、ウェブデザインにもトレンドがあります。そして背景は特にトレンドがあります。上にあげた例のいくつかの写真やイラストの背景はシャープで分かりやすいですが、いくつかは解釈することが難しいものもあります。ソリッドな背景は人気が高く、ぼんやりとしたブラーな背景もあちこちで目にするでしょう。また、ブラックやホワイト(時代遅れな使い方ではなく)だけでなく、単一のカラーの背景で奥行きをコントロールしエレメントを目立たせるように使っているサイトもあります。そして、パターンやテクスチャもよく機能する背景で、これは最近形の大きさが変化したように思われます。パターンは大きいけれど、繊細なテクスチャのように低いコントラストのアイテムを使っています。
1. シャープなイメージ
背景にシャープで強いイメージを使うことは定番と言っていいでしょう、ポイントはどのように使用するかです。これらのイメージの多くは背景の上に写真としてではなく、それ自体が背景として機能しています。
また写真だけでなくイラストも同様に人気がある背景です。イラストのクオリティはカラーが重要です。




2. ぼんやりしたイメージ
背景にブラーやフェードといったぼんやりしたイメージを使うことは慎重を要します。もし強いイメージがあるなら、それはそのまま機能するでしょう。もちろん低画質なイメージを使うことは単に汚いだけです。目的をしっかり持ち、イメージにブラーやフェードを与えてください。




3. 単色
多くのデザイナーはコントラストと奥行きを作るときにシンプルなカラーを選びます。これは非常に機能する背景で、例えば3番目のライムグリーンとブラックとホワイトの組み合わせはとても魅力的で、素晴らしいコントラストです。




4. ホワイト or ブラック
背景にホワイトまたはブラックを使うことは定番で、この二つはとても使いやすいです。簡単にコントラストを作ることができ、常にトレンドといってよいでしょう。最近の使い方としてはホワイトやブラックの背景を使って次元をほのめかします。3番目の「Designing Monsters」では最も暗い色合いに対して少量のライトブルーのラインをタイトルの間に使い、強調を生み出しています。




5. パターンとテクスチャ
パターンの背景を使うときのポイントは大胆になることを恐れないことです。大きく繰り返すパターンは最近あらゆるところで目にします。そして、繊細なテクスチャはデザインにリアリズムを加えることができます。使用するポイントは中くらいのコントラストです。3番目のパープルの背景を見てみてください。このクロスのパターンはその繊細さに気づくためにはしっかりと見なければならないでしょう。




終わりに
背景はあなたのウェブサイトのトーンを設定することができます。最終決断をする前に写真、カラー、パターンなど異なるオプションを試してみてください。決して、一つのものだけに限定されていると思わないでください。
背景のテーマを選択するときは、あなたのコンテンツについて考え、ウェブデザインのもっとも重要なルール「文字が読み取り可能である」ことを確認してください。
sponsors