ビジュアルで刺激を!フルスクリーンイメージ写真を活用したWebデザインまとめ

2014-bg-22

 

海外デザインブログVandelayDesignで、ビジュアル的インパクトたっぷりな、フルスクリーンイメージ写真のWebサイトデザインをまとめたエントリー「30 Amazing Websites with Big Background Photos」が公開されていたので、今回に特に印象に残ったサイトをいくつかピックアップしてご紹介します。

 

 

画面いっぱいに広がるイメージ写真を取り入れることは、視覚的インパクトのあるWebデザインを作成する方法のひとつではないでしょうか。以下の記事では、フルスクリーンイメージ写真を使ったWebサイト制作に使える、無料プラグインをまとめています、参考にいかがでしょう。

 

[list type=”hot”][li]コンテンツをより魅力的に、フルスクリーン写真を使ったWebデザインまとめ[/li][/list]

 

 

 

詳細は以下から。

 

 

 

ビジュアルで刺激を!フルスクリーンイメージ写真を活用したWebデザインまとめ

 

Protest Boardwear

アパレルブランドのWebサイトで、イメージ写真を利用することで、よりブランドのコンセプトを分かりやすく伝えることができます。

2014-bg-17

 

 

 

CRD Select

ドイツにあるリゾートホテルで、宿泊施設のイメージ写真をスライダーで紹介しています。

2014-bg-19

 

 

 

The Brand Bat

掲載されているイメージ写真の数々から、温かみのあるやさしいデザインが連想できます。

2014-bg-23

 

 

 

The First Time

手書きペイントされたようなフォントに、色あせた写真加工エフェクトがハマっていて、ブランドコンセプトをうまく反映しています。

2014-bg-25

 

 

 

Ditto Residential

画面中心に描かれたメッセージ、ボタンをクリックするとビデオ動画が流れる仕組みとなっています。

Ditto Residential

 

 

 

AYR

同じ背景をバックにしたイメージ写真をフェードアウトでスライドさせることで、動画のような不思議なエフェクトが。

2014-bg-21

 

 

 

Wedge & Lever

デザインオフィスのポートフォリオサイトで、制作された迫力のある作品をフルスクリーン表示。コンテンツ展開もユニークですよ。

2014-bg-28

 

 

 

Convert My Currency

海外旅行をしたときに現地貨幣をたとえば、日本円に換算してくれるアプリ。飛行場らしき風景が、うまくアプリのメッセージを伝えます。

2014-bg-9

 

 

 

Bench

スクロールすることでコンテンツ内容のみが遷移する、パララックスエフェクトを活用した参考Webサイト。

2014-bg-1

 

 

 

Wallmob

よりモバイルアプリを利用している状況をユーザーが想像することができ、より興味をもつきっかけにもなります。

2014-bg-5

 

 

 

Zinio

コンテンツごとにウィンドウ幅を切り替えることでメリハリがつき、より分かりやすく注目ポイントをまとめています。

2014-bg-15

 

 

 

CAST83

人生の感動的な瞬間を撮影するフォトグラファーは、フルスクリーンイメージ写真がぴったりな業種のひとつです。

2014-bg-27

 

 

 

Throne Watches

ブラックを利用したスタイリッシュな雰囲気を演出した、アパレルショッピングサイト。タイポグラフィーとの相性もバッチリ、ここらへんのフォントが似合いそうです。

2014-bg-4

 

 

 

Dan Mindru

個人自己紹介用ポートフォリオサイトのトップ部分には、淡いグラデーションを重ねたイメージ写真が。

2014-bg-30

 

 

 

La Parquetrie Nouvelle

太字タイポグラフィーが印象的で、コンテンツごとにイメージ写真を切り替えるスライドショー式展開がユニーク。

2014-bg-7

 

 

 

Soyuz Coffee Roasting

大きな画面で閲覧すると、まるで自分が座っているような感覚にさせる、ユニークなイメージ写真を用いたウェブサイト。

2014-bg-11

 

 

 

vireChic

スタイリングされたファッションスナップを無造作に並べた、写真集を見ているようなインパクト。

2014-bg-8

 

 

 

LiveAreaLabs

トップページのパララックスエフェクトに加えて、途中にもスクロールに応じてイラストが切り替わるエフェクトも。

2014-bg-20

 

 

 

Colonia Verde

お店の外観を撮影した撮影を背景に、レストランメニューやお店情報コンテンツが並びます。

2014-bg-3

 

 

 

Travel Photgraphy

旅をしながら撮影した写真を紹介するポートフォリオサイト。ダーク系とタイポグラフィーでまとめた参考サイト。

2014-bg-13

 

 

 

Creative Ad Awards

思わず息を呑む、ダイナミックな写真が惹きつけるフルスクリーンイメージ写真サイトの具体的サンプル。

2014-bg-24

 

 

 

最後に、、。

 

フルスクリーンサイトを採用しているケースは、デザイナーや写真家、フリーランスのポートフォリオサイトのほか、アパレルやショッピングサイト、レストラン、カフェ関連、またモバイルアプリのランディングページなど多岐にわたります。クリエイティブな業種にオススメしたいテクニックではないでしょうか。

 

 

これまでにも定期的にフルスクリーンイメージ写真を使ったWebデザイン集めています。以下からどうぞ。

 

キーワード「フルスクリーン」を見る

 

 

サムネイル@ : Simplity Over Novelty – Manual

参照元リンク : 30 Amazinug Websites with Big Background Photos – Vandelay Design