💳Daily UI#002 | Credit Card Checkout

記事・サムネデザイン・ロゴデザイン ： MISA
文字数 ： 約5800字

はじめに

お久しぶりです、初めましての方は初めまして、
MISAです🪐
【Daily UI#002 | Credit Card Checkout】
ということで、今回もDaily UIで作成したデザインついて記していきますー

作成したデザインだけでなく、過程の詳細も書いてあるので、
Daily UIの進め方や、この人はこんな感じで作ったのか、という面で参考にしていただければ嬉しいですd(￣ ￣)

Daily UIとは

Daily UIとは（こちらから引用）

ひとことでお伝えするとUIデザインの100本ノックです。

「UIに関する100個のお題に対してUIデザインを作り、「#DailyUI」をつけてTwitterなどのSNSに投稿しよう！」というシンプルなチャレンジです。

https://liginc.co.jp/462859

前回のDaily UIはこちら↓

Daily UIをやるにあたって

まず前提として、PC版、SP版は両方とも用意する。
進め方は以下の通りに進める。

進め方

1. どのような場でどのような人が使うのかということを定義する

2. そもそもその機能(#001であればSign Up)ではどのような機能が使われているのかを調査する

3. 1と照らし合わせ、必要な機能などを考える

4. figmaでデザイン作成していく

5. このnoteでまとめを行う

ᕦ(ò_óˇ)ᕤやってみる

---

1.どのようなサービスでどのような人が使うのかということを定義する

まず、どのようなサービスでどのような人が使うのかを想定し、
明確に定義していこうと思います。
一つのサービスに対して100作成するということもできますが、
多くのテーマやジャンルに触れ、それに対して思考するきっかけになると思ったので、なるべく毎回別の定義ができるように努めることにしました。

・・・・・

テーマ

Credit Card Checkout、つまり、クレジットカードでの決済画面ですね。
前回に引き続き、このお題でもテーマは色々考えられますが、
「靴専門店のアプリケーション内のオンラインショップにおける決済画面」
にしようと思います。

ここからの検討としては以下のことをやっていきます。

想定ユーザー（年齢、性別、ライフスタイル。深掘りするならペルソナ）
UIポイント（ユーザーに対して、どう扱ってほしいのか）
情緒のポイント（ユーザーにどういう印象を与えたいか）

https://sinap.jp/blog/archive/2164

想定ユーザー

• 年齢など：

  • 年齢などの属性は問わない

• ライフスタイル：

  • ファッションに興味がある

  • スポーツに興味がある
    （スポーツをしているorしている人が身近にいる）

  • 忙しい
    （時間や場所の制限がある店頭で購入するという選択肢をとっていないことから）

  • 店頭に行きづらい
    例：靴ショップから離れた地域に住んでいる、事情によって行くことができないなど

  • 一度に大量に靴が必要
    例：家族や親族が多い、衣装で必要など

情緒のポイント

ユーザーにどういう印象を与えたいかという引用を元に、
このサービスを使用したときに想定ユーザーが感じる印象を考察する

• 想定ユーザー：年齢などの属性は問わない
  与えたい印象　→　年齢やジェンダーなどの属性、そしてカジュアルからフォーマル、スポーツまでシーンを問わない靴屋！

• 想定ユーザー：ファッション、スポーツに興味がある
  与えたい印象　→　洗練されたデザインで購入に至れる！

• 忙しい
  与えたい印象　→　手間なく購入できる！
  与えたい印象　→　深夜に自宅で購入などと、いつでもどこでも購入できる！

• 店頭に行きづらい
  与えたい印象　→　靴ショップに行かなくても不明点なく購入できる！
  （質問などをしなくても、ということ）

• 一度に大量に靴が必要
  与えたい印象　→　購入ミスしにくい！
  （靴を使用する日が決まっていたり、高額になったりするため）

UIポイント

「ユーザーに対して、どう扱ってほしいのか」という引用を元に、上記を踏まえて考えていく

• 年齢やジェンダーなどの属性、そしてカジュアルからフォーマル、スポーツまでシーンを問わない靴屋！
  →ジェンダーバイアスがかかった色合いや、子ども専用、ビジネス用などといったイメージがつかないようなデザインにする

• 洗練されたデザインで購入に至れる！
  →細部にポイントを入れる

• 手間なく購入できる！
  →可能な限り動きを減らしたい。
  →スムーズに決済完了にたどり着けるようにしたい。

• 靴ショップに行かなくても不明点なく購入できる！
  →不明な点があがりやすい部分にはサポートをつける

• 購入ミスしにくい！
  →ユーザーが、入力ミスで入力し直しなどという事態にならないようにしたい。

• 深夜に自宅で購入などと、いつでもどこでも購入できる！
  →この点に関しては、今回の決済画面で対応する範囲を超えているため、扱わないことに決定した。

配色について

• メインカラー：緑

• 健康や安全を意味する。そのため、足元から健康を促すという意味合いを込めた

• 緑は暖色でもなく寒色でもない。そのため、ジャンルやシーンにとらわれない展開をしていることを表す

• ジェンダーバイアスのないカラーである

---

2. そもそもその機能ではどのような機能が使われているのかを調査する

テーマなどが定義できたため、ここからはこのCredit Card Checkoutにおいてどのような機能が必要なのか、使われているのかを調査していく。
靴のオンラインストアや、そのほかのCredit Card Checkoutについて確認する。
大体の配置順で記述した。

調査結果　決済方法を選択するページ

• 商品確認

  • 商品名

  • 画像

  • 金額（送料込みの値段も）

  • 個数

• 「カート→配送先情報→お支払い方法→ご注文」などのフロー

• クレジットカード

  • カード１

  • カード２

  • 続く・・・

• その他

  • コンビニ決済

  • 代金引換

• ご確認ページへの進むボタン

• 配送先情報ページへの戻るボタン

調査結果　カード情報の追加ページに飛んだ先

• 利用可能なクレジットカードの種類を明示

• カード番号

• 有効期限

  • プルダウンで選択

• セキュリティコード

  • 入力サポート

• カード名義

• 支払い回数

• このカード情報を登録するかのチャックボックス

• 登録完了ボタン

その他

• 安全性を表すためのバッジやアイコンを配置する

コメント

商品やサービスに関わらず、必要なものやデザインは特に大差ない印象でした。
むしろ、それにユーザーは慣れているので、急に変えない方が良いと感じました。
上に記した通り、今回は、決済方法を選択するページと、カード情報を追加するページの2つを作成していこうと思います。

---

3. 1と照らし合わせ、必要な機能などを考える

ここまでをやってきて、今回作成するものに必要な機能を絞っていく。
今回は、以下の機能をつけることにした。

・・・・・・・・・・

つける機能

決済方法を選択するページ

• 商品確認

  • 商品名

  • 画像

  • 金額（送料込みの値段も）

  • 個数

• 「カート→配送先情報→お支払い方法→ご注文」などのフロー

• クレジットカード

  • カード１

  • カード２

  • 続く・・・

• その他

  • コンビニ決済

  • 代金引換

• ご確認ページへの進むボタン

• 配送先情報ページへの戻るボタン

・・・・・・・・・・

決済方法を選択するページ

• 利用可能なクレジットカードの種類を明示

• カード番号

• 有効期限

  • プルダウンで選択

• セキュリティコード

  • 入力サポート

• カード名義

• 支払い回数

• このカード情報を登録するかのチャックボックス

• 登録完了ボタン

・・・・・・・・・・

配色など

「決済画面は黒統一」などといった、配色における特異な決まりは見られなかった。

↓　なので
見やすさとアプリ全体の統一感を出すために
入力部などは白を基調に、アプリのメインカラーを使用する

4. figmaでデザイン作成していく

作成したものがこちらです-_-bｺﾁﾗ⇩

ワイヤーフレーム

ワイヤーフレーム：SP版

ワイヤーフレーム：PC版

完成デザイン

完成版：SP版

完成版：PC版

---

作成してのコメント

前回よりはスムーズに行えました( ・∇・)👍
さらに、工夫できたポイントも増やせたので、その点においては良かったなと感じています。
また、前回とは違い、配色も考えて設定できたため、
進歩したとはいえそうです◎
以下に意識したことを書いたのですが、めちゃくちゃ長いのでご注意ください、、(￣∇￣)

意識したこと（、作成して分かったこと、迷ったこと）など

• 全体の配色は、必ずWCAGのアクセシビリティ基準を下にして選択し、全体のイメージや統一感に加えて、認識のしやすさを第一に意識して決定している。
  ※商品画像やクレジットカードのブランドマークが表示される箇所の色は、仮で置いているため、アクセシビリティの意識はされていない。

• どの画面にいても、手続き中は常に金額が見えるように意識した
  →誤った購入を避けるためと、ユーザーの方に安心感を感じてもらうため
  参考：https://uxmilk.jp/74574

• 「新しいカードを登録する」の表示形式
  「新しいカードを登録する」という段階は、上部に示した5つのフローに入らないため、ページの遷移ではなく、下からポップアップする形をとった。
  →「お支払い方法」の段階からは移動していないということを認識させ、不安感を感じさせないようにした。下からのアニメーションとともに、元々の画面の明度が下がるようにし、タップできないということを示した。ただ、合計金額だけは常に表示されるようにした。

• フォントの意識
  →情報量が少なくないため、小さくして詰め込みたくなるが、視認性を意識し、サイズ、フォント、文字間隔、要素との余白を考えて配置した。

• フローの提示
  →フローがあることで、すでに何を入力したのかや、あと何が必要なのか、そしてこの決定ボタンが購入完了ボタンではないという認識などができ、ユーザーの安心に繋げることができると考えた。

• ボタンサイズの調整
  →Google社の「マテリアルデザイン」を参考にして調整した。スマホにおいては、基本的に指のタップを想定するため、誤タップなどが起こらないようなボタンサイズと余白を意識した。
  参考：https://www.asobou.co.jp/blog/web/mobile-tap-size
  　　：https://note.com/nadia10_100/n/n235a0e22767d

• シンプルなデザイン（UIポイントより）
  →スポーツやビジネス、子ども専用に見えないシンプルなデザイン

• グリッドの意識（UIポイントより）
  →様々な形の要素があるが、グリッドで綺麗に揃えることによって、洗練されたイメージを意識した

• カードの再指定（UIポイントより）
  →過去に登録したクレジットカードを再度指定できるようにし、可能な限り手間を減らした。

• 登録済みカード欄の機能（UIポイントより）
  →PC画面：スクロールする枠に入れることで、クレジットカード以外の選択肢で進めたい人にとっても使用しやすいようにした（スクロールする枠に入れないと、カードの数だけ他の選択肢が画面外にいってしまう）。→SP画面：画面全体をスクロールしたいのに、クレジットカードの選択箇所がスクロールされてしまうという事態を招きかねないため、スクロールする枠は使用しない判断に至った。

• セキュリティコード欄のヘルプ（UIポイントより）
  →このヘルプ内においても、フォントサイズなどが小さくならないように意識した。

• プレースホルダの使用（UIポイントより）
  →プレースホルダという、入力欄内の薄い文字を使用することにより、ユーザーがどのように入力すれば良いのかがイメージできるようにした

• カード番号における注意事項提示（UIポイントより）
  →「※ハイフン、スペースなし」という、カード番号入力において悩むポイントを先に簡潔に示した。

• 選択されている入力欄の動き
  →例として、カード番号の入力欄の枠が太くなっている。このことによって、色に頼らず伝えることができる。

• 選択されているクレジットカードの動き
  →こちらにおいても、右側にチェックマークが表示されるようにし、色に頼らず伝えられるようにした。

• メインではないボタンのデザイン
  →「お届け方法の入力へ戻る」というボタンは目立たせたくないため、最小限の装飾に留めた。ただ、読めるように文字の大きさはキープした。

ながーくなってしまいましたが、
ここまでを通して感じたことは、アクセシビリティについては常に意識しているのでおいておくと、「UIポイント」として最初に挙げていたことに加えて、「不安」「安心」という面が意識されていたということですね。
調査しつつ行っていたが、やはり決済画面はお金に関するため、一番求められているのは「安心して進められるか」であるということを、作成したことによって実感した。

---

サムネに一言

今回もサムネに対してコメントしていきますーー( ・∇・)
なんか前回、こんな感じ↓に書いていましたね、、、

Daily UIは全て統一デザインにするか、バラバラにするか迷ったのですが、
ブランディングの面や、スピードの面で言えば統一の方が良さそうですが、
100までやっているうちに絶対にデザインの質は上げられるし、
それなのに001の頃（今）のデザイン力で作ったものを使い続けるのはなあという想定（？）と、
純粋に毎回考えて作った方が力がつきそうなので、毎回変えることにしました( ´∀｀)ﾏｲﾆﾁ ｼﾞｬﾅｸﾅｯﾀｼ !!

前回のDaily UIにて

完全無視して、「前回と寄せて、統一感だそー」とか考えてました。
そして完成させてました。。。
あしらいは変えたり、今回はモックアップも載せてみましたが、
フォントとかは一緒です。。(￣ ￣)💦
今回は見逃しましょう、、、。
また次回どうするかは、、、、、考えときます-_-b

---

おわりに

今回は、【Daily UI#002 | Credit Card Checkout】ということで書いてきました。

いかがだったでしょうか(°▽°)
長いのにここまで読んでくださり、とても嬉しいです！(*´∇｀*)
何か参考になれば嬉しいです〜

今回も読んでくださり、ありがとうございました‼︎

---

P.S.

一月の追い込みに対するnote書けていないのにもう12日ですね。( ・∇・)
、、、、、頑張ります！！！！ᕦ(ò_óˇ)ᕤ

私も皆さんも素敵な日になりますように