最近のウェブサイトで見かける背景のスタイルとトレンドのまとめ

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

サイトのキャプチャ

Creative Background Styles and Trends in Web Design

下記は各ポイントを意訳したものです。

良い背景とは

サイトのキャプチャ

Campanio Golf Club

ウェブサイトの背景を考える際、重要なファクターがあります。

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

背景のトレンド

サイトのキャプチャ

Daniel Filler

サイトのキャプチャ

Hipstamatic

サイトのキャプチャ

These Are Things

サイトのキャプチャ

HS Augsburg

サイトのキャプチャ

Hannah & Jeremiah

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

1. シャープなイメージ

背景にシャープで強いイメージを使うことは定番と言っていいでしょう、ポイントはどのように使用するかです。これらのイメージの多くは背景の上に写真としてではなく、それ自体が背景として機能しています。
また写真だけでなくイラストも同様に人気がある背景です。イラストのクオリティはカラーが重要です。

サイトのキャプチャ

Rorry McIlroy

サイトのキャプチャ

south & eleven

サイトのキャプチャ

Kassandra Bay

サイトのキャプチャ

Nerval

2. ぼんやりしたイメージ

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

サイトのキャプチャ

Humaan

サイトのキャプチャ

VANMOOF

サイトのキャプチャ

GIVERS

サイトのキャプチャ

WeMake Portland

3. 単色

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

サイトのキャプチャ

Tim Potter

サイトのキャプチャ

Inception Explained

サイトのキャプチャ

Mediumrare

サイトのキャプチャ

Teacake Design

4. ホワイト or ブラック

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

サイトのキャプチャ

Foundry Collective

サイトのキャプチャ

Chris Linden

サイトのキャプチャ

Designing Monsters

サイトのキャプチャ

Adam Elmakias

5. パターンとテクスチャ

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

サイトのキャプチャ

HOUCHBURG

サイトのキャプチャ

Tiny Big Studio

サイトのキャプチャ

Alfred App

サイトのキャプチャ

HDLive 2012

終わりに

背景はあなたのウェブサイトのトーンを設定することができます。最終決断をする前に写真、カラー、パターンなど異なるオプションを試してみてください。決して、一つのものだけに限定されていると思わないでください。

背景のテーマを選択するときは、あなたのコンテンツについて考え、ウェブデザインのもっとも重要なルール「文字が読み取り可能である」ことを確認してください。

top of page

©2017 coliss