Advertisement

 

 

海外デザインブログInspiiiredで、フルスクリーンでイメージ写真を表示したダイナミックなウェブサイトデザインを75個まとめたエントリー「75 Websites Featuring Full Screen Photo Backgrounds」が公開されていたので、今回はご紹介します。

 

アイデア次第ではアパレルブランドやインテリアショップ、美容室、カフェなどユニークなサイトデザインを作成することができるのではないでしょうか。

最後にはフルスクリーンで写真を表示させることができる便利なツール、プラグインなども一緒にまとめています。

 

 

詳細は以下から。

 

 

フルスクリーンで写真を表示したダイナミックなウェブサイトデザインまとめ

 

Ben Thomson Photography

フォトグラファーのポートフォリオサイトで、背景全体に撮影された写真をスライドさせて表示しています。

ギャラリーページではお好みのレイアウトを選択、閲覧することが可能となっています。

 

 

The Glades

ヘッダー部分にウィンドウ幅いっぱいで表示された写真がインパクト大なウェブサイトデザイン。

半透明のボックス枠を利用することで、テキストの可読性もばっちりです。

 

 

Kirk Whalum

アーティスト用ウェブサイトデザインのひとつで、ディスコグラフィーや動画などで最新ニュースをチェックすることが可能。

 

 

Parachute Journalists

こちらも音楽アーティストのオフィシャルページのひとつで、ページを開くとページ上部にMP3プレイヤーが出現します。

 

 

Ti  Ritu Piri Pip

クロアチアの音楽グループのオフィシャルサイトで、ユニークなメニューバーを利用することでコンテンツを細かくカテゴリー分けされています。

 

 

Presence Driven Music

シングルページでデザインされた音楽アーティストのウェブサイトで、落ち着いた色使いがナイス。

※ 音が鳴りますのでご注意ください。

 

 

La Papa Pizza

ピザ屋さんのウェブサイトデザインとなっており、それぞれの料理を机に並べたようなユニークなデザインが魅力的。

 

 

G2

以前ご紹介した気もしますが、写真とタイポグラフィーのバランスが絶妙なシンプルなウェブサイトデザインのひとつ。

 

 

Kuleto’s

レストラン用ウェブサイトデザインで、ボタンでコンテンツを隠すことで画像のみをたのしむことができるようになっています。

 

 

Tsaa Tea Shop

お茶の販売を行っているウェブサイトとなっており、やさしい色使いで商品イメージとマッチしています。

 

 

Project 7am

普段の何気ない写真をフルスクリーンで魅せることで、ブランドイメージを確立しているデザイン事務所のウェブサイトデザイン。

 

 

Heath Waller

ブログサイトのひとつですが、カラフルで印象的な色使いが参考になったのでメモとしてエントリー。

 

 

Bloemigans

フルスクリーンで利用されている写真とタイポグラフィーの色使いを合わせることで、統一感のあるデザインを表現しています。

 

 

Phuket Event Organizer

モノクロ写真にビビッドなオレンジ色をアクセントカラーとして利用することで、コントラストの効いたウェブサイトデザインとなっています。

 

 

Megumi

イタリアにある日本食レストランのウェブサイトデザイン、エレガントな印象を表現しています。

 

 

Go Media

デザイン事務所のポートフォリオサイトのひとつ、フルスクリーンと半透明デザインパーツの相性は抜群です。

 

 

Digitalove

フォトグラファーなど自分の写真を公開したいときは、フルサイズの写真利用を考えてみてもよいかもしれませんね。

 

 

Vivacitas

どこまでも続く水平線を表現したウェブサイトデザインで、赤色がよいアクセントカラーとなっています。

 

 

Ana Hickmann

ブラジルの女優Ana Hickmanのオフィシャルサイトで、複数の写真を自動的にスライドさせています。

 

 

Kiran Owal

こちらもフォトグラファーさんのポートフォリオサイトのひとつで、クリックすることでメニューを非表示にすることが可能。

 

 

Mike Dgnam

シンプルなミニマルデザインがお好みの方は、淡い影をデザインすることで立体感を表現することができます。

 

 

Hearts’ Cry Inc.

フルスクリーンを利用したデザインとタイポグラフィーの組み合わせは、シンプルですがインパクトがあります。

 

 

Davidia

建築、インテリア関連のウェブサイトを制作しようと考えている方の参考になりそうなウェブサイトデザインのひとつ。

 

 

DigiGlass

レイアウトなどに関係なくパーツを自由自在に散りばめたカラフルなウェブサイトデザイン。

 

 

Vivo Group

シンプルなイメージ画像を利用することで、サイトの印象もがらりと変えることができそうです。

 

 

Chicago L Tshirts

ショッピングサイトとして利用することで、ほかのお店にはないブランドイメージを確立できるかもしれません。

 

 

最後にもうひとつ

 

Delta CMS

Colony Interactiveさんのフルスクリーンのイメージ写真を利用したオシャレなマルチデバイス対応のCMS。

ショッピングサイトやカフェ、ヘアーサロンなどにいかがでしょうか。

 

最後にフルサイズの写真を利用したウェブサイトを利用するときに便利なツール、プラグインなども一緒にまとめています。

よろしかったら今後のウェブデザイン制作にいかがでしょう。

 

フルスクリーンで写真を表示したギャラリーを作成する「Full Image Gallery with JQuery

 

写真をフルスクリーンで表示する「Full Screen, Scalingand Centered Background with JQuery

 

写真をフルスクリーンでスライドさせる「supersized JQuery

 

 

複数の写真から選択、フルスクリーン表示する「Sideways – JQuery Fullscreen Image Gallery

 

 

背景のフルスクリーン写真を自動で切り替える「JB Gallery

 

[参照元 : 75 Websites Featuring Full Screen Photo Background – Inspiiired]