2024.07.23
AIにワイヤーフレームをつくってもらった！
- その他
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
こんにちは！
Webデザインアワードで入賞しているWebサイトのご紹介第30回です。
今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます！
目次
今回ご紹介するWebサイトは、アテネの中心部にある、写真撮影や会社の会議、 ワークショップやプライベートレッスンなどに利用されるオープンスペースの紹介サイトです。
▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/the-highloft/38421/
▼Awwwards掲載ページ
https://www.awwwards.com/sites/the-highloft
FVでは複数の画像が散りばめられており、明度が暗くなっていて視認しにくいですが、マウスホバーするとスポットライトを当てられたように画像が明るくなって浮き出てきます。
最初見えにくいからこそ、気になってマウスカーソルを当ててしまいますね。気になる写真の情報だけ入ってくるのがスッキリしていいなと思いました！
また、マウスの動きに合わせて画像がゆらゆらと動くのも面白いですね！
ページ移動をする際は、グリッド調の背景に合わせて黒い背景が画面を覆って移動します。
Webサイトの雰囲気に合ったアニメーションで、切り替わり方がスムーズでストレスを感じません。
トップページ中間あたりでレンタルスペースのギャラリーがありますが、縦スクロールで画像を横にスライドできるため、別途ドラッグしたり、横スクロールをする必要がありません。
縦スクロールをしないとページ下部にたどり着けないため、訪問ユーザーに「全ての画像を見せたい！」という場合にはいい仕様だと思いました。
ドラッグでオープンスペースの画像を切替えることができる
The Loftページで画面幅いっぱいのオープンスペースの画像が配置されています。
真ん中にある「click & drag」というアイコンをドラッグしてみると、ドラッグに合わせて、「扉を閉じたオープンスペース」と「扉を開放したオープンスペース」を部分的に切り替えることができます。
2つの画像をそのまま配置するのではなく、このような切替式にすることでサイト内がスッキリしますね。
ハンバーガーメニュー内のリンクにホバーさせると、左側に画像がニュッと出てきます。
ナビゲーションはどうしてもテキストリンクのリストのみなど、簡素なつくりになりがちですが、ホバーで画像が出てくるだけで賑やかな印象になっていいですね。
Host an eventページで、レンタルスペースの活用方法について説明をしているセクションがあります。
ここでは会議室や劇場、ワークショップなど各活用方法についての説明をしていますが、説明が終わるまでは右側に間取り図を固定して見せています。
ECなどでよく見る仕様ですね。スタイリッシュなWebサイトであるにもかかわらずユーザビリティを意識した構造にしているのがとてもいいですね。
ユーザビリティを意識しつつ、見せたい内容はしっかり見せるなど、バランスが取れたWebサイトだと思いました！
ユーザーが使いやすいWebサイト構造は常に意識して制作していきたいですね！
前回のレビューはこちら！
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/