”WoT”を手掛ける世界的ゲーム企業「ウォーゲーミング」のリデザインプロジェクト後編：プロフィールゲームカード

（この記事は、ウォーゲーミングによるリデザインプロジェクト裏話・後編です。前編はこちら）

前編の記事では、ウォーゲーミングのゲームタブであるコモンメニュー（CM）のリデザインプロジェクトについて紹介しました。後編では、プロフィールゲームカードについて紹介します。

プロフィールゲームカードとは

プロフィールゲームカードは、ウォーゲーミングをプレイしたユーザーが、ゲームのゴールドポイントや経験値、その他の情報が掲載されたウィンドウです。ユーザーがひとつのゲームのみプレイしている場合は、プロフィール上にひとつのカードのみ掲載されることになります。

主なチャレンジ

以下がプロフィールゲームカードの主なチャレンジポイントでした。

• 旧バージョンのCMプロフィールゲームカードには、他のゲームへの外部リンクを選択するオプションがなかった。新規に設ける必要がある
• いくつかのゲームで共通で使用できる「ゴールド」や「プレミアムアカウント」がある一方、独自の通貨が使用されているゲームもある。混乱を避けるため、それらを別々に分ける必要がある
• プロフィールゲームカードはビジュアル上は全て同じデザインであり、ゲームごとに差別化はされていなかった。ゲームごとに分ける必要がある

旧バージョンのプロフィールゲームカード

ナビゲーションパネル上で自身のニックネームクリックすると、プロフィールゲームカードがドロップダウンで表示されます。

リデザインプロジェクト

まず考えたのは、必要なリンクを追加しつつゲーム毎に異なるビジュアルデザインを適用するために、旧バージョンのデザインをできる限り使用することでした。

プロジェクトにあたって、以下のような課題がありました。

1. 旧バージョンでは、表示されている情報に混乱があった。「プレミアムアカウント」はWorld of Tanks、World of Warplanes、World of Warshipsの３つのゲームで共有されていた。しかし「ゴールド」はそのうちの２つのゲームで共有されており、３つめのゲームには独自の通貨があった。新しいゲームを今後追加していくにあたり、新しい通貨が追加されユーザーが混乱してしまうことが考えられた。以下の旧バージョンの画像で「プレミアムアカウントの購入」の下のリンクを見ると、それぞれのゲームのアイコンが表示される。また、どのゲームで「ゴールド」を取得できるかガイドラインに記載されている。いずれにせよ、非常にややこしいシステムであった
2. ２回目の変更で、経験値とクレジットの表示を省力した。このことで、デザインがよりシンプルで清潔になった。しかし、ユーザーが必要なアカウント情報を全て掲載しなければいけないことを考えると、この方法はあまりフィットしなかった。
3. モバイル上でのガイドラインのデザインがいまいちだった

また、次のステップではゲーム毎に情報を区別する必要がありました。ここで、プロフィールゲームカードの原型ができはじめました。

新しいデザイン

次のステップでは、旧バージョンのデザインから離れ、グローバルメニューの新しいデザインを適用することを試みました。

1. まず、スペースの限界と情報の混乱を避けるために、ユーザーのアカウント情報を丸ごと新しいデザインに流し込む方法をとった。しかしこの方法だと、大げさで重いデザインになってしまい、プロフィールカードに見えなくなってしまった
2. そこで、カルーセルパネルを導入し、ひとつのカード以上の情報が見えるように試みた

このアプローチでいくつもの問題が解決しました。しかし一方で、デザインはつまらなく、プロフィールゲームカードのコンセプトにフィットしないとの結論に至りました。

そこで、次のステップではゲーム毎のキャラクターと統計を搭載することで、より分かりやすいビジュアルカードを作成することになったのです。

• このことで、視覚的にゲーム毎の区別をつけ、それぞれの統計を別々に表示できるようになった
• さらに、ひとつのカードから全てのゲームへのリンクを提示するために「появилось место」を導入した

このバージョンのデザインが一番面白く最適なものであると、チームは判断を下しました。このデザインを、次のステップでよりアップデートさせていくことになります。

このバージョンのデザインは急いで作成されましたが、次のステップでは初期の予定通りのゲームアートではなく、キャラクター（戦車や軍艦、軍用機など）にデザインを適用することが必要でした。以下、「ゲームのヒーロー」毎の様々なカード事例です。

こうすることで、最適なキャラクターを選択できました。

世界中1.5億人のユーザーを持つウォーゲーミング ですが、ユーザーはパソコン、スマートフォンなどさまざまなデバイスでゲームをプレイしています。そのため、異なるブレイクポイントに合わせてデザインを適用することが次のステップとなります。

統計に基づき、ユーザーが最も使用しているデバイスで、ブレイクポイントのコントロールがテストされました。

近年では、ほとんどのユーザーがモバイルデバイスを使用しています。そのため、デザインを簡易化せず、キャラクターやその他の情報を省くことなく、モバイルデバイスやウェブポータルにてより良くカードが表示されるように工夫する必要がありました。

以下の異なるケースでも、同じ手法が用いられています。

1. ユーザーのインターネットコネクションが遅く、ゲームがダウンロードできないケース
   
2. ウェブポータルでユーザー登録しログインしているが、ウォーゲーミングのゲームをひとつもプレイしていないケース

前編にも記載したように、ウォーゲーミング には独自のアート部門が存在します。そのため、デザインが承認された後は、次のステージとしてアートチームにデザインを渡す必要がありました。理由は以下のとおりです。

1. バックグランドカラーとキャラクターを、アート部門とマーケティングチームの両方が承認する必要がある
2. キャラクターのイメージを固めることで、デザインとの整合性を図る必要がある

なお、ここまで説明してきたデザインワークの一部始終は、フロントエンド開発のためではなく、あなたやアーティストのより深い理解のために記載しました。

この記事が、あなたのWebデザインの参考になれば幸いです。

（翻訳：Mariko Sugita）

前編はこちら↓