Skeuomorphicなクレジットカード入力フォーム「Skeuocard」

[PR]記事内のアフィリエイトリンクから収入を得る場合があります
  • URLをコピーしました!

Skeuocard

Skeuocard」はクレジットカード入力フォームを便利するためのテクノロジー。

従来のカード情報入力フォームでは、最初から、カード番号、有効期限、名前などの入力欄が表示されていましたが、Skeuocardでは、まずカード番号を入力し、見た目が実物のカード風に変わった後、残りの情報を入力するという流れになります。

Before
サイトトップにカード情報を入力してみます。カード情報はどこかのサーバーに送られるわけではない(ブラウザ上でだけ実行される)と注意書きがありますが、適当な番号を使ったほうが精神衛生上良いでしょう。

Skeuocard by kenkeiter

4111」を入れると、Visaカード風の見た目に。

Master

5111」を入れると、Masterカード風の見た目に。

カード番号の最初の方の数字を使って、クレジットカード会社を判別し、画面のレイアウトを切り替えているようです。

まとめ

Skeuomorphicなインターフェイス自体賛否別れるところがありますが、見た目的にはなかなか綺麗にまとまったインターフェイスだと思います。Hacker Newsのコメント欄では、1Passwordでデータを埋め込めないとか、タブオーダーが間違っているというような指摘もあり、実用するにはこれからさらに試行錯誤が必要かも。ソースはGitHubで公開されています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次