Y’sの仕事について実例を通してご紹介するWEBサイト制作編です。
今回ご紹介するのは、東宝株式会社様が手掛けるTVアニメプロジェクト『Dr.STONE』のオフィシャルWEBサイトの制作事例です。
TVアニメの作品情報や放送情報、関連するキャンペーンやグッズなどを網羅したサイトです。
作品の世界観を強く印象付けるデザイン性はもちろんですが、放送と合わせて様々な情報が日々発信されていくため、情報サイトとしてのわかりやすさ、使いやすさ、更新しやすさが求められます。
【1】キックオフとヒアリング
【2】ティザーサイト用ビジュアルラフのご確認
【3】ティザーサイト制作・ご確認
【4】本サイトの制作・ご確認
TVアニメのロゴやKV(キービジュアル:広告宣伝等で用いられる一連のイラスト)制作、関連グッズデザインなどでお仕事をいただく機会が多い東宝株式会社様から、週刊少年ジャンプにて大人気連載中の漫画「Dr.STONE」のTVアニメ化決定に伴い、ロゴやKVの制作のご依頼をいただきました。その際に、WEBサイトも制作可能か、どのような範囲で対応可能かなどのご相談をいただきました。
さっそくWEB制作の進行をまとめる「WEBディレクター」がお伺いし、東宝株式会社様が考えていらっしゃる企画内容、デザインの方向性、WEBサイトに必要な機能やコンテンツなどをヒアリングさせていただきました。
結果、デザインから実装、運用更新まで一括でY’sにお任せいただくことになりました。
今回のWEBサイト制作では、まず「ティザーサイト」の制作に着手しました。
「ティザーサイト」は、アニメ制作決定の告知など、最も始めのタイミングで情報を解禁するサイトです。この段階では詳細な番組情報は決まっていないため、公開できる要素が少ない中で、いかに【アニメ「Dr.STONE(ドクターストーン)」】の世界観と情報を読者に伝えていくかが大事なポイントでした。
今回は雑誌などでアニメ化決定の発表を受けてサイトにアクセスしてくるユーザーが多いことが予想されたため、既に漫画を読んでいるユーザーが、アニメに対する期待を膨らませてくれるような内容が求められます。限られた情報を活用してユーザーへ訴えかける内容を考え、4案のラフ画を作成し、提案を行わせていただきました。
この4案の中から選ばれた「B案」を元にティザーサイトを制作いたしました。
少ない要素でも世界観が伝わるよう、細やかなアニメーションの演出を行うことで期待感を高めています。例えば、タイトルが現れる際にドンッと画面を揺らしたり、ボタンのグラデーションを流動的に動かすことで大自然のマグマを連想させるようにしたりと、要素のふるまいからも世界観を感じられるようにしています。
続いて、「本サイト」の制作に移ります。本サイトは、アニメの放送開始に合わせて、作品概要、ストーリー、キャラクター、スタッフなどの様々な情報を盛り込んだサイトです。
ティザーサイトとは異なり、放送が進むにつれて公開する情報がどんどん増えていくため、重要になるポイントは「欲しい情報を見やすく伝えること」でした。ページ数が多いため、どこに何の情報があるか迷わず探せるように「シンプル」で「わかりやすい」構成にしています。シンプルな中にもアニメーション演出を効果的に取り入れることにより、情報が見やすいだけでなく、作品の世界観もしっかりと伝わるようなサイトに仕上げました。
特にこだわった部分が、ファーストビュー(WEBサイトにアクセスした際に最初に目に入る部分)に配置されたアニメのKV(キービジュアル:広告宣伝等で用いられる一連のイラスト)です。
KVは一般的にポスター等での使用を想定して縦長に描かれており、横長のPC画面で迫力ある見せ方をするには工夫が必要でした。
Dr.STONEでは、KVをファーストビュー内に最大限に表示するため、ユーザーのマウス位置によってビジュアルが上下する動きを実装しました。
また、キービジュアルが三種類あり、全てを楽しんでもらえるようにスライドショーの実装も行なっております。
こうして出来上がった本サイトがこちら!
また、情報が多いと言うことは、更新が頻繁に行われることになります。
そのため、特に更新がよくかかる NEWS / STORY / MOVIE などは、WordPressと呼ばれる管理システムを導入し、クライアントの皆様でも簡単に更新できるようにしています。
けものフレンズ
©️けものフレンズプロジェクト
魔法少女サイト
©佐藤健太郎(秋田書店)/「魔法少女サイト」製作委員会
WEBディレクター(窓口担当):1名
アートディレクター:1名
デザイナー:1名
フロントエンドエンジニア:2名
Special Thanks
クライアント:東宝株式会社
©米スタジオ・Boichi/集英社・Dr.STONE製作委員会