ECサイトの購入フォームでは、多くの場合クレジットカードによる決済方法を用意していることがほどんどです。
銀行振込みや代引き、コンビニ支払いなどほかの決済方法に比べ、その場で情報を入力するだけで手続きが済み、手数料もかからないことの多いクレジットカードは、オンラインショッピングを楽しむユーザーにとってもなくてはならないものです。
とはいえ、カード番号や有効期限、セキュリティコードなどと入力量が比較定期多いというのもクレジットカードの特徴。
今回はそんなクレジットカード情報の入力フォームの最適化についてポイントをお伝えしていきます。
余計な入力欄はなるべく減らす
クレジットカード情報のフォーム入力でよくあるのが、カード会社を選択させる入力欄です。
楽天のクレジットカード入力フォームでは、「カード会社」の選択肢がある
しかし結論から言うと、このカードブランドの入力欄は用意する必要がありません。
カード番号とブランドは対応している
なぜならば、実はカード番号の冒頭の数字とカードのブランドは対応しているのです。
例えば「4」から始まる番号だとVISA、といった形です。
これを利用すれば、ユーザーがわざわざブランドを選択する必要はなくなります。
理想は、入力内容に応じてロゴを表示したい
カード番号がわかれば、カード会社がわかるのですから、単純にブランドの入力欄を削除してしまっても問題ないはずです。
できればここに、入力されたカード番号からカード会社のロゴを表示する形にすると非常に親切です。
下記に紹介する先進的なフォームではこの手法が当たり前のように取り入れられています。
参考例1：appleストア
Appleストアのクレジットカード入力欄では、あらかじめカード会社のロゴ一覧が表示されており、カード番号の入力内容に応じて、該当するブランド以外のロゴの色が薄くなり、該当のロゴを強調するような形をとっています。
Appleストアの決済フォーム
参考例2：Jetstar
Jetstarでは、選択したカード会社によっては所定の手数料が生じることがあります。
カード番号を入力すると、カード会社のロゴだけでなく支払い手数料についての追記もインタラクティブに表示される形をとっています。
Jetstarのカード情報入力画面。
より直感的な情報入力を実現する
続いて、よりインタラクティブなカードUIジェネレーターを２つ紹介したいと思います。
これらのジェネレーターを使うと、入力内容に応じて、実際のクレジットカードに似せたイメージを表示してくれます。
百聞は一件に如かず、ということでさっそくご紹介していきましょう。
デモ例
まずはSkeuocardというジェネレータを例に取り上げます。
入力前はこのようなUIです。
カードを模したイメージの中に、シンプルにカード番号の入力欄が示されています。
入力前のフォームUI
カード番号の入力し始め、頭文字「4」を入力しました。
その瞬間、カード会社（この場合はVisa）のロゴと、その他入力欄が現れます。
カード番号の入力を開始
AmericanExpressの場合は、以下のようにその他の入力欄の配置が微妙に変わります。
AmericanExpressの場合。
Card
次はCardというジェネレータの例を見てみましょう。
こちらも似たような形です。カードのイメージの下に別途フォーム入力欄が用意されています。
入力前のUI
入力を開始すると、カードのイメージに色がつき、下のフォームに入力した情報がリアルタイムに反映されます。
入力後（Visa）
同様にAmexの場合もテストしてみましたが、こちらもやはりカード会社によってサンプルの配置が最適化されています。
Amerian Expessの場合のサンプル
直感的に
以上、２つのジェネレータの例を見てきましたが、これらがすばらしいのは、ユーザーの入力場面を具体的に想定している点です。
決済時にカード番号を入力するユーザーの大半は、実際のクレジットカードを取り出して、それを見ながら入力していることでしょう。
その状況を想定し、入力画面状にもカードを模したUIを用意することにより、直感的に照らし合わせながら入力することが可能となります。
またカード会社によって微妙に異なるカード番号のフォーマットにも対応しているため、迷うことなくスムーズな照合が可能ですね。
さらにこんなサービスも
最後に紹介するのは、モバイル限定ですが非常に画期的なサービスです。
Jumio社が提供するサービス「Bam Checkout」は、なんと写真をとるだけでカード情報を入力できるというものです。
携帯電話のカメラでクレジットカードをスキャンすることで、入力が可能。
スマートフォンでの情報入力は、デスクトップに比べても非常に煩わしいものですが、このようなサービスを利用すると、たった数回のタップで一連のクレジットカードに関する情報入力を済ませることができますから、非常に画期的です。
最後に
いかがだったでしょうか。本日はクレジットカード情報の入力を簡単にするための最新EFO手法をご紹介しました。
ぜひあなたの購入フォームの決済フローにも採用を検討してみてはいかがでしょうか。
また、クレジットカード情報の入力欄については、以前にも下記の記事で話題にしています。
下記の記事では凝ったUIではなく、どのフォームでも取り入れることができる内容を扱っていますのでぜひ合わせて参考にしていただければと思います。
【ECサイトのEFO】クレジットカード情報入力欄で気をつけたい5つのこと
https://f-tra.jp/blog/column/5098
※参考記事
How To Ask For Credit Card Information In Online Forms
BAM Checkout – Improve mobile checkout experience
Lose That Credit Card Field – UXmas – Wishing you a great experience through the festive season!
Skeuocard by kenkeiter
Card — make your credit card better in one line of code
