【勝手にWEBサイトレビュー #05】オーストラリアにあるインテリアデザイン会社のサイト

こんにちは。

Webデザインアワードで入賞をしているWebサイトのご紹介第5回です!

CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます!

ご紹介Webサイト「Polygon Design」

https://polygondesign.com.au/

今回ご紹介するのは、オーストラリアのインテリアデザイン会社「Polygon Design」さんのコーポレートサイトです。

アクセスしてみると、右と左にスクロールできるという案内が出ます。

左側は「Product」エリアになり、建築デザインの実績を見ることができます。

右側は「Design」エリアになり、デザインした家具・インテリアが配置してあり、商品として見ることができます。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/polygon/38360/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/polygon-design

真似したいポイント

このWebサイトを見て、真似したいと思ったポイントをご紹介します。

水平スクロールを活かした空間づくり

水平スクロールによって横長のWebサイトになっていますが、まるで本当の家を探索しているかのような感覚になります。

インテリア・空間デザイン業界では、Webでもできる限りリアルにイメージを伝えたいと思いますが、このデザインならバッチリ伝わりますね。

トップページにインテリア商品が配置してある

通常、「実際にインテリアを配置した参考画像」は、各商品ページに移動して、商品画像リストの中に載っていることが多いと思います。

しかし、トップページの3D空間にインテリア商品を配置することで、すぐにインテリアを置いた時のイメージをすることができますね。

また、商品名がリンクになっていて、クリックすることですぐに詳細ページにアクセスできるので、気になった商品をノンストレスで調べることができます。

ユーザーに親切なデザインで、コンバージョン率もアップしそうです!

すごい!と思ったポイント

続いて、ここはすごい!と思ったポイントをご紹介します。

リアルを感じさせるデザイン・工夫の数々

スクロールする方向によって、配置してあるテキストやインテリアを指している線が流れていく方向が異なります。

こうした奥行きを感じさせるデザイン・工夫の1つ1つがリアルを感じる理由ですね。

スクロールした時の景色の移り変わりも、実際に走っている時の景色のようにリアルです。

波動のような動作

インテリア商品の各リンクにホバーさせると、波動のような動きが起きます。

ホバーの動作でこの動きは斬新ですね!

まとめ

インテリアデザインの魅力をダイレクトに感じるデザインのWebサイトでした。

水平スクロールのWebサイト制作の参考にどうぞ!

0

関連記事

  • 2021.05.04

    【勝手にWEBサイトレビュー#32】建築とWebのデザインが調和している!ポルトガルの建築デザインスタジオのWeb……

    サイトレビュー

  • 2021.04.30

    【勝手にWEBサイトレビュー#31】映像の見せ方が多用な映像制作会社のコーポレートサイト

    サイトレビュー

  • 2021.04.23

    【勝手にWEBサイトレビュー#30】スタイリッシュかつ見やすい!ギリシャにあるオープンスペースの紹介サイト

    サイトレビュー

おすすめ記事

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!