フルスクリーン写真がインパクトのある、Webサイトデザインまとめ

bigphoto_top

 

海外デザインブログVandelayDesignBlog.comで、フルスクリーンイメージ写真をうまく活用した、Webサイトデザインをまとめたエントリー「25 New Minimal Web Designs with Big Background Photos」が公開されていたので、今回はご紹介します。

 

 

デザインコンセプトを、魅力的なビジュアルを使いユーザーにアピールする、そんなクリエイティブなWebサイトが数多くまとめられています。より雑誌のレイアウトに近い、Webデザインでの新しい表現方法のひとつではないでしょうか。

 

 

 

詳細は以下から。

 

 

 

ビジュアルインパクト、フルスクリーン写真を使ったWebサイトデザインまとめ

 

Adjust / Digital Convesations

フルスクリーンで展開するコンテンツは、キーボードとマウスを使って、縦横無尽に移動する、インタラクティブなデザイン。

big-photo-1

 

 

 

Ullevi PrepParty Area

斜めに切り込んだスリットを使ったコンテンツ分けや、アニメーションをたのしむパララックスエフェクトなど、見ているだけでもワクワクします。

big-photo-10

 

 

 

Julian Bicycles

自転車を販売しているショッピングサイトで、ブランドイメージに合わせたイメージ写真選びがされています。

big-photo-12

 

 

 

Code Computerlove

極太フォントとフルスクリーン写真の組み合わせが、デザイン制作の参考になりそうなお手本サイト。

big-photo-7

 

 

 

Nick Ulivieri Photography

シカゴを中心に活躍する写真家の公式サイトで、これまでに撮影した、壮大なイメージ写真がスライドショーで展開します。

big-photo-23

 

 

 

Make Your Move

会社情報をステップ毎にイメージスライダーで紹介するレイアウトは、サイト制作でも参考になりそうです。

big-photo-15

 

 

 

Church of the Atom

スウェーデンで地ビールを作っている会社の、ブランドイメージを意識した、印象的な写真が使われたサイト。

big-photo-2

 

 

 

Josh Cohen School of Music

オーストラリアにある音楽学校の公式サイトで、日常風景を切り取ったような写真を背景に使用しています。

big-photo-4

 

 

 

Mah Ze Dahr Bakery

料理を作っている途中の机を撮影した、写真をスライドさせたユニークアイデアが素敵なサイト。

big-photo-5

 

 

 

Brookelyn Beta 2013

刺激的な赤色をメインカラーに使い、プロジェクトの紹介をコンテンツごとに行う、シンプルなフラットスタイルのレイアウトデザイン。

big-photo-6

 

 

 

Oakley One Icon | Tour de France 2013

ツール・ド・フランスの競技結果を、分かりやすくギャラリー風にまとめた、Oakleyの特設公式ページ。

big-photo-9

 

 

 

Retail Careers

モノクロ写真にフォントを組み合わせた、タイポグラフィーの要素を取り入れた、ミニマルデザインサイト。

big-photo-11

 

 

 

Your Tour

今年で100周年を迎えたツール・ド・フランスの歴史を振り返ることができるイベントページ。読み込みアニメーションもユニークですよ。

big-photo-13

 

 

 

Awakenings

アムステルダムで行われる音楽フェスティバルの公式ホームページで、イベント情報を分かりやすくまとめています。

big-photo-14

 

 

 

Romain Briaux

フランスを拠点に活動するデザイナーのポートフォリオサイトで、 フラットデザインにアニメーションを加えたモダンデザインに仕上げられています。

big-photo-17

 

 

 

Palyground Inc.

フルスクリーン写真とは別に、コンテンツごとにユニークなアニメーションが、はじめて訪れたユーザーにも、親しみやすいサイト。

big-photo-18

 

 

 

Shoot & Develop

トップページには、ナビゲーションメニューしか配置しない、すっきりすぎるレイアウトが、サイトイメージを統一しています。

big-photo-20

 

 

 

Collins

これまでに手掛けた作品を、ランダムに壁に飾ったような、クリエイティブなアイデアが詰まったWebサイトデザイン。

big-photo-21

 

 

 

Bright Bright Great

シンプルなシェイプのみで描かれた、デザインの基本テクニックを取り入れた、可読性の高いフラットスタイルのサイトデザイン。

big-photo-24

 

 

 

Snapwire

シンプルなメッセージとダウンロードボタンのみで構成された、訴求力の高いイメージ写真を採用しています。

big-photo-25

 

 

 

心に残る、印象的なフルスクリーンWebサイトデザインまとめ

前回まとめたエントリーも参考までにいかがでしょう。

awesomefullbg_top

 

 

参照元リンク : 25 New Minimalist Web Designs with Big Background Photos – Vandelay Design Blog