アニメサイト考察

アニメのサイトのデザインを自分なりに考察をしてアウトプットしていきます。

TVアニメ「ACCA13区監察課」公式サイト

f:id:chanohajp:20170115161914p:plain

感想

赤と淡いベージュでぱっきりと区切られていて、おしゃれ! キャラクターそれぞれの二面性を表しているのかな?と変に想像してみる。 装飾としてのラインがロードの時にも使われていたりと統一感があり好感が持てるサイトだなー 下層ページでは背景の鳥の頭の部分が要素で見え隠れしているのや、 グッズのページ数が多くて次の商品を見るごとに一度リセットされるのが少し気になった。

f:id:chanohajp:20170115163125p:plain キャラクターの相関図では、驚くほど線が引かれておらずで、 あまり深く関わっていかないのかなと。 ジョーカーゲームに近い雰囲気を感じたので楽しみに見ていきたい。

TVアニメ「テイルズ オブ ゼスティリア ザ クロス」公式サイト

f:id:chanohajp:20160821114656p:plain

感想

色々と話題に上ったゼスティリアのアニメ。 ufotableの綺麗な幻想的かつ厨二病溢れるエフェクトとテイルズの雰囲気が凄くマッチしていて良い作品になっていた。 サイトとして一番驚いたのは右上の「Language」ボタン。 メインビジュアルと同化しすぎていて分かりづらいが、11言語にも対応している。 テイルズ作品ともなるとここまでの言語対応が必要なんだな。 サイトのタイトルの代わりに好評放送中を持ってくるとはそこまで好評だということを出したいのか。。 作品名は右カラムの名ビジュアル下にしか無く、構造を見ててもよくわからないものになっていた。 とは言いつつも、このサイトに来る人はもうどういう作品かタイトルなんて分かっている人しかこないことを考えるとそれでも正しいのかもしれない。

ページ構成

  • TOP
  • NEWS
  • ON AIR
  • INTRODUCTION
  • STORY
  • CHARACTOR
  • STAFF&CAST
  • MOVIE
  • SPECIAL
  • GOODS&OTHERS
  • BLU-RAY

サイト横幅

1024px

フォント

"Times New Roman", Garamond, Roman, Century, Georgia, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "MS P明朝", "MS 明朝", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Helvetica Neue", Helvetica, Arial;

OGPイメージ

http://toz-thex-anime.tales-ch.jp/jp/wp-content/themes/toz-x/images/twcard.png

キーワード

テイルズ オブ ゼスティリア ザ クロス,ゼスティリア,テイルズ,Zestiria,TOZ,Tales

ディスクリプション

TVアニメ「テイルズ オブ ゼスティリア ザ クロス」公式サイト

プラグイン

なし

公式サイトURL

http://toz-thex-anime.tales-ch.jp/

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

f:id:chanohajp:20160708004036p:plain

感想

トップページでもキャラクターが可愛く動いたり、下層ページも遷移してきた時に、 キャラクターがふわっと動いたり可愛さを動きで表現されている箇所が見受けられてかわいかった。 キーワードにアニメのタイトルが入っていないのも珍しいな。OGP設定していないサイト案外ある・・?

ページ構成

  • NEWS
  • ONAIR
  • INTRODUCTION
  • STORY
  • STAFF&CAST
  • CHARACTOR
  • PRODUCTS
  • MOVIE
  • SPECIAL

サイト横幅

1100px

フォント

sans-serif

OGPイメージ

なし。

キーワード

芳文社,まんがタイム,きららキャラット,KRコミックス,得能正太郎,アニメ,新番,コミック,ゲーム

ディスクリプション

青葉が高校を卒業して、入社したのはゲーム会社!小学生の頃大好きだったゲームを作った人が会社の先輩で…。芳文社まんがタイムきららキャラット」の大人気作品が待望のTVアニメ化決定!

プラグイン

jquery-1.8.3.min.js, jquery.easing.js, jquery.colorbox-min.js, snowfall.jquery.js

公式サイトURL

http://newgame-anime.com/

ラブライブ!サンシャイン!! Official Web Site

f:id:chanohajp:20160707010414p:plain

感想

OGP無い。。なぜ。ディスクリプションも前のものと同じになっているよう。 画像もソース上で引き伸ばしたり・・どうしてこうなった。。

ページ構成

  • ニュース
  • キャスト&スタッフ
  • ストーリー
  • メンバー紹介
  • Blu-ray情報
  • CDリリース情報
  • 浦の星女学院購買部

サイト横幅

1024px

フォント

"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, "MS Pゴシック", sans-serif

OGPイメージ

なし。

キーワード

ラブライブ!,LoveLive!,電撃G'sマガジン,ランティス,サンライズ,アイドル,アキバ

ディスクリプション

サンライズ×ランティス×G'sマガジンが送り出す、新世代アイドルプロジェクト「ラブライブ!」の公式Webサイト。彼女たちの活動状況や、最新情報などはここでチェック!

プラグイン

jquery-1.8.0.min.js, jquery.mousewheel-3.0.6.pack.js, jquery.fancybox.js

公式サイトURL

http://www.lovelive-anime.jp/uranohoshi/

RS計画

今期のメカアニメの一つ。
ロゴの格好良さとトップのメインビジュアルの雰囲気から見たい気持ちがそそられる。
ストーリーページに大きく絵コンテが珍しく表示されているけれど、これは結構コアなアニメファンをターゲットにしているということなのかな。

メカニカルのページでもメカの線画などがページの上部に表示されており、そのメカの説明自体はなぜか一番下に配置されている。
ストーリーや設定を説明して・・ではなく、絵とか雰囲気に興味を持った人に見てもらいたいのかな。

トップページをワイヤーフレームにしてみると、メインビジュアル下のお知らせとその下にあるNEWSはラベルは違えど内容は同じことに気がついた。
そろえてあげたら良いのになー。

RS計画公式サイト

感想

レスポンシブになっていることも良かったけど、それ以上にタイトルまわりのテキストがほぼSVGで作られていることが嬉しい驚き。

http://rsproject.jp/resources/images/common/gnav_cast-staff.svg

description

「僕たちの見たいメカアニメをつくろう製作委員会」コンテスト企画グランプリ作品『RS計画 -Rebirth Storage-』公式サイト

コンテスト企画があってそのコンテストから生まれたアニメなのかーなるほど!

keywords

<meta name="keywords" content="メカつく,めかつく,僕たちの見たいメカアニメをつくろう製作委員会,アニメ化,コンテスト,自主制作,応募,企画,RS計画">

略してメカつくというそう。

ページ構成

  • ストーリー
  • キャラクター
  • メカニカル
  • 配信情報
  • キャスト/スタッフ

サイト横幅

100% レスポンシブ

フォント

'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif

OGPイメージ

http://rsproject.jp/resources/images/common/og_image.jpg f:id:chanohajp:20160707003403j:plain

プラグイン

jquery-1.9.1.min.js, jquery.cookies.js, jquery.fademover.js, jquery.magnific-popup.min.js, jquery.nivescroll.min.js, riot_compiler.min.js

サイトデザイン

f:id:chanohajp:20160702162518p:plain

f:id:chanohajp:20160702162539p:plain

僕のヒーローアカデミア

週刊少年ジャンプで連載中の漫画が原作。ボンズが制作ということで、アクションシーンの動きや作画は安心して見られそう。

トップページでは黄色に集中線の印象的な画像を背景に敷きつつ、イラストにあった迫力のある動きで勢いのあるヒーロー感を演出しつつ、フォントはアメコミのヒーローを彷彿とさせるものを選んでいる。また最小の横幅が比較的広く作られているため、背景の文字にかぶってしまう箇所がある。

f:id:chanohajp:20160329161605p:plain

ページ構成

  • 最新情報

  • イントロダクション

  • エピソード

  • キャラクター

  • スタッフ&キャスト

  • 音楽情報

  • グッズ

  • 原作コミックス

  • ギャラリー

  • ムービー

  • スペシャ

サイト横幅

横幅:1200px(最小)

フォント

"MS Pゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif

OGPイメージ

OG関係のタグなし。

キーワード

僕のヒーローアカデミア,ヒロアカ,アニメ,堀越耕平,週刊少年ジャンプ,集英社

ディスクリプション

君はヒーローになれる。原作:堀越耕平(集英社週刊少年ジャンプ」連載中)のTVアニメ『僕のヒーローアカデミア』公式ホームページ。

プラグイン

jquery.cookie.js, jquery.colorbox.js, jquery.jrumble.1.3.min.js, spin.js

公式サイト

http://heroaca.com/

【アニメサイト考察】 だがしかし

2016年の冬アニメがいよいよ始まりましたね!

今季は2クール目に入る作品や、2期目の作品も多く、期待作品も個人的に多いので、期待しています。 このブログでは、アニメのサイトを自分らしく考察してアウトプットする場として使えればなと思っております!

だがしかし

作品内に出てくる駄菓子屋の入り口をモチーフにした装飾など、全体的に駄菓子屋の壁や床をイメージした装飾が多いトップページです。原作サイトへのリンクがあるのも原作のあるアニメならではかなと。 サイト全体の装飾としては、紙を破ったようなギザギザと丸を多用していました。

f:id:chanohajp:20160111003858j:plain

ページ構成

  • トップページ
  • 最新情報
  • 放送情報
  • スタッフ・キャスト
  • あらすじ
  • 登場人物
  • BD&DVD情報
  • 関連商品
  • 特集一覧

キーワード

だがしかし,だがし,小学館,コトヤマ,シカダ駄菓子,アニメ,TV,テレビ,TBS

ディスクリプション

TBSテレビがお届けする「だがしかし」TVアニメ化決定!TBS・BS-TBSほかにて2016年1月放送開始予定!!

プラグイン

lightbox.js, jquery.flexslider.js

OGPイメージ

http://www.tbs.co.jp/anime/dagashi/images/logo.jpg
f:id:chanohajp:20160111003904j:plain

サイト幅

横幅:980px

フォント

Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", Meiryo, sans-serif;

公式サイト

www.tbs.co.jp