イメージ写真はウェブユーザーに興味を惹かせるデザインパーツのひとつではないでしょうか。
たとえば背景画像としてフルサイズのイメージ写真を利用したウェブサイトなどがその代表例です。
海外デザインブログDesign Instructで、美しいイメージ写真を利用したWebサイトデザインを30個まとめたエントリー「30 Beautiful Photo-centric Web Designs for Inspiration」が公開されていたので、今回はご紹介します。
イメージ写真のファイルサイズを考える必要がありますが、オリジナル性の高いWebサイト制作のサンプルとして利用することができそうです。
詳細は以下から。
美しいフルサイズ写真を利用したWebサイトまとめ
かっこいいスニーカーを履いて歩いている様子をアニメーションで魅せるショッピングサイト。
販売商品を連想させる映像を利用することでよりインパクトを与えることが可能。
アメリカ、ブルックリン在住のイラストレーターさんのポートフォリオサイトで、モノクロ写真にオレンジ色をアクセントカラーに使用したミニマルデザイン。
グリッドを使ったシンプルでまとまりのあるWeｂサイトデザイン、ボックス枠からはみ出したように見せることでインパクトを与えてくれます。
エキゾチックなターコイズ色とむらさき色の組み合わせのWebサイトで、人物にカーソルを合わせると不思議な動きが、、。
ややレトロ感のあふれる色使いで撮影された写真を背景に利用したWebサイトデザインで、色使いの参考にいかがでしょう。
こちらもビンテージ風味のあるイメージ写真を利用したWebサイトデザイン、背景全体をアニメーションさせています。
多くの作品をグリッドレイアウトで分けることで、使いやすさも考慮したウェブサイトデザインのひとつ。
シングルページデザインも個人的に好みだったのでメモとしてエントリー。
レトロな色使いに切り抜いたイメージ写真を利用したオリジナリティのあるWebサイトデザイン。
ダーク系Webサイトのイメージではおもくなりすぎますが、モノクロ写真を利用することで絶妙なデザインに仕上げています。
アクセントカラーに利用されているエメラルド色を手書きスケッチ風に仕上げるなどあそび心満点です。
目につきやすい黄色を効果的に利用したウェブサイトで、半透明ボックスを利用し、フルサイズで表示されたスタイリッシュなイメージ写真との相性もバッチリです。
写真だけでなく、タイポグラフィーも立派なデザインパーツの一つとして利用可能、シンプルですがまとまりのあるデザインに仕上げています。
こちらもグリッドレイアウトを利用したミニマルデザインのウェブサイトで、各カテゴリーごとにイメージ写真を切り替えることでビジュアル面でもたのしむことができそうです。やや読み込みに時間がかかるようです、。
最近のウェブデザインのトレンドの一つとして、半透明のボックス枠を利用した具体例として。
ヨットのチャーターサービスという面白いサービスのWebサイトデザイン。
左側に固定された縦型ナビゲーションメニューの展開方法、参考になりそうです。
オーストラリア、メルボルンにあるファンキーのレストランのWebサイト。
各カテゴリー毎に関連するうつくしい写真をフルスクリーンのスライドショーで水平方向に表示しています。
アーティストなど素材画像が多い場合などの参考になりそうなWebサイトデザイン、シンプルですが動きのあるサイトを構築するときのアイデアにいかがでしょう。
ニュジーランドに建てられた超オシャレなインテリアハウスを存分に紹介したWebサイト、こちらも縦型ナビゲーションを利用し、フルサイズのスライドアニメーションを利用しています。
エレガントな印象が伝わるワイン工房のWebサイトデザインで、黒を基調としたデザインや印象的なロゴデザインなどを利用することで高級感を演出しています。
Web Design Johannesburg | Wearesignals
1ページのみで完結したWebサイトデザインで、トップ部分のメニューをクリックすることで自動的にコンテンツまで移動してくれます。
女性ファッションデザイナーさんのポートフォリオサイトですが、今回紹介した中でも特に印象的なサイトのひとつ。
言葉で伝えることが難しいので、実際サイトを見ていただくと分かりやすいかと思います。やや画像読み込み時間に問題ありそうです。
「ノルウェイのムード」のタイトルどおり、ノルウェイの四季を楽しませてくれるアニメーション満載のサイト。
マウスホイールを動かすことで、様々な乗り物で水平方向に移動していきます、アイデアユニーク◎。
背景に動画を利用してみよう
WordPress用テーマとして、背景全体にYouTube動画を設定することができるテーマがかちびとさんで紹介されていました。
アーティストなどのかたはPVを流してみても面白いかもしれませんね。
使い方についても詳しく紹介されているので、今後のWebサイト制作に役立ててみてはいかがでしょう。
Youtube動画を背景に設定可能なWordPressテーマ・「WP-Tubular」を作ったので無料配布します
jQueryプラグインとして利用したい方は「自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular」を参考にしてみると良いかと思います。
[参照元 : 30 Beautiful Photo-centric Web Designs for Inspiration – Design Instruct]
