見出し画像

Daily Cocoda! 2周目に取り組んでみた 025

現在、UX/UIデザイナーとして就職を目指している仲田 光佑です!

今日もDaily Cocoda!のお題に取り組んでいきたいと思います。

今日のお題はリワードモーダルです。

025 リワードモーダル

まずはお題の確認をしていきたいと思います!

コンセプト
アプリ一つで完結する決済アプリ
シーン
はじめてのお買い物が完了した時のモーダル
雰囲気
これから買い物が楽しくなるような雰囲気
参考アプリ
PayPay
メルペイ
LINE Pay

今回はメルペイのリワードモーダル画面をトレースし、リデザインしたものを公開していきたいと思います。

メルペイのリワードモーダル画面のトレースと分析

メルペイはフリマアプリのメルカリ内で利用できる決済サービスです。メルカリで商品を売った利益や銀行口座を登録すれば、コンビニや飲食店で支払いをすることができます。

そんなメルペイのをリワードモーダル画面をトレースしたものがこちらです。

メルペイ trace@3x

スクリーンショット 2020-04-20 17.56.51

※このトレースは2020年5月時点のものです。
※バーコード画面のトレースは時間短縮のため、省略しました。

画面構成自体は至ってシンプルで、支払いに関する情報とボタンが設置されています。この画面で重要な「支払い金額」は最も視界に入りやすい画面中央に配置されています。

メルペイのリワードモーダル画面で印象的だったのが、トレースでは再現できませんが、メルペイで支払いを完了すると、メルペイのロゴがアニメーションで現れます。

シンプルで理解しやすい画面構成とかわいらしいアニメーション

この2つがメルペイのリワードモーダル画面で抱いた感想です。

競合のリワードモーダル画面

競合の調査として、今回はLINE Payのリワードモーダルをスクショしました。本来はPayPayも調査したいところでしたが、連携できる講座がなく、今回は省略しました。

025 競合 スクショ@3x

※LINE Payもバーコード画面は省略しました。
※LINE Payのリワードモーダル画面はマスクをかけて設置しました。

LINE Payもメルペイとの違いはロゴの有無です。メルペイはカードの上部にロゴがあるので、カードは大きく作られていますが、LINE Payのリワードモーダル画面にはロゴがありません。そのため、LINE Payのカードはメルペイよりも小さくなっています。

ただ、どちらのサービスも画面情報と構成自体はほぼ同じで、ボタンを押せばすぐに次の画面に移行できるように工夫されています。

メルペイリワードモーダル画面のトレースと分析を終え、ターゲットに合わせたリデザインの方向性を決めました。

・ロゴの扱いをどうするか
・丸みを持たせたデザイン

この2点を意識してリデザインを行いました。

メルペイのリワードモーダルのリデザイン

完成したリデザインがこちらです。

画像4

※あまり変わってない...

比較したものがこちらです。

メルペイ 比較@3x

※こうしてみると少しは変わったかな...

ロゴの扱いをどうするか
再現することはできませんが、メルペイのロゴはアニメーションで表示されます。ロゴのアニメーションはメルペイの特徴なので、そのまま残しました。お題では「はじめてのお買い物が完了した時のモーダル」というシーンで「これから買い物が楽しくなるような雰囲気」という指定がありました。ですが、このアニメーションで表すことができているのと感じたのでロゴ部分に変更は加えませんでした。

丸みを持たせたデザイン
リデザインではカード部分に丸みを持たせ、大きさも少し小さくしました。理由は最近、メルペイのUIが変更されたからです。

メルペイ スマート払い@3x

※前のメルペイのUIがあれば、伝わりやすかった...

上記のスクショからわかるようにメルペイのオブジェクトの多くはは丸みを持ったものになっています。しかし、モーダル画面においては角丸は4pxしかなく、そこまで丸みがあったカードではありませんでした。リデザインではUIに統一感を持たせるためにモーダルのカードとボタンに丸みを持たせました。

おわりに

次回は026 ランキング画面のトレースとリデザインをこのnoteに書いていければと思います!

noteを読んでいただき、ありがとうございます!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
4
Cocoda!のポートフォリオ→https://cocoda-design.com/KN619
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。