アプリ内でしか購入できなかった課金アイテムを、自社サイトから直接購入できるようにするために立ち上がった外部決済サイトです。

Figmaで全体のデザインとモックを先行して作成し、購入完了までのフローをプロジェクト初期の段階で関係者全員が確認できる状態にしました。バックエンド側もモックを基にAPI設計を進められたため、開発全体が円滑に進行しています。

デザインは各画面とも、開発チームの確認を通しながら進めています。ゲーム側の仕様や運用と食い違いが出ないよう、確認で受けた指摘は背景を確かめたうえで反映しました。

実装が進むと、画面によっては余白や字送り、状態変化の見え方がデザインどおりに再現されない箇所が出てきました。都度チャットで指摘する形では抜けと戻りが増えるため、画面ごとに「デザイン」「実装」「差分の内容」を並べた修正指示書をスプレッドシートにまとめ、エンジニアが上から順に潰せる状態にしています。スケジュールが厳しい局面だったため、私自身もCSSを直接調整し、分担して同時に進めました。

キービジュアルまわりの画像は、開発チームのデザイナーに制作を依頼しています。必要な画像の種類・サイズ・トーンを整理して渡し、上がってきたものにアートディレクションを重ねる形で仕上げました。

あわせて、アプリからWebストアへ送り出す中継ページも担当しました。ストアの規約上、アプリ内から外部決済サイトへ直接リンクを張ることができないため、いったんこのページを挟む必要があります。

単なる踏み台にせず、Webストア限定のセット内容やプロモーションコードの使い方をここで先に伝え、アカウント連携の手順も含めて、購入までの流れが途切れないよう導線を組みました。
中継ページを見る