WEBサイトのデザイン分析②
2023/6/21の課題
アニメーションのあるWEBサイトのデザインを分析するとのことで、今回はこちらのサイトを分析したいと思います！
クリエイターの可哀想に❗さんが手がけるキャラクター「おぱんちゅうさぎ」のオフィシャルサイトです。
最近、SNSや広告などで可哀想に❗さんの作品を見かけることが増えてきましたね。私も可哀想に❗さんの作品の大ファンです。
可哀想に❗さんは独特の世界観を持っていて、特に人間関係のダークな部分をシュールギャグにするのがとても上手で思わず笑ってしまいます。「おぱんちゅうさぎ」もその一つで、説明にもある通り「なかなか恵まれない。今にも泣きそうだが、ひたむきに健気に生きていく」キャラクターです。
もっとわかりやすく言うのであれば「かわいそかわいい」でしょうか？
さて、早速サイトに飛んでみましょう。
ロード画面ではおぱんちゅうさぎがお出迎えしてくれます。
ロードが完了するとぱんつを履いて、上から大量のおぱんちゅうさぎが降ってくるアニメーションが流れました。こういう画面の切り替え方もアリなのか…！
こちらがホーム画面です。
中央におぱんちゅうさぎが立っていて、視線（というか顔全体）はカーソルを追いかけるように移動します。ついついおぱんちゅうさぎの周りをカーソルでくるくるしてしまいます。
現在ホーム画面の種類は二つあって、どちらが表示されるかはアクセスするまでわからないのがワクワクします。
そして背景のオブジェクトをクリックすると… ギミックが隠されていました！ おぱんちゅうさぎの健気な感じがよく現れていて、かわいそうで可愛らしいですね。
これは実際に体験して欲しいので、どこにどんなギミックがあるのかは言いませんが、一つ見つけると「他にもあるんじゃないか？」と思わずあちこちクリックしてしまいます。
ページは下にスクロールすることで移動できますが、どれもたくさん動いてついつい見入ってしまいます。全体的にぽよぽよしていてかわいらしい印象を受けます。
「ABOUT」のページではおぱんちゅうさぎやその仲間たちの説明を見ることが出来ます！
これがまぁ動く動く。カーソルを持っていくとギミックのある場所では形が変わるのですが、それにしてもギミックの数が多すぎます。
まだあるんじゃないか？と探しているうちに、一つのページをじっくりと見ることになる上見つけた時に爽快感があるので、嫌でもおぱんちゅうさぎについて詳しくなってしまいます。
紹介ページとしてこれほど効果的なことはないでしょう。まんまと手の上で踊らされています。
（他のキャラの紹介ページ。もちろんここにもギミックが！）
サイトの色はおぱんちゅうさぎのイメージカラーであるピンク色で統一されていて、あちこちにキャラクターが散りばめられていてもまとまった印象を受けます。
ここでは、可哀想に❗さんが今までSNSにて投稿してきたおぱんちゅうさぎの二コマ漫画を読むことができます。漫画の内容はサイトにてご覧ください！
そして、スクロールバーがおぱんちゅうさぎになっていてかわいい…！！
枠外のおぱんちゅうさぎにもアニメーションがあり、見ていて飽きません。むしろ目が足りない。
そしてこちらがお知らせコーナー。
最新の記事が中央で、右にいくに連れて古くなっていきます。
中央の記事のすぐ左の記事がこのサイトで最も古いもので、わざわざ「古い順」「新しい順」と並び順を切り替えなくても簡単に遡れるのはありがたいですね！
オンラインストアのページにも、もちろんアニメーションが！
気になった商品をクリックすると、オンラインストア専用のページに飛ばされます。今回はあくまでオフィシャルサイトのデザイン研究なのでそちらには触れませんが、導線がわかりやすく、サイト内で迷子になることは少ないのではないでしょうか。
サイトの最下部はお問い合わせページとなっています。
一般のファンである私たちには余程のことがない限り関係のないページで…
あれ、このカーソルの形は…？
ま、まさか………！！！！
こんなところでまで楽しませようとしてくるのか！！！？！？？！
まとめ
あっちこっちでおぱんちゅうさぎが動いていて、見ていて目が楽しいサイトでした。
アニメーションやギミックを加えることで、そのサイトに興味の無い人にもサイトを隅から隅まで見せることができると思いました。探索⇨発見の流れが気持ち良いので、ついつい探してしまうのもとても上手くできていると感じます。
スマホ版では少し動作がカクカクするものの、PC版と変わらない動きとデザインでした。しかし、左上に手のひらのカーソルが動くわけでもなくただ存在し続けていて、タップで操作するのにカーソルはいらないのでは？と思いました。
0コメント