見出し画像

DailyUI 002 of 100 〜Credit Card Checkout〜

はじめに

メール届かなくてさすがににおかしいなと思いメアドを変えてやり直したら届きました。笑。今日から頑張ります!

今回の課題

お題は"Credit Card Checkout"です。前回同様、サイトや他の人のものを参考に構成を考え作成しました!
前回はただのページがめくれていくだけだったので、動的なものも入れてみたいと思い考えたところ、「カードを横にドラッグしたら使用したいカードが変更できるようにしよう!」と思い、早速調べたら簡単にできました!!
ただ描いたものを作るのもいいですが、自分のできる領域を増やすために新しいことを毎回やったほうが成長を実感しやすくてモチベーションが上がると感じました。
今回のイメージは、何枚もクレジットカードを持っている人がECサイトでクレジットカードを視覚的に選択しやすく、また追加もその画面でできるようなことを考えました。

成果物

本当はドラッグとともに、カード番号とかも変わる予定です。今回はサボりました。すみません、、、

入力フォームとカード画面が連動しているイメージです。


まとめ

今回も結構自分のイメージに近いものが作れたと思います。
制作時間は調べたり画像作ったりを含めて2時間ぐらいでした!
フィードバックコメントでお待ちしております。
仕事終わりにやっていますがそこまで時間を取られるものではないので、UI作ってみたいという方はオススメです!
次回も頑張ります!

もし興味を持ってくださった方がいらっしゃったら、是非スキ&フォローよろしくお願いします!


この記事が気に入ったらサポートをしてみませんか?