ノマドフリーランス歴3年、UI/UXデザイナー歴8年のkenです。久しぶりにブログ更新します。
今回はデザイナーであれば必須サービス、もはやこれなしではデザインワークにかかる時間が雲泥の差になってしまった「Mobbin」を紹介します。
Mobbinとは?
Mobbinは1,200以上、300,000画面分のアプリやウェブサイトのUIを閲覧・検索することができるギャラリーサイトです。
Mobbinを利用する前までは、いいなと思ったUIを片っ端からスクショして、PCに移してフォルダ管理してました。
何か他のアプリを参考にしたいと思った時、保存したスクショを1つ1つ確認して参考になりそうな部分を見つけたり、Appストアで同ジャンルのアプリをダウンロードして、新規登録して、一通りスクショ撮って、、と、とにかくデザインし始めるまでだいぶ時間がかかってました。
Mobbinに出会ってからは一発で参考になるデザインを探すことができるようになったし、何よりもリサーチ時間をだいぶ短縮させて、本質的なデザインワークにあてることができるようになりました。
誰におすすめ?
フリーランスやインハウスのUI/UXデザイナーはもちろん、例えば個人開発してるエンジニアにも参考になりそうなデザインを一発で探すことができて、より開発に時間をあてることができるのでおすすめです。
ここからは効率良いMobbinの使い方を紹介します。
Mobbinの効率良い使い方
冒頭で書いたように、現時点(2024年11月)で300,000以上の画面があって、毎週2~3アプリ/ウェブサイト分の画面がアップデートされています。
そんな中で自分が参考にしたい画面を効率よく絞り込むための方法がいくつかあるので紹介します。
下記アプリベースで紹介しますが、ウェブサイトの絞り込みも基本的には一緒です。
絞り込み方①:同ジャンルのアプリUIで絞り込む
まずは「ショッピング」「ニュース」「SNS」などジャンルで絞り込むことができます。
例えばフードデリバリーアプリのデザインを作りたい時、「飲食(Food & Drink)」で絞ると46のアプリがヒットします。
Uber Eats、Grabなどメジャーなアプリだけでなく、Meituan Takeaway(中国)、Rappi(中南米)など地域限定のアプリも最近増えています。
「トレンド」や「人気順」でソートすることもできます。
絞り込み方②:スクリーン種類で絞り込む
次に、アプリのジャンルを跨いで「サインアップ」「マイページ」「検索」「チェックアウト」など、スクリーン別に絞ることができます。
例えばアプリ起動直後に流れる「ウォークスルー」のデザインを作りたい時、「Walk through」で絞り込むと1289画面ヒットしました。
絞り込み方③:UI要素で絞り込む
スクリーン単位よりもさらに絞り込みたい時、例えば「ボタン」「カード」「タブ」などのUI要素や、「アイコン」「イラスト」といった画面内の要素でジャンルやスクリーン種類を跨いで絞り込むことができます。
「今このUI要素を含むデザイン作ってみたけど、もっと使いやすくしたいなー」って時に、そのUI要素で絞り込んで他のアプリではどうデザインされてるか見る時に便利です。
絞り込み方④:画面内のテキストで絞り込む
最後にこちらは最近追加された機能ですが、OCR技術を使って特定のテキストを含む画面で絞り込むこともできます。
UI要素まではいかないけど他のアプリでも良く見る機能、などに使うことができます。例えば、「Face ID」でテキスト絞り込みをすると、「Use Face ID」「Set up Face ID」などスクリーンやUI要素に限らず、Face IDについて言及してる画面で絞り込むことができて便利です。
①〜④を組み合わせて絞り込む
Mobbinの真骨頂はここから!これまで複数の絞り込みの方法について紹介しましたが、これらを組み合わせてさらに絞り込むことができます。
例えば、「飲食アプリのウォークスルーでイラストを使ってサインインの導線もある」みたいな画面を探したい時、
- ジャンル:「Food & Drink」
- スクリーン:「Walk through」
- UI要素:「Illustration」
- テキスト:「sign in」
みたいな組み合わせで絞り込むこともできます。
ここまでガチガチに絞り込んじゃうとヒット数が少なくなっちゃうのであれですが、例えばジャンル+表示されてるテキスト、みたいな組み合わせは実務でも良く使っています。
Mobbinの良いところ
続いてMobbinの良いところをいくつかピックアップしていきます。
Mobbinの良いところ①:アップデート頻度が多い
UI画面ってなんだかんだ古くなりがちで、数年前にスクショ撮ってたUIが今となっても時代遅れ…みたいなケースも多々あります。
Mobbinの良いところは同じアプリでも定期的に画面がアップデートされていること。
例えばこのUberのUIは2018年から今年まで、毎年アップデート(計7バージョン)されています。
逆に、もし古いUIを確認したいということがあった場合、最新のアプリだと見ることができない過去のUIを確認することもできます。
以前のバージョンと新しいバージョンで見比べて、どこをどう変えたか見るのも勉強になります。
最近はコミュニティ機能も追加されて、公式が追加するスクリーンだけでなく自分でアップロードしてコレクションを作ることもできるようになりました。
Mobbinの良いところ②:フロー全体を確認できる
こちらはよりUXデザイナー寄りの視点ですが、導線含めた全体のUXを確認したい時に便利なのが「フロー」の確認です。
画面をそれぞれ横並びにして確認するだけでなく「プロトタイプ」で見ると、ボタン等タップできる箇所にホットスポットが設定されてるので、アプリをダウンロードして登録せずとも本物さながらのフローを確認することができます。
さらに、フロー全体をFigmaに移して使いたいという人には「Mobbin to Figma」というプラグインが便利です。画面を1つ1つコピーしなくても、一発でフロー全体をコピペすることができます。
Mobbinの良いところ③:最新のデザイントレンドを知ることができる
海外で人気のアプリなど、Mobbinを開くだけでなかなか日常生活では知ることのないアプリを知るきっかけになります。
アプリだけでなくウェブサイトも含めて、常に最新のデザイントレンドに触れることができます。
Mobbinの良いところ④:UIデザインの勉強になる
こちらはよりUIデザイナー寄りの視点ですが、普段iPhoneユーザーだとなかなかAndroidのデザインまでチェックできてないという人も多いのではないでしょうか?(逆も然り)MobbinにはiOSデザインとAndroidデザインがそれぞれアップされているので、その違いを見るだけで勉強になります。
また、絞り込む時に使う各UI要素の名前を見るだけでも勉強になると思います。
料金について
無料で使うこともできます。が、無料プランだと閲覧や検索できるアプリ/画面数に限りがあります。
$10/月でプロプランにアップグレードすることで全てのアプリ/画面にアクセスすることができます。もしチームメンバーとコレクションを共有したりしたい場合は$12/月のチームプランもあります。
正直、自分で参考アプリやウェブサイトを1から探して登録してスクショ撮って…の時代を思い返すと、それに費やしてた時間換算したとしても、月$10は全然安い出費だと個人的には思います。
まずは無料プランでどんなものか使ってみて、もし日常生活に使いそうだと思えばぜひ有料アップグレードを検討してみてください。
今後のMobbinに期待すること
最後に今後のMobbinに期待することは、やっぱり日本語UIのアプリも増やしてほしいということです。現状は欧米のアプリがメインで、中国や韓国のアプリも少しずつ増えてはいますが、日本語アプリは2024年11月時点でまだ追加されてない現状です。ただ英語圏以外のアプリも増えてる昨今を見ると、日本製アプリのUI追加も近い気がします。
Mobbin以外にもアプリUIをたくさん集めてるライブラリサービスは他にもありますが、結論参考にする上で一番画面数=選択肢が多いサービスを使いたいのが当然で、他のどのサービスよりもMobbinが画面数もユーザー数も一番多いのが現実です。
以上です。この記事が少しでも参考になったらぜひ投げ銭代わりに↑のリンクからポチってください。僕に少しだけキャッシュバックが発生します🙌
最後まで読んでいただきありがとうございました。
コメント