担当工程：デザイン/コーディング

漫画、小説、アニメと様々な媒体で展開している「文豪ストレイドッグス」の外伝作品である「文豪ストレイドッグス BEAST」の映画ティザーサイトを制作いたしました。

デザイン制作の前に、作品を理解する

今回映画化する作品は"もうひとつの「文スト」の世界を描いた、パラレルワールド"という題材でしたので、デザイン制作の前に、まずは前提となるアニメ(計37話)を視聴しました。（非常に面白かったです、個人的には黒の時代が好きです）

更に映画の原作にあたる小説を読み込み、「文豪ストレイドッグス BEAST」は元のストーリーから見てどういった立ち位置にある作品なのか？どのような世界観なのか？を社内でブレストし、そこからデザインに落とし込みました。

世界観をどう表現するか

本作において、登場人物の立場が入れ替わることによる「反転」と、モチーフカラーである「白と黒」をキーワードに、BEASTの世界観を表現しました。

▼サイトに入った際のローディング時の演出

テキストを「反転」して配置。中央のキャッチコピーが回転すると同時に白基調のページに。

▼スマートフォンデザインでも成り立つように

公開時のSNSによる反響

デザイン制作時には、「公開時に、SNS(Twitter)で反応/話題にしてもらえるようにする」ことも意識して行いました。その結果、ツイートのハッシュタグがトレンド入りし、多くのユーザーからもWebサイトのキャプチャ画面を貼り付けて拡散してもらうという、非常に良い反応をいただくことが出来ました。

作品のファンの方がいたからこそではありますが、デザイン制作時に想定していた反応がユーザーからTwitterで上がったことは、Webサイトのプロモーションアプローチとして有効だったのではないかと思います。