Global Player – eスポーツプレイヤー採用支援ツール
Global Playerは、League of Legends（LoL）などのプロeスポーツチームの人事担当者向けに設計された採用支援アプリです。現在、選手採用はスカウトや紹介に依存し、客観的なパフォーマンス情報が不足しています。Global PlayerはRIOT APIなどから取得した公式データをもとに、選手の実績やパフォーマンスをビジュアル化して表示。人事担当者は候補を効率的に絞り込み、面談やテストなどのプロセスを通じて最適な人材を採用できます。
チーム
エンジニア：4名、UX/UIデザイナー：4名（本人含む）
使用ツール
Figma, Illustrator, Photoshop, Slack
期間
2022/09 - 2022/12 (15週間)
タグ
モバイルアプリ、ウェブアプリ、b2b、b2c、レスポンシブデザイン
プロジェクト概要
このプロジェクトは、チーム課題としてB2B向けのニーズを仮定し、実際の業務を想定して要件定義やユーザーテストも含めて構成したものです。
eスポーツチームの採用課題を分析し、情報不足やスカウト依存による採用ミスマッチを減らす仕組みを検討しました。ユーザーリサーチから課題特定、要件定義、情報設計、UIデザイン、プロトタイピングまでを一貫して担当し、実務を想定したUX設計と開発プロセスを学ぶことを目的としました。
課題
多くのeスポーツチームでは、選手の採用がスカウトや紹介に頼っており、十分なパフォーマンスデータや実績情報が共有されないまま採用が進んでいます。過去の成績や技術力（ハードスキル）に加え、チーム適性やコミュニケーション能力、メンタル面などのソフトスキル情報も不足しており、選手の総合的な評価が困難な状況です。その結果、有望な選手の見落としや、採用後のミスマッチが起こるリスクが高まっています。また、複数候補の比較・検討が属人的かつ非効率である点も大きな課題です。
ゴール
今回は最も人気のあるゲームのひとつであるLeague of Legends（LoL）に焦点を当て、eスポーツチームのHR担当者が客観的なパフォーマンスデータをもとに選手を比較・評価し、採用活動を効率化できるツールを提供することを目指しました。適切な人材を見極めやすくし、チームの競争力を高めることをゴールとしました。
ソリューション
Global Playerは、eスポーツリクルーターに対して主要な機能を提供し、データに基づいた意思決定を可能にする環境を実現します。
本システムには、リクルーターとプレイヤーという2種類のユーザータイプが存在します。下記の機能はすべてリクルーター向けに設計されており、プレイヤーは通常、データ比較機能を使用できます。また、リクルーターから連絡を受けた場合には、コンタクト機能も利用可能です。
RIOT APIから取得したパフォーマンスデータや、ソフトスキルレビューの内容をもとに情報の優先順位を整理し、わかりやすいチャートやグラフでビジュアル化します。人事担当者が選手の強みや傾向を直感的に把握しやすくなります。
複数のデータを総合的に判断する必要がある採用活動をサポートするため、2名のプレイヤーを並べて詳細に比較できます。スキル、実績、レビューなどを一画面で確認でき、より客観的な選考を可能にします。
以前所属していたチームが選手のソフトスキルやプレイスタイルをレビューとして登録できる仕組みを用意しました。レビューは選択式で、ポジティブまたはニュートラルなワードのみを使用することで、フェアで客観的な性格評価を可視化します。
気になる選手を見つけたら、このプラットフォーム上から直接メッセージを送信できます。ただし、通知を許可している選手にのみコンタクト可能で、双方のプライバシーを尊重したやり取りが可能です。
デザインプロセス
ユーザーインタビュー
ターゲットユーザーを深く理解するために、eスポーツ業界で選手の採用に関わる3名の関係者にインタビューを実施しました。現役プロチームのマネージャーや元コーチ、学生リーグの運営支援者など、さまざまな視点からヒアリングを行いました。その結果、統計データだけでは見えにくいソフトスキルや過去の違反歴、チームとの相性などが採用時に大きな課題となっていることが明らかになりました。
以下は、インタビュー参加者の声の一例です。
「統計だけでは、過去にアカウントがBANされたことや、チームプレイヤーかどうかはわからない。」
「採用候補者の情報は一人ずつ手動で確認するしかなく、比較検討に時間と手間がかかる。」
「ドラフトプールの中から自分に合いそうなプレイヤーを選ぶけど、統計しかなくて、比較しにくい。インタビューの時間もない。」
ユーザーの課題
• 統計データだけでは、プレイヤーの人間性やチーム適性が把握しづらい。
採用担当者は、プレイヤーの協調性や態度、コミュニケーションスキルなどのソフトスキルも重視していますが、これらは現在のゲーム内統計では可視化できず、採用後のミスマッチの原因となっています。
• 候補者とのコミュニケーション機会が限られており、性格や姿勢を判断する時間がない。
特に学生大会や草の根リーグでは、事前に面談の時間を確保するのが難しく、採用後に練習不参加・衝突などの問題が表面化することもあります。
• 候補者の中から効率的に選抜・比較するための手段が限られている。
他社サイトでは情報が整然と提供されてはいるものの、膨大なデータから自チームに最適な人材を特定するには多くの時間と労力を要する。
競合他社分析
League of Legends（LoL）のリクルーティングを支援する北米市場の主要競合サービスを調査し、それぞれの特徴や強みを整理しました。以下に、代表的な競合プロダクトとその機能概要をまとめています。
ペルソナ
メインターゲット層であるeスポーツチームの「新任マネージャー」と「ベテランキャプテン」の2名のペルソナを作成しました。いずれもLeague of Legendsの競技チームに所属しており、優秀なプレイヤーを効率的にリクルートしたいという共通のニーズを持っています。一方で、チーム構築経験や役割の違いにより、採用プロセスに対する課題や求める機能は異なります。これにより、プロダクト設計において多様な利用者像を想定したUX設計が可能となっています。
リーンキャンバ
これまでのリサーチで得たユーザー課題や市場ニーズ、プロジェクト要件を整理し、ビジネス視点からも価値提案や課題を俯瞰できるようリーンキャンバスにまとめました。これにより、チームメンバー間でもプロジェクトの方向性や優先順位を共有しやすくなり、実現性とユーザー価値の両立を意識したUX設計につなげています。
ユーザーフロー
リクルーターとプレイヤーの２つのサイドのユーザーフローを作成しました。各ユーザーがアプリ内でどのように操作を進め、目的を達成するかの一連の流れと、各機能がどのように連携しているかを視覚化しました。これにより、ユーザー体験全体と主要なタッチポイントを把握できるようにしています。
ワイヤーフレーム
本フェーズでは、アカウント登録からプレイヤーデータの閲覧、比較レビューの入力、プレイヤーへのコンタクトまでの一連のユーザーフローを設計しました。膨大なプレイヤー情報を扱う本プロジェクトでは、情報量の多さによる煩雑さを回避するため、アイコンや図解を活用した視認性の高い構成とし、ダッシュボードでは特に重要なデータに絞り込むことで、直感的に判断できる画面設計を目指しました。
ブランディング
ブランディングでは、「Modernism」「Technology」「Dynamism」のキーワードを軸に、ロゴ・カラーパレット・タイプフェイス・UIキットを構成しました。対象は、迅速な意思決定と直感的な操作性を求める、eスポーツ業界のリクルーターおよびプレイヤーです。
ロゴは抽象化された“世界”をモチーフにしており、グリーンとブルーの楕円はそれぞれリクルーターとプレイヤーを、中央の白いフォルムは両者をつなぐ存在としてのGlobal Playerを象徴しています。動きのあるフォルムとシンプルな構造により、さまざまなデバイスや媒体での展開にも適しています。
プライマリーカラーには、ミントグリーン（#7DFAA4）とディープブルー（#402CAC）を採用。セカンダリーとして、アクセントにグリーン（#29D37A）とスカイブルー（#53BCF9）を組み合わせ、デジタルらしさとエネルギーを表現しました。背景色のネイビーパープル（#080235）とテキストのホワイト（#FFFFFF）により、鮮やかなカラーが際立ち、暗いトーンのUIにも高い視認性を確保しています。
書体は、見出しにChakra Petchを使用。スクエアサンセリフでありながら角がわずかにテーパードされた設計により、近未来的かつ信頼感のある印象を与えます。本文にはGothic A1を使用し、複数ウェイトと最適化された字間により、あらゆる画面サイズでの可読性を担保しています。
モックアップ
モックアップでは、ユーザーフローやペルソナに基づいて設計した画面を視覚的に具体化しました。情報の量が多い本プロジェクトでは、何を目立たせるべきかという情報のヒエラルキーを意識しながら配色を設計し、重要なデータをひと目で把握できる構成を追求しました。また、eスポーツ特有のスピード感や高揚感をUI上で表現するため、色のコントラストや大胆なレイアウトを随所に取り入れ、業界にふさわしいダイナミズムを実現しています。本プロジェクトでは、外部のUIフレームワークを使用せず、すべてのデザインコンポーネントをゼロから設計しました。それにより、柔軟性の高いレイアウト設計と、Global Playerならではのブランド体験の両立を図っています。
ユーザーテスト
実際にLeague of Legendsのチームを運営する組織のコーチ、マネージャー、プレイヤーなど計5名にご協力いただき、Zoomを使用したオンライン形式でPC（デスクトップ）版に限定したユーザーテストを実施しました。画面共有を通じて、ログイン、プレイヤー一覧の閲覧、2名のプレイヤーの比較、レビューの記入、コンタクト送信までの一連の流れに取り組んでもらい、操作中の様子やリアルタイムのフィードバックを観察・記録しました。以下は、テスト中にユーザーから指摘された主なポイントと、それに対する対応内容です。実際の運用シナリオに即した、現場目線の貴重な意見を得ることができました。
イテレーション①
ゴール：
プレイヤーの情報を確認し、比較・レビュー・コンタクトまでをスムーズに完了できるかを検証するため。
フィードバックとソリューション：
1, ソフトスキルの情報源が不明だった。
→ 他のリクルーターが記入したレビューを基にしていることがわかるよう、説明テキストを追記。
2, レビューの詳細スクリーンでしかレビューを追加できず、見つけづらかった。
→ 「Add a review」ボタンを新たに配置し、プレイヤー詳細ページから直接投稿できるように改善。
3, 「Compare Player」ボタンが画面下にあり、スクロールしないと見つけられなかった。
→他のプレイヤーと比較するためのボタンを上部に再配置し、スクロールせずに視認できるよう調整。
イテレーション②
ゴール：
レビュー内容の詳細確認および記入を、スムーズに行えるかを検証するため。
フィードバックとソリューション：
4, ホーム画面に戻る動線がなく、迷ってしまった。
→レビュー詳細画面を含む全体にブレッドクラムを追加し、上位階層への移動が容易になるよう改善。
5, レビュー投稿ボタンが画面最下部にあり、見つけづらかった。
→ ボタンの配置を上部に変更し、スクロールせずに視認・操作できるように調整。
6, ソフトスキルの項目に具体的なパーセンテージがなく、他プレイヤーとの比較がしづらかった。
→各スキルにパーセンテージを表示し、比較しやすい設計に変更。あわせて、データバーの強調表現を見直し、プレイヤーごとの強みが視覚的に把握しやすくなるよう調整。
ファイナルプロトタイプ
このプロトタイプでは、リクルーターとプレイヤー、それぞれの操作フローをPC版・モバイル版の両方で確認できます。リクルーターはアカウント作成後、プレイヤー一覧の閲覧や詳細情報の確認、レビューの追加や内容確認、そして気になるプレイヤーへのコンタクトが可能です。一方プレイヤーは、アカウントを作成した後、他のプレイヤーの情報やレビューを閲覧し、リクルーターからのメッセージを受け取ることができます。両者の目的に沿った一連の操作がスムーズに行えるよう設計しています。
振り返り
複数デバイス対応を前提とした設計では、画面サイズごとの情報量やレイアウトの最適化に苦労する場面がありました。特にプレイヤープロフィールや検索結果など、要素数の多いページでは、モバイル画面では情報を取捨選択しながら再構成する必要があり、「すべてを見せる」よりも「伝えるべきことに絞る」視点の重要性を実感しました。そのため、モバイルでは内容が長くなりすぎないよう、必要に応じて一部情報を折りたたむなどの工夫を取り入れました。
また、ユーザーがどのデバイスからアクセスしても迷わず目的の操作にたどり着けるように、各画面での導線を丁寧に見直したことが、ユーザビリティの向上に直結することも実感しました。今後は、ユーザーフローやワイヤーフレームの段階で、より意識的に導線設計を深掘りしていくことが重要だと考えています。