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や使って見たいライブラリなど見つかったので、こんな感じで毎期アニメサイトも要チェックしていきたい所存です。

関連記事

無料か有料どちらでブログをやるかのメリット・デメリットとオススメサーバー... ブログを始めるにあたって、有料のものにするか、無料から始めるべきか迷われる方も多いと思います。 本記事ではブログを始められる方へ、有料ブログ・無料ブログのメリット・デメリットをご説明します。 無料ブログと有料ブログの違い 無料ブログと有料ブログどちらが良いのかは一概に言えません。 ブ...
Webデザイナが開発環境を作るにあたっての課題について考えてみた... 先日個人的にWordPressのお仕事いただいて自分で開発環境を作っていたのですが、ふとこの工程を自分でできるWebデザイナってどのくらいいるのかなと疑問を覚えました。 幸い私は大きなトラブルなく構築できた(以前似たような構成の案件があった)のですが、従来案件確定の段階で重要視されるのはスケジ...
Web Asssembler(ウェブアセンブラー)という職種を自分の中で整理してみた... Web Asssembler という職業を皆さんご存じですか? 私は一週間くらい前まで知りませんでした。 知ったきっかけはこちらの「カスタムフィールド製造業ならびにWebアセンブラーという職業について」です。 私のWeb Asssembler(ウェブアセンブラー)の解釈 ...
簡単かつ速攻でWebサイトを持てるGoogleマイビジネスの新機能... 2017年6月からGoogleマイビジネスに簡単なウェブサイトを作れるWebサイトビルダーの機能がつきました。 簡単かつ無料でつくれるのでホームページを持っていない人には朗報ですね。 すぐにインデックスされるので、検索でもすぐに引っかかる事ができそうです。 使い方 Goo...
2015年の振り返りと2016年に向けて|会社員 Advent Calendar 2015... 今年もAdvent Calendarに参加第1弾「会社員 Advent Calendar 2015」です。 他にもディレクターとかWeb解析とかやる予定です。 私は会社員してまして、今の会社は今年で2年目です。 ようやく社内の下積みを抜けて色々自分でできるようになったのでその振り返りです...
有料でも使いたいと思えるWEBサービス... WEBって大体のものが無料で使えるような錯覚に時々陥るのですが、中にはお金出してでも使いたいと思えるサービスってありますね。 4月から気持ちを入れ替えるために今使ってる有料のサービスを見直しました。 見直すつもりが新しいおもしろそうなサービスも見つけてしまったので、自分の忘却用にまとめました。...