WEB
アニメ公式サイト制作
事例
Dr.STONE アニメ公式サイト制作

【プロジェクトの概要】

Y’sの仕事について実例を通してご紹介するWEBサイト制作編です。
今回ご紹介するのは、東宝株式会社様が手掛けるTVアニメプロジェクト『Dr.STONE』のオフィシャルWEBサイトの制作事例です。

【アニメ公式サイトとは】

TVアニメの作品情報や放送情報、関連するキャンペーンやグッズなどを網羅したサイトです。
作品の世界観を強く印象付けるデザイン性はもちろんですが、放送と合わせて様々な情報が日々発信されていくため、情報サイトとしてのわかりやすさ、使いやすさ、更新しやすさが求められます。

【制作過程】

【1】キックオフとヒアリング
【2】ティザーサイト用ビジュアルラフのご確認
【3】ティザーサイト制作・ご確認
【4】本サイトの制作・ご確認

【1】キックオフとヒアリング

TVアニメのロゴやKV(キービジュアル:広告宣伝等で用いられる一連のイラスト)制作、関連グッズデザインなどでお仕事をいただく機会が多い東宝株式会社様から、週刊少年ジャンプにて大人気連載中の漫画「Dr.STONE」のTVアニメ化決定に伴い、ロゴやKVの制作のご依頼をいただきました。その際に、WEBサイトも制作可能か、どのような範囲で対応可能かなどのご相談をいただきました。

さっそくWEB制作の進行をまとめる「WEBディレクター」がお伺いし、東宝株式会社様が考えていらっしゃる企画内容、デザインの方向性、WEBサイトに必要な機能やコンテンツなどをヒアリングさせていただきました。
結果、デザインから実装、運用更新まで一括でY’sにお任せいただくことになりました。

Q
企画がまだ定まっていない状態でお願いすることは可能ですか?
A
はい。もちろん可能です。打ち合わせ時に詳細なヒアリングを行わせていただき、作品のテーマや世界観をどう伝えていくか、企画書を作成しご提案することが可能です。
WEBサイトについては経験豊富なWEBディレクターが、企画から運用まで様々な相談に親身に応じ、アドバイスさせていただきます。
Q
予算からご相談することも可能ですか?
A
はい。ご予算から逆算して可能な限りのご提案をすることも可能です。
Q
スケジュールが厳しいのですが…
A
WEBサイト自体のリリース希望日、様々な情報の解禁タイミングなどに合わせて、スケジュールのご提案をいたします。素材が間に合わない場合や、制作期間が確保できない場合などでも、その条件内でできる範囲の見せ方を工夫し、段階的に情報を充実させていくようなご提案も可能です。
Y’s Method
Y’sの強み
「効果的なヒアリングシート」
Y’sのヒアリングは一味違います。Y’sにはオリジナルの「ヒアリングシート」が存在します。その役割は「タイトルの詳細」や「納品形態」、「スケジュール」などをただ確認するためだけでなく、クライアントの皆様が潜在的に思い描いているイメージや、そのタイトルにかける想いなど、できるだけ言語化できるシートになっています。 WEB版のヒアリングシートでは、作品のことだけでなくWEB制作に関わる様々な仕様なども細かく記載し、クライアントの皆様と常に共有することで、認識の違いや確認漏れなどのトラブルなく制作を進めることができます。 このヒアリングシートは会社設立から常にクライアントの皆様のニーズに合わせアップグレードし続けています。

Y’sの強み
「制作管理」
WEB制作では、タイトルごとに必ず専任のWEBディレクターがつき、クライアントの皆様との窓口として進行をサポートします。
制作の際には「WBS(Work Breakdown Structure)」と呼ばれる、WEB制作の工程と作業期間を網羅したスケジュールシートを作成し、Y’sがどの期間でどのような作業を行なっているか、クライアントの皆様はどの期間で何を確認したら良いかなどを一覧できるようにしています。

【2】ティザーサイト用ビジュアルラフの作成


今回のWEBサイト制作では、まず「ティザーサイト」の制作に着手しました。
「ティザーサイト」は、アニメ制作決定の告知など、最も始めのタイミングで情報を解禁するサイトです。この段階では詳細な番組情報は決まっていないため、公開できる要素が少ない中で、いかに【アニメ「Dr.STONE(ドクターストーン)」】の世界観と情報を読者に伝えていくかが大事なポイントでした。

今回は雑誌などでアニメ化決定の発表を受けてサイトにアクセスしてくるユーザーが多いことが予想されたため、既に漫画を読んでいるユーザーが、アニメに対する期待を膨らませてくれるような内容が求められます。限られた情報を活用してユーザーへ訴えかける内容を考え、4案のラフ画を作成し、提案を行わせていただきました。

4案のラフ画

 

A 原作に登場する「科学の旗」でファンへ訴える/B 主人公「千空」の目を「石」の割れ目から印象的に
C タイトルにもある「石」とテキストだけで/D 科学を象徴する「フラスコと薬品」で世界観を表現
 
 
 
 

【3】ティザーサイトの制作・公開

この4案の中から選ばれた「B案」を元にティザーサイトを制作いたしました。
少ない要素でも世界観が伝わるよう、細やかなアニメーションの演出を行うことで期待感を高めています。例えば、タイトルが現れる際にドンッと画面を揺らしたり、ボタンのグラデーションを流動的に動かすことで大自然のマグマを連想させるようにしたりと、要素のふるまいからも世界観を感じられるようにしています。

Q
ビジュアルの提案はどのような形で何案ほど上がってきますか?
A
ビジュアルのご提案もヒアリングシートの段階で方向性を決定させていただきます。文章でのご提案や線画でのご提案、色を付ける形でのご提案など、ご要望に応じた形式でご提案させていただきます。案数についても、1案〜複数案まで、ご予算やスケジュールに応じた案数での対応が可能です。
Q
デザインの説明などはしっかりしてくれますか?
A
Y’sではデザインの提出において、デザインの説明書を合わせて制作いたします。そちらをご覧いただくことでデザインの意図や経緯をご理解いただけます。
Q
修正などにどの程度お付き合してくれますか?
A
ヒアリングシートで確認させていただいた内容に基づき、担当のデザイナー・エンジニアが納期までしっかりとサポートいたします。
Q
動画を使ったWEBサイトにしたいんですが?
A
Y’sには動画制作を専門とするチームがいます。近年、WEBサイトにおける動画の影響は大変高いため、動画を効果的にWEBサイトに組み込んだご提案も可能です。
関連:MOVIE

【4】本サイトの制作・公開

続いて、「本サイト」の制作に移ります。本サイトは、アニメの放送開始に合わせて、作品概要、ストーリー、キャラクター、スタッフなどの様々な情報を盛り込んだサイトです。
ティザーサイトとは異なり、放送が進むにつれて公開する情報がどんどん増えていくため、重要になるポイントは「欲しい情報を見やすく伝えること」でした。ページ数が多いため、どこに何の情報があるか迷わず探せるように「シンプル」で「わかりやすい」構成にしています。シンプルな中にもアニメーション演出を効果的に取り入れることにより、情報が見やすいだけでなく、作品の世界観もしっかりと伝わるようなサイトに仕上げました。


特にこだわった部分が、ファーストビュー(WEBサイトにアクセスした際に最初に目に入る部分)に配置されたアニメのKV(キービジュアル:広告宣伝等で用いられる一連のイラスト)です。

KVは一般的にポスター等での使用を想定して縦長に描かれており、横長のPC画面で迫力ある見せ方をするには工夫が必要でした。
Dr.STONEでは、KVをファーストビュー内に最大限に表示するため、ユーザーのマウス位置によってビジュアルが上下する動きを実装しました。
また、キービジュアルが三種類あり、全てを楽しんでもらえるようにスライドショーの実装も行なっております。

こうして出来上がった本サイトがこちら!

URL:https://dr-stone.jp/

また、情報が多いと言うことは、更新が頻繁に行われることになります。
そのため、特に更新がよくかかる NEWS / STORY / MOVIE などは、WordPressと呼ばれる管理システムを導入し、クライアントの皆様でも簡単に更新できるようにしています。

Q
SNSと連動することは可能ですか?
A
Twitter / Facebookなどが可能です。
SNS運用を得意とする企業との提携により、SNSの選定や投稿内容の企画作成、投稿代行なども行います。
(Instagramに関してはAPIを取得して頂く必要がございます。API取得には審査に合格する必要があり、時間がかかることが予想されますのでご留意ください。)
Q
更新はしてくれますか?
A
もちろん可能です!また、NEWSなど速報性の高いコンテンツはクライアントの皆様ご自身で更新したいというニーズもあります。
その場合は、WordPressなどのCMS(コンテンツ管理システム)を導入し、専門的な知識がなくても記事を公開できるようにすることができます。記事の投稿画面は、WEBサイトの内容に合わせて操作しやすいようにカスタマイズいたします。
Q
SEO(検索エンジン最適化)対策はしてくれますか?
A
可能です!検索順位に影響を与えると言われる一般的なポイントについてはできる限りクリアするように制作を行なっています。
そこからさらに、WEBサイトの内容に応じて最適化する検索キーワードの洗い出しや、コンテンツの精査などもサポートいたします。
Q
公開したWEBサイトの反響が知りたいです
A
GoogleAnalyticsなどのアクセス解析ツールを使用し、どのコンテンツにどれくらいのアクセスがあったかを分析し、レポートとして報告することもできます。
Y’sでは、ただ納品して終わりではなく、より効果が出るサイトにするための分析や改修提案まで行うことが可能です。

 

【その他のアニメ公式サイトの実績】

けものフレンズ
©️けものフレンズプロジェクト

 

魔法少女サイト
©佐藤健太郎(秋田書店)/「魔法少女サイト」製作委員会

 

 

【チーム構成】

WEBディレクター(窓口担当):1名
アートディレクター:1名
デザイナー:1名
フロントエンドエンジニア:2名

Special Thanks
クライアント:東宝株式会社
©米スタジオ・Boichi/集英社・Dr.STONE製作委員会