Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
見出し画像

デザイナー達よ、ポケカで遊べ。

Yuta_Imamura

UIUXLabメンバーと有志デザイナーでアドベントカレンダーを実施しています！今回が最終日の記事になります！
興味があれば是非、他の記事も読んでみてください～！


はじめに

はじめまして！
株式会社サイバーエージェントでUIデザイナーをしている今村です。
業務では主に新規タイトルの開発や、子会社間での横軸に対してUIセクションにおける新規ゲーム開発フォローなどをしています。

話題沸騰中のポケポケ

ポケポケ(Pokémon Trading Card Game Pocket)めちゃくちゃ話題になっていますね！
かくいう自分も毎日パック開封に勤しみ、一喜一憂する毎日。
先日推しポケのゲンガーEXのアートレアを引いて興奮していました。
使っているデッキはゲンガーデッキとカイリューデッキです。
推しポケで勝ちたい派です。バンギラス早くきて。


こいつが欲しかったんや…！可愛すぎる！

元となっているポケカもカジュアルにですが、長～く遊び続けている、
いちポケカファンでもあります。

脱線しましたmm
ポケポケは話題ですが、特に日本においては空前絶後のTCG（Trading Card Game）ブームと言えるのではないでしょうか？
ONEPIECE、UNION ARENA、シャドウバースエボルヴ、ドラゴンボールFUSION WORLD、ウルトラマン、ディズニーLOCANA、思いつくだけでも短い期間でこれだけの新規TCGがリリースされてどれも話題になっています。

ポケカそのものも近年で社会現象レベルの大ブームを巻き起こしてますよね。日本ではインフルエンサーの活躍も追い風となり、TCGブームがポケポケのヒットにも大きく影響を与えていそうです。

そこで本記事では
「ゲームＵＩデザイナーがアナログカードゲームのインターフェースを解剖してみた」
という観点で考察をまとめてみようと思います。


TCGのインターフェースを解剖

まずはどんな要素がカードデザインに含まれているのか、ポケカを題材に分解してみます。
今回は特にカードデザインにフォーカスします。

まずは分解

一旦下図の分類で見やすく可視化してみました

要素を分類
要素を分解

分解から感じられる思想

こう分解してみるだけでも、いくつかのデザイン思想が見えてきます。

  1. ゲームプレイに必須な基本ルールに関する情報かつ、常にリアルタイムにプレイ判断に必要な情報の優先度が最も高く、上部や中央に相対的に大きいサイズで表示。

  2. ゲームプレイに必須な基本ルールに関する情報だが、常にプレイ判断に必要にならない情報は優先度を下げ相対的に小さいサイズで表示。

  3. ゲームプレイに直接関係ない情報は、優先度を最も下げ下端に集約。サイズも相対的に小さくまとめている。

  4. ゲームプレイに必須なルールの中でも、運用により拡張されるルール情報は、専用の余白を利用し、場合によっては３に属する情報とトレードオフで表示。


レアリティ表現との整合性をとった丁寧な情報提示

ポケカにはいくつかのレアリティが存在し、レアリティによってはカードデザインを大きく変えることで差別化を図り、レアリティの視覚的なバリューを高めています。
アートレア本当に好きです。

隙を補うデザイン設計

上図のように、特定のレアリティでは一部UI表現の視認性が担保されないことがあります。
その場合でも、別アプローチでの対応を併用することで情報を補完できるようにしています。

  1. 拡張ルール表現A：カードの半面をつかって大胆に表現。ルールに紐づいたビジュアルがあしらわれている。抽象的だが、差別化の面積が大きいため、パッと見での識別を助けるのに効果的

  2. 拡張ルール表現B：小スペースにまとめたラベルのような表現。文字などで具体的に明示することは、「気付けない」、「わからない」などのリスクを最も排除しやすい。

１で理解できずとも、２で取りこぼさない作りになっており、「カードのバリュー」と「わかりやすさ」を高水準でバランス良く満たしています。


デザインの反復で直感的な理解を助ける

タイプアイコンおいては、下図のようにモンスターカード以外にたいしても、同じアイコンデザインを共通して使用していることがわかります。
こういったデザインの反復は、ユーザーの余計な学習コストを減らし、
直感的なゲームプレイを促してくれます。

デザインの反復利用

「気になる」ところがまだまだ沢山！

今回はほんの入り口でしたが、
カードデザインだけ見ても沢山の分析ポイントが見えてきそうですね。

  • カードデザイン以外に発生するUIデザインはどうなっているのか

  • 多種多様なバリエーションに耐えうるアクセシビリティ考慮

  • TCGのインターフェースの拡張性担保の考え方etc.

  • カード裏面に存在するUI

「気になる」ことが無限にでてきそうなので、今回はここまでに留めておきます。需要がありそうであればまたまとめてみようと思います。
いつか叶うならポケカのデザイナーさんとお話してみたいですね！


DTCGとTCGの違い

ふと思いました。
DTCG(Degital Trading Card Game)とTCG(Trading Card Game)の違いってどういうところにあるんだろう。。。

カードデザインに顕著に表れる情報量の差

ポケカは元々TCGであったものをポケポケでDTCG化しました。
下図のようにポケポケでは違いがわかりづらいかもしれません。

ポケカでTCGとDTCGを比較

なので、
DTCGだったものをTCG化したシャドウバースで比較してみます。

シャドウバースでTCGとDTCGを比較

情報量の差が見えてきました。
DTCGでは表示しなくてよかった詳細情報をすべて表示する形に大きく作りかえていますね。

要因はプレイ環境？

仮説を立ててみました。
デジタルのゲームでは、必要な時に必要な情報にアクセスできることが良いとされています。必要な情報と不要な情報の「取捨選択する負荷」をユーザーが感じずに遊べるようになるためです。
またデジタルではそういった狙いを実現するために取れる手段の自由度が各段に高いです。

アナログな環境ではどうでしょう？
アナログのTCGを遊ぶシーンを想像してみてください。
自分で組んだデッキだけを片手に公園で友達と対戦したりしませんでしたか？？公園のベンチや床で遊んでカードをボロボロにした幼少期を思い出して、大人になってから悔やまれるのはもはやあるある。

奥さんと実際にポケカしている写真

アナログなTCGにおいては、プレイに必要な全ての情報をカードのデザインの中で完結する必要があると考えられます。
わからないときに自動で出てきてくれる便利な説明書や、ルール理解を助けてくれるプレイマットのようなインターフェースが必ず存在するわけではありません。
そういった意味でもTCGはDTCGよりもデザインの制約が非常に多いと捉えられそうです。

制約の中でできる「おもてなし」

DTCGでしかできないことをTCGのやり方で「おもてなし」する、そのための細かい工夫が前段でまとめた思想などに繋がっていると考えると納得感がありませんか？

これだけ極端な制約の中で、ストレス無くゲームプレイに集中できるUIを成立させ、かつカードの購買意欲を掻き立てる魅力あるビジュアルやアート性も両立させることは非常に難しいことです。
ポケカはそれを高水準でやってのけているわけですから、UIデザイナーはポケカからデザインを学ぶべきと良わざるを得ませんよね？（圧

ということで、まとめです。

まとめ

おわりに

この短時間注視してみてみるだけでも、たくさんの思想や工夫、TCGのデザインの特徴が見えてきましたね。これだけ長い歴史を積み重ねてきたカードゲームですし並々ならぬノウハウが凝縮されて詰まっていそうで、興味が尽きません…！

普段の生活のいたるところで、かつ極めて身近な場所にいつでも必ず存在するのがＵＩデザインの特徴であり、ＵＩデザインのやりがいのあるところだと思っていますし、どんなものでもUIデザイン的思考で分析可能だと自分は考えています。
皆さんも何気なく趣味にしているモノのＵＩデザインについて改めて考察してみてはいかがでしょうか？意外な学びがあるかもしれません！

今回で「UIUXLabアドベントカレンダー2024」も終了になります！
UIUXLabについては第１回の記事で紹介してますので、気になる方は是非読んでみてくださいね！

それでは良いお年を…！


いいなと思ったら応援しよう！