2013年春アニメWebサイト・コード選手権

昨年、ちょっとした話のネタにするために、アニメ系Webサイトをいくつかソース見て回ってHTML5対応状況なんかを調べてたんだけど、アニメWebサイトでコードが一番いい感じなサイトってどれだろうと気になって、2013年春アニメのWebサイトのコードを全部見て独断と偏見をもとにレビューしてみた。

レビューの基準としては、Google Chromeで閲覧・ソースコード表示(場合によっては要素の検証まで) し、シンプルさ・分かりやすさ・読みやすさを基準に、HTMLファイルのみを評価対象とした。よって、デザインやコードの作法(画像置換がどうのとか、属人的な好みによるもの等) については、評価の対象とはしていない。CSSやJavascript、スマートフォン対応も含めてレビューするのが本当なのだろうけど(一部してるけど)、この数のサイトにそこまでやってると死ねるので、HTMLファイル単体のコードのみを見ていった。(経験上、HTMLファイルのコードがきれいなら、だいたいCSSや他のコードもきれいで読みやすいことが多いし)

春アニメの情報は、デカきたスケジュール様 のサイトから各タイトルを確認し、まずWebサイトのトップページのみソースチェック、HTML5対応であれば他のページもいくつか見て回る、といったスタイルで行った。調査は5月6日の午前1時過ぎから5時ごろにかけて、サイクロプス少女さいぷ?から俺妹2期までチェックし、それ以降のタイトルについては、7日の午前1時過ぎから6時ごろにかけてチェックした。並び順は デカきたスケジュール様 のサイトに準じ、最速放送日順とし、重複タイトルは除いた。

・・・と、一通り書いてみたけど、軽く見て回るだけでかなりの時間がかかって死にたくなったので、夏以降もやるかどうかは未定。ちなみに自分は、Webサイトのコードの美しさによって見るアニメを決める程度には変態です。(タイトルすら知らなかった「さくら荘のペットな彼女」をそれで観ることに決めた)

 

Webサイトレビュー

• サイクロプス少女さいぷ?
• XHTML 1.0 Transitional
• 人様のことは全く言えないが、divのネストが煩雑な印象。ソースは読みづらいと感じた。(HTML5以外はトップページしか見ていないので、トップページのみの感想です)

• RDG レッドデータガール
• HTML5
• headerやarticle、footerなどHTML5固有のタグもしっかりと使われている。HTML5なのにHTML5で新設されたタグを使わない、なんちゃってHTML5対応サイトもある中、ちゃんと作り込まれていて好印象。ソースもシンプルで読みやすい。

• ガールズ＆パンツァー
• XHTML 1.0 Transitional
• ソースはネストも少なく読みやすい。ただ、画像のaltが全て「ガールズ＆パンツァー」だったので、その辺りのコーディングにも気を使ってほしかった。

• デート・ア・ライブ
• XHTML 1.0 Transitional
• ソースコードはシンプルで読みやすいが、コメントアウトで以前使われていた文面らしきものや、styleでdisplay:noneしてる部分があったりと、コードクリーニングができてない感じ。

• DD北斗の拳
• XHTML 1.0 Transitional
• しょっぱなからローディング画面でしばし待たされる。コードもかなり長く、javascriptが全て直書き、コメントアウトにiframeと、昨今のWebトレンドからはほど遠い印象。何となく見た目も懐かしい感じがするというか、子供向けアニメという事もあってか、これはこれで味があるのかな。

• トレインヒーロー
• XHTML 1.0 Transitional
• こちらも子供向けアニメ。コメントがちゃんと付いてるし、読みにくいということもない(トップはそもそもflashだし)。メイン部分はflashだけど、flashじゃなくても別にいいんじゃないかなーという程度の使われ方なのが残念(中でPV再生されるわけでもなく、インタラクティブなメニューやコンテンツがあるわけでもない)。テレビ東京の自動挿入っぽいヘッダー部分は除外して評価した。

• マイリトルポニー　?トモダチは魔法?
• XHTML 1.0 Transitional
• トレインヒーローと似たようなコード。同じテレビ局のアニメカテゴリーだからかな。こちらはflashが使われてないくらい程度の差。トレインヒーローもそうだったけど、twitterやFacebook、mixiと連携するボタンをきっちり用意しているのが興味深い。子供向けアニメでも、SNSでの話題の広がりを重視する時代になったのかな。こちらもテレビ東京の自動挿入っぽいヘッダー部分は除外して評価した。

• カーニヴァル
• XHTML 1.0 Strict
• Strictは珍しいなーとと思って見てたけど、a属性にtarget=”_blank”使ってて、ダメじゃんって気分に。昔俺が作ったサイトでは、これを回避するために色々と手間かけたんだぞ、という個人的な理由により見る気をなくした。バリデーター通すと他にも結構エラーが見つかる。コードは読みやすいだけに残念。

• ガッ活！ 第2シリーズ
• XHTML 1.0 Transitional
• 悪いわけじゃないけど、charsetがShift_JIS。サーバーはHTTPヘッダ見る限りはApacheみたいなんだけど、何かこだわりでもあるのかしら。コードはシンプルで読みやすい方です。

• 黒魔女さんが通る!! 新シリーズ
• XHTML 1.0 Transitional
• コード全体でほとんどインデントされておらず、読みにくい。構成としてはシンプルなだけに残念。

• 断裁分離のクライムエッジ
• XHTML 1.0 Transitional
• フルflashサイト。

• うたの☆プリンスさまっ♪マジLOVE2000％
• XHTML 1.0 Transitional
• コードはシンプルで、インデントもしっかりしており読みやすい。特筆することがあまりないかな・・・。

• やはり俺の青春ラブコメはまちがっている。
• XHTML 1.0 Transitional
• TBSコンテンツメニューは自動挿入されるコードっぽいので、それ以下をチェックした。シンプルで比較的読みやすいコードかな。

• 銀河機攻隊 マジェスティックプリンス
• XHTML 1.0 Transitional
• コード全体でインデントが全くされておらず、読みにくい。javascriptが長々とhead内にあるのが気にはなるけど、ダメというわけじゃないし(あとページ下だと動かなくなるスクリプトもあるし)、そこは好みかな。コードはシンプルです。

• DEVIL SURVIVOR2 the ANIMATION
• HTML5
• header、nav辺りのタグは使っているけど、全体的にdivを多用していてちょっと残念。どうせならarticleとかaside、footer等も使ってマークアップして欲しかった。コードも若干読みづらい。また、ニュースページは別システムを入れているためか、HTML5ではない。デザインはレビュー対象外だけど、動画っぽく動くトップページの作りは、HTML5の可能性を感じられて好感が持てる。(HTML5の新技術使ってるわけではないとか、他のページはflashだったりするのはご愛敬)

• はたらく魔王さま！
• HTML5
• メニュー部分が、まさかのテーブルレイアウト・・・。そしてスペーサー画像で間を開けてるとか・・・。HTML5なのに新設されたタグや表現も何一つ使っていない。トップページ以外は見る気しないので、HTML5サイトで唯一他のページは見なかった。電撃大王のコミカライズが好きで毎月読んでるだけに、残念すぎる(私怨)。

• フォトカノ
• XHTML 1.0 Transitional
• TBSコンテンツメニューは自動挿入されるコードっぽいので、それ以下をチェックした。やはり俺の青春ラブコメはまちがっている。とよく似たコードの雰囲気。シンプルで読みにくいという事もあまりなく、特筆することはない感じ。

• 百花繚乱 サムライブライド
• HTML5
• シンプルで読みやすく、HTML5の新タグもきっちり用途毎に使われていて、画像のローディングにも工夫があり、文句なしにいい作り。「さくら荘のペットな彼女」のWebサイトにも感心したが、こちらのサイトもそれと肩を並べる。同じ会社がコーディングしたのかな。

• 惡の華
• HTML 4.01 Transitional
• トップページは、今時1枚画像のみのカバーページ。iframeでメインコンテンツを呼んでいたりと今時のサイトではないが、ソースコードにちょっと工夫があって楽しめる(少し前に流行ったアレ)。iframeで読み込まれるページも、divのネストが多くて煩雑、読みづらい印象。

• 秘密結社 鷹の爪 MAX
• XHTML 1.0 Transitional
• アニメのみのサイトではなく、鷹の爪団の公式サイトのようなので、省略。軽く見た感じ、コードは見づらい印象を受けた。

• プリティーリズム・レインボーライブ
• XHTML 1.0 Transitional
• テレビ東京の自動挿入っぽいヘッダー部分は除外して評価。コンテンツの分量が少ないこともあり、コードは読みやすい。そしてアクセス解析SiteCatalystの圧倒的存在感。他のテレビ東京内のアニメサイトも見直してみたけど、このサイトのみ圧倒的な物量で迫ってきているのはなぜなんだぜ ?

• 鉄人28号ガオ！
• XHTML 1.0 Transitional
• フジテレビ共通っぽいメニューは除外して評価した。シンプルで見やすく、悪くないコードだが、スタッフ間の空白を開けるのに、brタグ2個でってのがちょっと残念。まあ自分も手を抜いてやりがちなので、人のことは言えませんけどね・・・。

• 団地ともお
• HTML5
• 右クリックメニューが出なかったので、Ctrl+Uでのぞいてみた。これまたcharsetがShift_JIS。中身はしっかりHTML5で、新設タグもちゃんと使われているし、シンプルでいい感じ。トップページはdivで複数ネストしてる部分がちょっと残念なのと、今どき右クリックメニューを表示させない理由が分からないのが難点かな。(スマートフォン対応してる部分で何か問題でもあるのかな)

• ぼくは王さま
• XHTML 1.0 Transitional
• 出版社のサイトの1ページのようなので、省略。ぱっと見た感じ、コードはわりと読みやすい感じだった。

• 俺の妹がこんなに可愛いわけがない。
• XHTML 1.0 Transitional
• 黒猫がかわいすぎて生きているのがつらい。それはさておき、コードはインデントがほとんどないものの、内容がシンプルなので読みやすい部類。特筆すべきところはあまりないかな。

• ロボカーポリー
• XHTML 1.0 Transitional
• テレビ東京の自動挿入っぽいヘッダー部分は除外して評価。インデントはないけどコードは読みやすい。トレインヒーローと似たような構成だけど、flashを使ってないだけシンプルな印象。

• 絶対防衛レヴィアタン
• HTML5
• よくある、なんちゃってHTML5サイト。新規タグは一切使っていない。divネストも深いし、宣言がHTML5である必要性が全くない印象。ページのコードはインデントが適切で読みやすい部類。デザインは評価外だけど、サイドメニューにロールオーバーくらいは付けて欲しいなーと思った。

• よんでますよ、アザゼルさん。Z
• XHTML 1.0 Transitional
• ページ内javascriptが長いなーとは思うけど、それは俺の主観かなー。コードはインデントも入ってて、そう読みづらくもない。改行が少なめなので、読みやすいかと言われると微妙。

• 進撃の巨人
• HTML5
• headerタグは使われてるけど中身空白とか、javascriptコードがいろんなところに出てくるとか、コメントアウトが多いとか、HTML5である必然性が薄いのと、コードクリーニングや構成がイマイチという印象。

• 探検ドリランド -1000年の真宝-
• XHTML 1.0 Transitional
• インデントがほぼないけど、読みづらくはない。バナーのalt属性が空とか(まあバナーくらいなら無くてもいいけど)、コメントアウトに露骨なテスト用テキストが入ってたりとか、divネストちょい深めとかはあるけど、内容もシンプルなので特筆することはなし。

• 波打際のむろみさん
• XHTML 1.0 Transitional
• スターチャイルド共通メニュー部分は除外して評価。全体に改行は少ないけどインデントはちゃんと入ってるので、読みづらいわけではない。内容がシンプルなので特筆することは少ないけど、お馬鹿なハーピーとか結構好きです。(関係ない)

• はいたい七葉
• XHTML 1.0 Transitional
• WordPressベースだからか、更新情報部分が空白開きまくりで読みづらい。あと更新情報部分はテーブル構成じゃなく、他のサイトみたいにdt使うとかリストタグで何とかして欲しかったかなーと。全体的にはシンプルでしっかりとしたコーディングだと思います。

• ジュエルペット ハッピネス
• XHTML 1.0 Transitional
• テレビ東京の自動挿入っぽいヘッダー部分は除外して評価。インデントもちゃんとしているし(一部気になるところもあったけど、それは俺の好みかもだし)、シンプルで読みやすい印象。テレビ東京の子供向けアニメのコードやデザインは、どれもよく似ているなーと流し見してて思った。

• 這いよれ! ニャル子さんW
• HTML5
• トップページとか一部はHTML5だけど、XHTML 1.0 Transitionalのページも混在しているので、トップページだけ評価。新規タグは一切使ってないなんちゃってHTML5、javascript長め、インデントほぼなし、更新情報が2期だから多くなってきてページが長いのは仕方ないにしても、HTML5宣言はしなくてもいいかなーという印象。

• ガラスの仮面ですが
• HTML5
• なんちゃってHTML5サイト。コードはインデント・改行もしっかりしていて読みづらくはない。HTML5宣言の必然性はないと思うけど。

• 血液型くん！
• XHTML 1.0 Transitional
• 出版社サイトの1ページみたいなので、評価は省略。内容は文字を画像で貼り付けてるのでユーザビリティは低いと思いきや、altで画像と同じ文面を全て入力しててちょっと感心したものの、そんな労力かけるくらいなら、初めから画像じゃなくて文字入力すればいいのにと思った。

• バトルスピリッツ ソードアイズ激闘伝
• HTML 4.01 Transitional
• メイン部分はテーブルレイアウト。そしてspacer.gif。古き良き時代のWebサイトの基本形を見ている気分に。別に否定をする気はない、けど、さすがにそろそろこういうサイトを新規で作るって案件は、なくなってもいい時代だと思うんだ・・・。

• 翠星のガルガンティア
• XHTML 1.0 Strict
• デザインは評価外だけど、全画面画像レイアウトで印象的な作り。Strictって事でコードの中身も期待したけどエラーだらけ。aタグのtargetはもとより、onClickの大文字とか指摘されまくり。またメニューにそれが埋め込まれているからコードも見づらくなっているし。空divとかはまあ自分もやったりしてるので人様に指摘はできないけど、Transitionalでいいじゃんという印象。鳴子ハナハルさんのイラスト大好きなだけに残念(私怨)。

• 宇宙戦艦ヤマト２１９９
• XHTML 1.0 Transitional
• インデントがほとんどなくて読みづらい以外は、まあコードは普通かなーと思うけど(javascriptは親切なコメント付き)、1ページに内容詰め込みすぎで、コードもそうだけどページ自体も見づらい印象。大作のWebサイトなだけに、もう少し何とかならなかったのか残念な気持ちに。

• アラタカンガタリ?革神語?
• HTML5
• 空headerタグの使い方や、javascriptコードが変なところに現れる感じが、進撃の巨人サイトと何となく似てる気がするサイト。両者ともあとはfooterタグを使っているくらいで、やっぱりHTML5サイトである必然性は薄い感じ。

• ムシブギョー
• XHTML 1.0 Transitional
• インデントが少なく、コメントアウトがいくつか、という以外には特筆するところはない感じ。インデントの少ない更新情報はCMS使ってるか、コード流し込みなのかなー。

• ハヤテのごとく！ Cuties
• HTML5
• インデントは少なめだけどコードは読みやすく、header、section、footerも使われているが、divも多く限定的な利用に見えるので、その辺りがやや残念。全体としてはシンプルでいい感じかなと。関係ないけど36巻の瀬川さんの表紙はエロすぎて思わず(ry

• あいうら
• HTML 4.01 Transitional
• ページ直のCSS長すぎ。思わず笑ってしまうくらい長い。ニコ動の仕様だと仮定してもひどい。さらにchannel-main以下にもCSSが大量に。HTMLコードもCMSとかの関係だろうけど、読みやすいとは言えない。もうちょっと頑張ろう ?

• ゆゆ式
• XHTML 1.0 Strict
• ここに至ると、もうStrictには絶望しか待っていない気持ちでサイトを見たが、期待を裏切らない内容でした。aタグのtarget警告は、もうStrictではお約束ですね。翠星のガルガンティアほどエラーは多くなかったけど、おとなしくTransitionalにしましょうよ・・・。コードの読みやすさはインデント少なめだけど、全体的にはそんなに悪くもないです。

• スパロウズホテル
• XHTML 1.0 Transitional
• ニュース部分、ulタグの中にh2タグが来て、その後にliタグってのはダメだと思います。インデントはないけど、コード全体はシンプルで読みづらさはさほどでもないが、CMSとかにコード埋め込むときのテンプレート間違ったのかなー、と思うようなミスはいただけないですね。

• 革命機ヴァルヴレイヴ
• HTML5
• header、section、article、footerと適切に使われていて、コードも読みやすい。全てのページを見たわけではないが、見た範囲においては隙がなく、きちんと作り込まれた素晴らしい出来。デザインは評価外だけど、見た目もエフェクトやら凝っているし、今期アニメではトップクラスのサイト。さすがは西川貴教！(関係ない)。

• とある科学の超電磁砲S
• XHTML 1.0 Strict
• いきなり音が鳴る動画は勘弁してください。そして恐怖のStrictサイトな訳ですが、ゆゆ式サイトよりさらにエラーは減ってたけど、Strictサイトは地雷という思いを新たにしただけだった。コードはインデント少ないけど比較的読みやすい。ニュース部分にテーブルタグがちょっと残念。

• 変態王子と笑わない猫。
• XHTML 1.0 Transitional
• インデントがほぼないけど、内容はシンプルなので読みづらいというほどではない。div多段ネストがあるので、全体の構造を把握するのはちょっと面倒かも。特筆するところはあまりないかな。

• 宮河家の空腹
• XHTML 1.0 Transitional
• テーブルレイアウトとspacer.gif。デザインは評価外だけど、ピンクの右メニュー背景にボタンが馴染んでボタンであることが気づきづらい。ロールオーバーもないのでなおさら。コードに関しては読みづらいって事はないけど、CSS外部読み込みもないしレイアウトはテーブルだから、悪い意味でシンプルなコードかな。ネット配信オンリーみたいだからお金かけられないのかな、と懐事情が透けて見えて涙。

• ひぐらしのなく頃に拡?アウトブレイク?
• HTML5
• 右クリックメニューが出なかったので、Ctrl+Uでのぞいてみた。アクセスすると全画面動画が流れる、見た目が非常に良いサイト。HTML5タグとしてはheader、nav、footerが使われているけど、動画再生の部分でvideoタグとかその辺りが活用されているわけではなかったのが残念。コードは改行が少なく、あまり読みやすいとは言えない。画像多めのイメージサイトという印象。

• レゴチーマ?アニマル戦士たちの伝説?
• XHTML 1.0 Transitional
• アニマックス内ページであるため、省略。

• 忍者ハットリくん
• XHTML 1.0 Transitional
• アニマックス内ページであるため、省略。

• キングダム第2シリーズ
• HTML5
• 右クリックメニューが出なかったので、Ctrl+Uでのぞいてみた。NHKサイトではおなじみのcharsetはShift_JIS。中身は団地ともお同様、しっかりHTML5で作られている。コードもシンプルで読みやすい。

• ちはやふる２
• HTML 4.01 Transitional
• 右クリックメニューが出なかったので、Ctrl+Uでのぞいてみた。日テレ固有のメニュー部分については除いて評価している。インデントがほぼなくて読みづらい印象。他にはあまり特筆するような部分はないかな。

• ドキドキ！プリキュア
• HTML 4.01 Transitional
• テレビ朝日の固有メニュー部分は除いて評価した。もともとflashだったとおぼしきメイン部分(コメントアウトされてる) が、今は懐かしいクリッカブルマップになってるのは、もしかしてスマートフォン対応のためなのだろうか。メニューはロールオーバーして欲しいなーと書こうと思ったけど、クリッカブルマップじゃ無理ですな。コードはインデントなしなので読みやすくはないのと、コードクリーニングがイマイチという部分はあるけど、コメントもあるのでそんなに読むのは難しくないかなと。

 

まとめ

計55サイトを見て回った結果、宣言は以下のような分布でした。

• HTML5
• 14サイト

• XHTML 1.0 Transitional
• 32サイト

• XHTML 1.0 Strict
• 4サイト

• HTML 4.01 Transitional
• 5サイト

このうち、なんちゃってHTML5サイト(HTML5新規タグを全く使っていないサイト)を除くと、HTML5サイトと言えるのは10サイトでした(無理にHTML5宣言をしなくてもいいかなーと思えるサイトを含むと、もっと数は減る)。

もちろん、HTML5宣言をしたからといって、HTML5の新設タグを必ず使わないといけない訳ではないけど、ほぼ固まってきたとはいえ、未だHTML5は企画策定中だし、ブラウザ対応も含めて安全側に振るならXHTML 1.0 Transitionalでもいい訳で。

にも関わらず、現時点でHTML5宣言を行ってサイトを作るなら、HTML5の新設タグや機能をちゃんと考えてコーディングして欲しいなーというのが、個人的な願望です。

 
で、今回巡回した中でのベスト3はと言うと、

• 1位 革命機ヴァルヴレイヴ
• 2位 百花繚乱 サムライブライド
• 3位 ハヤテのごとく！ Cuties

という感じです。

3位はハヤテのごとく！ CutiesとRDG レッドデータガールで迷ったけど、全体的にハヤテのごとく！ Cutiesが勝っていた。5位以下はNHKアニメサイトがほぼ同率、ひぐらし、DEVIL SURVIVOR2、アラタカンガタリ?革神語と進撃の巨人辺りがダンゴで、その他大勢といった印象。

XHTML 1.0 Strictに関しては評価が辛めになってるけど、Transitionalではなく敢えてStrictにしているはずなのに、内容があまりにもアレだったので、そのガッカリ感がコメントに現れた結果とお考えいただければと。自分もStrictサイトをエラー出ないように苦労して作った経験があるので、なおさら厳しくなったという事もあるかもしれません。

比率としては、HTML5サイトが約18%(なんちゃってサイトは除いた数) と、2割近い数あったのが驚きでした(もっと少ないと思ってた)。あと、HTML 4.01 Transitionalがまだ使われていたというのもやや意外でした(自分がXHTML宣言でばかり作っていたので、もう淘汰されたと思っていた)。

数ページ見て回って簡単なコメント書くだけなのに、トータルで10時間くらいかかったのでさすがに疲れましたが、アニメ系サイトの現状をある程度知ったような気分になれて、面白かったです(あと、コード内容から、あのアニメとこのアニメのサイトは同じ会社が作ってるなーとかっていう推測もできるようになりましたし)。

次はないかもですが、こういうのを定点観測して、サイトのコードの移り変わりとか調べてみると面白いかもですね。ええ、無職の暇人じゃないとできませんけどね！(会社倒産しました。仕事ください)