週1UIトレース メルカリ編

メルカリのアプリ(iOS版)のホーム・ライブページ・出品者ページ・マイページをトレースしました！全体的にはこんな感じ。

デザイン的に繰り返しているところが多いなと感じました。では詳しくみていきましょう！

詳しく見る

ホーム

ライブページ

出品者ページ

マイページ

使っている色

トレースをして思ったこと
●商品画像のサイズはほとんど120pxの正方形
●ライブページのアイコンがすごくカラフル
●文字サイズの幅は狭め

商品の画像サイズの話
商品画像のサイズとしては80px・120px・183pxの3サイズと言えますがその中でも完全に120pxの正方形が多いです。多分これが全体的にデザイン繰り返してる様に感じるコアな部分なのではないかと思いました。商品の写真もスマホで撮ったものから一眼で撮ったものだったり商品をより良く見せようとして背景までこだわってるものもあれば手軽な感じで撮ったものなど様々なものがホームなどに出てきます。でもよく見ると確かに差はあるけど写真のサイズが統一されることによってパッとみた時に統一感がうまれるなと思いました。

ライブページのアイコン
商品の魅力を文字だけでなく動画で紹介するサービスが増えつつあるなと思うところですがこういう場合の動画はYoutube等のような動画とは違う分類になるのではないかと考えます。Youtubeとかはミックスリストやおすすめに出てきた動画を見るということもしますが検索して探すことも多くあるはず。つまり最初から目的が決まっている場合がよくあると言えそうですが、メルカリをトレースして思ったことはライブ配信は検索して見るものではなく目に留まったものを見ることが多いのかなということ。そうなるとフラっとライブ配信ページを開いたユーザーにどうアイキャッチさせるかが重要になるのかなと。だからアイコンをカラフルにして何が多くの人にみられているものなのかや急上昇しているのかということを知らせているのかなと考えました。

文字サイズの幅は狭め
文字サイズは10〜15pxと狭めでした。でも、ライブ配信を導入し始めたりだったり出品する際の商品の写真の枚数が最大4枚から10枚に増量された背景があることを考えると一見百聞にしかずというように文字よりも写真や動画で実物を見せるのをウリにしているサービスなのかなと思ったのでそれらが引き立って見えるように文字は控えめなのかなと考えました。

まとめ

●デザイン的に繰り返すと統一感が生まれる
●アイキャッチは大事
●文字でイメージさせるより実物を見せる