今回は『Pokémon Trading Card Game Pocket（以下、ポケポケ） のUIデザインについて考察していこうと思います。
このゲームの特徴は以下。
| ジャンル |
|
| 対応OS | iOS/Android |
| 開発 | ディー・エヌ・エー、 ポケモン、 クリーチャーズ |
| 価格 | 基本無料（一部ゲーム内課金あり） |
| リリース日（日本） | 2024年10月30日 |
| キャラ表現 | 2D |
| UIのテイスト | ニューモーフィズム |
| キャラ獲得方法 | パック開封（ガチャ） |
ポケポケは、1996年10月20日に「ポケットモンスターカードゲーム」として発売されたゲームボーイソフトから派生したカードゲームのスマホゲーム版です。
ポケポケのデザインの特徴
フォントサイズ
1080px ×2340px基準（縦画面）でフォントサイズを探ってみました。
| ホームパック開封時間表示 | 22px〜24px | ヘッダータイトル | 42px〜44px |
| ヘッダー数値 | 28px〜29px | 本文 | 32px〜34px |
| メインボタン | 28px〜30px | 本文（最小） | 22px |
使用フォントはニューロダンかと思います。バランスの取れた、読みやすく美しいフォントです。
Lv.表示などの数字周りで一部、Futura系のフォントも確認できます。
ポケポケの採用したデザインスタイルともマッチしていますね。
使用カラー
UIは基本的に白ベースで、白〜青みを帯びたグレー系の無彩色をベースに構成されています。
配色がとても美しいですね、以降で触れるデザインスタイルの性質上という感じでしょうか、柔らかな色味の中にメリハリを意識した配色に感じます。
洗練されたニューモーフィズム
ニューモーフィズムとは2020年頃からトレンドになったデザインスタイルで、背面と操作要素が一体になったような表現が特徴です。
一つの物質が飛び出たり凹んだりしていて、ある種の触れたくなるような質感も伴うUI表現です。
2024年リリースということで、開発期間が3,4年とすると開発開始時期のデザイントレンドを意識したのかなと想像できます。
カードゲームという、そのものが持っているストーリーや世界観が独特でない性質上、フラットデザインやニューモーフィズムのようなUI表現は組み合わせやすいかもしれません。
ニューモーフィズムはUIとしての操作性や視認性の欠如が指摘されるようですが、ポケポケではゲームらしいデザイン調整が施されています。
ニューモーフィズムの中にグラデーションを多用し画面の温度感を上げ、部分的にパターン画像を使用したり立体的な商品画像で画面全体のメリハリをつけている。
当時のトレンドを意識しつつゲーム的な見た目の調整をしっかり行っているのがさすがです。
ポケモンカードをスマホで最大限楽しみ尽くせるアプリ
ポケモンカードを手軽にコレクションできるアプリ、とのことで、カードの体験に対するこだわりを強く感じます。
実際にカードゲームのパックを買ったことがある方であればわかるかも知れませんが、パック自体のデザインやホログラム加工ってめっちゃいいですよね。
それがポケポケでは見事に表現されていて、実際のパックを引いているような感覚になります。
カードゲームを扱うスマホアプリの、開封体験の現時点での最高峰ではないでしょうか。
また、レア加工のカード表現もめちゃくちゃいい。
傾きに応じて光のあたり加減や発光箇所が変化して、リアルカードに近い所有感を味わえます。
デジタルなので、カードの背面、ポケモンの絵柄、情報欄が視差でズレて見えるのがまた斬新で、単純にリアルカードの良さを表現するだけに留まらない、もう一歩先のクオリティを目指す姿勢が素晴らしい。
- どのパックを選んで引くか、の楽しさ
- パックを開封する時のワクワク感
- レアカードの表現
- デジタルならではの追加要素
これらがこのアプリの根底にある、強烈な魅力になっています
『ポケポケ』の各画面を見てみる
ホーム
前述した通り、ニューモーフィズムで表現されたUI。お気に入りのカードを飾るではなく、パックが中央に表示されています。
パックを引く体験を最大として考えられているのでしょうか、ログインしてすぐにパック開封に行き着くように設計されているように思います。
また、UIのテキストは最低限。個人的にはかなり好印象です。
ラベリングがないと分かりづらい、という意見は開発中にメンバーからよく指摘されますが、適切なアイコンの表現や、特に危険性がない限りはユーザーであれば触って覚えていきます。
丁寧な対応を行うあまり画面が煩雑になるケースはかなり多いので、こういった削ぎ落としたUI表現が主流になると良いなと感じます。
ニューモーフィズムというスタイルを選択したという部分も大きそうではあります。
アイコンデザインも地と図をしっかり意識して作られていて、選択中の画面ではそれが入れ替わる仕組み。ミニマルで美しいです。
カードリスト
カードリストにあたる機能でも、ニューモーフィズムのデザインスタイルがしっかり活きています。
カードの空きが窪んでおり、コンプリートしたくなるようなデザイン。
画面タイトル下の虹色にアニメーションするラインもさっぱりしがちなデザインでフックになる要素です。
縦画面なのでカードを拡大した時もしっかり絵が見える点が良いです。
バトル
バトルTOPでは、操作面はニューモーフィズムになっており、その他は大きめの画像が挿入されていたりとゲーム的な表現をしっかり取り入れています。
バトル画面
カードバトル画面では、リアルのカードバトルよりも短時間で遊べるように再設計されているようです。
先に3ポイント取ったプレイヤーが勝ちで、エネルギーもカードではなくターンで追加されるようですね。
操作も簡潔で分かりやすく、オート操作もあるので遊びやすい。
勝利時の背面のグラデーションもそうですが全体的な色の表現がとても綺麗ですね。
ポイントを取った時の演出もモーショングラフィックス、といったアニメーションが施されていてシンプルながらも心地よい。
まとめ：スマホ版にしっかり最適化＋アップグレードされたポケカ
リアルのポケモンカードゲームの良さをそのままに、デジタルならではの表現もプラスして「スマホゲーでしか味わえない体験」にまで昇華されたプロダクトでした。
リアルカードの所有感も良いですが、デジタルのアニメーション表現や発光表現がリアルカードにないリッチがあって両者の体験として食い合わないうまいバランスに感じました。
バトルも簡潔、シンプルで短時間でサクッと遊べるように仕上げられていて、これまたスマホアプリとして最適化されているように感じます。
また、ニューモーフィズムをしっかりゲームUIで落とし込み、さらにゲーム的な楽しそう感がうまく表現されていて見事でした。
