Cntlog > WEB全般 > 2014年春アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ

2014年春アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ

もう4月、新しいアニメが始まり出した時期ですね。
今期のアニメ全然チェックしていなかったので、アニメだけじゃなくサイトの制作部分も一緒にチェックしてみました。

流行りものの技術や気になる演出などがあったサイトをまとめてみました。

TVアニメ「監督不行届」公式サイト

http://www.dle.jp/kantoku/index.html
・横固定のフレキシブなデザイン。
・TOPのイラストはマウスに合わせて動く演出が入っていて芸が細かい。


TVアニメ『蟲師 続章』公式サイト

http://www.mushishi-anime.com/
[技術的に気になるところ]
・右のサムネイルとかはCSS3の「transition」で動かしている。
・徐々に文字を表示させているのは「setTimeout」と「delay」かな。


TVアニメーション「星刻の竜騎士」オフィシャルサイト

http://www.seikokutv.com/
シンプルな設計だが、所々にきめ細かい演出が入っている。

[技術的に気になるところ]
・ナビゲーションのホバー時のアニメーションはCSS3の「transition」で背景を移動させてるのかな。
・NEWマーク変わりのアイコンはCSS3の「animation」でループしてそう。
・ページ遷移の演出(ライブラリなしで独自実装っぽい)


TVアニメ「キャプテン・アース」公式サイト

http://captain-earth.net/
シンプルで今風を狙った感じのデザイン。
派手さはないけれど余白が上手く使ってる…ところもある。
レイアウトは少し他サイトと差別化された印象。


パックワールド アニメ | バンダイナムコゲームス公式サイト

http://pacworld.channel.or.jp/
ランディングページのように1ページで見せるレイアウト。
情報が整理されていて読みやすい。


アニメ『魔法科高校の劣等生』

http://mahouka.jp/
メインイラストを立たてるために他要素を抑えたレイアウト。
ユーザーを飽きさせない演出として、エフェクトを横移動させている。
ファーストビューで放送時期が見えるようにフッター固定させた演出は好き。
私もよく使います。

[技術的に気になるところ]
キャラクターページの読み込み時のふわっとしたアニメーションの管理方法。
・ブラウザ別に処理を替えていた(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);


ドラゴンボール改 東映アニメーション

http://www.toei-anim.co.jp/tv/dragon_kai/
下層ページに到達するとキャラクターが出てくる演出は熱い。
どんなイラストがですか楽しみになるので、最後までスクロールしてしまいそう。
アニメ『魔法科高校の劣等生』」同様フッター固定の演出


アニメ『ハイキュー!!』公式HP

http://www.j-haikyu.com/anime/index.html
メインビジュアルを立たせるために、3カラムのレイアウト。
キャラクター紹介でアコーディオンとスライドを組み合わせた演出は中々見やすい。
また所々で、ツールチップを上手いこと使っていて、情報が整理されている。
何気に右クリック禁止しているのは、イラストを持ってかれないようにするための対策かな。


極黒のブリュンヒルデ|アニメ公式サイト

http://www.vap.co.jp/gokukoku/index.html
左端固定のレイアウトで書くページウインドウサイズに合わせて、画像の大きさを合わせている。
載せる情報が少ないときにインパクトを出すために有効な演出。
Newsをあとから表示させる演出はおもしろい。

[技術的に気になるところ]
・背景サイズの固定はbackgroundSize.js※IE7・8対策


TVアニメ『ピンポン』公式サイト

http://www.pingpong-anime.tv/
今は珍しい右ナビゲーション。
メインビジュアルを一面に使ってインパクト大。
メインビジュアルを立たてるためにナビゲーションなど他オブジェクトをあとから入れるのも芸が細かくて好印象。

下部のキャラクターを押すと大画面で動画が再生されて面白い。
下層ページでは、ページ下部まで行くと、ピンポン球が落ちてくる演出は面白い。


TVアニメ「龍ヶ嬢七々々の埋蔵金」公式サイト

http://www.nanana.tv/
メインイラストをパララックスで表現。
ナビゲーションはくるりと回って面白い。

[技術的に気になるところ]
・ナビのくるりと回る演出は自作と思われる「rotate3Di.js」でサポートしてそう。
・CSS3なら「transform:rotate()」でいける気がする。


オリジナルTVアニメ『selector(セレクター) infected WIXOSS』公式サイト

http://selector-wixoss.com/
・横スクロールデザイン。
・レイアウト・演出も凝っていて面白い

[技術的に気になるところ]
jQueryで横スクロールのアニメーションするサイトを作る方法


『デート・ア・ライブⅡ DATE A LIVE』アニメ公式サイト

http://date-a-live-anime.com/
ナビゲーションを小さくしてメインビジュアルを立たせたページレイアウト。
ファーストビューはほぼイラストで埋め尽くされる。

[技術的に気になるところ]
・ページ遷移時のホワイトアウトがシンプルに実装されてる。
ストーリー紹介のカルーセルがデザインとマッチしていて素敵。
カルーセルのライブラリ:jQuery Smooth Div Scroll


「メカクシティアクターズ」公式サイト

http://www.mekakucityactors.com/
カウントダウンのためかTOPページはキャラクターのみの表示でシンプル。
メインページのキャラクター紹介では、レイアウトがアニメーション移動しておもしろい。
さり気なくキャラクター紹介の背景はパララックスしてる。

飽きさせない演出としてフッターで横移動してるラインも良いアクセントになっている。


TVアニメ「健全ロボ ダイミダラー」公式サイト

http://penguin-empire.com/
このレトロ感やばい。
演出自体は頭3つくらい飛び抜けてる。
狙ってやったディレクターを尊敬してます。
右クリック禁止のalertで腹筋崩壊しました。

総評

高品質なものから~テンプレでデザインされているものまでひと通り見えた実感。
私が得意とするサイトデザインとジャンルは違えど、力を入れるところはやはり似ていました。

どうしても画像が多いコンテンツなので表示中のストレスを減らすためか、lodingページを設けてから表示するページが多かったです。
全体的に演出は似ているところが多く、メインビジュアルでキャラクターをふわっと入れてくる演出は多い。
その際ちゃんとブラウザの際をなくす処理を入れているサイトとそうでないサイトと結構分かれていました。
今期ではないけどのんのんびよりのサイトがIE8(IEテスター)で見るとひどいことになっているので、なんとかしていただきたい。

色々サイトを見て真似したいJSや使って見たいライブラリなど見つかったので、こんな感じで毎期アニメサイトも要チェックしていきたい所存です。

関連記事

サーバーが苦手な方にオススメしたい無料でSSL対応できるサーバー... 先月私はロリポップとさくらレンタルサーバーからZenlogicに乗り換えました。 乗り換えから約一ヶ月が経ってなかなか使いやすいとか変えてよかったなーと思う事が多く乗り換えてよかったと思っています。 同時期に始めた人からも満足してる声をよく聞きます。 自分が気に入っているZenlo...
2014年秋アニメサイトを同業者(Webデザイナ)目線で見て気になったとこ... もう10月です。気がついたら一年終わってしまいしそうですね。 秋アニメ全然チェックしていなかったので、アニメだけじゃなくまたサイトの制作部分も一緒にチェックしてみました。 気になる演出やデザインなど刺激されたサイトをまとめてみました。 ふうせんいぬティニー 下層ページに入った...
Evernoteが料金体系が変わったので違うサービスを検討してみた... Evernoteが2016/6/28に料金体系を変えてきましたね。 ヘビーユーザーの方は結構驚かれたのでは無いでしょうか。 私は端末を跨いでメモアプリとして結構使っていたので、今回の料金体系の変更で使いにくくなってしまった部類です。 無料のプランでは端末2台までの使用しか出来ないので、...
常時SSLに対応するためのレンタルサーバー選定と移管の手順(Zenlogic編)... 先月に重い腰をあげてようやく常時SSLの対応をしました。 去年からやろうやろうと思っていたのですが、調べてみると自分の契約しているサーバーで常時SSLの対応をするとなると結構費用がかさむ(無料でできない)のが発覚したので、初動から苦労をしてしまいました。 常時SSL対応をするために 常...
2015年の振り返りと2016年に向けて|会社員 Advent Calendar 2015... 今年もAdvent Calendarに参加第1弾「会社員 Advent Calendar 2015」です。 他にもディレクターとかWeb解析とかやる予定です。 私は会社員してまして、今の会社は今年で2年目です。 ようやく社内の下積みを抜けて色々自分でできるようになったのでその振り返りです...
放置は怖い、SNSのアプリ連携の解除方法... Googleやtwitterなど連携してアカウントを作るサービスはとても便利ですが、一方で使わないサービスも出てきてそれをずっと放置するのは危険かなと思います。 連携の仕方はボタンひとつで簡単ですが、解除の仕方はよく知らないなと思ったので、調べてみました。 Googleの連携 まずは下記に...