どうもです！ ダンサー兼フロントエンドエンジニアのシスコです！
最近、すっかり暑くなってきましたね！ 暑くて体がだるくなってきそうです。。。
今はそんなにですけど、よく「チョコモナカジャンボ」を2、3個ほおばりながら帰ってたころが懐かしいですね……。
そんなこんなで、今回はアニメーションの参考でWebサイトを漁ってるときに見つけた、個人的にオモシロい・イケてるなって感じたサイトを挙げてみます！！
ドラマの世界観をゲームで体感！「守り人クエスト」
綾瀬はるかさん主演のNHK大河ファンタジー「精霊の守り人」の世界をゲームで体感できるサイトになってます！
人生ゲームのように数字の書かれたルーレットを回して、ひたすら異形の者からマップを駆け回って逃げるというゲームです。先に進めば進むほど、異形の者の進むマスが増えるのと、分岐部分で分裂してくるので、意外と難しいです。3週くらいまでしか回れなかったですね。。。（ちなみに、テレビアニメも放送されています！）
これが次世代のギャラリー「FINAL FANTASY XV TRAIN GALLERY」
FINAL FANTASY XV TRAIN GALLERY
FFXVの開発チームの挑戦・取り組み・決意が、さまざまなビジュアルや言葉で綴られたギャラリーサイトです。電車内の広告を連想させるような見せ方になっていて、今までにないアイデアだと感じ、思わず「おおっ！」となりました。
スクロール・スワイプでギャラリーの速さを制御することができ、3D/2D表示をユーザーの好みで切り替えることもできます！ デザインもそうですが、ホバーや詳細モーダルが開くまでのアニメーションから、FFXVのゲーム感が伝わってきます（ちなみに、スマホでもPCと同じように見ることができます！）。
作り上げられた世界観！「GANTZ:O 公式サイト」
原作でも人気の高い「大阪編」を、フル3DCGで映像化した「GANTZ:O」の公式サイトです。背景動画に、GANTZのメインカラー赤色を敷き、タイトルの中身を切り抜いているところがちょっと洒落てるなと感じました。
メインビジュアルのクオリティが高いのもポイントですが、サイト全体にグリッチエフェクトが程よくかかっているなかで、若干のパララックスやコンテンツのランダム表示、ライフルカーソルのマウス追従など、動く要素が多くあるものの鬱陶しく感じない……。これが、今回のGANTZの世界観を型どっていると言っていいほど合っていると感じます。
また、細かいところですが、再生ボタンの波紋アニメーションが個人的に気持ちいいアニメーションだと思いました。
セーラー少女が奇妙な空間を突き進む
「五五七二三二〇 MASHUP MUSIC PLAYER」
「五五七二三二〇（ココナッツサブレ）」というバンドのミュージックプレイヤーサイトです。「五五七二三二〇」は、お菓子のココナッツサブレが、発売50周年を記念して結成したグループ。アイドルグループ私立恵比寿中学のメンバーがやっているそうです。
セーラー服を着た女の子のアバターが、奇妙な空感をひたすら突き進んでいきます。4曲分の再生項目が下の方にあり、再生するものによってそれぞれ映像にも変化が起こります。選択できるのは 1曲だけではないので、2曲以上再生すると、それぞれの映像効果がマッチする感じになります。
登場するものなどが本当に奇妙で、この世界観はなかなか出せないなと震えました。
＞＞「五五七二三二〇」のオフィシャルサイトはこちら！
最後に予想外のオチ！？
「ソードアート・オンライン –モーメントオブライフ-」
ソードアート・オンライン –モーメントオブライフ-（ソードアート・オンライン×Life CARD）
アニメ「ソードアート・オンライン」とコラボしたクレジットカード（Life CARD）の特設サイトです！
最初のキャラ選択後に、ログイン演出も用意されてました。スクロール操作で先に進んでいく仕様になっており、途中のボス戦はカーソルが剣の形に変化します。左側のメニューにアニメの世界観が出ていたり、右側には小さいアインクラッドを使用して自分がいま何層にいるのかが示されていたりして、凝ってるな、見せ方が上手いな、とひしひしと感じました。
正直、オチに辿り着くまでWebゲームをやってる感覚だったので、最後にクレジットカードが出てきて、思わず「えっ！？ クレカ？」と声が出てしまいました。
iOS10+からの新映像表現！「Questyデビュー曲 FANTASY」
Questy デビュー曲「FANTASY」 特設サイト
※Devツールのスマホ表示でも見れますが、スマホ専用サイトなので、ぜひスマホからアクセスしてください！
今回、一番見てほしいサイトです！ スマホでの映像表現で、最近一番驚愕したサイトですね。
ただのミュージックビデオではなく、触れるんです。タッチをすると文字が飛び出し、スワイプをする中の色が変化し、スクラッチもできるという……。こんなことができるのかと恐ろしくて若干引くくらい、驚きを隠せなかったです。ほんとに。
しかも結構ヌルヌルに動いて重くないんです。仕組みとしては、色別の4分割された動画を範囲して重ね合わせているみたいです。素晴らしく美しいアイデアですよね。これだけは絶対体感してほしいです！
まとめ
今回サイトをあさってる中で、他にもイケてるサイトをいくつも見てき、Webの技術は日に日に進化し続けているんだと再確認しました。
ユーザーの心をつかむ体験・アニメーションや見せ方の部分で非常に勉強になりました。自分もこの早い流れに取り残されず、むしろその波を作っていく心意気でこうゆう「イケてる」ものを作りたいと改めて思いました。
それでは、またまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
