2016年のまんがタイムきららアニメを振り返る

2016年のまんがタイムきららアニメを振り返る

2016年のまんがタイムきららアニメを振り返る
manga time kirara dokidoki visual anime html5

まんがタイムきらら Advent Calendar 2016 - Adventar 5日目の記事にようこそ! 今日は2016年のまんがタイムきらら作品を振り返ってみよう!

2016年のアニメ放送されたまんがタイムきらら作品たち

今年は冬に0作というスタートを切り、少々不安がありましたが計4作が地上波で放映されました。

  • 三者三葉
  • あんハピ♪
  • NEW GAME!
  • ステラのまほう

それぞれ思い入れの強い作品もあると思いますが、それぞれの作品のいい点悪い点を評価していきます。 評価といってもストーリーや作画などの主観が大きく影響するようなものではなく、 公開されている情報から客観的に図れる値を使う振り返り方をしてみます。

三者三葉

2016年春アニメとして放映の開始されたこのアニメ、実に長い間連載を続け今か今かとアニメ放送を楽しみにしていた人も多いかと思います。 さて、そんな三者三葉のWebサイトを見てみましょう。

Webサイトスクリーンショット

TVアニメ『三者三葉』公式サイト

三つ葉が散る穏やかな背景に美少女たちがセンターを飾る美しいサイトです。 見た目は美しいですが、中身はどうでしょう。早速中をのぞいてみましょう。

Webサイトソースコード1 head

おっといきなりのXHTML宣言!さすが長い間連載していただけあって古のXHTMLで綴られています。 しっかりとmetaやlinkの空タグをXHTMLとして閉じていますが、 <img>が空タグとして記述されていません。なんてこった。

また、モダンWebサイトに見られるOpenGraphの拡張タグもなく、TwitterやFacebookで共有されることを想定していない古の設計です。

Webサイトソースコード2

ソースコードのバージョン管理を行っていないのか、コメントアウトによって削除とする方針がとられているようです。 コードだけではなくコーディングスタイルも古いようですね。 しかしこれは連載開始時期を考えれば妥当かもしれません。

リソースの参照先をみるとcore_sysというディレクトリに配置しているようです。 このcore_sysでGoogle検索すると面白いことがわかります。

core_sys - Google 検索

ディレクトリインデックス丸出しのすてきなサイト群がみつかることから、こういったサイトを制作するのが得意な外注業者がいるような匂いが漂いますね。

ドメイン取得日は2015年9月24日と1年とちょっと前ですが、見た目とは裏腹にWebサイトのコードは2000年代後半のそれを思わせる仕上がりです。すてき。

しかし悪いところばかりではありません。モダンな技術にすがらないこともあって、この三者三葉のサイトは2016年のまんがたタイムきららアニメ作品のWebサイトの中で、唯一JavaScriptが無効の状態でもしっかりと表示されるように作られているのです。 さすがですわ。

三者三葉まとめ

機能 状態
HTML宣言 XHTML
文字コード UTF-8
jQuery 1.11.3
OGP なし
IEサポート なし
リソース配置位置 /core_sys
viewport width=1000px
noscript “Javascriptを有効にしてください”
JavaScript無効表示 対応
Serverレスポンスヘッダ Server: Apache
ドメイン取得日 2015-09-24

あんハピ♪

これも時期を同じくして2016年春アニメとして放映されました。 三者三葉と比べれば、連載開始は大幅に近代化された後なのでWebページの中身も期待ができます。

Webサイトスクリーンショット

TVアニメ「あんハピ♪」公式サイト

四つ葉が散る穏やかな背景に美少女たちがセンターを飾る美しいサイトです。 この時期は葉っぱを散らせるのがブームだったのでしょうか。既視感のある背景です。 さて、中身はどうでしょう。

Webサイトソースコード1 head

来ましたHTML5宣言!さすが新しい作品だけあってHTMLも最新のもので記述されています。 そしてOpenGraphのmetaタグも記述がなされており、TwitterやFacebookで共有される喜びを知っているかのようです。 加えてスタイルシートはLESSで書かれているようです! モダンWeb技術をもりだくさん取り込んでいて大変に美しいWebサイトです。

Webサイトソースコード2

これもまたソースコード中にコメントアウトによって要素や機能を削除するといった箇所が見られますね。アニメWebサイト制作の現場ではバージョン管理システムは使ってないんでしょうか。

ドメイン取得日は2015年10月26日と番宣開始を前後して用意したようです。

あんハピ♪まとめ

機能 状態
HTML宣言 HTML5
文字コード UTF-8
jQuery 2.1.4
OGP あり
IEサポート なし
リソース配置位置 /wp-content
viewport width=device-width
noscript なし
JavaScript無効表示 対応
Serverレスポンスヘッダ Server: Apache
ドメイン取得日 2015-10-26

NEW GAME!

漫画が話題になってからアニメ化するまでの速度がものすごく早かった印象のNEW GAME!。 2016年秋アニメとして放映されていました。 コミック化の時期を考えると最も新しい部類に分けられるこのアニメ、はたしてWebサイトも新しい技術が使われているのでしょうか。

Webサイトスクリーンショット

TVアニメ『NEW GAME!』オフィシャルサイト

ページ下部でやんややんやうるさいキャラが動いていますが、他はあまり強い印象のないWebサイトです。 真ん中に登場キャラクターがそれぞれ漫画のコマのように分けられてメインを飾っています。 おとなしい見た目をしていますが、中身はどうでしょう。

Webサイトソースコード1 head

これもまたHTML5です!HTML5ですがちゃんと古いIEに対してのサポートを忘れない心意気があります。 既存のライブラリなどのリソースは/libディレクトリ下に、それ以外はその用途ごとにディレクトリを作成して置いているようですね。

Webサイトソースコード2

突如として現れる&nbsp;の嵐。狂気しか感じません。

NEW GAME!まとめ

機能 状態
HTML宣言 HTML5
文字コード UTF-8
jQuery 1.8.3
OGP なし
IEサポート html5.js
リソース配置位置 /css, /lib, /js, /assets
viewport width=device-width
noscript なし
Serverレスポンスヘッダ なし
ドメイン取得日 2015-12-18

ステラのまほう

2016年冬アニメのほんわか担当として放映されているゆるふわアニメです。

Webサイトスクリーンショット

TVアニメ「ステラのまほう」公式サイト

ほわほわしているアニメですが、背景の星がめまぐるしく上昇しているアクティブなWebサイトです。かわいいですね。 さて肝心のソースコードはどうでしょう。

Webサイトソースコード1 head

おっとまたしてもXHTML!そして見慣れた core_sys のリソースディレクトリ! さすが同じきらら作品だけあって依頼する業者が同じだったということですね。 しかしコメントアウトで機能を除外することもなくなっていることが確認でき、半年前の作品よりは成長しているように感じます。

しかし成長ばかりではなく、JavaScriptを無効にした状態では表示が崩れてしまう退化とも言える変わりぶりもあります。

SNS部のアニメですが、SNS用のOpenGraphタグはなく、SNSの語源がSocial Networking Serviceでないことを再確認させられます。

ステラのまほうまとめ

機能 状態
HTML宣言 XHTML
文字コード UTF-8
jQuery 1.12.0
OGP なし
IEサポート なし
リソース配置位置 /core_sys
viewport width=1050
noscript “Javascriptを有効にしてください”
Serverレスポンスヘッダ なし
ドメイン取得日 2015-12-03

まとめ

かわいい女の子も中身は汚い心を持っているということがありますが、アニメのWebサイトにも同様ということがわかりました。

とにもかくにも、このご時世にOGPタグを設定していないのはいかがなものかと思います。 せっかくの宣伝の機会なのですし、SNSを利用してよにもっと知ってもらえるよう、適切にタグを挿入しておいてほしいです。

また、ここまで読めばわかる通り、トップの画像はそれぞれのサイトをJavaScript無効で読み込んだスクリーンショットです。 このご時世JavaScript無効にする奴なんて鼻で笑われるかもしれませんが、 広告業界が悪質な誤クリックを誘発させる造りであったりマルウェアをJavaScript経由で読み込ませようとしていたりすることから、 信頼の置けるサイト以外ではJavaScriptを無効にするのがあたりまえな2017年が来るかもしれません。 そういったことを考えると、JavaScript無効でも表示できるようにしておいて損はないでしょう。

このエントリーをはてなブックマークに追加
mzyy94
mzyy94
Sun
Mon
Tue
Wed
Thu
Fri
Sat