TCGユーザー向けアプリ「TCG GATE」開発レポート＃01

Crewto®では現在、トレーディングカードゲーム（以下TCG）ユーザー向けアプリの開発を進めています。

今回の記事では、主要画面のUIデザインの作成過程についてご紹介します。

Contents

「TCG GATE」ってどんなサービス？

TCGユーザー向けのアプリで、下記の機能を実装予定です。
・カメラにかざすだけで、日本市場における価値相場が分かる
・デジタル上で自分のカードコレクションを作る
・カードの販売価格を比較できる
・デッキ構築できる(F2以降実装の可能性あり)

初期リリース時は「Flesh and Blood」のみサポート予定で、
今後はサポートするブランド数を拡大していく予定です。

カードをスキャンして、カードの市場価値を確認することができます。

スキャンした結果表示される画面がこちらです。
日本市場におけるカードのシングル販売価格を把握することができます。

「＋」ボタンを押すことで自分の「コレクション」へ追加することができます。
自分の保有しているカードと資産価値の近いカードをユーザー自らが選ぶ仕様になっています。

「→」ボタンを押すと販売元のECサイトへ遷移し
該当するカードを購入することができます。

制作過程について

当初(Before)は各カードの中央値でコレクションに追加する仕様にしていました。

しかし、絵柄違い等のレアカードではカードの価値が数十万円変わってくることから、中央値を採用した場合、保有カードと資産価値の乖離が発生してしまうことが判明。

そのため現在のように、ユーザー自身が追加するカードを選べる仕様に変更しました。

また、デザインもカード画像を中央上部に大きく配置することで
自分の選択したカードを視覚的により分かりやすくなるように工夫しました。

コレクションに追加したカードの一覧が表示されるページです。
自分の保有カードの総資産が把握でき、保有カードの検索も可能です。

制作過程について

当初(Before)はカード総資産の上昇率などを、株価チャートに近い形で表現していました。

しかし、TCGにおいては短いスパンで価値変動しづらいということが分かり、
現在のUIに仕様を変更しました。

また、カード情報を一覧で把握しやすくするためにカードは3列で表示。
検索バーを設置することで、数千枚のカードを保有していても該当カードを見つけやすくしました。

今後は「デッキ構築機能」をアプリに実装予定です。

自分のコレクションから任意のカードを選択し、オリジナルデッキを作成できます。

今回はサービスのUIデザインとその制作過程を中心にご紹介させていただきました。

一見シンプルに見える画面ですが、この画面が完成するまでは
さまざまな試行錯誤を繰り返し制作を進めてきました…！

これからもTCGユーザーに愛されるアプリになるよう、
開発を進めていきますので、ぜひアプリの進捗を楽しみにしていただけますと幸いです。

今後もTCG GATEの開発状況を定期的に発信させていただきますので
どうぞよろしくお願いいたします。

< TCG GATE開発メンバー：椛澤 >

—