【勝手にWEBサイトレビュー #11】見せ方が面白い！フォント紹介サイト

こんにちは！
Webデザインアワードに入賞しているWebサイトのご紹介第11回です。

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

ご紹介Webサイト「WhirlyBirdie!」

https://whirlybirdie.com/

今回ご紹介するWebサイトは、アメリカの50年代の広告にインスピレーションを受けて作られたフォントの紹介サイトです。

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

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/whirly-birdie-variable-font/38191

▼Awwwards掲載ページ
https://www.awwwards.com/sites/whirly-birdie-typeface

真似したいポイント

コンテンツを選びやすい大きいカーソル

サイト内の全てのカーソルがデフォルトの物よりかなり大きくなっており、ボタンを押したり、コンテンツの選択がやりやすくなっています。
また、カーソルの種類がコンテンツに合わせて変化するため、クリックorホバー時にどんなことができるかもカーソルからわかるようになっています。

細かい動きやこだわりが盛り沢山

普段あまり設定をしないテキスト選択時の色や、ホバー時の動きが細かいところまで付けられています。
左上のメニューもスクロールをするとコンテンツの位置によってイラストが変わったり、メニューの中身のテキストはホバーの動きをテキストの塊にではなく一文字一文字に付けられています。

色々な動きが入っていると、クリックをするとどうなるのか気になってコンテンツを押してみたくなると思いました！

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

イラスト部分がSVGやテキストで描かれている

ファーストビューのイラストや、お部屋の中を描いているイラスト部分を検証ツールで確認してみると、ほとんどがSVGやこのサイトで紹介されているイラストフォントで作成されていました。
読み込みの速度も早くなり、コンテンツの入れ替えや見ている画面によって色の変更などカスタマイズがしやすいため、すごいと思いました！

自分のイメージに合うかの確認がしやすいフォント紹介部分

フォントを確認する時によくあるフォントの種類の変更や太さといった内容だけでなく、背景色やフォントの幅、イタリック体の調整などより細かく設定できるようになっています。
入力欄も5つあるため色々な設定のテキストを作成でき、見比べることでよりユーザーが使おうと思っているコンテンツに合う設定の確認や、使ったときのイメージが持ちやすいと感じました。

まとめ

面白い動きや細かいこだわり、ユーザーが実際に使うときのイメージが持ちやすいような工夫があり、面白いだけではなく使いやすいサイトだと思いました。

紹介されているフォントもイラストフォントにアニメーションが入る工夫がされていたり、フォントを使用してみたくなる工夫が沢山あるので、ぜひ覗いてみてください！