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

デザイン

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

目次

  1. 考えられたサイト設計/ポケットモンスター スカーレット・バイオレット
  2. タイトルの妙/ノーモアヒーローズ3
  3. -まとめ-

気がつけば今年も残り2ヶ月を切りました。1年が本当に早いですね。
今月も気になるエンタメ系サイトをピックアップしてご紹介していこうと思います!

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

ポケットモンスター スカーレット・バイオレット

任天堂さんのHPはいつも練られたサイトが多く、発売迫る 『ポケットモンスター スカーレット・バイオレット』公式サイトも例外ではなく、とてもよく考えられた素敵なサイトになっていました。

TOPページの役割り

公式サイトに訪れて、目に飛び込んでくるのは左右に配置された「ポケモンスカーレット」「ポケモンバイオレット」二つのキービジュアル(以下KV)。まさにサイトの扉、エントランスの構えとして現れます。

エントランスの構成要素は
KV、動画一覧へのリンク、予約ボタン、発売日、メニュー
と必要最小限でまとめられています。

ミニマムな構成にすることで、ポケモンのサイトに訪れた来訪者が求めているであろう情報
・端的に伝えるべき情報(いつ発売されるか・どこで買えるか)
・詳しく知りたい情報(とりあえず動画でイメージを掴む・より詳しく内容を知るための下層への動線)

を端的に伝えやすくなっています。

しかし、エントランスページで多くみられるような、背景動画やアニメーション要素が抑えらていて、世界観を伝えるには少し大人しすぎるか・・・と思いきや

スクロールを始めるとKVが扉のごとく開き、閃光と共にTOPページ、ポケモンワールド全開のデザインや効果あふれるトップページへ誘われます!

エントランスとTOPの役割分担をわけ理解しやすく、静から動への展開をつけることで緩急のついた閲覧体験が進む。
と、とても良くできている構成と感じました。

エントランス以降ではアニメーションや動画などがモリモリに入って楽しげな雰囲気に。

エントランス以降では余計な説明は省き、下層へのリンクだけの機能に絞っています。
エントランスとTOPそれぞれで、役割や機能を割り振り、来訪者に優しく楽しい設計になっていると思います。すごいですね。

キャラ

構成も絶妙ですが、ポケモンの紹介ページなどでも工夫がしっかりとなされています。

このページではページスクロール操作をしても上下中央にポケモン自身は位置固定され、表示され続けます。 キャラ絵をキチンと見せつつも、テキストとSSで内容部分もしっかりと伝えられるような工夫が見られます。

ポケモンページだけでなく、今回本サイト全体を通して「説明すべきところはテキストでキチンと説明する」という方針をとったサイト設計のように感じます。
もちろん、「他言語対応しているため」と言えばそれまでですが、一般的なゲームサイトではスクリーンショット(以下SS)と見出しだけで、あくまで雰囲気を伝えることを重視したサイトが多い中、本サイトでは十分なテキストとSS、更新頻度でゲームの魅力を伝えることに努力しているサイトと感じました。

その他メニュー開閉アニメーションや、他言語切り替えの設計など、学ぶべきものが多いサイトでした。

ノーモアヒーローズ3

グラスホッパーマニュファクチュアさんのノーモアヒーローズ3の公式サイトです。

マウスオン表現

本作のエフェクトの特徴の1つである「ドット表現」をメニューやスライドショーの矢印など各所で取り入れています。ボタンなどにマウスオンした際にはゲームの戦闘シーンの様に、ドットが四散する効果がついていて小気味よいです。

ソフビを模したキャラ紹介

ソフビ人形的にキャラを見せるデザインも面白いですね!
ボタンなどにマウスオンした際にはゲームの戦闘シーンの様に、ドットが四散する効果がついていて小気味よいです。

コンテンツタイトル

メニュー内のコンテンツタイトルの付け方にも工夫を感じられました。

メニュー内でも「CHARACTER」で終わらせず、「ランキングバトルはさらに大混戦!?」のキャッチまで掲載することでクリックをする前の理解と期待が高まります。何気ない部分ですが、こういった積み重ねがユーザーの離脱を防いでいくのですね。

まとめ

今回は2つのサイトを取り上げてみました。モチーフやエフェクトのみならず、サイトの構成や役割りまで考えられた素敵なサイトであったと思います。

ENTACLGRAPHICXXXでもゲーム・アニメ系のエンタメ系サイト制作を中心に様々なクリエイティブを制作しています。
ENTACLGRAPHICXXXオフィシャルサイト
サイトに掲載されていない実績も数多くございます。実績のお問い合わせ等はこちらから

この記事を書いた人

エンタクル編集部

 

前の記事

【GA4】イベントとは?解説・メリット・設定方法など

次の記事

【Twitter API V2 対応】よくわかる「Twitter API」-PHP実装編-【2022年最新】

Recommend

Projects