見出し画像

デザイン未経験者がメルカリとラクマのUIトレース(ホーム画面)&UI比較をしてみた

目次
0. はじめに
1. メルカリとラクマのUIトレース
2. メルカリとラクマのUI比較
3. まとめ

0. はじめに

はじめまして、Ryo(@tw_ryo08)です。

5年目の大学に通いながら、HR領域の会社でプロダクトの開発ディレクターをやってます。

デザインのバックグラウンドは全くありませんが、UIやUXの設計をすることも多くデザインの勉強も兼ねてアプリやサービスのUIトレースや考察をやっていこうと思い、noteをスタートします!

きっかけになったのはココディーさんのnote
ココディーさん、ありがとうございました!


1. メルカリとラクマのUIトレースをしてみた

デザインのスキル向上だけでなく、プロダクトやサービスを見る目や設計する能力も養っていきたい(むしろこっちがメイン)のでUIトレースするだけでなく、類似したサービス(ラクマ)との比較もしてみました。

まずは、メルカリ(アプリ)のトップ画面UIトレース

続いて、ラクマ(アプリ)のトップ画面UIトレース

人生初めてのUIトレースで「同じフォントがないっ!」「アイコンってどうやって作るねん!」となりながら、どうにか形に。最初から完璧を求めて作ったら続かなそうだなと思い、フォントやらアイコンやら細かいところは今回は少し無視です。(細かいところも徐々にトレースできるようなるので、暖かく見守ってください...)

パッとみただけでも分かりますが、似ているようでヘッダーの使い方やカテゴリーの種類、ボトムナビゲーションの有無など色々な違いが見つけられます。


2. メルカリとラクマのUI比較

今回は、あくまでもアプリ全体の比較ではなくトップ画面のUIや情報設計の比較コンテンツです。(本当は実際に買ったり売ったりした上で比較したいのですが、売るものもないので実際に使用しての比較は別アプリ/サービスで!)

2-1. ヘッダー

それぞれのアプリのヘッダー要素を比較してみます。

【メルカリ】
メルカリのヘッダー要素は「ハンバーガーメニュー、 検索アイコン、あなたへのお知らせ、やることリスト」の4つ。

【ラクマ】
一方でラクマのヘッダー要素は「検索ボックス、絞り込みメニュー」の2つ。

【考察】
メルカリは、ラクマのようにボトムナビゲーションを設置していないので、ハンバーガメニュー内に色々な要素をつっこんでいますね。ラクマは、検索ボックスと絞り込みという機能を置いたり、ボトムタブにも「さがす」ボタンを置いて、メルカリよりも商品の検索性を重視しているように思えます。

ラクマがECサイトのように欲しい商品を指名検索して買うことを想定している一方で、メルカリは、検索ボックスでなく虫眼鏡のアイコンを置くなど商品の検索性を意図的に下げて、インスタを見るようにアプリを開いて何となくスクロールしていく中で商品に出会うような設計にしてるのかなと思いました。(実際、どうなんですかね。メリカリの方。)

2-2. カテゴリータブ

次は、カテゴリータブの比較。
横スクロールで商品のカテゴリーが変わる部分です。

【メルカリ】
全部で15種類のカテゴリーが設置されてました。
<新着、生配信、レディース、ベビー・キッズ、インテリア・雑貨、コスメ・美容、ハンドメイド、チケット、自動車・オートバイ、スポーツ・レジャー、家電・スマホ、エンタメ、メンズ、ストア、NOW>

【ラクマ】
ラクマは全部で12種類のカテゴリー
<新着、レディース、メンズ、コスメ/美容、エンタメ/ホビー、ハンドメイド、スマホ/家電/カメラ、キッズ/ベビー/マタニティ、インテリア/住まい/日用品、コメントした、フォロー、いいねした>

【考察】
生配信やNOWなどメルカリにしかない機能を除けば大きなカテゴリーの差はないように思いますが、メルカリには「自動車・オートバイ」や「スポーツ・レジャー」など男性が買いそうなカテゴリーがあるい一方で、ラクマにはありません。これは、ユーザー層の違いなのかな。実際のユーザー男女比はわかりませんが、ラクマはCMで女性を起用していることからも女性がメインのユーザー層な印象。

2-3. メインコンテンツ部分(商品の写真)

【メルカリ】
メルカリのトップ画面ファーストビューでは、出品されている商品の写真が4列目の12枚は値段も含めて完璧に見れる状態。5列目は、写真の頭がほんの少し見えるくらい。

「新しい商品」ボタンを押すと商品がリロードされます。ボタンを押すと一気に何枚もの写真がリロードされます。短時間に何度でもリロードできることを考えると、「新しい」というのは最新の出品ではないように思います。本当に最新の出品だとしたら、すごい人数のユーザーが絶え間なく出品してることになるけど本当にそうなのだろうか...

【ラクマ】
ラクマのファーストビュー見れる商品写真は3列目までの9枚。4行目の写真は3/4までくらい見える状態です。ラクマは、リロードしても商品が変わらないことがあるので、最新の出品がある場合だけ「新しい商品」ボタンが出てきます。

また、メルカリにはない部分として商品写真の右下にある♡マークで直接商品をお気に入りできます。

【考察】
メルカリは商品出品への導線をとても目立たせています。フリルにもボトムナビゲーションに出品はあるのですが、ボトムナビゲーションの要素の1つに収まってます。この設計はメルカリが商品を買うだけではなく、商品を売るという体験をとても重視しているということだと思います。

また、メルカリは商品の値段の下にグレーの透過背景を入れて値段の可読性を高めていますが、ラクマは背景色がないので写真によっては値段がとても見にくい。これはミニマムの改善になるのですぐにやるべきだなと個人的に思います。


3. まとめ

色々と比較してきましたが、個人的に大きな違いは2つあるなと思いました。

3-1. 商品との出会い方の設計
ヘッダー要素の比較でも言及しましたが、ラクマが大きな検索バーや絞り込みを置いていることからラクマは検索から商品と出会うという出会い方(利便性)を重視しているなと。

一方で、メルカリはわざと検索を目立たせないことで「検索→買う」という体験よりも「何となく見る→見つける→買う」という体験を重視しているように思います。

3-2. 出品という体験の捉え方
もう一つの違いは、出品導線の置き方。一目見れば分かるようにメルカリの出品導線はとても目立ちます。ラクマの出品導線は、ボトムナビゲーションの真ん中で目立つとは言い難い。この違いには買うというユーザー体験だけでなく、売るというユーザー体験をどれくらい重視しているのかという違いを感じました。

僕は、ボトムナビゲーションがあることで利便性はラクマの方が高いなと感じました。なので、ボトムナビゲーション真ん中にある「出品」アイコンをYahoo知恵袋アプリのボトムナビゲーション「質問する」アイコンみたいに目立たせて、利便性と出品導線の訴求2つを両立させる方法を試したい(ラクマの方どうでしょう)

最後までご覧いただきありがとうございました。次は、フードデリバリーアプリ or 漫画アプリのトレースと比較をする予定です:)

※今回のUIは4/15時点での比較になっています。すでにUIがアップデートされて写真や指摘と合わないこともあるかも知れません。

========================================================
Twitterでもプロダクトやデザインに関する発信を増やしていくのでよければ覗いてみてください。
@tw_ryo08

この記事が気に入ったらサポートをしてみませんか?