クレジットカードの入力画面が超ユーザーフレンドリーになるJS「Card」

Pocket

iOSがフラットデザインになったのを契機に猫も杓子もフラットデザインな今日この頃ですが、一般的にはそれ以前のスキューモーフィックデザインの方がユーザーフレンドリーなようです。やっぱり現実と同じ見た目がコンピューター上でも展開されると、「これと同じ使い方で良いんだ!」と安心できますからね。

クレジットカードも見た目通りのほうが分かりやすいよね

そんな訳で、クレジットカードの入力インターフェースに、実際のクレジットカードの見た目を添えてユーザビリティを向上させることのできるCardというJSのご紹介です。

こんな変哲もなかった入力フォームが・・・

Card_—_make_your_credit_card_better_in_one_line_of_code_2

こんな1行のコードを追加するだけで

Card_—_make_your_credit_card_better_in_one_line_of_code

リアルなクレジットカードが表示された画面に変化します。

Card_—_make_your_credit_card_better_in_one_line_of_code_1

最初の4桁の値によって右上のロゴがMasterCardだったりVISAだったりに切り替わるので、設定しているカードの情報に間違いがないかひと目で分かるぶん、ユーザーとしては安心ですね。

Card