先日行われたアップルの開発者向けイベント「WWDC2014」のなかで、Macの新しいOS X「Yosemite」が発表されました。今回は、OS名からも連想できる通りヨセミテ国立公園で撮影された、壮大な山並みをデスクトップに採用しています。そんな美しい山の景色をうまく使ったWebデザインをあつめました。
海外デザインブログLine 25.comで、美しい山並みのイメージ写真を使ったWebサイトデザインをまとめたエントリー「25 Examples of the “Mountains” Trend in Web Design」が公開されていたので、今回はご紹介します。トレンドにもなっているフルスクリーン写真やビデオ動画を利用したサイトデザインにも見事にはまります。
詳細は以下から。
MacOS Xでも採用された新トレンド！美しい山並みイメージを採用した参考Webサイトまとめ
山並みイメージをただ背景に使っていると思いきや、すべてのコンテンツが山の後ろから！出現します。
見出しタイトルとロゴデザインを強調したトップページで、フェードアウトで切り替わるエレガントな雰囲気に仕上がっています。
アメリカ西海岸にある国立公園をバーチャル体験できる、インタラクティブなサイトのひとつ。Firefoxでは表示されません、ご注意を。
CSSフィルターを適用することで、イメージ写真に淡いグラデーションカラーを重ねています。
美しい自然の山は、テキスト文字を配置するのにもぴったりです。
山並みイメージはデザインが高いだけでなく、ブランドイメージもアップする効果も期待できます。
スクロールすると画面の奥に引き込まれるような、奥行き感たっぷりのエフェクトが再現されています。
美しい高画質イメージ写真を採用しているだけでなく、コンテンツのユニークな切り返し方もポイント。
ヘッダーイメージ以外も、自然をかんじるアース色エレメントで統一されたユニークなサイト。
独創的でオリジナリティーの高いコラージュアートを採用しています。
透明の切り込みガラスエフェクトを加え、パララックスエフェクトとして採用しています。
フリーランスデザイナーのポートフォリオサイトで、モノクロ写真が見事な背景イメージとして活用されています。
スクロールで伸縮するナビメニューとの相性もバッチリです。
The Cares Route – Peaks of Euroep (Leon)
ヨーロッパはスペインにある国立公園で、壮大な景色をスライドショーでたのしむことができます。
アウトドア系アパレルブランドの公式サイトで、ブランドイメージともマッチしたイメージ写真が印象的に利用されています。
子ども用サマーキャンプの様子を、ダイナミックなグラフィック画と一緒に紹介しています。
ページをスクロールすると、景色が雲の中に吸い込まれていくエフェクトがクール。
イメージ写真を見せながらコンテンツを表示する、ユニークに工夫されたレイアウトは今後のデザインにいかがでしょう。
ロゴデザインと背景イメージ写真の配色カラーパレットを合わせることで、より統一感を表現します。
壮大なストーリーが注目されている映画公式サイトでも、上空から撮影した山並みが使用されています。
パララックスエフェクトで表示されるイメージ写真は、見出しテキストをより強調してくれます。
厳しい環境をものがたる雪山は、また新しい印象を与えてくれます。
[info_box]プレミアムWordPressテーマにも、山並みをモチーフにしたデザインが公開されています。今後注目しておきたい、デザイントレンドのひとつかもしれません。[/info_box]
フルスクリーンで表示したり、パララックスを使ったりコンテンツに応じて切り替え可能なプレミアムテーマ。
テキストを重ねることで、より伝えたいメッセージを強調することができます。
マルチに使いこなすことができそうなシンプルテーマで、ヘッダーイメージに山デザインを採用しています。
すべてのコンテンツを1ページに集約した、シングルページ完結型レイアウト。
左固定ナビメニューに、幻想的なグラデーションが美しい山の景色が背景に広がります。
参照元リンク : 25 Examples of the “Moutains” Trend in Web Design – Line 25
