Daily UI ２日目のお題は「Credit Card Checkout」。
クレジットカードの決済画面を制作します。

制作過程

約３時間で制作しました。

要件定義

参考にできるサービスの多い、ネット通販での決済を想定しました。
前回忘れていたターゲットも決めました。

リサーチ

前回の反省を活かし、Dribbbleで「creditcard checkout」「Family」などで検索。他に、過去に使ったことのあるサービスも参考にしました。

考察

↑を見ると、大体２種類に分かれていました。
（１）決済手段選択と情報入力の画面が分かれているタイプ
画面が分かれている分、スペースにゆとりが出ます。

（２）決済手段選択と情報入力の画面が同じタイプ
こちらだとより少ない画面数で済みます。

情報量が多い方が練習しがいがあるので、（２）で作ることにします。

また、楽天市場のUIが分かりやすくていいなと思いました。
特に、画面上部の進捗と有効期限の２ヶ所です。

進捗は、この先何をするのか分かるので安心感がありますね。

有効期限が日本語表示なのも、すごくいいです。
時々「MM/YY」みたいに書いてあるやつがあるんですが、いつも月・年どっちか分からなくなるので。

合わせて、画面に含める項目も決めていきます。

ラフ

一旦紙に描きます。ここは割愛。

ワイヤーフレーム

ラフを基に制作したワイヤーフレームがこちら↓

画面上部の進捗のデザインを変えて、２パターン作ってみました。左が個性をだそうと頑張った方、右が分かりやすさを優先した方です。

迷ったんですが、右の方が注文確定前に確認ができるのが分かり、安心感があるかなと思ってこちらにしました。

ビジュアル

もう少し作りこんだのがこちら↓

メインカラーの青はコントラスト比を意識し、見やすい＆今っぽい彩度高めの青にしました。

微調整

最後に、余白を調整します。

完成

制作したUIがこちら ↓

アコーディオンメニューで、選択と同時に情報入力フォームが下に出てくる想定です。
画面上部の進捗は、買い物カゴ→入力（支払方法）→入力（住所）→確認→完了を想定しています。

UIのポイント

（１）有効期限の日本語表示

これは楽天市場のデザインをそのまま採用しました。１番迷いの起こらないUIじゃないでしょうか。

（２）お支払い区分

フォームは縦１列に並べた方が入力しやすいとよく聞きますが、クレジットカードで一括払い以外の払い方をするのはあんまり聞かない（気がする）ので、あえて右にして触りずらい位置にしました。
デフォルトで一括払いにしてあるので、ほとんど触らずに済むんじゃないかと思います。

制作してみて

・前回の反省を活かしてターゲットを設定したのは良かったんですが、あんまり活かせませんでした。お題の内容的にもなかなか難しかった気がします。次はターゲット設定＋ターゲットに合わせたデザインにまで挑戦したいです。

・やはりオリジナリティが課題。ワイヤーフレームでちょっと違うものを作っては見たものの、結局分かりやすい方を選んでしまいました。個性と分かりやすさが両立するところを見つけられたらな、と思ってます。