【Web制作のトレンド】トップページでぼかした写真を背景にする方法

こんにちは。先日の記事で、Webサイトやブログの背景画像を簡単に作るコツをご紹介しましたが、最近では、大きなサイズの写真をぼかしてトップページの背景にするダイナミックな手法がWebデザインのトレンドになっています。このようなデザインのメリットや作り方についてご紹介したいと思います。

まず、ぼかした写真をトップページに大きく使ったWebデザインの実例をいくつか見てみましょう。

モバイルアプリの活用シーンを想像させるように、街の写真をぼかして使用しています。背景をぼかすことで、手前にあるスマートフォンとアプリの画面がくっきりと押し出されているように見えます。効果的な使い方ですね。

こちらは、女性の写真をぼかして背景に使った例。実際のサービスの内容には関係ない写真なのかも知れませんが、ちょっとドキっとするようなインパクトで目を引きますね。

このように、真っ暗闇のなかにうっすらとシルエットが浮かぶような写真も、「この先に進むと何があるんだろう？」と強い関心を起こさせます。

そして、我らがebook5の公式サイト。背景に街を行き交う人々の姿が見え、手前にはたくさんのモバイル端末が並び、誰もが手軽にコンテンツをめくって閲覧できるWeb出版のサービスを表現しています。

さて、国内外のたくさんのサイトで採用されているこの手法、いったいどんなメリットがあるのでしょうか？

1つは、やはり最近のWebデザインのトレンドとなっている、「フラットデザイン」との相性が良いことでしょう。
余計な装飾的表現を排したシンプルなデザイン・レイアウトで、メッセージをダイレクトに伝えるフラットデザインのなかで、大きくぼかした写真はなじみやすく、適度にイメージを表現することもできます。また、キャッチフレーズなどの文字をそのまま乗せても読みやすいため、使い勝手の良い素材といえそうです。

もう1つは、マルチデバイス対応がやりやすいという点です。

こちらは、ebook5の公式サイトをiPhoneで開いたところ（上）と、iPadで開いたところ（下）。画面サイズにあわせて文字のレイアウトが自動で調整されますが、背景はそのままで、画面サイズが大きくなった分だけ広い範囲が表示されます。絵柄がぼけているので、画面から大きくはみ出てもさほど見栄えに影響がありません。

PCでブラウザで表示させて、ウインドウサイズを大きくすると、ようやく写真の全体像がつかめますね。

フラットデザインの強みの1つとして、スマートフォンからタブレット、PCまで、さまざまなデバイスの画面サイズに柔軟に適応させやすいという利点がありますが、ぼかした背景写真もまた、同様の利点があるというわけです。

それでは、ぼかした背景写真の作り方は？
これはさほど難しいテクニックではありません。試しに、ニューヨークで撮影してきたこの写真を加工して作ってみましょう。

まず、写真をPhotoshopで開きます。
（Photoshopがなくても、ぼかしエフェクトが使えるグラフィックツールがあれば大丈夫です）

[フィルター]の[ぼかし（ガウス）]を選択します。

プレビューを見ながら、ぼかし具合を調整します。

ぼかした写真ができました。試しに、文字を乗せて効果を確かめてみましょう。

もともと明るめの写真なのですが、背景がぼけているので、わりと文字が読み取りやすく、まずまずの結果になりました。
ebook5のサイトでは、この背景画像を長辺（左右）1440ピクセル程度のサイズにして使用しています。このサイズなら、モバイル端末からPCまで、ほぼカバーできるでしょう。

ただ、大きなサイズの画像はファイルサイズも大きくなり、Webブラウザでの読み込みに時間がかかってしまいます。トップページの背景の読み込みが遅いと、ユーザーに与える印象もいまいちです。

そこで、画質を落とさずにJPEG画像を軽量化してくれるサービス「JPEGmini」を使ってみましょう。

ブラウザでJPEG画像をドラッグ＆ドロップでアップロードするだけで、画質を維持しつつデータを最適化し、ファイルサイズを縮小してくれます。

今回の画像は、約110KBから94KBまで落とすことができました。マウスを動かすことで、縮小前と縮小後の画像プレビューを見比べることができるのですが、ほとんど違いが分からないレベルです。これでトップページの画像読み込みが多少は早くなるはずです。
（「JPEGmini」の有料版はさらに多機能なデスクトップアプリとなっていますので、たくさんの画像を処理したい、という方はぜひチェックしてみて下さい）

いかがでしたでしょうか？　画像の作り方自体はとてもシンプルですが、どんな写真を背景に使うか、ぼかし具合をどの程度にするかで、得られる効果はかなり変わってくるはずです。伝えたいメッセージと視覚的イメージのバランスなどを考えて、色々試していただければと思います。