もう4月、新しいアニメが始まり出した時期ですね。 今期のアニメ全然チェックしていなかったので、アニメだけじゃなくサイトの制作部分も一緒にチェックしてみました。 流行りものの技術や気になる演出などがあったサイトをまとめてみました。 TVアニメ「監督不行届」公式サイト [scshot url="http://www.dle.jp/kantoku/index.html" wsize="579" ] ・横固定のフレキシブなデザイン。 ・TOPのイラストはマウスに合わせて動く演出が入っていて芸が細かい。 TVアニメ『蟲師 続章』公式サイト [scshot url="http://www.mushishi-anime.com/" wsize="579" ] ［技術的に気になるところ］ ・右のサムネイルとかはCSS3の「transition」で動かしている。 ・徐々に文字を表示させているのは「setTimeout」と「delay」かな。 TVアニメーション「星刻の竜騎士」オフィシャルサイト [scshot url="http://www.seikokutv.com/" wsize="579" ] シンプルな設計だが、所々にきめ細かい演出が入っている。 ［技術的に気になるところ］ ・ナビゲーションのホバー時のアニメーションはCSS3の「transition」で背景を移動させてるのかな。 ・NEWマーク変わりのアイコンはCSS3の「animation」でループしてそう。 ・ページ遷移の演出（ライブラリなしで独自実装っぽい） TVアニメ「キャプテン・アース」公式サイト [scshot url="http://captain-earth.net/" wsize="579" ] シンプルで今風を狙った感じのデザイン。 派手さはないけれど余白が上手く使ってる…ところもある。 レイアウトは少し他サイトと差別化された印象。 パックワールド アニメ ｜ バンダイナムコゲームス公式サイト [scshot url="http://pacworld.channel.or.jp/" wsize="579" ] ランディングページのように1ページで見せるレイアウト。 情報が整理されていて読みやすい。 アニメ『魔法科高校の劣等生』 [scshot url="http://mahouka.jp/" wsize="579" ] メインイラストを立たてるために他要素を抑えたレイアウト。 ユーザーを飽きさせない演出として、エフェクトを横移動させている。 ファーストビューで放送時期が見えるようにフッター固定させた演出は好き。 私もよく使います。 ［技術的に気になるところ］ ・キャラクターページの読み込み時のふわっとしたアニメーションの管理方法。 ・ブラウザ別に処理を替えていた（Modernizr.js使用） $('セレクター').css({'opacity':0,y:60},0).delay(450).transition({'opacity':1,y:0},1000); $('セレクター').css({'opacity':0,'margin-bottom':'-60px'}).delay(450).animate({'opacity':1,'margin-bottom':'0px'},1000); ドラゴンボール改 東映アニメーション [scshot url="http://www.toei-anim.co.jp/tv/dragon_kai/" wsize="579" ] 下層ページに到達するとキャラクターが出てくる演出は熱い。 どんなイラストがですか楽しみになるので、最後までスクロールしてしまいそう。 「アニメ『魔法科高校の劣等生』」同様フッター固定の演出 アニメ『ハイキュー!!』公式HP [scshot url="http://www.j-haikyu.com/anime/index.html" wsize="579" ] メインビジュアルを立たせるために、3カラムのレイアウト。 キャラクター紹介でアコーディオンとスライドを組み合わせた演出は中々見やすい。 また所々で、ツールチップを上手いこと使っていて、情報が整理されている。 何気に右クリック禁止しているのは、イラストを持ってかれないようにするための対策かな。 極黒のブリュンヒルデ｜アニメ公式サイト [scshot url="http://www.vap.co.jp/gokukoku/index.html" wsize="579" ] 左端固定のレイアウトで書くページウインドウサイズに合わせて、画像の大きさを合わせている。 載せる情報が少ないときにインパクトを出すために有効な演出。 Newsをあとから表示させる演出はおもしろい。 ［技術的に気になるところ］ ・背景サイズの固定はbackgroundSize.js※IE7・8対策 TVアニメ『ピンポン』公式サイト [scshot url="http://www.pingpong-anime.tv/" wsize="579" ] 今は珍しい右ナビゲーション。 メインビジュアルを一面に使ってインパクト大。 メインビジュアルを立たてるためにナビゲーションなど他オブジェクトをあとから入れるのも芸が細かくて好印象。 下部のキャラクターを押すと大画面で動画が再生されて面白い。 下層ページでは、ページ下部まで行くと、ピンポン球が落ちてくる演出は面白い。 TVアニメ「龍ヶ嬢七々々の埋蔵金」公式サイト [scshot url="http://www.nanana.tv/" wsize="579" ] メインイラストをパララックスで表現。 ナビゲーションはくるりと回って面白い。 ［技術的に気になるところ］ ・ナビのくるりと回る演出は自作と思われる「rotate3Di.js」でサポートしてそう。 ・CSS3なら「transform:rotate()」でいける気がする。 オリジナルTVアニメ『selector（セレクター） infected WIXOSS』公式サイト [scshot url="http://selector-wixoss.com/" wsize="579" ] ・横スクロールデザイン。 ・レイアウト・演出も凝っていて面白い ［技術的に気になるところ］ jQueryで横スクロールのアニメーションするサイトを作る方法 『デート・ア・ライブⅡ DATE A LIVE』アニメ公式サイト [scshot url="http://date-a-live-anime.com/" wsize="579" ] ナビゲーションを小さくしてメインビジュアルを立たせたページレイアウト。 ファーストビューはほぼイラストで埋め尽くされる。 ［技術的に気になるところ］ ・ページ遷移時のホワイトアウトがシンプルに実装されてる。 ストーリー紹介のカルーセルがデザインとマッチしていて素敵。 カルーセルのライブラリ：jQuery Smooth Div Scroll 「メカクシティアクターズ」公式サイト [scshot url="http://www.mekakucityactors.com/" wsize="579" ] カウントダウンのためかTOPページはキャラクターのみの表示でシンプル。 メインページのキャラクター紹介では、レイアウトがアニメーション移動しておもしろい。 さり気なくキャラクター紹介の背景はパララックスしてる。 飽きさせない演出としてフッターで横移動してるラインも良いアクセントになっている。 TVアニメ「健全ロボ ダイミダラー」公式サイト [scshot url="http://penguin-empire.com/" wsize="579" ] このレトロ感やばい。 演出自体は頭3つくらい飛び抜けてる。 狙ってやったディレクターを尊敬してます。 右クリック禁止のalertで腹筋崩壊しました。 総評 高品質なものから~テンプレでデザインされているものまでひと通り見えた実感。 私が得意とするサイトデザインとジャンルは違えど、力を入れるところはやはり似ていました。 どうしても画像が多いコンテンツなので表示中のストレスを減らすためか、lodingページを設けてから表示するページが多かったです。 全体的に演出は似ているところが多く、メインビジュアルでキャラクターをふわっと入れてくる演出は多い。 その際ちゃんとブラウザの際をなくす処理を入れているサイトとそうでないサイトと結構分かれていました。 今期ではないけどのんのんびよりのサイトがIE8(IEテスター)で見るとひどいことになっているので、なんとかしていただきたい。 色々サイトを見て真似したいJSや使って見たいライブラリなど見つかったので、こんな感じで毎期アニメサイトも要チェックしていきたい所存です。