Daily UI #002: Credit Card Checkout
Become a better Designer in 100 days
100日後にもっといいデザイナーになる
Daily UI
今日のテーマ
Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.
クレジットカード決済のフォームまたはページをデザインしましょう。
カード番号、有効期限、セキュリティコードなどの重要な要素はお忘れなく。
カード決済について
デザインに取り掛かる前にカード決済についてまず考えてみよう。
クレジットカードとは
クレジットカード（英: Credit card[1]）とは、商品を購入する際の後払い決済（支払）をする手段のひとつ。または、契約者の（会員）番号、姓名、有効期限、その他が記載・記録されたカードである。顧客のクレジット（信用）により後払いが可能な手段である。
分割払い機能を持つものをクレジットカード、1回払いのものを欧米ではチャージカードと呼ぶこともある。それに対して、銀行口座に紐付けられ、口座預金を即時に決済に使用するカードは、デビットカードと呼ばれる。
クレジットカードはその前身も含めて、アメリカ合衆国では約150年の歴史がある。
クレジットカード決済の仕組み
カード決済の全体の流れ
利用者がクレジットカードを利用（←今回デザインするのはここ）
カード加盟店が商品・サービスを提供
カード会社が利用者に請求
利用者がカード会社に支払い（締め日は各会社ごとに異なる）
カード会社がカード加盟店に決済手数料を差し引いて売上金を支払い
カード決済に必要な情報
名義人
カード番号
有効期限（MM/YY）
セキュリティコード（※カード会社によってセキュリティコードの桁数と表示箇所が異なるため、わかりやすくする必要あり）
参考にしたデザイン
複数のアプリやサイトを色々参考にしてみて、アマゾンのカードをスキャンという機能はとても良いと思ったけど、実際にカメラでスキャンしたことがあったとき、うまく読み込みができずに断念したことがあるので、これはアイデアとしては便利でいいけど、UXがあまり良くないため、入れないことにした。
カード決済でどのカードブランドが利用できるのかはわかるようにしておきたい。もし自分のカードが該当しない場合は、ここでカード決済を諦めるはず。
セキュリティコードは、一番右の案はわかりやすいので、これはちょっと入れたい要素だと思った。
完成したUIデザイン
カード名義人とカード番号はプレイスホルダーにあれば十分だと思ったけど、名義人をアルファベットで書かないといけないことがここで迷うのだとしたら、見せ方はちょっと考えたほうがいいかもしれない。
最後まで読んでいただき、ありがとうございます。
この記事が気に入ったらサポートをしてみませんか？