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

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

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

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

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

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

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

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

Card