外部決済サイトの第2弾として制作しました。第1弾で得た知見をもとに購入フローを整理しています。

キービジュアルまわりの画像は、開発チームのデザイナーに制作を依頼しています。その際、ファーストビューの高さを使い切らない寸法を指定しました。ここは商品を買う場所なので、絵で埋めてしまうとスクロールするまで何も買えない画面になります。世界観を伝えるのに必要な最小限の高さに抑え、開いてすぐアイテムの並びが目に入る状態を優先しました。

購入にはゲームアプリとのアカウント連携が必要ですが、その手順がどこにあるのか分かりにくい状態でした。サイトを開いて少しスクロールすれば案内が目に入るよう、置く位置と見せ方を組み直しています。連携は買う前に必ず通る手順なので、探させないことを優先しました。

バックエンドエンジニア、フロントエンド、デザイナーと多くのスタッフが関わるプロジェクトだったため、Figmaで作成したモックを全員が同じ基準として参照できるようにし、並行して作業を進められる体制を整えました。

デザインの確認は第1弾と同じく開発チームとやり取りを重ねる形で進め、ゲーム側の仕様・運用との齟齬が出ないよう、フィードバックを反映しながら仕上げています。

実装後にデザインとの差分が出た箇所は、第1弾と同じく修正指示書にまとめて渡し、順に対応してもらう形で進めています。指摘を都度返すのではなく一覧にしておくことで、抜けと戻りを抑えられました。