Advertisement

30fullbg_top

 

イメージ写真をフルスクリーン画面で映し出したWebデザインを、多く見かけるようになりました。今年のウェブデザイントレンドのひとつにも選ばれるなど、注目が高まっているデザインテクニックです。

 

 

海外デザインブログDesignInstruct.comで、美しいイメージ写真を利用した、Webサイトデザイン30個をまとめたエントリー「30 Websites That Use Beautiful Large Photo Backgrounds」が公開されたいたので、今回はご紹介します。

 

 

百聞は一見にしかずと言いますが、ユーザーを「無意識のうちに」、サイトのコンテンツ、ブランドに興味を惹きつける、ダイナミックなデザインアイデアは、参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

フルスクリーン写真が素敵、オシャレWebサイトデザインまとめ

 

これまでにご紹介した、イメージ写真をフルスクリーンで利用した、Webデザイン関連エントリーは以下となります。

 

[list type=”hot”] [li]インパクト大、フルスクリーン写真を使ったウェブデザイン35個まとめ [/li]

[li]ダイナミックな迫力が◎、フルスクリーンWebデザイン30個まとめ[/li]

[li]イメージ写真を使った、印象的なフルスクリーンWebサイトデザイン30個まとめ[/li]

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

[li]フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ(※ 無料プラグイン収録)[/li][/list]

 

 

 

APEMAN Boards

カーボン素材のデッキを使った、ロングボードの紹介、販売Webサイト。スクロールすることで、隠れていたウィール部分が表示される、ユニークな仕掛けです。

20_websites_large_backgrounds_apemanboards

 

 

 

Milwaukee Police News

ミルウォーキー警察の公式ホームページですが、個人的にツボだったのでエントリー。凶悪犯たちが、アニメーション付きで表示されてます、。

16_websites_large_backgrounds_milwaukeepolic

 

 

 

Wrightfeldhusen

建築事務所のウェブサイトらしく、これまでに施行したオシャレインテリアの写真は、ぴったりな素材かもしれませんね。

25_websites_large_backgrounds_writefeld

 

 

 

Seesaw Studio

オーストラリアにある、デザイン事務所の公式ホームページで、パララックスエフェクトを利用した、イメージ写真の表現方法は参考に。

18_websites_large_backgrounds_seesaw

 

 

 

The Brooklyn Soap Company

トップ部分に巨大なイメージ画像を配置し、以下コンテンツを表示する、デザイン参考になりそうなWebサイト。

01_websites_large_backgrounds_brooklynsoap

 

 

 

Leve Hytter

自然を大切にした建築様式を得意とした、インテリア事務所のホームページで、壮大な大自然を感じる、風景イメージ写真がインパクトあります。

19_websites_large_backgrounds_levehytter

 

 

 

Karma

WiFi端末製品の紹介、販売ページとなっており、余白スペース十分なミニマルデザインは、製品コンセプトにもぴったりです。

02_websites_large_backgrounds_karma

 

 

 

Worth & Worth

アパレルブランドの公式ホームページで、新作コレクションを中心としたイメージ写真、動画を背景に活用しています。

24_websites_large_backgrounds_worthworth

 

 

 

Insomnia Coffee Company

コーヒーのフレッシュな香りが漂ってきそうな、あたたかみを感じるデザインが素敵なウェブサイト。不眠症(Insomnia)コーヒー、すごい名前です、。

03_websites_large_backgrounds_insomiacoffee

 

 

 

Public Art Fund

アートを盛り上げていこうという団体のホームページで、ビビッドなピンク色がアクセントになったサイトデザイン。

05_websites_large_backgrounds_publicartfund

 

 

 

Pizzaza

レストランカフェのWebサイトで、これからサイトを作成しようと検討中の、飲食関連のひとにオススメしたいレイアウト。

06_websites_large_backgrounds_pizzaza

 

 

 

JanSport

日本でもおなじみの、バックパック会社の公式ページで、写真を切り貼りしたような、背景イメージが印象的なデザイン。

09_websites_large_backgrounds_jansport

 

 

 

Thirty Dirty FIngers

フリーランスで活動するデザイナーのポートフォリオサイトで、コンテンツに適したモノクロイメージ写真を、背景に利用しています。

12_websites_large_backgrounds_thirtydirty

 

 

 

Cap Gun Collective

CMやミュージックビデオ制作などを行う、会社のウェブサイトデザインで、背景にはイメージ画像ではなく、動画を利用した、ユニークレイアウトが魅力的。

14_websites_large_backgrounds_capgun

 

 

 

Sandra Lovisc

ヘアー&メイクアップアーティストのWebサイトで、やはり職業スキルを存分に活かした、イメージ写真が素敵なデザイン。

30_websites_large_backgrounds_sandral

 

 

 

Sweet Basil

思わずよだれが出てしまいそうな、ごちそうの数々をスライドさせた、レストランのWebサイトデザイン。

26_websites_large_backgrounds_sweetbasil

 

 

 

Secret Study

画面中央にレイアウトされたメニューボタンをホバーすることで、ユニークなアニメーションと共に、コンテンツが移動する仕掛けがたのしいサイト。

29_websites_large_backgrounds_secretstudy

 

 

 

Yoke

オーストラリアはメルボルンにある、デザイン事務所の公式ホームページで、コンテンツごとに異なるイメージ画像を使ったサンプル例。写真のセレクションにも、センスが光ります。

27_websites_large_backgrounds_yoke

 

このように見ていくと、アートやファッション、ヘアーメイク、インテリア、料理など、言葉で伝えるのがむずかしい、クリエイティブなコンテンツにスポットを当てた、Webデザインが多いようです。今後のWebデザイン制作の参考にしてみてはいかがでしょう。

 

 

参照元リンク : 30 Websites That Use Beautiful Large Photo Backgrounds – DesignInstruct.com