【サイトレビュー#37】直線的なデザインが素敵なインテリアデザイン会社のコーポレートサイト

こんにちは!

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

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

ご紹介Webサイト「InteriorLab」

https://interiorlab.creative-nights.com/

今回ご紹介するWebサイトは、チェコにあるインテリアデザイン会社「InteriorLab」のコーポレートサイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

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

▼Awwwards掲載ページ
https://www.awwwards.com/sites/interiorlab

真似したいポイント

スポットライトのようなホバー動作

interiorページに手がけたインテリアデザインのプロジェクトが掲載されています。

各画像リンクにマウスカーソルを当てると、当てている画像リンク以外が半透明になります。このスポットライトを当てたような表現がとても素敵だと思いました!

一般的にはマウスカーソルを当てたリンクを半透明にして薄くすることが多いと思いますが、逆転の発想ですね!

また、各画像リンクごとに背景色が変わるのがとても綺麗です。

トップページのLIVING、WORKINGリンクの置き方

トップページは、スクロールなしのインテリアデザインのプロジェクトが流れるスライダーのみ配置しています。

プロジェクトは「LIVING」、「WORKING」という2つのカテゴリーに分かれており、画面左側に配置されている各リンクをクリックするとスライダーが切り替わる仕様になっています。

このリンクの置き方は斬新だなと…

わかりやすいことは大前提ですが、リンクの置き方一つとっても一工夫いれていきたいですね。

スライダーを切り替るとこれまた背景色が変わり、どちらのスライダーを表示しているのか判断しやすいようになっています。

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

奇抜なスライダーデザイン

トップページのスライダーが奇抜なデザインでとてもかっこいいです。

WORKINGスライダーの方では、1つの画像を挟んで2つのスライダーが配置されています。このようなレイアウトは見たことがなかったので最初に見た時は驚きました。

LIVINGスライダーではスライダーが1つのみですが、スライド内の画像が1枚だったり2枚だったりします。

基本1枚の画像がスライドするという固定概念があったので、これは面白いなと!

今やありふれているスライダーもデザイン次第でユニークになりますね。

まとめ

インテリアデザイン会社のコーポレートサイトということで、建築デザインで見られるような直線・グリッドのデザインを意識している印象でした。

使用されている色も建築・インテリアを感じさせるもので、職業の持ち味を生かしたデザインがとっても素敵なサイトでした!

前回のレビューはこちら!

関連記事

  • 2021.07.23

    世界のすごいWebサイトをレビュー(まとめ)#4

    サイトレビュー

  • 2021.07.22

    世界のすごいWebサイトをレビュー(まとめ)#3

    サイトレビュー

  • 2021.07.21

    世界のすごいWebサイトをレビュー(まとめ)#2

    サイトレビュー

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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