【サイトレビュー#35】スタイリッシュなデザインでもユーザーへの親切な工夫が素敵!ロンドンのデザインディレクターのWebサイト

こんにちは!

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

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

ご紹介Webサイト「SABATO」

今回ご紹介するWebサイトは、ロンドンのフリーランスデザインディレクターSABATO氏のWebサイトです。
こちらのWebサイトは、CSS design AwardとAwwwardsどちらも入賞しています。

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

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

真似したいポイント

作品の詳細をクリックした時の動き

トップページのFV(ファーストビュー)のすぐ下に、制作実績が大きな映像で複数配置されています。

各制作実績をクリックすると詳細ページに遷移するのですが、遷移のアニメーションがスムーズすぎて最初は「全画面ポップアップかな?」と思いました!

以下の通りURLも変わっていますし、ページ遷移していますね。

https://sabato.studio/works/jadu

このようにページを移動したと感じさせないアニメーションはユーザーがストレスなく回遊できるのでぜひ参考にしたいと思いました。

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

ページの現在位置を示すメーターを左上に固定配置

こちらのWebサイトには、Menuボタンの横にページの現在位置を示すメーターが配置されています。

制作実績の画像を画面いっぱいに使って紹介しているのでその分ページは縦に長くなっていきますが、このような工夫があると訪問ユーザーが位置を把握できて親切だなと思いました!

マウスカーソルの軌跡やテキスト表示

マウスカーソルを動かすとキラキラと軌跡が描かれます。これはシンプルにとても綺麗なアニメーションですね…

ドットや丸い物体が追従してくるマウスカーソル(通称:マウスストーカー)はよく見るのですが、このようなマウスカーソルは初めて見たので感動しました。

マウスストーカーを実装しているアワードサイトのレビューはこちら

また、制作実績のリンクにカーソルを置くと制作実績名と「View Project」と表示されたり、詳細ページでは「Scroll」と表示されるなど、マウスカーソルで動作の説明をしてくれるので、訪問ユーザーはとっても見やすいです!

フッター直前の跳ね上がるアニメーションが楽しい!

フッター直前に制作実績と見せかけて、クリックすると中の画像やテキストが跳ね上がるだけのエリアがあります。

制作実績を見る流れでついついクリックし、興味をそそられしばらく遊んでいました…

遊び心があってとってもいいですね!

まとめ

全体的にスタイリッシュなWebサイトなのですが、現在位置を示すメーターやテキスト表示のカーソルなど、ユーザーが見やすい工夫をとても細かな視点で盛り込んでいました。

かっこいいWebサイトでも、ユーザーの見やすいデザインは疎かにしないように心がけたいですね。

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

関連記事

  • 2021.07.23

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

    サイトレビュー

  • 2021.07.22

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

    サイトレビュー

  • 2021.07.21

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

    サイトレビュー

おすすめ記事

  • 2021.06.08

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

    CSS

    WordPress

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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