2025年8月に、モンスターストライク(以下、モンスト)の公式サイトをリニューアルしました。
私たちはデザイン本部としてプロジェクトに携わり、プロジェクトの上流からデザイン・実装まで一貫して担当しました。
10年近く運用してきた公式サイトのリニューアルにあたり、モンストファンにとってより良い体験を設計することと同時に、「関係者が多い中でどのように認識を合わせ、スピーディに実行へ繋げるか」といったプロセスのデザインにも力を入れていました。
単に「依頼を受けてつくる」のではなく、デザイン本部という横断組織として、複数の部署・職種を巻き込みつつ、事業部全体を見ながら推進していく。そんな考え方で進めたプロジェクトの過程をまとめたいと思います。
リリース12周年を迎えたモンストでは、スマホゲームの枠を超えて、アニメ・音楽・マンガ・VTuber・イベントなど、モンストIPを育てる活動を続けています。
https://cocoda.design/sunamura/p/p574fc26e7a6b
こうしたモンストのIP展開を担当する部署から、「これまでスマホゲームを中心に情報を発信してきた公式サイトを、モンストIP全体のポータルサイトとして再構築できないか」という相談を受けたことが、リニューアルのきっかけでした。
また、公式サイトで使用していたCMSの更新やサーバーの移行が必要なタイミングとなっていたこともあり、リニューアルを本格的に進めることになりました。
前提としてこのプロジェクトは、横断組織であるデザイン本部の私たちと、モンストの運営を担うデジタルエンターテインメントオペレーションズ本部(以下、デジオペ本部)で公式サイトに関わる複数の部署・職種のメンバーが、連携して推進していきます。
しかし、実際にリニューアルに向けて動き出す中で、見えていない点が多いことに気づきました。
特に大きかったのは、公式サイトの運営に関わる関係者が整理されておらず、役割やコミュニケーションフローが十分に整備されていなかったことです。
10年以上にわたり運用してきた中で、公式サイト全体を統括する責任者はおらず、ゲーム・イベント・モンソニ!など、各領域を担当する部署が独立して運用チームと連携しながら情報更新を行ってきた経緯がありました。
そのため、関係者が誰なのか、誰と意思決定を進めるべきなのか、といった基本的な点から探る必要がありました。
公式サイトは、モンストに関わる多くの部署が、それぞれの立場からモンストファンのことを考え、連携しながら運用を続けていくものです。そのため、リニューアルにおいても関係者全員が同じ目線を共有することで、より良いアウトプットにつながると考えていました。
そこで、「何を目的に、どんなアウトプットをつくるか」だけでなく、「どんなプロセスで、関係者とどう連携しながらつくるか」という点も念頭に置きながらプロジェクトを進めていきました。
まず取り組んだのは、公式サイトの運用に関わる人や、プロジェクトの意思決定に携わる人など、関係者を可視化することでした。
誰がどんな役割で運用に関わっているかなどの現状把握に加えて、プロジェクトを進める中で「誰に何を相談すべきか、誰とどのような合意を形成すべきか」といったコミュニケーションパスを明確にしておきたいと考えたためです。
また、この段階で一部の関係者へのヒアリングも行いました。リニューアルとなると、これまでの情報設計がどの程度変わるのか、運用フローはどうなるかといった懸念も少なからず生まれます。
そうした中で、それぞれの立場から見た、外せない要件や期待値を紐解き、より良い方向性を一緒に模索していける状態をつくることも重要だと考えていました。
リニューアルでは、コンセプトや情報の整理に加えて、運用フローを踏まえた仕様を考える必要がありました。そのため、不確実な部分も多く、関係者と丁寧に検討しながら進めていくことが求められました。
そこで、スクラム開発のスプリントをヒントに、短いサイクルごとに論点を洗い出し、解消していく進め方を採用しました。
毎日、デザインチーム内で論点確認やアウトプットをしながら、レビューを実施。また、プロジェクト責任者への提案や関係者との相談を毎週水曜日の夕方に実施しました。
こうしたサイクルを細かく回すことで、意思決定のスピードを保ちながら、関係者の納得度も高く進行することができました。
情報設計やデザインを詰めていく段階でも、デザインチームだけで完結するのではなく、運用に関わる各部署や動画チームと細かく連携しながら進めていきました。
例えば、モンストとは何かを伝える「ABOUT」セクションでは、実際のモンストのプレイ動画が自動で流れる構成にしています。
この動画は今回のために動画チームと連携して制作したもので、「どんなシーンを集めるとより魅力が伝わるか」「どのキャラクターを登場させると印象的か」など、具体的な構成から相談しつつ丁寧につくり込んでいきました。
また、広がるモンストの世界を紹介する「EXPANSION」セクションでも、モンストアニメ、モンソニ!、メタストなど、各領域を担当するメンバーと相談を重ね、全体として統一感を保ちつつ、それぞれのコンテンツの個性や魅力が伝わるような映像を一緒に制作していきました。
このようなプロセスを土台にしながら、リニューアルにおいて最適なデザインの方向性はどのようなものかを検討していきました。
まず重視していたのは、今回の狙いでもある「ゲームだけじゃない、モンストの世界の広がり」をどのように印象的に伝えるかという点です。加えて、モンストの世界への入口として、公式サイトと各関連サイトを周遊しても自然な統一感が保たれていることも大切にしたいと考えました。
こうした方向性をもとに、複数のコンセプト(正統派、シンプル、ひろがり)を検討した結果、今回のテーマには「ひろがり」が最も合うという結論に至りました。
少し補足すると、
ゲーム内では2D表現を主軸としつつも、立体感や奥行きを感じさせる3D表現やシャドウを積極的に取り入れることで、「新たな世界へ飛び出していく」というワクワク感を伝えたい
多様な新着情報が表示される公式サイトの特性上、モンストのトンマナに沿った、さまざまなバナー画像を引き立てる背景としてのシンプルさも重視
といった意図も込めており、「ゲームだけじゃない、モンストの世界の広がり」をうまく表現できる、良い方向性になったのではないかと思っています。
ゲームに関する情報が中心のサイトから、モンストに関するあらゆる情報が集まるサイトへと変わるということは、公式サイトに訪れるユーザーがこれまで以上に多様になることを意味します。
例えば、「もともとモンストのゲームを楽しんでいた」「アニメがきっかけでモンストを好きになった」といった経路の違いもあれば、「最新のイベントやニュースを知りたい」「モンストとは何かを知りたい」といった期待値の違いもあります。
このように多様なユーザーが訪れることを踏まえ、誰にとっても分かりやすい情報設計となるように心がけました。
例えばトップページでは、「日常的に訪れるユーザー」と「初めて訪れるユーザー」を想定し、前半と後半で役割の違いを持たせています。
- 前半:日常的にサイトを訪れるユーザーが、素早く新着情報を確認できる構成
- 後半:モンストを初めて知る人に向けて、魅力や世界観を印象的に伝える構成
また、今後の公式サイト運用を見据え、デザイン面でも工夫をしています。
例えば、ニュース欄では、従来のテキストのみの表示から、サムネイル画像を併せて掲載する形式へ変更しています。しかし、用意されている画像素材の比率が異なるケースもあります。
そこで、どんな比率の画像でも自動的に整った形で表示されるよう設計し、視認性の向上と運用のしやすさを両立しました。
また、公式サイトの情報更新に使用するCMSをバージョンアップする際には、従来の運用フローや管理画面の操作項目は可能な限り維持しつつ、改善すべき部分だけを運用担当者と調整しながら更新しました。その結果、運用しやすい設計に落とし込むことができました。
こうしたプロセスを経て、リニューアルしたモンスト公式サイトを公開しました。
公開後には、モンストファンの方から「見ているだけでワクワクする!」「世界観がしっかり表現されていて良い」「前より見やすくなった」などの嬉しい声をいただけました。また、バナーのクリック率や、派生サイトへの遷移数も向上しており、モンストの世界へのハブとして機能していることが伺えます。
さらに、サイト運営に携わる社内メンバーからも「運用しやすくなった」という声が上がり、プロジェクトに関わったチームとしても手応えを感じています。
広がるモンストの世界を知り、さらに楽しんでいただける場となっているので、ぜひ新しいモンスト公式サイトを覗いてみてください。
https://www.monster-strike.com/
今回のプロジェクトでは、サイトデザインの制作はもちろん、各所に足を運び、提案や確認を重ねながら、「制作以外の時間」にも多くの力を注いできました。
長年運用され、関係者も多いサイトやサービスの改修などの場面では、どこから手をつけるべきか判断しづらい状況から始まることも少なくありません。そもそも、「手を動かしさえすれば大丈夫」という状態でスタートできるプロジェクトは、そう多くはないのかもしれません。
だからこそ、目的や前提となる情報を可視化し、意思決定のフローを整え、粘り強く提案を重ねるなど、良いアウトプットを生み出すためのプロセス自体を良くしていくことも大切です。
そうした環境を整えた上で、ユーザーにとって本当に良い体験とは何かを徹底的に考え、試作し、議論を重ねながらブラッシュアップしていく。その積み重ねが、最終的にMIXIが大切にしているユーザーサプライズファーストにつながっていくのだと思います。
これからも、チーム全体でユーザーサプライズファーストを届けられるよう、力を合わせてデザインに取り組んでいきます。