インパクト大、フルスクリーン写真を使ったウェブデザイン35個まとめ

50photo_bg_top

 

背景全体にイメージ写真を使ったサイトを、最近見かけるようになりました。

 

利用されているジャンル、業種はさまざまで、商品やプロジェクト、ウェブサービス、メンバーなどの紹介から、企業用公式サイトとして利用されているケースもあるようです。ユーザーにより効果的に、コンテンツを魅せることができ、ビジュアル的なインパクトあります。

 

 

海外デザインブログSplashnology.comで、クリエイティブな色使いとアイデアが詰まった、ウェブデザイン35個をまとめたエントリー「35 Websites with Full Size Photo Backgrounds」が公開されていたので、今回はご紹介します。

 

 

パララックスエフェクトなどの仕掛けや、アニメーションなどが実装されているサイトが多く、いつもと違ったワクワク感を演出してくれます。

 

 

 

詳細は以下から。

 

 

 

ビジュアルをたのしむ、フルスクリーン写真を使ったウェブサイトまとめ

 

Cropp

アパレルブランドの公式サイトで、シーズンごとの商品をまとめたルックブックなども一緒に公開されており、矢印キーでの操作が可能。

CROPP

 

 

 

Regenerate Music Co.

音楽事務所の公式サイトで、さすが迫力のあるイメージ写真を利用した、視覚的にもたのしいウェブサイト。

09_photobackground_website_inspiration_regenerate

 

 

 

Beatbox Academy

トップページでは、キーボード操作によるビートボックスを楽しむことができ、クールなグラフィックデザインを多用した、パララックスエフェクトも目玉。

12_photobackground_website_inspiration_beatboxacademy

 

 

 

Studio Dim

映画を得意としたデザイン事務所で、圧倒的なグラフィック写真の美しさを表現したウェブサイト。

Studio_dim

 

 

 

The Paper Mill

ぼかしエフェクトを加えた、フルスクリーン写真と、縦長なフォントの組み合わせがオシャレなWebサイト。

26_photobackground_website_inspiration_thepapermill

 

 

 

The After Bedtime Sessions

アメリカで活動するバンドの、イベント情報やギャラリーなどを、まとめた公式サイトで、ぼんやりと浮かびあがるヘッダーは、タイトルともあっています。

10_photobackground_website_inspiration_afterbedtime

 

 

 

Au Petit Panisse

フランスにある、味わい深いレストランの公式サイト。レストランの営業時間やメニューなど、飲食店向けデザイントレンドを盛り込んだ内容となっています。

Au_Petit_Panisse

 

 

 

Seed Spot

フルスクリーン写真を使った、企業サイト制作時の参考になりそうな、動きなどの見た目だけでなく、必要記載事項をすっきりまとめたデザイン。

21_photobackground_website_inspiration_seedspot

 

 

 

Life & Thyme

快適なライフスタイルを求める新感覚メディアサイトのひとつで、コンテンツごとの境目に、ぼかしエフェクトを加えた、ユニークなレイアウトが◎。

32_photobackground_website_inspiration_lifethyme

 

 

 

Le Singe Fume Sa Cigarette

パーカーを着たチンパンジーの周りに、飛び散った煙草が、スクロールと一緒に変化する、ユニークな仕掛けが素敵。

Le_Singe_Fume

 

 

 

Range Rover Evoque Special Edtion with Victoria Beckham

車の紹介ページで、スクロールするごとにコンテンツが切り替わる、パララックスエフェクトを用いたサイト。

Range_Rover_Evoque

 

 

 

Studio Airport

見出しタイトル文と、ピクトグラムアイコンのみレイアウトされた、フルスクリーン写真を最大限に活かしたデザインサイト。

15_photobackground_website_inspiration_studioairport

 

 

 

Perspectif

シングルページ完結型レイアウトで、コンテンツごとに背景イメージを切り替えることで、ユーザーは視覚的にたのしむことができます。

perspectif

 

 

 

Mes Etats Nordiques

背景で動画を流しながら、必要なコンテンツを半透明ポップアップで表示する、ユニークなレイアウト。

Mes_Etas_Nordiques

 

 

 

Colossal Media

ニューヨークにあるメディア事務所で、これまでの制作実績を、フルスクリーンスライドで紹介しています。

30_photobackground_website_inspiration_colossalmedia

 

 

 

Welikesmall

コンテンツ切り替え用サムネイルに、動画を利用したりと、ユニークな仕掛けが満載の、ダイナミックなウェブサイト。

17_photobackground_website_inspiration_welikesmall

 

 

 

Locals Apparel

ニット帽など製作、販売しているアパレルブランドで、作業風景をモノクロ写真で納め、トップ画像として利用。

14_photobackground_website_inspiration_localsapparel

 

 

 

Cappellos

手作りパスタを販売しているショッピングサイトで、モノクロカラーをテーマにした、落ち着いた印象を与えてくれます。

39_photobackground_website_inspiration_cappellos

 

 

 

Helen Tsanos Sheinman

ひとりの料理家の生い立ちなどを書き記した、自伝的ウェブサイト。ポートフォリオサイトのアイデアにも良いかもしれません。

31_photobackground_website_inspiration_helentsanos

 

 

 

Planet Propaganda

画面中央のロゴ全体が、ナビゲーションメニューとなっており、コンテンツが自動的に切り替わるエフェクトが実装。

06_photobackground_website_inspiration_planetpropaganda

 

 

 

The Yield Picnic Bag

バッグにも、ピクニットシートにもなるアイデア商品の紹介、販売を行っているウェブサイト。

33_photobackground_website_inspiration_yield

 

 

 

Tornobambino

余白スペースをたっぷり使い、グリッドレイアウトで整列された、はじめてのユーザーにも分かりやすいレイアウトが魅力的。

Tornobambino

 

 

 

Design Week Portland

デザインカンファレンスの告知ページとなっており、コンテンツごとに色分けした、分かりやすさも考慮したサイトデザイン。

07_photobackground_website_inspiration_designweekportland

 

 

自分だけの作品集、ポートフォリオに使えるWordPressテンプレート30個まとめ

WordPressテンプレートは、シンプルにサイト制作を進めることができます。テーマ素材の利用も、考えてみてはいかがでしょう。

scrn-preview.__large_preview

 

 

サムネイル@ :  VLNC Collective – Idea Makers

参照元リンク : 35 Websites with Full Size Backgrounds – Splashnology.com