ゲーム・アニメなどエンターテイメントのプロモーション・Web制作に
関わる人に少しプラスになる情報を発信するメディア

デザイン

このゲーム・アニメ系サイトの演出・構成が気になった!-11月編(2021)

目次

  1. ビルディバイド -#000000-(コードブラック)
  2. 魔法使いの約束 2周年特設サイト
  3. ポケットモンスター ブリリアントダイヤモンド・シャイニングパール
  4. -まとめ-

すっかり肌寒い季節となりましたね!
毎月恒例のこのゲーム・アニメ系サイトの演出・構成が気になった!11月編を早速お送りしたいと思います!

ビルディバイド -#000000-(コードブラック)

トレーディングカードバトルとアニメーションの連動プロジェクト、そのアニメサイトとなるのが「ビルディバイド -#000000-(コードブラック)」サイト。
モノトーンベースで構成しつつサイト全体には近未来感を漂わせる。ロゴのオレンジと青をアクセントもアクセントとして効果的に効いていてとても良いです。

カードゲームを想起させる「カード型モチーフ」

サイト全体にトレーディングカードゲームをテーマにした作品であることを想起させる象徴として、「カード型のモチーフ」のオブジェクトデザインが至る箇所で使われています。
作品のテーマなどをモチーフとしてデザインに取り入れる事はエンタメ系サイトでは非常に有効的ですね。

スムースなアニメーション表現

サイト内でのコンテンツの遷移も、細かなアニメーション演出などにより、ストレスなく快適に回遊できる印象でした。 ナビゲーションの出現演出ひとつとっても非常に洗練されています。この一手間が大きいですね。

魔法使いの約束 2周年特設サイト

続きましては魔法使いの約束の2周年特設サイトのご紹介です。

変速スクロール制御

こちらのサイトではマウススクロールによるページ内制御が手前から奥へと変則的なスクロール操作によってコントロールされています。
一般的なwebサイトと違う挙動のため、使い所を見極めないと、ともすると閲覧しづらいサイトになりがち…なのですが、次から次に魅力的なキャラクター達が登場する雰囲気がサイトの雰囲気とも相まってとても効果的に感じました。

メインビジュアルをラストカットに配置

メインビジュアルはサイト訪問後の最初に見せることが定石ですが、このサイトでは個々のキャラクターたちを存分に見せた後に最後で集合絵が表示されます。
今まさに集合写真が撮られたかのようなストーリー性が感じられます。

ポケットモンスター ブリリアントダイヤモンド・シャイニングパール

最後は15年の時を超えてリメイクされたポケットモンスター ブリリアントダイヤモンド・シャイニングパールの公式サイトのご紹介です。
2006年に発売されたいわゆるポケットモンスター ダイヤモンド・パールのリメイク作品。忠実にストリーを再現しつつも、令和版として新たに加わった新要素やバトルシーンでは15年前よりも臨場感ある戦いを体感することもできる様になっていて、発売3日間でなんと、、、130万本を超えるヒット!。ポケモン人気は本当にすごいですね。。

公式サイトに…隠しボタン!

往年のユーザーには至る所に懐かしさあふれる公式サイト。。。なのですが、サイトの中をよく見ると、とある場所に探検セットのアイコンが。。
マウスを合わせるとクリックすると。。

こんなポップアップが登場!もちろん「使う」で

かと思ったら画面が地下面に切り替わった!みんなの思い出を掘りこす?

きらりと光る地面を掘ったら、クイズが始まった!

サイトを一見しただけでは気づかない部分にギミックを仕込む。という手法は昔はよくみられましたが、最近では珍しいかもしれませんね。
探検セットは、実際のゲーム内に登場するアイテムで、フィールドの地下に潜りそこにあるお宝を採掘することができるというもの。
ここではオリジナル版のゲームにまつわる”思い出”をお宝として採掘し、それにまつわるクイズを出題するという形で、同時にユーザーの原体験も”掘り起こす”という、なんとも粋な演出ですね。
皆さんも「隠しボタン」どこに設置されているか是非探してみてください!

まとめ

いかがでしたでしょうか?
今回は3本のエンタメ系サイトをご紹介させていただきました!

この記事を書いた人

エンタクル編集部

 

前の記事

WEBディレクターが抑えておきたい多言語化対応する時の8つのマストポイント

次の記事

今すぐできる!ホームページ軽量化の6つのポイント

Recommend

Projects