No.024ラッコズ

ラッコズのWebサイト

ラッコズ

キャラクター「ラッコズ」の公式ウェブサイト。

選んだポイント

「ラッコズ」の存在は知らなかったが、楽しいアニメーションが目に止まったので。

ファーストビューの印象

ラッコズたちが楽器を演奏しながらプカプカと水に浮かぶ。ゆるーい雰囲気。ポインタを動かすと波紋が起き、彼らがそれに合わせて動く。

ツイッター、インスタ、フェイスブック等のアイコンも書き下ろされていて、それぞれホバーするとアニメーションするこだわりよう。細部に至るまでトンマナが徹底されている。

レイアウト

フルスクリーン

レスポンシブ対応

あり
ブレイクポイント：768px,940px

フォント

見出し：Montserrat
本文：12.6984px ap (オリジナル？)

メニュー

PC：ナビゲーションバー
SP：ハンバーガーメニュー

カラー

メインカラー：#88DDCF　ターコイズブルー

感想、参考になった部分

こちらも遊び心あふれるサイト。

ファーストビューのみ、ポインタの起点と動作時間に応じて波紋が起きる仕組み。

ツイッターアイコンの鳥が羽ばたく、NEWSリンクの画像がバウンドするようにズームするなどアニメーションがとにかく豊富で、楽しく読み進めることができる仕様となっており、最後まで読み進めた先にCTAボタンが複数配置されている。また、ナビゲーションを始め、どんなボタンにも必ずホバー時に動きがあり、ここは押せるんだ、というのが明確になっている。

パララックス効果にてスクロール速度とリンクしないオブジェクトがあり、ふわふわ浮いているような不思議な感触。

キャラクター紹介で2カラムでひとキャラだけ左側に固定となり、そのキャラクターがメインなんだとわかるようになっている。

可愛くてショップに行きたくなった。

 

No.024ラッコズ|Webサイト100選