背景デザインとして、大きなイメージ写真を利用するWebページは、人気のあるテクニックのひとつです。
一度見ると忘れることのできない、インパクトのあるデザインが魅力ではないでしょうか。
海外デザインブログDesign Instructで、背景に写真を利用したWebデザインを30個まとめたエントリー「Using Photo Backgrounds in Web Design: 30 Examples」が公開されていたので、その中より印象的なデザインをピックアップしています。
ウィンドウ幅に応じて、写真サイズを変更してくれる無料プラグインなどもあるので、これを機会に作成してみてはいかがでしょう。
詳細は以下から。
背景いっぱいにイメージ写真を利用した、印象的なWebサイトデザインまとめ
画面幅に応じて、イメージ写真のサイズが変更する、レスポンシブデザインに対応したWebサイト。
実際にiPadを操作している気分にさせてくれる、ユニークなWebサイトデザイン。
iPadディスプレイをクリックすると、アプリの紹介が動画でポップアップ。
上下に動くユニークなアニメーションが印象的だった、大学の公式Webサイト。どこもオシャレです、。
紅葉した森の様子を撮影したイメージ写真と、手描き風フォントの組み合わせがゆるいWebデザイン。
neve / hawk : a creation on Neve Inspired
子供用ファッションブランドのWebデザインで、かわいい子供たちの写真がスライドされます。
落ち着いたアース色中心の色使いと、ノスタルジックなイメージ写真が印象的なアパレルブランド用Webサイト。
黄色をアクセントカラーに、スムーズなアニメーションが魅力的なパララックスエフェクトを利用しています。
ナビゲーションメニューでは、CSS3による、質感の高いスタインリグ。
左部分にナビゲーションメニューとコンテンツを固定した、ユニークなレイアウトが印象的。
コンテンツ部分はCSS3で、立体的にスタイリングされています。
SF Dok – 360° Langstrasse Zurich
Googleマップを利用することで、町中や店内の様子まで見ることができる、クリエイティブなWebデザイン。
どこかレトロな印象を与える、イメージ写真を背景に、筆記体ロゴデザインを組み合わせたWebデザイン。
コンテンツに応じて、色使いをがらりと変える、グラフィックデザインを得意としたWebサイト。
配色の参考二なりそうなので、個人的にメモとしてエントリー。
画面の両サイドに設けられた、リンクにホバーすると、背景全体の色が変化するWebサイト。
ニューヨークにある大学案内用Webサイトデザイン、流行のパララックスエフェクトを利用しています。
トップページ部分のみフルスクリーン写真を利用して、矢印ボタンでコンテンツが下に移動します。
ふわっとしたナビゲーションメニューのエフェクトも◎。
The Yacht Company – Luxury Yacht Experiences
豪華なヨットを販売しているWebサイトで、画面全体に動画アニメーションが映し出されます。
コンテンツページでは、パララックスエフェクトが適用されていますよ。
JWI Louvres – Australian Design and Crafted Louvres
読み込み時間が長いのですが、気持ちのよいアニメーションエフェクトを実装した、建築事務所のWebデザイン。
デザイン事務所での作業風景を、そのまま背景デザインに利用したWebサイトデザイン。
Photoshopアクション素材などで写真加工、編集することで、統一感が生まれます。
フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ
背景いっぱいにイメージ写真を利用したいときに、活用したいjQueryプラグインも一緒にまとめています。
[参照元 : Using Photo Backgrounds in Web Design: 30 Example – Design Instruct]
