こんにちは！アシスタントデザイナーのくぼです！
今回は誰でも簡単にフリマが体験できる「メルカリ」アプリを題材としてUIを分析します！
メルカリは、日本を拠点とするオンラインのフリマアプリです！ユーザーは自分の不要な商品や手作り品などを出品し、他のユーザーに販売することができ、また、買いたい商品を探して購入することも可能です。掘り出し物が見つかることもあるので、見ているだけでも楽しめるアプリですよ。
あくまで個人の分析で、これが正解ではありませんので参考の一つとして見ていただけると幸いです。
それでは分析をしていきましょう！
UIコンポーネント
タイポグラフィ
フォントはシステムフォントが使われています。
iOSでデフォルトで利用されるシステムフォントはSan Franciscoです。しかし、San Franciscoには日本語は含まれていませんのでひらがなや漢字の部分はHiragino Sansで表示します。
また、システムフォントにはHiragino Sansをやや小さく表示する調整が入っています。これはSan FranciscoのアルファベットとHiragino Sansひらがなや漢字が並んだときに同じくらいの大きさに見えるようにするための調整ですね。
カラー
テキストカラー
- 2色
- #666666：タイトル
- #333333：サブタイトル、本文、キャプションなど
テキストは2色を使い分けていました。一番大きなタイトルに#666666
プライマリーカラー：メルカリの赤
- #EB4848
- #D13E3E（お知らせで赤を使い分けている）
セカンダリーカラー：青
- #4192E7
- #4192E7：テキストボタン（テキストリンク）
プライマリーカラーはみなさんがメルカリといえばで連装する「赤」が使われています。使用されている用途としてはスワイプタブや、ボタン（購入手続きボタン、コメントボタンなど）など、アプリでの重要な部分に使われています。
テキストボタンは全て統一して青が使用されています。一貫したスタイルのため、押せるテキストボタンなのかどうかは一目瞭然です。
アイコン
メルカリアイコンは、Appleが提供しているSF Symbolsや、Googleが提供しているMaterial Symbolsのどちらでもありませんでした。
若干角丸のラインアイコンが使われていますね。
独自のアイコンは、そのブランドの世界観を表現することができる要素の一つです。
ボタン
メルカリはプライマリーカラーの赤でボタンが構成されています。「購入」や「申込」などの重要なアクションは塗りボタン、その他はラインボタンですね。
余白
余白はほとんどは8の倍数で設定されていました。
- 16px：ホーム画面の左右の余白、異なるコンテンツ間の余白
- 8px：同じコンテンツ内の異なる情報間
- 4px：商品ギャラリー間
メルカリは商品数が非常に多いため、余白は狭めで商品情報がたくさん並ぶ画面になっております。できる限り多くの商品を並べることで、ユーザーがより多くの商品と出会うことができます。
情報設計
スワイプタブ
扱うコンテンツの性質上、量が膨大であったり種類が豊富な場合にはスワイプタブが使われることが多いです。
スワイプタブが使われるほかアプリの具体例としては以下を挙げてみました。
- スマートニュース
- グノシー
- カラオケアプリ
- ツイッター
- ココナラ
- 楽天ルーム
- ユニクロ
これらが扱う要素を抽出してみると以下です。
- ニュース
- 曲
- 情報発信
- サービス
- 家具
- 服
量が膨大で、さまざまな種類に分けることができますね。こういった性質を持つ情報の場合はスワイプタブで情報を絞ることでユーザーが扱いやすくなります。
メルカリのスワイプタブは現在4つです。
- おすすめ
- いいねした商品や閲覧した商品からのおすすめ
- ショップ
- 個人の出品ではなくショップの商品
- タイムセールやクーポン発行中、最安値チャレンジ特集など
- ピックアップ
- 「おすすめの○○○20選」など、おすすめ商品をまとめてある記事に載っている商品を表示
- マイリスト
- 保存した条件検索や興味のある商品のピックアップ
メルカリは2020年にホーム画面をリニューアルしています。
その際の記事がこちらです。→https://mercan.mercari.com/articles/24001/
リニューアル前はホーム画面の利用率は10%以下で検索機能をメインに使っているため、見ていないというユーザーが多かったそうです。変更後は、ユーザーが理解しやすいラベル名へ変更されていたり、商品ギャラリー部分に「すべて見る」遷移が追加されているなど、今と見比べると情報設計の変化を学べてとても面白いです。
商品一覧
改めて分析してみるとメルカリは、商品が正方形で並んで表示されていますが、商品名が記載されていません。値段のみ表示されているのです。
これは、写真で表示されていることから商品名はあえて記載がなくてもわかるし、詳細が見たい場合はタップするだけで表示することができるためかと考えました。
出品者によっては、表示する商品写真に商品名を入れる工夫をしているものも多く見られました。
あえて商品名をカットしてスペースを省力し、より多くの商品を画面上に並べる設計はある種、思い切りのある設計なのではないかと思いました。こういった設計にはとても面白さを感じます。
最後に
メルカリは、2022年12月にアプリをリニューアルしています。
その際「お客さまの体験を何も変えないこと」を前提にデザインを進めたそうです。
多くのお客さまから「何か変わった気がするが、特に前のバージョンの操作と変わらない」というフィードバックを頂き、少し安心しました。
この一文、とても深いと思いました。既存サービスのリニューアルは、これまでのユーザーに違和感や不便を感じさせることのないよう慎重に進めなければなりません。ユーザーは既存のインターフェースの操作に慣れ親しんでいます。新しいデザインがそれらのパターンや操作方法を変更すると、ユーザーを戸惑わせてしまい、ユーザビリティや学習効率に影響を及ぼす可能性もあるのです。
メルカリの情報設計の工夫に多くの学びがありました！
最後までお読みいただきありがとうございました！
4
