Advertisement

30creative_background_top

 

イメージ写真を背景いっぱいに利用した、Webサイトデザインが個人的にお気に入りです。有効的にイメージ写真を選択、配置することで、ユーザーにより視覚的インパクトを与えることができるかもしれません。まさに百聞は一見に如かずですね、。

 

 

海外デザインブログOnextraPixel.comで、イメージ写真を使った、インパクトのあるWebサイトデザイン30個をまとめたエントリー「Find Inspiration in Websites with Large Backgrounds: 30 Creative Examples」が公開されていたので、今回はご紹介します。

 

イメージ写真をフルスクリーンで表示する、無料プラグインも以前まとめていますので、デザイン制作のご参考にいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

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

 

Grey Goose

パララックスエフェクトを利用して、コンテンツごとにイメージ画像とテキストを切り替える、見た目にもたのしいWebサイトデザイン。

121

 

 

 

Giorgio Schoes & Accessories – Giorgio 1958

靴やカバンなどの革製品を発売しているブランド用Webデザインで、全てのコンテンツが横方向のスライドのみで構成された、ユニークな作りとなっています。

161

 

 

 

The Claw Bar at Tierney’s Tavern

フロリダにある、新鮮な海の幸を提供するレストランのWebサイトデザイン。飲食店サイトとフルスクリーンイメージの相性はばっちりですね。

131

 

 

 

Salisbury Christian Church

中央に配置されている、ロゴやナビゲーションメニューをクリックすると、アニメーションと一緒にコンテンツが出現します。

251

 

 

 

Ratattoo

イタリアにあるタトゥースタジオのWebサイトデザインで、パララックスエフェクトを使い、コンテンツごとに、カラフルなデザインをたのしむことができますよ。

241

 

 

 

Domani

イメージ画像を利用しているように見せて、実は動画を利用したインタラクティブな仕掛けがたっぷりなWebサイトデザイン。

301

 

 

 

CAU

美味しそうな料理メニューの数々を、スライドさせながらも、左側に固定されたナビゲーションメニューが、ユーザーを迷わせることなく、目的のコンテンツに誘導します。

141

 

 

 

Plate the Slate

アメリカ、バーモント州の広大な牧場で、育てられている乳牛から作った、チーズの紹介用Webサイトデザイン。 イメージ写真を利用することで、生産者の想いやこだわりをよりアピールしています。

02

 

 

 

Lula Designs

あらゆるデバイスの画面解像度に対応した、フルスクリーン型スライダーを実装したWebサイトデザイン。

07

 

 

 

Marc Labrie

プロ写真家のポートフォリオ用サイトで、これまでの作品がフルスクリーンでスライドします。 上部にナビゲーションメニューを実装することで、操作性を損なわない工夫がされています。

04

 

 

 

Lena Sanz

フルスクリーン画面を縦に4分割し、それぞれのコンテンツをスライドさせる、アニメショーンによる仕掛けが施されたギャラリー風Webサイトデザイン。

261

 

 

 

K2 the Largest Digital Agency in Poland

ポーランドにあるデザイン事務所の公式サイトで、こちらも水平方向にコンテンツ移動し、タイポグラフィーを組み合わせることで、スタイリッシュな印象を与えてくれます。

281

 

 

 

MAUD

左側にあるナビゲーションメニューに、マウスを重ねることで、半透明でコンテンツが出現するユニークな仕掛けが、。

08

 

 

 

Thomas Brun

幻想的で、オリジナル性の高い色使いがインパクトのある、写真家ポートフォリオサイトのひとつで、アートワークを紹介することを目的にしたシンプルデザイン。

191

 

 

 

TagStyle

パステルカラーを基調とした、かわいい配色カラーリングに、丸や三角、四角などのシェイプを使ったサムネイルが印象的なWebサイト。

201

 

 

 

Celtic

トップページにランダムで表示されるイメージ写真をクリックすると、コンテンツがポップアップする仕組みが、やや使いにくいのですが、面白いアイデアが散りばめられています。

181(2)

 

 

 

Philips Hideouts

フレームのないテレビというコンセプトを、背景イメージと組み合わせることで、実現したユニークデザイン。

221

 

 

 

フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ

こちらのエントリーで、フルスクリーン画像に関連する、無料プラグインをいくつかまとめています。

 

 

参照元リンク : Find Inspiration in Websites with Large Backgrounds: 30 Creative Examples – OnextraPixel.com