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

こんにちは!

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

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

ご紹介Webサイト「The Highloft」

今回ご紹介するWebサイトは、アテネの中心部にある、写真撮影や会社の会議、 ワークショップやプライベートレッスンなどに利用されるオープンスペースの紹介サイトです。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/the-highloft/38421/

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

真似したいポイント

FVのアニメーション

FVでは複数の画像が散りばめられており、明度が暗くなっていて視認しにくいですが、マウスホバーするとスポットライトを当てられたように画像が明るくなって浮き出てきます。

最初見えにくいからこそ、気になってマウスカーソルを当ててしまいますね。気になる写真の情報だけ入ってくるのがスッキリしていいなと思いました!

また、マウスの動きに合わせて画像がゆらゆらと動くのも面白いですね!

ページの切り替わり方が独特

ページ移動をする際は、グリッド調の背景に合わせて黒い背景が画面を覆って移動します。

Webサイトの雰囲気に合ったアニメーションで、切り替わり方がスムーズでストレスを感じません。

縦スクロールで画像をスライドできる仕様

トップページ中間あたりでレンタルスペースのギャラリーがありますが、縦スクロールで画像を横にスライドできるため、別途ドラッグしたり、横スクロールをする必要がありません。

縦スクロールをしないとページ下部にたどり着けないため、訪問ユーザーに「全ての画像を見せたい!」という場合にはいい仕様だと思いました。

ドラッグでオープンスペースの画像を切替えることができる

The Loftページで画面幅いっぱいのオープンスペースの画像が配置されています。

真ん中にある「click & drag」というアイコンをドラッグしてみると、ドラッグに合わせて、「扉を閉じたオープンスペース」と「扉を開放したオープンスペース」を部分的に切り替えることができます。

2つの画像をそのまま配置するのではなく、このような切替式にすることでサイト内がスッキリしますね。

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

ハンバーガーメニュー内のホバー動作

ハンバーガーメニュー内のリンクにホバーさせると、左側に画像がニュッと出てきます。

ナビゲーションはどうしてもテキストリンクのリストのみなど、簡素なつくりになりがちですが、ホバーで画像が出てくるだけで賑やかな印象になっていいですね。

説明が終わるまで右側に画像を固定

Host an eventページで、レンタルスペースの活用方法について説明をしているセクションがあります。

ここでは会議室や劇場、ワークショップなど各活用方法についての説明をしていますが、説明が終わるまでは右側に間取り図を固定して見せています。

ECなどでよく見る仕様ですね。スタイリッシュなWebサイトであるにもかかわらずユーザビリティを意識した構造にしているのがとてもいいですね。

まとめ

ユーザビリティを意識しつつ、見せたい内容はしっかり見せるなど、バランスが取れたWebサイトだと思いました!

ユーザーが使いやすいWebサイト構造は常に意識して制作していきたいですね!

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

関連記事

  • 2021.07.23

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

    サイトレビュー

  • 2021.07.22

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

    サイトレビュー

  • 2021.07.21

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

    サイトレビュー

おすすめ記事

  • 2021.09.24

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

    JavaScript

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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