その他

2022.07.27

【サイトレビュー#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サイトでも、ユーザーの見やすいデザインは疎かにしないように心がけたいですね。

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

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    デザイン

    その他

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×