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

デザイン

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

目次

  1. デザインも構成もやっぱり最高!/星のカービィディスカバリー
  2. 回転ギミックが秀逸!/エスタブライフ
  3. BGM再生へのこだわり/ソウルタイド
  4. グリッチ表現/スプリガン、.hack//G.U. Last Recode
  5. -まとめ-

桜も咲き乱れ、あっという間に春の足音がきこえてきました。
今月も気になるエンタメ系サイトをピックアップしてご紹介していこうと思います。

ENTACLではEWS(https://entertainment-web.site)にて国内を中心とした最新のゲーム・アニメサイトの情報を毎日更新・紹介しています。
その中から毎月編集部が気になるサイトをピックアップしてお伝えしています。
ENT+と合わせてEWSもチェックしてみてください!

星のカービィディスカバリー

みんな大好きニンテンドーさんのキラータイトル、星のカービィの新作サイトです。

ゲームの魅力を伝えるために練られた構成

ニンテンドーさんの公式サイトはその楽しげなサイトデザインに目を奪われがちですが、個人的にいつも感動しているのが、どのタイトルも練り込まれたそのそのサイト構成にあると考えています。
星のカービィの新作「星のカービィディスカバリー」こちらもデザインも非常に素敵なサイトですが、例えば今作から新たに加わった新機能の「ほおばりヘンケイ」、このブロックの作り方一つとってみても、、、

カービィが車を吸い込み、口に押し込んで車まるでカービィがほおばっているような様の動画が背景に配置されています。
動画内のカービィのフォルム自体が衝(笑)撃的ということもありますが、余計な説明なしにまず「ほおばりヘンケイ」の概要をいとも簡単に伝えることに成功しています。
説明テキストサイズと動画の比率を見れば分かる通りこれは意図的にやっていることだと思われます。
ユーザーが無意識の内に「ほおばりヘンケイ」を理解しているのです。

以降のブロックでは「新機能見出し+動画」+「アイテム+ほおばった姿のカーヴィ」の構成で説明が続きます。
この「アイテム+ほおばった姿のカーヴィ」を配置していることがポイントです。
ユーザーが動画を再生せずとも、アイテムとカービィが合わさることでカービィの能力がどの様に拡張されるのか。また、そのフォルムの可愛らしさを同時に伝えています。
これもともすれば動画に見出しをつけて終わらせることも十分にありえます。「アイテム+ほおばった姿のカーヴィ」があることで理解が簡単になるのです。

例を挙げれば暇がありませんが、同様の配慮や作品に対する愛が存分に盛り込まれているサイトです。

エスタブライフ

続いてはちょっと変わったサイトギミックのご紹介です。

サイトが回転してコンテンツが切り替わり

ページスクロールを進めるとくるりとコンテンツが切り替わります

生きることに疲れた人々を別の場所へと「逃がす」ことを生業としている者たちのお話。というのが本作のコンセプト。
いとも簡単に町から町へ人を移すその軽やかな立ち振舞。をこのギミックで表現しているのかもしれません。
すべてがFになるでも回転ギミックがありましたね。

ソウルタイド

続いてはBGM再生にこだわったサイトのご紹介です。

シームレスなBGM再生

コントローラ実装

サイト内全体でシームレスにBGMを再生することができるサイトです。ページをまたがってのBGM再生、コントローラーによる選曲機能、エンタメ系サイトではこれらの機能を見かけることも少なくなってきましたが、本作がBGM音源への強いこだわりを持っていることを感じられます。

hack//G.U. Last Recode/スプリガン

最後はエンタメ系サイトではおなじみのグリッチ表現を用いたサイトのご紹介です。

公式サイトに取り込みやすいグリッチ表現

スクロールでグリッチ演出が発火する

背景画像にグリッチがかかる 出典:スプリガン公式サイト

実装の手軽さ、異なる作品テーマにおいても割りと取り入れやすい表現(バグ・カオス・アーミー…)ということもあってか、エンタメ系WEBサイトでは多く目にします。
スクロールで発火するパターンや背景で常にバグっているような効果など色々な形態で使用されることが多いと思います。

まとめ

今回は5つのサイトを取り上げてみました。エンタメ系サイトであるからこそ絵素材に頼らず、構成の練り込が大切だなぁと改めて感じました。
ENTACLGRAPHICXXXではゲーム・アニメ系のエンタメ系サイト制作を中心に様々なクリエイティブを制作しています。
ENTACLGRAPHICXXXオフィシャルサイト
サイトに掲載されていない実績も数多くございます。実績のお問い合わせ等はこちらから

この記事を書いた人

エンタクル編集部

 

前の記事

シリーズ連載:5分でわかる「eスポーツ」-能力編-

次の記事

シリーズ連載:5分でわかる「eスポーツ」-競技編-

Recommend

Projects