大きな背景画像を使った魅力的なWebサイトを作ろう

2014年9月9日
CSS, Webデザイン

以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！

↑私が10年以上利用している会計ソフト！

背景に大きな画像を使うメリット・デメリット

大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。

しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかってしまう点。また、複雑な写真の上にテキストを配置してしまうと、読みづらくユーザーの集中力を妨げてしまいます。

これらのデメリットを解決するためにはどうすればいいのか、一緒に考えてみましょう！

デザインのポイント

写真の上にテキストを配置するため、位置に気をつけないとテキストが非常に読みづらくなってしまいます。より読みやすく、美しくデザインするためのポイントをいくつか抑えておきましょう。

1. 写真の余白を活かした配置に

やみくもにテキストを配置するのではなく、まずは使用する写真素材にある余白に注目しましょう。

テキストを画面中央においた画像
写真に余白があるにも関わらず、ど真ん中にテキストを置いてしまっては、せっかくの写真も文章も台無しです。

テキストを余白に配置した画像
余白にテキストを置いて可読性アップ。全体的にスッキリとした印象になりました。

余白のない画像
余白が少ない場合は、写真をトリミングして余白を作るのもひとつの手です。右上の画像では主題となる猫ちゃんが真ん中にあるため、テキストを配置するスペースがあまりありません。

トリミングをして余白を作った画像
主題を少しずらしてトリミングするだけで、余白も確保でき、バランスのとれた画面を構成できます。

2. コントラストをつける

コントラストのついていない画像に白い文字を配置
では余白がない写真を使う場合はどうすればいいのでしょうか？上の画像のようにとりあえずテキストを置いてみましたが、どうも読みづらいですね…。そこでコントラストをつけて解決しましょう！

画像に半透明の黒を重ねて、全体を暗くしました。白いテキストが引き立っています。

デザインによっては黒以外の色を重ねても効果的。WinShape Campsのサイトではカラフルなグラデーションを重ねています。

写真全体ではなく、一部にグラデーションをかけてテキストを読みやすくしてもOK。この例では右から中央にかけて黒のグラデーションを重ねて文字を引き立てています。

3. 画像を軽くぼかす

チョコレートの上にテキストを配置
画像の明度を変えたくない…という時は、ぼかしのテクニックを採用しましょう。この技法は昨年あたりから徐々に増えてきましたね。例えば上の画像では背景がごちゃごちゃしていてテキストが読みづらいです。

少しぼかした画像にテキストを配置
その背景画像にぼかしをいれるだけで可読性が充分向上します。

OgilvyOneのサイトでは背景の女性の画像にぼかしを入れ、その上にテキストを配置しています。ぼかしているものの、それが女性であることは分かりますね。デザインにあわせて、ぼかしの強度を調整しましょう。

コーディングテクニック

1. 画面いっぱいに背景画像を表示する方法

CSSの background-size プロパティーを使って背景画像を画面いっぱいに表示できます。JavaScript等を使わなくてもOK！レスポンシブにも対応できます。background-size は以下の値を指定できます。

auto（初期値）
長さを指定
割合（％）を指定
cover
contain

この中で cover や contain を使った表示方法を簡単に解説します。

background-size: cover;

cover
画像の縦横比を保持したまま、表示領域をうめつくすように背景画像を表示できます。表示領域より画像が大きい場合は見切れます。

background-size: contain;

contain
画像の縦横比を保持したまま、画像がすべて表示されるように表示できます。表示領域の方が画像より大きい場合は余白ができます。

表示領域の大きさや縦横比を考えながら背景画像を作成すると、どのデバイスにも対応できるように表示できるでしょう。特に上記 cover や contain、割合（％）を使った指定はレスポンシブ対応にも使える値なので、ぜひ使いこなしてください！

2. テキストを上下左右真ん中に置く方法

Frogのホームページでは、CSSの position と transform を使った、要素を上下左右真ん中に配置する方法を採用しています。幅や高さを変更しても常に中央に表示されるので、大きな背景画像を使う時に重宝しそうなコードです。

HTML

<div class="wrapper">
  <div class="inside">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>In eu consectetur augue. Suspendisse blandit sodales nisi...</p>
  </div>
</div>

CSS

.wrapper {
  position: relative;
  height: 400px;
}
.inside {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}