その他

2022.07.20

【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

こんにちは!

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

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

ご紹介Webサイト「Safe Haven」

https://safe-haven.net/investment/

今回ご紹介するWebサイトは、個人投資家のための信託サイト「Safe Haven」です。

こちらのWebサイトは、CSS Design AwardsとAwwwardsどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/safe-haven-investment/39301/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/safe-haven-investment

真似したいポイント

ボタンをホバーした時の近づいてくるアニメーション

サイトにアクセスすると、信託サイトということで早速「I wanto to invest(投資したい)」というボタンが右に配置されています。

ボタンが大きくとてもわかりやすくていいですね。

ボタンにマウスカーソルを合わせてみると、ボタンが目のようになり、マウスカーソルに追従してきます。

「投資してほしい!」という思いが感じられ、とても面白いアイデアだと思いました。

シンプルで洗練されたデザイン

Webデザインアワードに入賞しているサイトの中では、とてもシンプルなサイトだと思います。

しかし、要所要所にアニメーションを入れていたり、レイアウトが特殊なところがあって寂しい印象は受けません。

画像はほぼ使わずにテキストが大半を占めたページですが、強調したいテキストはフォントサイズを大きくしてメリハリをつけるなどしているので読みやすいです。

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

実際に投資した際の想定リターンが計算できる!

トップページ中間あたりに、「投資金額」と「期間」をバーで調整することで、実際に投資した際の予想収入を算出することができます。

入力ではなく、バーを動かすだけで簡単に算出することができるので、気軽に操作することができます。

また、ページ遷移することなく算出金額がリアルタイムで表示される点も、とてもノンストレスでユーザビリティに優れているなと思いました!

まとめ

「どのようにすればユーザーが使いやすいか」を突き詰めたデザインのサイトでした!

Webサイトはユーザーに見ていただくためのものなので、ユーザビリティは常に心がけていたいです。

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

この記事をシェアする

関連記事

  • 2024.03.22

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

    その他

  • 2024.03.12

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

    その他

  • 2024.02.02

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

    デザイン

    その他

おすすめ記事

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

    2022.06.01

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

    デザイン

    制作

  • 2022.04.12

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

    コーディング

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

×