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編)... 先月に重い腰をあげてようやく常時SSLの対応をしました。 去年からやろうやろうと思っていたのですが、調べてみると自分の契約しているサーバーで常時SSLの対応をするとなると結構費用がかさむ(無料でできない)のが発覚したので、初動から苦労をしてしまいました。 常時SSL対応をするために 常...
無料か有料どちらでブログをやるかのメリット・デメリット... ブログを始めるにあたって、有料のものにするか、無料から始めるべきか迷われる方も多いと思います。 本記事ではブログを始められる方へ、有料ブログ・無料ブログのメリット・デメリットをご説明します。 無料ブログと有料ブログの違い 無料ブログと有料ブログどちらが良いのかは一概に言えません。...
Webデザイナーがクラウドソーシングを発注側で使ってみた... 先日作成した「俺の嫁が可愛い」のロゴを「クラウドワークス」で発注してみました。 発注側で利用したのは初めてでしたので、その所感を紹介します。 なぜ自分で作らずに発注したか Webデザイナーを名乗ってるますが、私ロゴとかのデザイン得意ではないので、多少「俺の嫁が可愛い」を通じてち...
WebデザイナがWindowsからmacに乗り換えた感想... これまで15年ほど生粋のWindowsユーザーをしていましたが、この度MacBook Airに乗り換えました。 理由は仕事で関わる人が全員Macなので私だけWindowsだと業務に支障が出る事を懸念してになります。 正直ずっとWindowsでやっていくつもりでしたので半分くらい乗り気ではなか...
Webデザイナが開発環境を作るにあたっての課題について考えてみた... 先日個人的にWordPressのお仕事いただいて自分で開発環境を作っていたのですが、ふとこの工程を自分でできるWebデザイナってどのくらいいるのかなと疑問を覚えました。 幸い私は大きなトラブルなく構築できた(以前似たような構成の案件があった)のですが、従来案件確定の段階で重要視されるのはスケジ...
ここ地雷かも?と思えるWeb関係の会社を見分ける勘所... Web関係の仕事をしているなかで、「あっ、この人・会社いけてないなー」とか思うシーンは何度かあると思うのですが、結果的にその勘があたる、精度が高いものを一つ紹介します。(※個人の感想です) 専門用語の言い間違いから見える人柄と環境 Webの制作やってるところで、営業さんとかも含めて、...