【勝手にWEBサイトレビュー #09】遊び心溢れるカナダのクリエイティブ制作会社のWebサイト

こんにちは！

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

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

ご紹介Webサイト「kffein」

https://kffein.com/en/

今回ご紹介するWebサイトは、カナダのデジタルクリエイティブ会社「kffein」のコーポレートサイトです。

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

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

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

真似したいポイント

ホバーで画像を表示

トップページをスクロールしていくと「Latest projects」で制作したWebサイト等のの実績がリストで並んでいます。

各リストにマウスカーソルをホバーさせると、各実績に関連した画像が表示されます。

表示された画像はゆらゆらと動いています。水の中で漂うようなアニメーションが気持ちいいですね。

さらにそのままカーソルを動かすと、ゆらゆらしながら追従してくるのも面白いです！

テキストだけのリストが並んでいても、どんな実績なのかイメージしづらいですが、ホバーして画像が表示されることで、ページ移動する前にイメージしやすいですね！

クリックでパンチできるアニメーション

実績リストからさらに下へスクロールしていくと、ページ中央に目が現れ、マウスカーソルがボクシンググローブに変わります。

目がギョロギョロとボクシンググローブを追ってくるので、目をクリックしてみると、なんとクリックがパンチのアニメーションになり、目をつぶすことができます！

目はしばらくしたら復活し、何が起きるわけではないのですが、こういう遊び心がいいですね。

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

ボタンを押すと突然始まるブロック崩し

ファーストビュー下あたりに「DON’T PUSH」というボタンがあり、マウスカーソルを当ててみると「REALLY？」というテキストに変わります。

押すなといわれると押してみたくなるもの…。

押してみると、なんとボタンがボールに変わり、ブロック崩しが始まります！(ブロックはありませんが…)

しかし上部の下線が引いてあるテキストに当てると画像が表示されるなどちょっとしたアニメーションも。

ついつい遊んでしまいました。

404ページで謎の猫のボールが大量に現れる！

404ページとは、サイトに存在しないページにアクセスした際に表示されるページのこと。

あまり表示されるページではないため、「ページは存在しません。」などと一言添えておくだけのシンプルなページが多いですが、こちらのWebサイトは一味違います。

https://kffein.com/en/404

こちらのWebサイトの404ページにアクセスすると、謎の猫が映ったボールが大量に落ちてきます。

さらに、その猫ボールをドラッグして掴んで遊ぶことができます。

404ページまで惜しみなく遊び心溢れていますね。

こちらのページはぜひ音声ありでご覧ください。

メンバー紹介のアニメーションがかっこいい！

ABOUTページの下部に「Teams」というセクションがあり、会社のメンバーを横スクロールで見ることができます。

https://kffein.com/en/about

横スクロールで移動する時に、人物画像がしなるアニメーションをするのですが、スクロールする方向によって、人物画像がしなる方向が異なります。

また、各人物にマウスカーソルを合わせると、「名前」と「役職」が人物の周りを衛生のように周ります。

「名前」の出し方1つ取っても一工夫ありますね。

Webサイト各所のしなるようなアニメーション

サイト全体の動きがやわらかいのが印象的ですね。

うにょうにょしたような動きやしなる動きなど…。

ついつい何回もボタンを押したり、ページ移動したくなるような気持ちのいいアニメーションが魅力的でした！

まとめ

ゲームのように遊べる工夫や、細部にまでこだわったアニメーションが魅力でした！

アニメーションが気持ちよく、サイト内を回遊しているだけで楽しいのでぜひ見てみてください！