イメージ写真を背景に使った、クリエイティブなWebデザイン30個まとめ

05_background_photos_webdesign_goliathsports

 

背景デザインとして、大きなイメージ写真を利用するWebページは、人気のあるテクニックのひとつです。

一度見ると忘れることのできない、インパクトのあるデザインが魅力ではないでしょうか。

 

 

海外デザインブログDesign Instructで、背景に写真を利用したWebデザインを30個まとめたエントリー「Using Photo Backgrounds in Web Design: 30 Examples」が公開されていたので、その中より印象的なデザインをピックアップしています。

 

 

 

ウィンドウ幅に応じて、写真サイズを変更してくれる無料プラグインなどもあるので、これを機会に作成してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

背景いっぱいにイメージ写真を利用した、印象的なWebサイトデザインまとめ

 

The Great Discontent TGD

画面幅に応じて、イメージ写真のサイズが変更する、レスポンシブデザインに対応したWebサイト。

06_background_photos_webdesign_greatdiscontent

 

 

 

FiftyThree

実際にiPadを操作している気分にさせてくれる、ユニークなWebサイトデザイン。

iPadディスプレイをクリックすると、アプリの紹介が動画でポップアップ。

01_background_photos_webdesign_fiftythree

 

 

 

Discover uOttawa

上下に動くユニークなアニメーションが印象的だった、大学の公式Webサイト。どこもオシャレです、。

25_background_photos_webdesign_discoveruottawa

 

 

 

Kolonien

紅葉した森の様子を撮影したイメージ写真と、手描き風フォントの組み合わせがゆるいWebデザイン。

28_background_photos_webdesign_kolonien

 

 

 

neve / hawk : a creation on Neve Inspired

子供用ファッションブランドのWebデザインで、かわいい子供たちの写真がスライドされます。

17_background_photos_webdesign_nevehawk

 

 

 

Spring/Summer

落ち着いたアース色中心の色使いと、ノスタルジックなイメージ写真が印象的なアパレルブランド用Webサイト。

15_background_photos_webdesign_springsummer

 

 

 

Sullivan NYC

黄色をアクセントカラーに、スムーズなアニメーションが魅力的なパララックスエフェクトを利用しています。

ナビゲーションメニューでは、CSS3による、質感の高いスタインリグ。

08_background_photos_webdesign_sullivan

 

 

 

Shelton Fleming

左部分にナビゲーションメニューとコンテンツを固定した、ユニークなレイアウトが印象的。

コンテンツ部分はCSS3で、立体的にスタイリングされています。

11_background_photos_webdesign_sheltonfleming

 

 

 

SF Dok – 360° Langstrasse Zurich

Googleマップを利用することで、町中や店内の様子まで見ることができる、クリエイティブなWebデザイン。

16_background_photos_webdesign_360langstrasse

 

 

 

Friendly Gents

どこかレトロな印象を与える、イメージ写真を背景に、筆記体ロゴデザインを組み合わせたWebデザイン。

23_background_photos_webdesign_friendlygents

 

 

 

We are Royale

コンテンツに応じて、色使いをがらりと変える、グラフィックデザインを得意としたWebサイト。

配色の参考二なりそうなので、個人的にメモとしてエントリー。

18_background_photos_webdesign_royale

 

 

 

Foreign Policy Design Group

画面の両サイドに設けられた、リンクにホバーすると、背景全体の色が変化するWebサイト。

09_background_photos_webdesign_foreighpolicy

 

 

 

St. John’s

ニューヨークにある大学案内用Webサイトデザイン、流行のパララックスエフェクトを利用しています。

12_background_photos_webdesign_stjohns

 

 

 

Whiteboard

トップページ部分のみフルスクリーン写真を利用して、矢印ボタンでコンテンツが下に移動します。

ふわっとしたナビゲーションメニューのエフェクトも◎。

02_background_photos_webdesign_whiteboard

 

 

 

The Yacht Company – Luxury Yacht Experiences

豪華なヨットを販売しているWebサイトで、画面全体に動画アニメーションが映し出されます。

コンテンツページでは、パララックスエフェクトが適用されていますよ。

07_background_photos_webdesign_yco

 

 

 

JWI Louvres – Australian Design and Crafted Louvres

読み込み時間が長いのですが、気持ちのよいアニメーションエフェクトを実装した、建築事務所のWebデザイン。

10_background_photos_webdesign_jwilouvres

 

 

 

Encandle

デザイン事務所での作業風景を、そのまま背景デザインに利用したWebサイトデザイン。

Photoshopアクション素材などで写真加工、編集することで、統一感が生まれます。

24_background_photos_webdesign_encandle

 

 

 

フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ

背景いっぱいにイメージ写真を利用したいときに、活用したいjQueryプラグインも一緒にまとめています。

18.websites-with-big-background-images

 

[参照元 : Using Photo Backgrounds in Web Design: 30 Example – Design Instruct]