Daily UI #019 （Leaderboard）
Daily UI 19日目のお題は「Leaderboard」。
ゲームの順位画面を制作します。
制作過程
今回は9時間弱でした。だいぶ彷徨ってしまった…
制作の流れ
前回の反省点の確認：2分
リサーチ・要件定義：1時間40分
必要な項目を考える：4分
ワイヤーフレーム・ビジュアル：7時間
--------------------------------------
計 8時間46分
リサーチ・要件定義
ゲームのスコア順位画面を制作することにします。いつものようにChatGPTに要件を詰めてもらいました。ゲームUIは経験が全然なくて方向性が定まらなかったので、デザインのテイストも考えてもらいました。
サービス名：EpicBlaze
ゲーム内容：
近未来のサイバーパンク都市を舞台にしたアクションアドベンチャーRPGです。プレイヤーは都市を支配する悪の企業に対抗するレジスタンスの一員として、ミッションを遂行し、敵と戦い、仲間と協力して都市を解放することを目指します。派手なエフェクトとビビッドなグラフィックが特徴です。
サービスカラー：
ブルー、パープル、イエロー
デザインのテイスト：
テーマ: 彩度の高い、近未来的でカラフルなサイバーパンク
スタイル: ビビッドでポップなカラーリング、シンプルで直感的なUI、ダイナミックなアニメーション効果
フォント: モダンでフレンドリーなサンセリフ体
プレイヤーのレベル上げの基準となる要素：
経験値（XP）: バトル勝利やミッション達成で獲得
クレジット: ゲーム内通貨。装備やアイテムの購入に使用
装備の強化: サイバネティック装備や武器を強化してキャラクターのステータスを向上
バトル勝利数: 他プレイヤーとの対戦での勝敗数
ミッション達成数: 物語の進行度とプレイヤーのスキルを示す
ペルソナ：
名前: 田中優花（17歳）
職業: 高校生
住居: 東京都渋谷区
特徴:
ポップでカラフルなデザインのゲームを好む
放課後や休日に友達と一緒にゲームを楽しむ
ソーシャル機能を活用し、友達と連携して遊ぶことが多い
ゲームのビジュアルやアニメーションにもこだわりを持つ
タブバーの項目：
ホーム: ゲームの最新情報やニュースを表示
バトル: PvPおよびPvEバトルにアクセス
キャラクター: キャラクターのステータスや装備を管理
ギルド: ギルド管理やギルド活動の情報を表示
リーダーボード: プレイヤーランキングを表示
リサーチは、DribbbleとPinterestを主に参考にしました。「Leaderboard」
で検索したり、スポーツのランキング・サイバー都市っぽいデザイン・ゲーム画面を見ました。
ワイヤーフレーム
制作したワイヤーフレームがこちら ↓
枠からイラストが飛び出す感じにしたかったんですが、いい素材がなくて諦めました。
ビジュアル
制作途中 ↓
完成
制作した画面がこちら ↓
イラストなしでも世界観が出せそうなスプラトゥーンのデザインに寄せました。画面下部の「あなたのチーム」には、ユーザーの参加しているチーム（ギルド）のランキングを固定で表示し、▼を押すと下に収納できる想定です。
デザインのポイント
スプラトゥーン風フォント
ゲームっぽい丸っこいフォントにしました。これのおかげでだいぶ雰囲気が出たんじゃないかと思います。「イカホ」と「うさぎとまんげつのサンセリフ」を混ぜてます。
タブバー
いつも似たようなUIにしがちなんですが、今回は雰囲気に合わせていろいろ変えてみました。
①背景のベタ塗りをなくした
②アイコンをデュオトーンにした
③選択時の背景をインクしぶき風のシェイプにした
制作してみて
フォントに頼り過ぎたなとちょっと反省。もう少しデザインでもゲームの世界観を出せると良かったです。原因は、要件や方向性が定まらないままビジュアルに突入してしまったことだと思います。ほぼトレースになっても一度既存のものにできるだけ近いデザインを作れば良かったかもしれません。