アプリUIトレース：PayPay編
PayPayアプリのUIトレースをしてみました。
バーコードを見せたり、QRコードを読み取るだけで簡単にお支払いができるスマホ決済アプリ。
気づいたこと、個人的に学びになったことをまとめていこうと思います。
PayPayアプリは、2018年10月5日にローンチされました、QRコード決済アプリです。アプリ内の電子マネー「PayPay残高」に銀行口座やクレジットカードからお金をチャージして、お店で支払いができます。 友人間での送金、わりかん機能なども提供しています。
まだ使ったことのない方は、ぜひダウンロードして使ってみてください。
以下を参考にまずはトップページをfigmaでトレースして見ます。
🐬画面上の要素を配置
まずは画面上にあるブロック、要素の配置をざっくりと把握する為に、要素を下のように四角などで並べていきます。
🐬トレース完了
左：アプリのキャプチャ
右：トレース
1.余白について
・画面内で利用する余白は基本的に4の倍数のpx/dp
画面の端から要素の間
・入力フォームやアクションボタンがメインとなる画面の余白は24px
2.フォントについて
アプリ全体で使用している書体は以下の4種類でした。
・日本語：Hiragino Sans
・欧文：Graphik
・数字はGraphik
フォントサイズは、
・中見出し、アクションコンポーネント、補足情報は14 px / 16px / 18px / 20px
・ヘッダーやタイトルには9px / 10px / 11 px / 12px / 14px / 16px
・ユーザーアクションによる入力情報、記事、コンテンツの説明文などは12px / 14px / 16px
で記載されていました。
その他
・視認性/可読性を担保し、どんな人が見ても内容を理解できるようにレイアウトされている
・平仮名、カタカナ、漢字、れぞれでフォントが使い分けられている。
・バナーやアイコンなど角が丸く作られている。
・ボトムバーのアイコンは現在開いているページだけが赤色になる。
コンテンツを見るためにユーザーが下に画面をスクロールした場合、下記のように画面下のバーが消えるようなデザインになっており、ユーザーの邪魔にならないよう、工夫されている。
ユーザーが画面下までスクロールしていない→画面下に情報を掲載しても見られていない→大規模なキャンペーンを実施する際、ホーム画面下のバナーで宣伝しているのみで、ユーザーに情報を大きく宣伝できていない。
これらを解決するために、
画面をスクロールすると画面下のバーが消えるようになっており、画面下がより見やすくなっている。
ユーザーが下に画面をスクロールした場合、画面下のバーが消えるようなデザインになっており、ユーザーの邪魔にならないよう、工夫されていることは自分自身の知識として認識していなかったので、よい学びになりました。
こちらで一旦 完成としました。
後も気になるアプリなどあれば、トレースをし、学んだことの発信続けていきます！
今回も読んでいただき、ありがとうございました💐
この記事が気に入ったらサポートをしてみませんか？