それっぽくするWebデザインの背景アイディアまとめ

Webデザインで背景に困った時のアイディア

Webデザインの背景って結構困る

私は、公私でWebサイトやアプリを作ったりするのですが、そんな時によく困るのが背景のデザインです。
主役は入れたけども、背景真っ白だと決まらない、かといって、背景に装飾を加えてしまうと画面がゴチャゴチャしすぎ…とかとか。

普段Webサイトを見る時は気にはならないのですが、いざ自分がWebデザインを組むとなると、背景をどのようにすれば良いかと悩んでしまいます…。

そこで今回は、いつか使うかもしれないWebデザインの背景のアイディアをまとめてみました。
題して「それっぽくするWebデザインの背景アイディアまとめ」です。

それっぽくするWebデザインの背景アイディアまとめ

  • あえての無地
  • シンプルに単色カラー
  • グラデーション
  • イラストレーション
  • 幾何学
  • 動画
  • パララックス
  • 3Dなどのリッチコンテンツ

あえての無地

Art Direction/Design – Sam Dallyn

Sam Dallyn氏のサイト。灰色の背景色と余白がキレイですね。

デザインにおいて「一応、画面に入れたほうが良さそうだな」という要素は、大概は蛇足になります。
どの分野のデザインでも「Simple is Best」です。Webデザインも例外ではありません。

高いデザインスキルが必要ですが、うまく背景を無地(白や灰色)で構成できると、スッキリとした印象になります。

参考サイト:
Art Direction/Design – Sam Dallyn

シンプルに単色カラー

Panic – Stories coming alive

Panic社のサイト。ビビッドなグリーンが効いています。

シンプルな構成のコーポレートサイトとかにピッタリな手法です。
キレイなタイポグラフィ。かっこいいキャッチコピー。そして、背景のコーポレートカラー。
これだけで十分に画面はシマリます!

参考サイト:
Panic – Stories coming alive

グラデーション

Impossible Bureau

ファーストビューのグラデーションがキレイです!

最近、Webサイトやアプリで多用されているグラデーション。
数行のCSSを用意すれば簡単に作れてしまうので、導入コストも低く、お手軽に背景を埋めることができます。

ただし、色数にはご注意を。2、3色でスッキリまとめるのが良いでしょう。

参考サイト:
Impossible Bureau

イラストレーション

Pleasure to Burn

なんて洗練された背景イラスト!

背景にイラストを活用すると見栄えがよくなります。
テイストを変えることで、可愛らしいサイトから厳格なサイトまで幅広い表現が可能です。
ただあまりイラスト自体が自己主張しないようにしましょう。あくまで背景なのですから。

参考サイト:
Pleasure to Burn

幾何学

PARTICLEGROUND

幾何学背景をつくるためのJSライブラリのサイトです

背景が寂しすぎる…。そんな時に有効なのが幾何学の背景です。
うるさすぎず、寂しすぎず…。程よい背景を作るのに適しています。
SVGやCanvasを利用して、実装すると良いでしょう。

参考サイト:
PARTICLEGROUND

動画

MUJI to Relax

例の人をだめにするソファのサイト

言葉や画像よりもイメージを伝えられるのが動画です。
特に全画面表示での動画背景のインパクトは凄まじいですね。

動画撮影・編集のコストが高いのが難点ですが、それさえクリアできればWebサイトに大きな魅力を持たせることができるでしょう。

参考サイト:
MUJI to Relax

パララックス

Suː5

Suː5の衛生マスクの紹介サイトです。

一昔前に隆盛を極めたパララックスですが、今でもその魅力は健在です。
パララックスのJSライブラリもたくさん登場したので、実装コストも低くなってきてますね。

注意点として、あまり多くの要素にパララックスエフェクトを加えすぎないようにしましょう。
個々の要素が独自に動きすぎると、何を見たらいいのか分からなくなりますし、視差効果もなくなってしまいます。

参考サイト:
Suː5

3Dなどのリッチコンテンツ

Paper Planes

3Dのキレイな背景には、思わず見入ってしまいます。

3DやVR・ARなど…近年はWebでできることはたくさん増えてきました。
実装の難易度とコストは高くつきますが、他のサイトにはないユニークさをサイトに吹き込むことができます。
リッチコンテンツを実装するライブラリも登場してきているので、腕に自信のある方は、挑戦してみてはいかがでしょうか。

参考サイト:
Paper Planes

まとめ

この記事のまとめ
・それっぽくするWebデザインの背景アイディアまとめ
 ・あえての無地
 ・シンプルに単色カラー
 ・グラデーション
 ・イラストレーション
 ・幾何学
 ・動画
 ・パララックス
 ・3Dなどのリッチコンテンツ

以上、「それっぽくするWebデザインの背景アイディアまとめ」でした〜。

では、また!