日本各地ですごしやすい秋の季節となりました。週末に山登りやキャンプ、自然テーマパークなどへ出かける方も多いのではないでしょうか。
そんな自然の美しい風景を、ウェブデザインに利用した印象的なWebサイト20個をまとめたエントリー「20 Web Designs with Beautiful Landscape Photos」がLine25.comで公開されていたので、今回はご紹介します。
フルスクリーンを使ったWebデザインや、タイポグラフィーを組み合わせることで、よりユーザーに効果的なアプローチができそうです。今後のWebデザイン制作の参考にいかがでしょう。
詳細は以下から。
風景デザインを使った、印象的なWebサイトデザインまとめ
体調や運動効果などを計測するユニークなデバイスで、ページをスクロールするとパララックスエフェクトを使って、商品紹介をユニークに展開してくれますよ。
斜めに切り込みが入ったユニークなレイアウトとなっており、余白スペースを十分とることで、エレガントな高級感を演出しています。タイポグラフィーとの組み合わせも見事な、イギリスにあるホテルのWebサイト。
ヘッダー全体に特集コンテンツ用イメージスライダーを実装しており、アニメーションを使ったタイポグラフィーとの融合はデザインアクセントにばっちりです。
アメリカはサウスカロライナ州の海に浮かぶ島を丸ごと買い取り、販売しているアメリカンな不動産会社のWebサイト。
島のアトラクションや快適性などを、たっぷりのイメージ画像と一緒に伝えます。
ニューヨークにある大学の公式Webサイトなのですが、画像を大量に利用したパララックスエフェクトで、コンテンツごとに切り替えます。
こちらの記事でも一度触れている、最近よく見かける風景画をぼかして背景デザインとして利用したWebサイト。
ギリシャにある海沿いのラグジュアリーホテルのWebサイトで、コンテンツごとにイメージ画像を切り替えています。
ロンドンにあるWebデザイン事務所のポートフォリオサイトで、ロゴを真ん中に持ってくることでインパクトたっぷりなレイアウトに仕上がっています。
Dave Gamache: Designer & Developer.
フルスクリーン写真をパララックス効果と組み合わせた、シンプルで印象的なデザインレイアウトが◎。
スキーやスノーボード関連のブランドで、ダーク系でざいんすることで、よりイメージ画像やサムネイルを引き立っています。アクション素材を使って、写真加工をしておくとよいですね。
Webサイトやアプリ制作などを行うアメリカのデザイン事務所で、フルスクリーンの画像スライダーを使ったデザインが素敵。
イメージ画像にタイポグラフィーを組み合わせることで、ユーザーによりメッセージ性を強く伝えることができます。ヘッダー部分のスムーズなコンテンツ展開も見逃せません。
アメリカにあるグランドキャニオンなど世界的に有名な国立公園のトレイル、遊歩道を歩くツアー。壮観な景色が魅力的で、思わず旅行に行きたくなりませんか。
こちらもぼかしを加えた風景イメージを背景画像として利用しているサイトの一例。
子供たちに向けて行われる、アメリカのサマースクール募集の公式ページで、パララックスエフェクトを利用したダイナミックな仕掛けが満載です。
アウトドア関連のアパレルブランドらしく、大自然を感じる写真を背景に使ったWebデザイン。左固定ナビゲーションもシンプルで分かりやすいです。
オーストラリアにあるデザイン事務所のポートフォリオサイトで、各コンテンツごとに背景のイメージ画像を切り替えています。虹、きれいですよ。
まとめとして、、
今回まとめたWebサイトの多くで、パララックスエフェクトをうまく取り入れることで、よりイメージ画像を効果的に魅せています。今後のトレンドとなるのでしょうか、たのしみです。
ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ
パララックスWebデザインを実現する、無料プラグインを一緒にまとめていますのでご参考までに。
サムネイル@ : A Springtime Tennessee Vacation – Let’s Get Started
参照元リンク : 25 Web Designs with Beautiful Landscape Photos – Line25.com
