まんがタイムきらら Advent Calendar 2016 - Adventar 5日目の記事にようこそ！ 今日は2016年のまんがタイムきらら作品を振り返ってみよう！
2016年のアニメ放送されたまんがタイムきらら作品たち
今年は冬に0作というスタートを切り、少々不安がありましたが計4作が地上波で放映されました。
- 三者三葉
- あんハピ♪
- NEW GAME!
- ステラのまほう
それぞれ思い入れの強い作品もあると思いますが、それぞれの作品のいい点悪い点を評価していきます。 評価といってもストーリーや作画などの主観が大きく影響するようなものではなく、 公開されている情報から客観的に図れる値を使う振り返り方をしてみます。
Table of Contents
三者三葉
2016年春アニメとして放映の開始されたこのアニメ、実に長い間連載を続け今か今かとアニメ放送を楽しみにしていた人も多いかと思います。 さて、そんな三者三葉のWebサイトを見てみましょう。
三つ葉が散る穏やかな背景に美少女たちがセンターを飾る美しいサイトです。 見た目は美しいですが、中身はどうでしょう。早速中をのぞいてみましょう。
おっといきなりのXHTML宣言！さすが長い間連載していただけあって古のXHTMLで綴られています。 しっかりとmetaやlinkの空タグをXHTMLとして閉じていますが、 <img>が空タグとして記述されていません。なんてこった。
また、モダンWebサイトに見られるOpenGraphの拡張タグもなく、TwitterやFacebookで共有されることを想定していない古の設計です。
ソースコードのバージョン管理を行っていないのか、コメントアウトによって削除とする方針がとられているようです。 コードだけではなくコーディングスタイルも古いようですね。 しかしこれは連載開始時期を考えれば妥当かもしれません。
リソースの参照先をみるとcore_sysというディレクトリに配置しているようです。 この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ページの中身も期待ができます。
四つ葉が散る穏やかな背景に美少女たちがセンターを飾る美しいサイトです。 この時期は葉っぱを散らせるのがブームだったのでしょうか。既視感のある背景です。 さて、中身はどうでしょう。
来ましたHTML5宣言！さすが新しい作品だけあってHTMLも最新のもので記述されています。 そしてOpenGraphのmetaタグも記述がなされており、TwitterやFacebookで共有される喜びを知っているかのようです。 加えてスタイルシートはLESSで書かれているようです！ モダンWeb技術をもりだくさん取り込んでいて大変に美しいWebサイトです。
これもまたソースコード中にコメントアウトによって要素や機能を削除するといった箇所が見られますね。アニメ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サイトです。 真ん中に登場キャラクターがそれぞれ漫画のコマのように分けられてメインを飾っています。 おとなしい見た目をしていますが、中身はどうでしょう。
これもまたHTML5です！HTML5ですがちゃんと古いIEに対してのサポートを忘れない心意気があります。 既存のライブラリなどのリソースは/libディレクトリ下に、それ以外はその用途ごとにディレクトリを作成して置いているようですね。
突如として現れる の嵐。狂気しか感じません。
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サイトです。かわいいですね。 さて肝心のソースコードはどうでしょう。
おっとまたしても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無効でも表示できるようにしておいて損はないでしょう。