今回はDaily UIというUI/UXに特化した画面の作成課題に取り組みました。DailyUIは、デザイナーが多様しているメルマガで、登録すると毎日平日10:00にお題が届くというものです。
実際の業務ありませんが、スキルアップのための訓練になりました。
トライアルの内容
UIのお題はこちらです。
クレカのチェックアウトフォームまたはページをデザイン。数字、日付、セキュリティ番号などの重要な要素を入れる
ターゲットユーザー
- 年齢不問
- 日本人
- 商品を購入しようとしている人
使用ソフト
- Figma
デザインカンプ製作期間
2時間
制作のポイント
文章のみのため、Figma、アプリデザインの練習も兼ねてカンプなくデザインから作成しました。。Figmaの全体はこちら
カード入力画面の設置
色合い等は想像は深く考えず、最低限の情報のみにとどめました。
カード情報の入力時は、現在自分がどの入力位置にいるのかの確認が必要になります。その場合は、フローチャートのようなものを作成。可愛らしいグリーンの色を当ててみました。
作成時、戻るボタンが無いとUIとしては不安である。決済金額は大きめで、内訳も無いとなぜこの決済金額なのかも分からないな、という気遣いを忘れずに。
入力を完了ボタンは、灰色にしておくことでまだ入力していない箇所があるから先へ進めないという視認性を重視しました。
そのほかは、ピンタレストや実際にこちらの課題に取り組んでいる方のデザインを参考に作成しています。
注釈ボタンクリック後のデザイン
注釈ボタンクリック後のデザインも考えました。セキュリティコードは、3桁だけではなく4桁のものも存在するため、3~4桁という表現にしています。×ボタンもつけて閉じることができるというUIを意識しました。
入力フォームタップ時は、枠が赤くなるという使用にして、自分は今どこを入力している最中なのかということが分かるようにしています。
入力が終了したら「完了」ボタンを押下できるUIへ
全てのボタンが入力できたら入力を完了ボタンが緑になりました。メインカラーは緑のデザインとなります。この先、入力間違いがあった際のUIも作成したかったのですが、今回の課題はそこまで求められていないので割愛しました。
始めてのUIデザイン
この度UI/UXデザイナーとしての就職が決まりました。そのため、今まではWEBデザイナーとしての活動だったわけですが、UI/UXとはいったいなんなのか、そしてFigmaも使いこなさなければならない。そこでどうしたものか、という課題に直面し、Daily UIという課題を出してくれるメルマガに出会うことが出来ました。アプリ画面のデザインはWEBデザインとはまた違う難しさがあるため、日々の勉強が大切となってきます。