トレーディングカードの相場検索アプリ「TCG GATE」のUIデザインをご依頼いただきました。

ご依頼の背景・目的

クライアントはWebシステム開発会社で、これまでもデザインやフロントエンド実装をご依頼いただいており、その実績をご評価いただいたことから、自社開発アプリのUIデザインをお任せいただきました。

本プロジェクトはアジャイル開発を前提としており、機能追加や仕様変更を繰り返しながら開発が進むため、柔軟かつスピーディーに対応できる体制が求められます。これまで継続的にご一緒してきたことで、お互いの進め方やコミュニケーションに共通認識があり、開発チームの一員として参画しました。

トレーディングカードはコレクションとしてだけでなく資産価値を持つものも多く、海外にも大きな市場があります。そのため、将来的な多言語対応やグローバル展開を見据えながら、拡張性の高いUI設計を行うことがプロジェクトのテーマでした。

担当範囲はアプリ本体のUIデザインに加え、ロゴデザイン、アプリダウンロード用ランディングページ、アプリと連携するWebサイトのデザインまで、一貫して担当しています。

設計・制作のプロセス

まずは、今後の機能追加や仕様変更を前提としたデザインシステムの構築から着手しました。カラーガイドやタイポグラフィ、ボタン、フォーム、画面レイアウトなどの基本コンポーネントを整備し、どの画面でも一貫したUIを維持できる基盤を設計しています。

アジャイル開発では、機能が増えるたびに画面数やユーザーフローが拡大していきます。そのため、デザイナーだけが扱えるデータではなく、ノンデザイナーでも画面を組み立てられることを重視し、Figmaのコンポーネントを活用した設計を採用しました。必要なパーツを組み合わせるだけで一定品質の画面を作成できるようにし、開発スピードを損なわないデザイン環境を整えています。

また、余白やフォントサイズ、レイアウトルールなどを曖昧な感覚ではなく数値で管理することで、誰が作業しても品質にばらつきが生まれにくい設計を徹底しました。美しいUIを追求するだけでなく、開発効率や保守性まで考慮したデザインシステムを構築しています。

プロジェクトの途中では、一度デザインシステムの管理を別の担当者へ引き継ぐ期間がありました。その後、約1年を経て再びプロジェクトへ参画した際には、運用の中でデザインルールが崩れ始めていたため、新規画面の制作と並行してデザインシステムの再整備を実施しました。継続的に運用されるプロダクトだからこそ、設計だけでなく維持・改善まで見据えたデザインの重要性を改めて実感したプロジェクトです。

今後の展開

現在も新機能の追加やサービス拡張が継続的に検討されており、今後もアジャイル開発を前提としたプロダクトの成長が予定されています。

将来的な多言語対応や海外展開も視野に入れているため、拡張性の高いデザインシステムを活かしながら、サービスの成長をデザインの側面から継続的にサポートしていく予定です。