Advertisement

 

 

イメージ写真はウェブユーザーに興味を惹かせるデザインパーツのひとつではないでしょうか。

たとえば背景画像としてフルサイズのイメージ写真を利用したウェブサイトなどがその代表例です。

 

海外デザインブログDesign Instructで、美しいイメージ写真を利用したWebサイトデザインを30個まとめたエントリー「30 Beautiful Photo-centric Web Designs for Inspiration」が公開されていたので、今回はご紹介します。

 

イメージ写真のファイルサイズを考える必要がありますが、オリジナル性の高いWebサイト制作のサンプルとして利用することができそうです。

 

 

詳細は以下から。

 

 

美しいフルサイズ写真を利用したWebサイトまとめ

 

The Cassette

かっこいいスニーカーを履いて歩いている様子をアニメーションで魅せるショッピングサイト。

販売商品を連想させる映像を利用することでよりインパクトを与えることが可能。

 

 

Jessica Hische

アメリカ、ブルックリン在住のイラストレーターさんのポートフォリオサイトで、モノクロ写真にオレンジ色をアクセントカラーに使用したミニマルデザイン。

 

 

Sanagly

グリッドを使ったシンプルでまとまりのあるWebサイトデザイン、ボックス枠からはみ出したように見せることでインパクトを与えてくれます。

 

 

Tobias Persson

エキゾチックなターコイズ色とむらさき色の組み合わせのWebサイトで、人物にカーソルを合わせると不思議な動きが、、。

 

 

Noah Stokes

ややレトロ感のあふれる色使いで撮影された写真を背景に利用したWebサイトデザインで、色使いの参考にいかがでしょう。

 

 

Julian Perretta

こちらもビンテージ風味のあるイメージ写真を利用したWebサイトデザイン、背景全体をアニメーションさせています。

 

 

Rich Brown

多くの作品をグリッドレイアウトで分けることで、使いやすさも考慮したウェブサイトデザインのひとつ。

シングルページデザインも個人的に好みだったのでメモとしてエントリー。

 

 

Lila & Claudine’s

レトロな色使いに切り抜いたイメージ写真を利用したオリジナリティのあるWebサイトデザイン。

 

 

East Village Eatery

ダーク系Webサイトのイメージではおもくなりすぎますが、モノクロ写真を利用することで絶妙なデザインに仕上げています。

アクセントカラーに利用されているエメラルド色を手書きスケッチ風に仕上げるなどあそび心満点です。

 

 

designlabCPH

目につきやすい黄色を効果的に利用したウェブサイトで、半透明ボックスを利用し、フルサイズで表示されたスタイリッシュなイメージ写真との相性もバッチリです。

 

 

Hearts’ Cry Inc.

写真だけでなく、タイポグラフィーも立派なデザインパーツの一つとして利用可能、シンプルですがまとまりのあるデザインに仕上げています。

 

 

Ledgard Jepson

こちらもグリッドレイアウトを利用したミニマルデザインのウェブサイトで、各カテゴリーごとにイメージ写真を切り替えることでビジュアル面でもたのしむことができそうです。やや読み込みに時間がかかるようです、。

 

 

Matehstic

最近のウェブデザインのトレンドの一つとして、半透明のボックス枠を利用した具体例として。

 

 

Narnia Yacht Charter

ヨットのチャーターサービスという面白いサービスのWebサイトデザイン。

左側に固定された縦型ナビゲーションメニューの展開方法、参考になりそうです。

 

 

Marios Cafe.

オーストラリア、メルボルンにあるファンキーのレストランのWebサイト。

各カテゴリー毎に関連するうつくしい写真をフルスクリーンのスライドショーで水平方向に表示しています。

 

 

Antonio Giuseppe Peligra

アーティストなど素材画像が多い場合などの参考になりそうなWebサイトデザイン、シンプルですが動きのあるサイトを構築するときのアイデアにいかがでしょう。

 

 

Te Kahu Lake House

ニュジーランドに建てられた超オシャレなインテリアハウスを存分に紹介したWebサイト、こちらも縦型ナビゲーションを利用し、フルサイズのスライドアニメーションを利用しています。

 

 

Merus

エレガントな印象が伝わるワイン工房のWebサイトデザインで、黒を基調としたデザインや印象的なロゴデザインなどを利用することで高級感を演出しています。

 

 

Web Design Johannesburg | Wearesignals

1ページのみで完結したWebサイトデザインで、トップ部分のメニューをクリックすることで自動的にコンテンツまで移動してくれます。

 

 

Manufacture d’Essai

女性ファッションデザイナーさんのポートフォリオサイトですが、今回紹介した中でも特に印象的なサイトのひとつ。

言葉で伝えることが難しいので、実際サイトを見ていただくと分かりやすいかと思います。やや画像読み込み時間に問題ありそうです。

 

 

Moods of Norway

「ノルウェイのムード」のタイトルどおり、ノルウェイの四季を楽しませてくれるアニメーション満載のサイト。

マウスホイールを動かすことで、様々な乗り物で水平方向に移動していきます、アイデアユニーク◎。

 

 

背景に動画を利用してみよう

 

WordPress用テーマとして、背景全体にYouTube動画を設定することができるテーマがかちびとさんで紹介されていました。

アーティストなどのかたはPVを流してみても面白いかもしれませんね。

使い方についても詳しく紹介されているので、今後のWebサイト制作に役立ててみてはいかがでしょう。

 

Youtube動画を背景に設定可能なWordPressテーマ・「WP-Tubular」を作ったので無料配布します

デモページ

 

jQueryプラグインとして利用したい方は「自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular」を参考にしてみると良いかと思います。

 

[参照元 : 30 Beautiful Photo-centric Web Designs for Inspiration – Design Instruct]