Advertisement

17landscape

 

日本各地ですごしやすい秋の季節となりました。週末に山登りやキャンプ、自然テーマパークなどへ出かける方も多いのではないでしょうか。

 

そんな自然の美しい風景を、ウェブデザインに利用した印象的なWebサイト20個をまとめたエントリー「20 Web Designs with Beautiful Landscape Photos」がLine25.comで公開されていたので、今回はご紹介します。

 

 

フルスクリーンを使ったWebデザインや、タイポグラフィーを組み合わせることで、よりユーザーに効果的なアプローチができそうです。今後のWebデザイン制作の参考にいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

風景デザインを使った、印象的なWebサイトデザインまとめ

 

Tinke

体調や運動効果などを計測するユニークなデバイスで、ページをスクロールするとパララックスエフェクトを使って、商品紹介をユニークに展開してくれますよ。

12landscape

 

 

 

Kentisbury Grange

斜めに切り込みが入ったユニークなレイアウトとなっており、余白スペースを十分とることで、エレガントな高級感を演出しています。タイポグラフィーとの組み合わせも見事な、イギリスにあるホテルのWebサイト。

18landscape

 

 

 

Legnago

ヘッダー全体に特集コンテンツ用イメージスライダーを実装しており、アニメーションを使ったタイポグラフィーとの融合はデザインアクセントにばっちりです。

11landscape

 

 

 

Kiawah Island Real Estate

アメリカはサウスカロライナ州の海に浮かぶ島を丸ごと買い取り、販売しているアメリカンな不動産会社のWebサイト。

島のアトラクションや快適性などを、たっぷりのイメージ画像と一緒に伝えます。

1landscape

 

 

 

St. Johns University

ニューヨークにある大学の公式Webサイトなのですが、画像を大量に利用したパララックスエフェクトで、コンテンツごとに切り替えます。

9landscape

 

 

 

Rivers & Robots

こちらの記事でも一度触れている、最近よく見かける風景画をぼかして背景デザインとして利用したWebサイト。

13landscape

 

 

 

Kassandra Bay Hotel

ギリシャにある海沿いのラグジュアリーホテルのWebサイトで、コンテンツごとにイメージ画像を切り替えています。

2landscape

 

 

 

Momentum

ロンドンにあるWebデザイン事務所のポートフォリオサイトで、ロゴを真ん中に持ってくることでインパクトたっぷりなレイアウトに仕上がっています。

5landscape

 

 

 

Dave Gamache: Designer & Developer.

フルスクリーン写真をパララックス効果と組み合わせた、シンプルで印象的なデザインレイアウトが◎。

8landscape

 

 

 

Moment Skis

スキーやスノーボード関連のブランドで、ダーク系でざいんすることで、よりイメージ画像やサムネイルを引き立っています。アクション素材を使って、写真加工をしておくとよいですね。

6landscape

 

 

 

DigitalKitchen

Webサイトやアプリ制作などを行うアメリカのデザイン事務所で、フルスクリーンの画像スライダーを使ったデザインが素敵。

7landscape

 

 

 

Google Ventures

イメージ画像にタイポグラフィーを組み合わせることで、ユーザーによりメッセージ性を強く伝えることができます。ヘッダー部分のスムーズなコンテンツ展開も見逃せません。

4landscape

 

 

 

Nature Valley Trail View

アメリカにあるグランドキャニオンなど世界的に有名な国立公園のトレイル、遊歩道を歩くツアー。壮観な景色が魅力的で、思わず旅行に行きたくなりませんか。

15landscape

 

 

 

Cloonmore

こちらもぼかしを加えた風景イメージを背景画像として利用しているサイトの一例。

14landscape

 

 

 

Vail Resourts Summer 2014

子供たちに向けて行われる、アメリカのサマースクール募集の公式ページで、パララックスエフェクトを利用したダイナミックな仕掛けが満載です。

3landscape

 

 

 

Buffalo

アウトドア関連のアパレルブランドらしく、大自然を感じる写真を背景に使ったWebデザイン。左固定ナビゲーションもシンプルで分かりやすいです。

19landscape

 

 

 

August

オーストラリアにあるデザイン事務所のポートフォリオサイトで、各コンテンツごとに背景のイメージ画像を切り替えています。虹、きれいですよ。

16landscape

 

 

 

まとめとして、、

 

今回まとめたWebサイトの多くで、パララックスエフェクトをうまく取り入れることで、よりイメージ画像を効果的に魅せています。今後のトレンドとなるのでしょうか、たのしみです。

 

 

ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ

パララックスWebデザインを実現する、無料プラグインを一緒にまとめていますのでご参考までに。

howtoparallax_top

 

 

サムネイル@ : A Springtime Tennessee Vacation – Let’s Get Started

参照元リンク : 25 Web Designs with Beautiful Landscape Photos – Line25.com