こんにちは、イロコト社員のかわです。

 

おかげさまで弊社ではたくさんのエンタメ案件をいただいております。特にアニメ公式Webサイトの実績が増えてきました。

 

そこで手前味噌ではありますが、イロコトで制作を担当させて頂きましたイケているアニメWebサイト10選をご紹介いたします。

 

 

アニメWebサイト

TVアニメ「D4DJ First Mix」公式サイト

D4DJプロジェクト公式ポータルサイトやD4DJ Groovy Mix（グルミク）アプリゲーム公式サイトも弊社で担当させていただいているのですが、差別化のため、ロゴの色味をベースにポップで爽やかな雰囲気を出しています。また、DJというコンセプトの要素も取り入れたデザインです。

 

ロゴやキャラクターなど随所にアニメーションを実装していますので、ぜひアクセスしてみてください。

 

→TVアニメ「D4DJ First Mix」公式サイト

 

 

TVアニメ「プラチナエンド」公式サイト

サイトデザインにはコミックスに使用されている幾何学モチーフやフォントのあしらいを取り入れ、原作の持つゴシックでシリアスな雰囲気が再現されています。また、作中に出てくる「天使」の羽や輪、矢といったモチーフもデザインに取り入れアニメーションもいれています。

 

また「プラチナエンド」ではユーザー層を考えスマートフォン版を重視して構成しておりますが、PC/スマートフォンでそれぞれ最適に閲覧できるようなレスポンシブデザインです。

 

サイトトップのキービジュアル部分ではPC版の横画面・スマートフォン版の縦画面でそれぞれビジュアルが映えるように、PC版では天使の羽を大きく見せる配置にする等、画面の構成が工夫されています。

 

→TVアニメ「プラチナエンド」アニメ公式サイト

 

 

劇場版「BanG Dream! FILM LIVE 2nd Stage」公式サイト

キービジュアルのイメージを活かして、黒をベースとしたクールなデザインに仕上げました。また、KV内の機材ケースに貼られているステッカー素材をサイト内にちりばめ、クールかつポップな印象になるよう、アクセントとして加えました。前回担当させていただいた劇場版「BanG Dream! FILM LIVE」とはまた違った印象のサイトになりましたね。

 

キービジュアルの特徴的な機材ケースやステッカーのモチーフを活かすため、メニュー画面や下層ページのタイトル箇所などでデザインを再現しました。ほかにも、ライブハウスのイメージを出すため、照明機材や音響機材のモチーフなども盛り込んでいます。ぜひ探して見てください！

 

→劇場版「BanG Dream! FILM LIVE 2nd Stage」アニメ公式サイト

 

 

劇場版「BanG Dream! Episode of Roselia | :約束」公式サイト

「Roselia」は次世代ガールズバンドプロジェクト「BanG Dream! 」の作中に登場するバンドです。

 

劇場版「BanG Dream！ Episode of Roselia」は、「約束」「Song I am.」の2部構成のアニメ映画として公開されます。

 

本サイトでは、Roseliaのイメージモチーフである青薔薇やレースを全体に使用しております。Roseliaの持つゴシックかつシリアスな雰囲気を大切にデザインいたしました。

 

→劇場版「BanG Dream! Episode of Roselia Ⅰ : 約束」公式サイト

 

 

TVアニメ「カードファイト!!ヴァンガード overDress」公式サイト

あえてメインのキービジュアルではなく、背景美術をメインに据えることで、今までのヴァンガードシリーズとは違うということを直感的に感じてもらえるようなアニメサイトになっております。

 

作品の舞台となる夜の遊園地の幻想的な雰囲気を大切にしつつ、黒と赤で緩急を意識したデザインです。

 

→TVアニメ「カードファイト!! ヴァンガード overDress」 公式サイト

『無限の住人-IMMORTAL-』公式サイト

明朝体や縦書きといった和風の要素を取り入れつつ、全体としてはシャープさ・スタイリッシュさを意識してデザインいたしました。ティザーサイトの方がTwitter上ではかなり話題になりましたので、それについては弊社代表のブログ記事を見てみてください。

 

→『無限の住人-IMMORTAL-』アニメ公式サイト

TVアニメ「ロード オブ ヴァーミリオン　紅蓮の王」公式サイト

自分の血を武器にして相手を攻撃できる「血晶武装」をイメージしたモチーフやアニメーションをさまざまなところに実装しています。（下層ページでも血晶が浮遊しています）

 

→TVアニメ「ロード オブ ヴァーミリオン　紅蓮の王」公式サイト

TVアニメ「トニカクカワイイ」公式サイト公式サイト

「トニカクカワイイ」は、「結婚から始まる夫婦コメディー漫画」が原作の作品です。ティザーサイトはTwitter上でかなり反響も大きかったアニメサイトです。

 

キービジュアルの2人のイラストを活かすよう、レースや花飾りなど、結婚式をイメージしたモチーフを使いつつ、シンプルなデザインでまとめました。

 

→TVアニメ「トニカクカワイイ」公式サイト

「アサルトリリィBOUQUET(ブーケ) 」アニメ公式サイト

アサルトリリィプロジェクトとは、『武器×美少女』をテーマに、アクションドール・アニメ・舞台・アプリゲームなど多種多様に展開するメディアミックスプロジェクトです。

 

女性らしい清潔感のある柔らかいトーンに、SF的世界観の要素をあしらいました。

 

→アサルトリリィBOUQUET(ブーケ) アニメ公式サイト

「アイドールズ！」 公式サイト

オーディション企画「What 声 You？」で選ばれた留冬藍名、水野亜美、花岡志織、屋代瑠花4名によるアイドルグループ、「アイドールズ！」。

 

モーションキャプチャを使用したリアルな演技や自然なリアクションの動きあるキャラクター動画を表示させることで、サイトの中にいる”箱庭感”や、より具体的なアニメのイメージが掴みやすいデザインとなっています。

 

メインである動画コンテンツへスムーズにアクセスできるよう、メインビジュアルの直下には次回の生放送配信日とサムネイルが大きく表示されます。この部分は動的な仕組みを取り入れており、記事の公開ステータスで表示される内容が変わります。次回の配信情報を登録すると、日付の古い動画は自動的に過去のアーカイブへと格納されていきます。

 

→アイドールズ！ 公式サイト

【番外編】TVアニメではないけどアニメ関連のサイト

 

「DIABOLIK LOVERS」9th Anniversary 特設サイト

この作品を好きなユーザーがより「ディアラヴァ」の世界に浸れるよう、メインモチーフでもある薔薇をふんだんにあしらい、また、10周年へ向けて新たに展開する新作への期待感を最大限に煽るため、各コンテンツごとにセリフ体/明朝体をメインにタイポグラフィを用いた奥行きのあるデザインとしています。作品の持つゴシックで妖しげな世界観を重視し、かつリッチに9周年をお祝いできるように意識いたしました。

 

キャラクターの魅力を伝えつつ、さらにTwitterでのシェア導線部分にはより拡散されるための＋αの工夫を施しています。

 

今回の新作の内容を考慮し、メインビジュアルではキャラクターを各家ごとに分けて表示しています。また、描き下ろしのイラストをユーザーにより楽しんでいただくため、メインビジュアルだけでなくTwitterでのシェア導線部分にもお祝いのセリフ付きで全員をランダムに表示しています。

 

 

→「DIABOLIK LOVERS」9th Anniversary 特設サイト

「Princess Letter(s)! フロムアイドル - プリンセスレターズ」 公式サイト

プリンセスレターズ フロムアイドルは、アイドルと”文通”ができる新エンタメプロジェクトです。

 

『一切のインターネット使用禁止』という独自の校則の中でアイドルと文通を通してやりとりをするというテーマのため、切手や消印など「手紙」の雰囲気を意識しつつ、キャラのそれぞれの桜や銀杏などのモチーフを活かして、「エモさ」を意識したWebデザインにしています。

 

アイドルと文通ができるというエンタメプロジェクトは過去に前例がないため、Webサイトではどのようなコンセプトであるか、またキャラクターがどのような魅力があるのかをいかに伝えられるかを考えてWebサイト構築をしました。

 

特に「ポエトリーノベル」では、ただ文章を置くだけという形式にならないように、情緒感を演出するためのアニメーション対応に一工夫を入れています。

 

→「Princess Letter(s)! フロムアイドル - プリンセスレターズ」 公式サイト

 

 

「Project:;COLD(プロジェクトコールド)」公式サイト

Project:;COLDは現実と仮想が交錯する、インターネットをフルに使って展開される、まったく新しい次世代の謎解き＆ミステリー作品です。

ノイズアニメーションを加えることで、ミステリー作品ならではの緊迫感を演出しています。

 

→「Project:;COLD(プロジェクトコールド)」公式サイト

また物語の中に出てくる中学校のサイトも担当いたしました。
→梅崎中学校

最後に

アニメWebサイトを通して、よりアニメ作品の世界を楽しんでいただけたら幸いです！

イロコトでは他にもたくさんのエンタメ系Webサイトを制作させていただいております。よかったらぜひ制作実績からご覧ください！

また、このようなアニメ/ゲーム等でのエンタメ系のWebサイトを検討されている企業のご担当者様はお気軽に弊社までご連絡くださいませ。