UIトレースやってみた−メルカリ−

今までsketchの操作習得のためにUIトレースはやってみたりしていましたが、なかなかアウトプットすること、noteで公開するには内容がお粗末だよな・・・と思い、出せていなかったのですが、勇気を出して公開することにしました。

恥ずかしがっても上達しないので、とりあえずやってみた的な感じです。

ホーム画面全体

とにかく「分かりやすさ」を重視しているのが特徴かなと思います。「さわって覚える」ではなく、「パッとみてやるべきことがわかる」というか。

具体的には下記のようなパーツ。
・アイコン＋文字のメニューボタン
・ハンバーガーメニューやドロワーメニューは使用せず、ホーム画面で導線全てにアクセスできるようになっている
・検索バーに「なにをお探しですか？」のナビゲート
・「新しい商品」ボタンによる更新誘導

基本的な導線は全て「文字つき」。デザイン性を重視するなら文字なし、アイコンだけでいいと思いますが、タモリさんをCMで起用するなど「幅広い層に使ってもらうアプリ」に進化させようとしていると思うので、導線をとにかく分かりやすくしてるのかなと思いました。

また、このメルカリアプリにメルペイの機能もありますが、メルペイ機能はそこまでフォーカスされておらず、まず「売り買い」をさせることにフォーカスした設計なんじゃないかなと思いました。
ただ、QR支払いの場合、立ち上げてすぐ読み取れること、タップ数少なく支払いができることが大切なので、立ち上げてすぐ読み取るためのQRコードの導線がメルペイボタンとは別に設置されているのかと思います。

検索まわり

ナビゲーションバー内検索バーで特定の商品を探したいニーズに応えると同時に、ファーストビューで商品一覧を出すことで、検索によってなにが起こるのか？を理解させ流ことができているのでは？と思いました。
また、新しい商品ボタンによって、商品が続々と出品され続けていることを体感できるという効果もありそう。

商品一覧

商品一覧については、他のCtoC系アプリ系と異なり、文字がないことと一画面あたりの表示量が多い。加えて、最下部はあえて画像を半分だけ表示させ、スクロールを誘導してるように感じる。
これらによって「特定の商品を見つける」のではなく、「アプリ内でウィンドウショッピングする」という流し見体験に誘導されているのではないかなと思います。

色遣い

ホーム画面はとにかくシンプルでモノトーン調。
アクセントカラーは赤（#E3463D）だけど、ファーストビューで使用しているのは表示タブのハイライトのみ。タブバーのアイコンもモノトーンのみにしているので、「タブ遷移」と「商品」をまず注目させるつくりになっていそうです。

余白

商品一覧の余白は両サイド3px、商品と商品の間が3.5pxでした。
画面いっぱいに商品を表示しつつ、ごてごてし過ぎず商品ごとの識別がちゃんとできる間隔になってるなと感じます。
そのため両サイドより商品と商品の間の間隔の方がちょっとだけ大きい？
（けど0.5pxってめちゃめちゃ細かい・・・)

まとめ

今回トレースをしてみて、トレースそのものよりも考察・分析の奥深さに気付きました。やろうと思えばどこまでも仮説が出てくる。
ですが、アプリデザインの思想や慣習などが理解できていないので、これってあるあるデザイン？メルカリの特徴？などどんどん気になる部分が出てきました。
そして、noteに書いてみるとなると自分でなんとなく考察を書いていたときとは異なり、もうちょいちゃんと調べよう、とか考察がいつもより一歩深くなったのが、ここに書いてよかったなと思います。
次回からは、トレースを１アプリでまずやってみる＋同じ領域のアプリに絞って比較して考察、で学びを深めて行きたいと思いました！

おしまい