エンタメ特化型、心を動かすWeb制作。
まずは会話レベルで壁打ちの相談を!
本記事では、アークシステムワークス株式会社様「ダブルドラゴン リヴァイヴ」公式サイトの制作背景と設計思想についてご紹介します。
公式サイト:https://www.arcsystemworks.jp/ddrev/
本サイトは、「情報設計」「デザイン」「フロントエンド実装」「運用想定」まで、すべて夢双合同会社が担当しました。
この記事では「何を作ったか」ではなく、「なぜ、そう作ったのか」に焦点を当てています。
制作事例の裏側
制作にあたって最初に整理したのは、「このサイトは何を担当する場所なのか」という点でした。
アークシステムワークス様には、コーポレートサイトから公式導線が存在しています。
そこで本サイトは、
作品の世界観に没入させる
新作としての魅力を端的に伝える
購入・予約への導線を明確にする
という「作品特化型プロモーションサイト」として位置づけました。
その結果、
情報はありのままに載せる(ただしテキストだらけにしない)
必要な情報には迷わせず辿り着ける
という設計方針を採用しています。
ナビゲーションは、非常にオーソドックスな構成です。
ABOUT
SYSTEM
CHARACTERS
MOVIE
PRODUCT
これは意図的で、
初見ユーザーでも迷わない
海外ユーザーでも理解しやすい
ゲーム公式サイトに慣れたユーザーの期待を裏切らない
というわかりやすい点を優先しました。
新しさや奇抜さよりも、「ゲーム公式サイトとしての安心感」を重視しています。
ゲームのプロモーションサイトで最も注意したのは、Webの主張が、ゲームそのものを邪魔しないことです。
そのため、
アニメーションは過度に入れすぎない(リニューアル後、一部アニメーションを減らしています)
UIは極力シンプルかつ、ゲーム内で使用されているUIを流用もしくは応用
フォント・色・余白は世界観を最優先
という方針を取りました。
日本ユーザーは派手な表現より、わかりやすい構成を求む傾向にあります。
そのため、派手な表現を「あえてしない判断」も、この案件では重要な設計要素でした。
CHARACTERS や SYSTEM ページでは、
情報を詰め込みすぎない
一目で理解できる構成
画像とテキストのバランス
を重視しています。
特にキャラクター紹介では、
ファンが「誰から見るか」
初見ユーザーが「どんなキャラクターがいるか」
の両方を想定した配置・導線を意識しました。
本サイトでは複数のトレーラーや動画を掲載しています。
自動再生は極力使わない
見たい人が、見たいタイミングで再生できる
という設計にしています。
動画は非常に強いコンテンツですが、主役はあくまでゲームそのもの。
Web側が前に出すぎないよう注意しました。
PRODUCT ページでは、
エディションの違い
価格
特典内容
を比較しやすく、迷いにくく整理し、PC画面内に収まりやすく見やすいタブJSを利用しています。
ここでは世界観よりも、正しく選べることを最優先しました。
購入直前のユーザーにとって、分かりにくさは最大の離脱要因だからです。
本サイトは、多言語対応を前提に設計しています。
そのため、
言語差でレイアウトが崩れない
テキスト量の変化に耐えられる
言語切り替えが直感的
といった点を初期段階から考慮しました。
後付けではなく、最初から多言語を前提にすることで、将来の運用コストも抑えられます。
運用面では、
更新頻度はそこまで高くない
更新はCMSを使用せず、必要な時にご依頼いただく方針
弊社担当ですが、サーバ上で整理された構造設計(更新頻度がある箇所はインクルードを利用)
を重視しています。
見た目だけでなく、公開後の現実的な運用まで含めてWebサイトの完成だと考えています。
公開後に特に感じたのは、
情報に迷わない
見たいところにすぐ行ける
ゲームの印象を邪魔しない
という点でした。
派手さはありませんが、作品を主役にできたという意味で、この設計は正解だったと感じています。
夢双合同会社では、
流行っているからやる
他社がやっているからやる
ではなく、その作品・そのクライアントにとって本当に必要かどうかを基準に設計しています。
そのうえで、最新技術とユーザービリティを考慮して制作に取り掛かっております。
本サイトも、その考え方の延長線上にあります。
ゲーム公式サイト・プロモーションサイトの制作をご検討中の方は、ぜひ一度ご相談ください。
作品を主役にしたWeb設計を、企画段階から一緒に考えます。
また、夢双合同会社は「WordPress」よりセキュリティが堅牢なヘッドレスCMS「ProcessWire」を取り入れた、日本で数少ない制作会社になります。
料相談はこちら(会話ベースの壁打ちOK) → https://6sou.site/contact.php
X official account → https://x.com/MUSOU_LLC