おすすめのUIデザイン参考サイト10選
アプリのデザインをする際に、他サービスの設計を参考にしたり、競合アプリを調査したりといった作業は多くのデザイナーが日々行なっている作業だと思います。多くの場合は自身のデバイスにアプリをインストールして確認するものの、サブスクリプションや商品の購入など、実際に課金しないと確認できない画面があったり、スクリーンショットを撮って共有したいけど個人用のアカウント名が表示されてしまったりなど、意外と面倒なこの作業...
今回はこのような悩みを解決してくれるアプリデザインのキュレーションサイトを紹介します。日本のデザイナーが参考にしやすいように、国内アプリや動画で紹介しているデザインギャラリーを含めて、できるだけ多くのカテゴリーのアプリを網羅できるように人気のUIデザインギャラリーサイトを集めました。
1. Mobbin | 数多くのアプリのスクリーンショットをキュレーションPR
「Mobbin」は、モバイルアプリのUIデザインを、スクリーンショットとして紹介しているサイトです。それぞれのフローをスクリーンショットと一部操作可能なプロトタイプ、さらに一部のアプリについては動画で確認でき ることが大きな特徴。無料版では最新の8アプリ/Webサイトのみ閲覧可能。有料版は年間$96ですべてのスクリーンショットを閲覧することができるようになります。
2. アプリデザインギャラリー | 日本で人気の高いアプリを動画で紹介
「アプリデザインギャラリー」は、日本国内で人気のiOSアプリのデザインを180以上の動画で紹介しています。アプリ内の個別のフロー動画に目次がついており、デザインだけでなく特定の機能に関する操作感やインタラクション、アニメーションなどを確認することができるのが特徴です。
また、動画の特定の秒数を指定してページをシェアしたり、表示されているUIのスクリーンショットを保存することができ、デザインチーム内で参考にしたい特定の画面デザインや挙動を共有する際にも便利です。商品購入やサブスクリプション加入が必要な画面へのアクセスも含め、すべての機能を無料で利用することができます。
3. Page Flow | 海外アプリの動画UIギャラリー
「Page Flow」は、海外アプリのデザインを動画で紹介するUIデザインギャラリーです。画面遷移や情報の流れを視覚的に理解できるため、アプリ全体の設計を参考にするのに役立ちます。オンボーディングや検索など、ユーザ ーフロー別にカテゴリー分けされているので特定のフローの設計の参考デザインを探している時にも便利ですね。無料版では、一部のデザインのみ閲覧可能。年間$99の有料プランに加入することですべての参考動画を閲覧することができるようになります。
4. UI Pocket | 国内アプリのスクリーンショットが多数
「UI Pocket」は日本国内で人気のアプリがスクリーンショットと共に紹介されているデザインギャラリーサイトです。アカウントを作成することですべてのスクリーンショットにアクセスすることができるようになります。有料版では年間4,800円で広告なしでの利用、絞り込み検索やフォルダの作成、過去バージョンへのアクセスができるようになります。
5. UI Sources | 800以上の動画でアプリデザインを紹介
「UI Sources」は、800以上と多くのアプリデザインを動画として紹介しているUIデザインギャラリーサイトです。無料版でもすべての参考デザインを閲覧することはできるものの、機能やカテゴリーでの絞り込みをしたい場 合は年間$99の有料プランに加入する必要があります。
6. UX Archive | ユーザーアクション別にフローの比較が可能
「UX Archive」は、多くのモバイルアプリのスクリーンショットを「Booking（予約）」「Deleting（削除）」などのユーザーアクション別に一連のフローとして紹介しているサイトです。例えば、複数のアプリの検索フローを横断 的に一画面で確認できるなど、特定のフローの参考デザインを探している場合にとても役立ちます。すべての機能を無料で使うことができます。
7. UI Garage | iOSやAndroidなどプラットフォームでの絞り込みが可能
「UI Garage」は、iOSやAndroidなどプラットフォーム別に絞り込みができる形でモバイルアプリのスクリーンショットをキュレーションしているデザイン参考サイトです。すべての機能を無料で利用することができます。
8. Screenlane | UIコンポーネント名での絞り込みが可能
「Screenlane」は、数多くのアプリのスクリーンショットをアプリごとにまとめているUIデザインの参考サイトです。「カレンダー」や「フィルター」など、画面に含まれるUIコンポーネント名での絞り込みもできる点が特徴。無料版では、一部のデザインのみ閲覧可能。年間$99の有料プランに加入することですべての参考動画を閲覧することができるようになります。
9. Pttrns | Apple Watchアプリのスクリーンショットもキュレーション
「Pttrns」も多くのアプリのスクリーンショットを紹介しており、中にはApple Watchアプリのスクリーンショットもあります。無料プランはなく、3日間の無料トライアルを提供しています。年間$72の有料プランに加入することですべての参考動画を閲覧することができるようになります。
10. SCRNSHTS | アプリストアの画像をキュレーション
「SCRNSHTS」はApp Storeのスクリーンショット画像をキュレーションしているサイトで、数多くの有名アプリのストア画像事例をアプリのカテゴリー別に閲覧することができます。UIデザイン自体の参考サイトではないものの、ア プリのダウンロード数に大きな影響を与えるストア画像の制作時にはぜひとも参考にしたいサイトです。すべての機能が無料で提供されていますが、月€2でサービスの開発をサポートすることもできます。
アプリのUIデザインの際に欠かせない他アプリの設計チェック
モバイルアプリにおいて、UIデザインはユーザー体験を左右する重要な要素です。ユーザーにとって使いやすく魅力的なアプリを作ることを目指して、競合や似た設計のアプリを参考にしながらデザインを考えることも多いですよね。
そもそも、他のモバイルアプリのデザインを参考にする際のポイントはどのような点でしょうか？
人は新たなアプリを使う時に、自身がそれまでに体験した他のアプリでの操作経験をもとにした「直感」を使って操作します。これをデザイン業界の専門用語で「ヒューリスティック（経験則）」と呼びます。この経験則に基づいたユーザーの期待に応えるために重要となるのが、それぞれのプラットフォームのガイドラインに沿ってデザインすることであったり、他のアプリの設計を参考にすることなのです。
そのため、ユーザーが機能を理解できなか ったり、想定と異なる動作に戸惑ったりしないように、多くのアプリでの設計事例を参考にすることが重要になります。他のアプリの設計を把握した上で、ユーザーにとって新しい体験となるような独自機能の実装をする場合は分かりやすい説明やチュートリアルを入れるのも良さそうですね。
また、他のアプリを参考にすることで、インスピレーションが得られたり複雑な要件を解決する糸口が見つかったりします。ぜひ、今回紹介したアプリデザインギャラリーなどを活用してUIデザインに役立ててみてください。
unprintedでは、UIデザインに関する数多くのコンテンツを配信中
unprintedでは、「おすすめの高品質フリーアイコンセット」や「中国版インスタ『小紅書（RED）』とインスタの設計思想の違いは？」など他にも多くのUIデザインに関するコンテンツを発信しています。そちらも参考にしてみてください。
