デザイン鍛錬の日々1

はじめに

入社してからWeb職として働いてきたものの、独学で勉強してきた感じなので、（デザイン会社にいるわけでもないので）会社でもきちんと教育を受けてきたわけではないです。
そこで、このnoteに投稿することで、デザイン界隈に携わる皆様及びデザインを初めてみようと思う方々に、コメントなりフィードバックなりでご覧いただければと思います。

私がWebデザイン（UXについて学ぶ）に利用しているサービスはこちら。
毎日ラフ案を更新するコンテンツ「Daily Cocoda」に投稿するまでの過程をnoteで可視化していこうと思います。

Cocoda! - あなたがクリエイターでいられる場所

とりあえず、今日は30日目からやってみます。

デザインお題

上記画像は「Daily Cocoda」より抜粋。

1. デザイン案を検討する上での議論点

ポイント
・雑貨が欲しい
・気になったら買っちゃう→ビジュアルで惹きつけることが重要
・節約との両立→お得感をそれとなく出す

参考サイト：
・無印良品

使用ツール：
Adobe Xd

2. 骨格を決める

全体の色の雰囲気と、要素をどこに置くかをこんな感じで決めました。

上部に購入金額の合計（他消費税等）を配置することで、全体的にどれくらいお金をかけたのかをユーザーに知らせます。

そして各商品の詳細情報を掲載。（今回は3商品の設定）

そして最後に決済方法の確定及び選び直しのボタンですが、
確定ボタンの方が、選びなおすボタンよりも色を目立たせます。
ただし、ユーザーが誤って押してしまった場合も踏まえ、選び直すボタンも色は違えど同じボタンの大きさに設定しました。

3. 詳細情報をデザイン

諸々調整して、こんな感じにしました。

4. 反省点・議論点

一般的なECサイトのカートは、最終的な購入金額と、決済方法画面への遷移ボタンがまとまっている場合が多いと思います。
今回、私のこだわりとしてユーザーにもう一度間違えがないか確認してもらう手間も含め、最初に合計金額を提示し、詳細を確認してもらい、間違えがないなら決済方法のボタンを押すUXを提案しました。