2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは！
Webデザインアワードで入賞しているWebサイトのご紹介第37回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
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」という2つのカテゴリーに分かれており、画面左側に配置されている各リンクをクリックするとスライダーが切り替わる仕様になっています。
このリンクの置き方は斬新だなと…
わかりやすいことは大前提ですが、リンクの置き方一つとっても一工夫いれていきたいですね。
スライダーを切り替るとこれまた背景色が変わり、どちらのスライダーを表示しているのか判断しやすいようになっています。
トップページのスライダーが奇抜なデザインでとてもかっこいいです。
WORKINGスライダーの方では、1つの画像を挟んで2つのスライダーが配置されています。このようなレイアウトは見たことがなかったので最初に見た時は驚きました。
LIVINGスライダーではスライダーが1つのみですが、スライド内の画像が1枚だったり2枚だったりします。
基本1枚の画像がスライドするという固定概念があったので、これは面白いなと！
今やありふれているスライダーもデザイン次第でユニークになりますね。
インテリアデザイン会社のコーポレートサイトということで、建築デザインで見られるような直線・グリッドのデザインを意識している印象でした。
使用されている色も建築・インテリアを感じさせるもので、職業の持ち味を生かしたデザインがとっても素敵なサイトでした！
前回のレビューはこちら！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/