株式会社コプロシステム

お問い合わせ

2013年8月21日

背景写真に「ぼかし効果」を巧く使ったWebデザイン事例(簡単なチュートリアル付き)

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループの石川です。

先月7月29日付のエントリーで、美しくて・フルスクリーンな写真イメージをWebサイトの背景に使用する手法が2013年のトレンドになっている ということで、いくつかの事例をまとめました。
思わず魅入ってしまう、美しく大きい写真素材を巧みに使ったフルスクリーンデザインのWebサイト・23選(2013/7/29)

背景に写真イメージを活用したデザイン手法として、フルスクリーンデザイン以外にも、「ぼかし効果(ブラーエフェクト)」を取り入れているWebサイト、最近では特に「元の素材が何なのかがわからないくらい強くぼかした写真イメージ」を取り入れているWebサイトのデザインが海外サイトを中心に増えている気がします。

これは、写真そのものの美しさ というよりも、

  • ぼかすことで新たな美しさを表現したり
  • 奥行き感を表現したり
  • そこに乗っかっている画像パーツや文字(タイポグラフィ)に読みやすさを追加したり

などの効果を出しています。

ということで今回のエントリーでは、背景の写真イメージに「ぼかし効果」を巧く使った美しいWebデザイン事例のご紹介と、それをノンデザイナーでも簡単に実践できるPhotoshopを使った"ぼかし"のやり方をご紹介します。
是非ご覧ください。

強めのぼかし

1. Toggl

Togglとはいわゆる「時間管理」をしてくれるWebサービス(無料)で、作業にかかった時間をプロジェクト単位で記録・集計・レポート化できる優れモノ。
サイト内の全ページに共通して"ぼかし背景"が使われているようです。


2. Chec

Checという海外の決済代行サービスのWebサイト。ぼかしを巧く使い、きれいなグラデーションを表現しています。


3. The Pete Design

バンコクにあるクリエイティブ会社のWebサイト。幻想的なイメージがするのは、ぼかした背景写真の上で漂うホタルのような光の影響でしょうか。


4. riverstone

riverstoneという体重管理をしてくれるアプリのWebサイト。いまの私にはもってこいのアプリなのですが、もう少し自分自身にやる気が出てからダウンロードします...。

やや強めのぼかし

5. Bastien Pean・Social Media Manager・Paris

BastienPeanという個人(?)で活動しているフランスのソーシャルメディア・マネージャーのWebサイト。トップイメージを斜めに分割、左がぼかしアリ、右がぼかしナシという思い切ったデザイン。


6. C-ROOTS

C-ROOTSという海外のマーケティング会社のWebサイト。読み込むたびに違う背景写真が表示されます。


7. OgilvyOne

ビッグデータを活用しモバイルマーケティングなど様々なサービスを提供しているOgilvyOneという会社のWebサイト。

ノーマルなぼかし

8. Starmatic

Starmaticというカメラアプリの紹介Webサイト。今回見ていて思ったのが、このようなカメラ系アプリのWebサイトがかなり多かったです。冒頭文の通り、背景写真をぼかすことで実際にスマートフォンを構えているかのような奥行き感を出したり、画像パーツや文字などの要素を際立たせたり という効果があるので、カメラアプリなどのWebサイトには活用しやすいのではないでしょうか。


9. VideoGuard

VideoGuardという自宅を24時間監視してくれるセキュリティ・システムのWebサイト。こちらは「家庭を覗くことができない」という強いセキュリティをイメージしてぼかしの効いた写真を使ったのかなと思ったけど、どうだろう。違うかな...。


10. Lauren Small

Laurenさんというヘアスタイリストの紹介Webサイト。レトロな雰囲気のデザインが印象的。ぼかしと全然関係ないコメントですが、予約の取り方が非常に分かりやすいです。

一部もしくは弱めのぼかし

11. DEGO Interactive

ラトビアにあるデジタルサービスを中心としたクリエイティブ会社のWebサイト。イメージ全体をぼかしているのではなく、左右両端にのみぼかし効果を使用しています。


12. Restaurante Couve e Flor

ブラジルにあるレストランのWebサイト。美味しそうな料理の写真を大きく、かつ、ふんだんに使用しています。TOPページで、背景写真に遠近感をつけるためにぼかし効果をうまく活用しています。

番外編

iOS7

iOS7の画面デザインもステータス画面やキーロック画面など一部ぼかし効果が反映されたデザインがあるようです。Webサイトではないのですが、一応番外ということで紹介させていただきました。
公式動画は↓こちらから。

ノンデザイナーでも今すぐできる!Photoshopを使って5秒でできる"ぼかし"テクニック

事例を並べるだけではつまらないので、Photoshopを使って簡単にできる"ぼかし"のテクニックをご紹介します。
(下記説明では、Photoshop CS5を使用しています。)

ステップ1:フィルタ「ぼかし(ガウス)」を選択

ステップ2:適用する半径を選択

以上!です。
適用する半径の調整具合によって下記のように変化しますので、いろいろ試してみてください。

(強めのぼかし)

(ノーマルなぼかし)

(弱めのぼかし)


是非参考にしてみてください◎

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP