Advertisement

moutainwebsite_top

 

先日行われたアップルの開発者向けイベント「WWDC2014」のなかで、Macの新しいOS X「Yosemite」が発表されました。今回は、OS名からも連想できる通りヨセミテ国立公園で撮影された、壮大な山並みをデスクトップに採用しています。そんな美しい山の景色をうまく使ったWebデザインをあつめました。

 

 

海外デザインブログLine 25.comで、美しい山並みのイメージ写真を使ったWebサイトデザインをまとめたエントリー「25 Examples of the “Mountains” Trend in Web Design」が公開されていたので、今回はご紹介します。トレンドにもなっているフルスクリーン写真ビデオ動画を利用したサイトデザインにも見事にはまります。

 

 

 

詳細は以下から。

 

 

 

MacOS Xでも採用された新トレンド!美しい山並みイメージを採用した参考Webサイトまとめ

 

BTL Brands

山並みイメージをただ背景に使っていると思いきや、すべてのコンテンツが山の後ろから!出現します。

1(3)

 

 

 

Cave Vinter Classification

見出しタイトルとロゴデザインを強調したトップページで、フェードアウトで切り替わるエレガントな雰囲気に仕上がっています。

3(3)

 

 

 

Nature Valley

アメリカ西海岸にある国立公園をバーチャル体験できる、インタラクティブなサイトのひとつ。Firefoxでは表示されません、ご注意を。

8(3)

 

 

 

Mariusz Ciesla

CSSフィルターを適用することで、イメージ写真に淡いグラデーションカラーを重ねています。

10(2)

 

 

 

Agens

美しい自然の山は、テキスト文字を配置するのにもぴったりです。

17(2)

 

 

 

Momentum

山並みイメージはデザインが高いだけでなく、ブランドイメージもアップする効果も期待できます。

15(3)

 

 

 

Word of SWISS

スクロールすると画面の奥に引き込まれるような、奥行き感たっぷりのエフェクトが再現されています。

6(4)

 

 

 

What You Are

美しい高画質イメージ写真を採用しているだけでなく、コンテンツのユニークな切り返し方もポイント。

9(3)

 

 

 

American Lifestyle

ヘッダーイメージ以外も、自然をかんじるアース色エレメントで統一されたユニークなサイト。

20(2)

 

 

 

Racket

独創的でオリジナリティーの高いコラージュアートを採用しています。

21(2)

 

 

 

Ryan McCarthy

透明の切り込みガラスエフェクトを加え、パララックスエフェクトとして採用しています。

23

 

 

 

Kyle Thacker

フリーランスデザイナーのポートフォリオサイトで、モノクロ写真が見事な背景イメージとして活用されています。

4(3)

 

 

 

Iron Summit

スクロールで伸縮するナビメニューとの相性もバッチリです。

5(3)

 

 

 

The Cares Route – Peaks of Euroep (Leon)

ヨーロッパはスペインにある国立公園で、壮大な景色をスライドショーでたのしむことができます。

19(2)

 

 

 

Buffalo – Outdoor Clothing

アウトドア系アパレルブランドの公式サイトで、ブランドイメージともマッチしたイメージ写真が印象的に利用されています。

18(2)

 

 

 

Vail Resort Summer 2014

子ども用サマーキャンプの様子を、ダイナミックなグラフィック画と一緒に紹介しています。

14(3)

 

 

 

Mobisle Apps – Squarespace

ページをスクロールすると、景色が雲の中に吸い込まれていくエフェクトがクール。

2(3)

 

 

 

Travel Alberta Tripplaner

イメージ写真を見せながらコンテンツを表示する、ユニークに工夫されたレイアウトは今後のデザインにいかがでしょう。

12(2)

 

 

 

Visage

ロゴデザインと背景イメージ写真の配色カラーパレットを合わせることで、より統一感を表現します。

13(3)

 

 

 

The Hobbit

壮大なストーリーが注目されている映画公式サイトでも、上空から撮影した山並みが使用されています。

11(2)

 

 

 

Codepeak Studio

パララックスエフェクトで表示されるイメージ写真は、見出しテキストをより強調してくれます。

codepeak

 

 

 

Hello Monday

厳しい環境をものがたる雪山は、また新しい印象を与えてくれます。

7(3)

 

 

 

[info_box]プレミアムWordPressテーマにも、山並みをモチーフにしたデザインが公開されています。今後注目しておきたい、デザイントレンドのひとつかもしれません。[/info_box]

 

One

フルスクリーンで表示したり、パララックスを使ったりコンテンツに応じて切り替え可能なプレミアムテーマ。

24

 

 

 

Vertex

テキストを重ねることで、より伝えたいメッセージを強調することができます。

26

 

 

Suburbs

マルチに使いこなすことができそうなシンプルテーマで、ヘッダーイメージに山デザインを採用しています。

29(2)

 

 

 

MNTN

すべてのコンテンツを1ページに集約した、シングルページ完結型レイアウト。

27

 

 

 

Lumen

左固定ナビメニューに、幻想的なグラデーションが美しい山の景色が背景に広がります。

28

 

 

参照元リンク : 25 Examples of the “Moutains” Trend in Web Design – Line 25