クリレス優待アプリ｜チャージ＋ギフト モック
画面内の要素をクリックすると遷移先の画面へ移動します
一覧に戻る
オンラインチャージ ＋ ギフト機能
チャージとギフトの画面遷移をまとめた叩き台です。
チャージはVD様の決済画面をWebViewで開くだけの構成。
ギフトは指定のカードから指定金額をギフトでき、カー度番号とPINを共有してギフトする想定。
カードの役割設計
①株主優待券
②ウォレット
③ギフトカード
チャージ
不可
可
不可
ギフト
可
可
不可
合算
可（既存機能）
不可
不可
カード非表示
可
不可
可
有効期限
優待の期限
Nヶ月（仮）
Nヶ月（仮）
A. ホームとカード詳細
カード一覧の最上部にクリレスウォレット（仮名称）を固定表示する。
A-1
ホーム（カード一覧）
クリレス優待アプリ
カード一覧
非表示にしたカード
＋ カードを追加
A-2
クリレスウォレット詳細
カード詳細
取引履歴
ギフト履歴
2026/08/10 12:00
チャージ
+￥5,000
2026/08/09 19:30
ギフト送信
-￥5,000
2026/08/05 12:10
利用：トイポキッチン
-￥1,200
2026/08/01 10:00
ギフト受取
+￥3,000
作成したギフトの一覧です。お相手が受け取ったかどうかは確認できません。
2026/08/09 19:30 作成
1234-5678-0000-0002
5,000
円
2026/07/12 09:05 作成
1234-5678-0000-0009
2,000
円
タップするとカード番号とPINを再表示できます。
ギフトする
A-3
株主優待券詳細
カード詳細
取引履歴
ギフト履歴
合算した優待券
この優待券から作成したギフトの一覧です。お相手が受け取ったかどうかは確認できません。
2026/07/02 11:20 作成
1234-5678-0000-0007
3,000
円
2026/08/02 18:40
利用：トイポレストラン
-￥2,000
2026/07/02 11:20
ギフト送信
-￥3,000
この優待券に合算した優待券はありません。（既存機能・今回の改修対象外）
ギフトする
非表示にする
合算する
A-4
ギフトカード詳細
カード詳細
取引履歴
2026/08/12 19:05
利用：トイポレストラン
-￥2,000
2026/08/11 12:00
ギフト受取
+￥3,000
カードを非表示にする
B. オンラインチャージ
アプリ側のチャージ画面は設けず、「チャージする」でVD様の決済画面をWebViewで開くだけ。閉じたら自動リロードして残高を更新する
B-1
決済画面（VD/DGFT・WebView）
完了
payment.example.co.jp
チャージ金額とお支払い方法
チャージ金額（1,000円〜50,000円）
5,000
円
カード番号
0000 0000 0000 0000
有効期限
MM / YY
セキュリティコード
000
お支払いする
VD様側の画面
（トイポ実装範囲外）
金額入力・決済・失敗時の扱いはすべてこの画面の中で完結します
C. ギフト送信フロー
各カードの詳細画面の「ギフトする」から起動する。
ギフト元が株主優待からであれば、株主優待の有効期限を引き継ぐ。ウォレットからであればギフト作成後、Nヶ月後になる想定。
C-1
ギフト金額入力
ギフトする
ギフト元
クリレスウォレット
有効期限 2027.2.10
13,000
円
ギフト金額
5,000
円
ギフト元のカードの残高から引き落とされます。
次へ
C-2
ギフト内容確認
内容の確認
ギフト元
クリレスウォレット
ギフト金額
5,000
円
引き落とし後の残高
8,000
円
ギフトカードの有効期限
2027.2.10
ギフトを作成する
C-3
ギフト詳細
ギフトの詳細
ギフトを作成しました
5,000
円
有効期限 2027.2.10
この2つをギフトを贈る相手に共有してください
カード番号
1234-5678-0000-0002
コピー
PINコード
{{ pinText }}
{{ pinButtonLabel }}
コピー
この2つを知っている方が残高を利用できます。共有先にご注意ください。
ギフトの贈り方
1
カード番号とPINコードをコピーして、LINEやメールなどでギフトを贈る相手に伝える
2
ギフト受け取り手が、クリレス優待アプリの「カードを追加」で番号とPINコードを入力する
3
ギフト受け取り完了
この画面はカード詳細の「ギフト履歴」からいつでも開けます。
カード番号とPINコードをコピー
D. ギフト受け取りフロー
既存のカード追加画面で受け取る。
D-1
カード番号・PIN入力
カードの追加
カード番号
1234-5678-0000-0002
PINコード
1234
カメラでカードを読み取る
追加する
D-2
受け取り後のホーム
クリレス優待アプリ
カード一覧
非表示にしたカード
＋ カードを追加