アプリでmichillが
もっと便利に

無料ダウンロード
ログイン・会員登録すると好きな記事をお気に入り登録できます

【2026年最新】UIデザインの参考になるギャラリーサイト15選!UIデザインのトレンドも紹介

/

他のおすすめ記事を読む
自分らしく働くには?

目次

Web制作やモバイルアプリでUIデザインをする際、どのようなデザインにするか迷う方も多いのではないでしょうか。「ユーザーの利便性を高めるUIデザインが分からない」「イメージをうまく具現化できない」という方は、UIデザインの参考になるギャラリーサイトを利用するのがおすすめです。

この記事では、UIデザインの参考になるギャラリーサイト15選を紹介します。さらに、実際にUIデザインを作る際のポイントや最新トレンドをまとめましたので、ぜひチェックしてください。

UIデザインの参考になるギャラリーサイト10選!

UIデザインの参考になるギャラリーサイトを紹介します。まずはWebサイト制作からアプリまで、幅広いジャンルで活用できるギャラリーサイトをピックアップしました。

  • UI Pocket
  • Mobbin
  • Dribbble
  • Muzli Search
  • Behance
  • Collect UI
  • Web Design Clip
  • Pinterest
  • デザインのこと – Web design gallery
  • sps collection

それぞれの特徴や使い方などを解説するので、使いやすいギャラリーサイトを見つけて活用していきましょう。

1.UI Pocket

引用:UI Pocketより

UI Pocketは、国内外における優れたUIデザインのアプリケーションが集められているギャラリーサイトです。「ビジネス」や「仕事効率化」など、カテゴリ別にUIデザインのスクリーンショットがまとめられています。

ホーム画面や設定画面、操作画面などセクションごとのスクリーンショットが閲覧できるので、スマホアプリの動線からUIデザインまで細かくイメージしやすいのが特徴です。ダイアログやグラフ、テーブルなどアプリの機能や部品ごとに検索することも可能なので、実装したいデザインがあれば絞り込んで調べてみましょう。

2.Mobbin

引用:Mobbinより

Mobbinは、世界中の約30万以上のモバイルアプリのUIデザインを閲覧できるギャラリーサイトです。iOS・Android・Webアプリ別に、UIデザインがスクリーンショットで収集されています。

ホーム画面やログイン画面などセクションごとに確認できるので、参考にしたいUIデザインを検索しやすいのが魅力です。アプリのカテゴリやUI要素別の検索も可能なので、自分の知りたい情報にリーチできるでしょう。更新頻度も高いため、トレンドのUIデザインもキャッチアップできます。

3. Dribbble

引用:Dribbbleより

アメリカ発祥のDribbbleは、世界各国のデザイナーやクリエイターがデザインを投稿しているギャラリーサイトです。デザイナー・デザインエージェンシー向けのSNSで、招待を受けたデザイナーだけがデザインを公開できるので、高品質なサイトが集まっています。

Webサイトやダッシュボード、モバイルアプリなどのUIデザインが豊富に公開されており、世界トップクラスのデザインを閲覧できます。アカウントを作成しなくても作品を見れますが、アカウントを作成するとお気に入りのデザイナーをフォローしたり、作品をリストにまとめたりすることが可能です。

 4. Muzli Search

引用:Muzli Searchより

Muzli Searchでは、海外のハイクオリティなUIデザインを閲覧できます。ランディングページやアイコン、ロゴなどさまざまなキーワードで検索でき、自分のイメージ通りのUIデザインを検索できるのが魅力です。

加えて、Webやモバイルアプリといったフィルター別の検索も用意されているため、実装したいデザインを見つけやすいでしょう。カラーコードや色の名前でも検索ができるので、Webサイトやアプリのデザインを統一したい方にもおすすめ。気に入ったデザインを保存しておけば、いつでも簡単に閲覧できます。

 5. Behance

引用:Behanceより

Behanceは「Adobe」が運営する、クリエイター向けのSNSサービスです。UIデザインやWebデザインのほか、写真や3Dアート、建築、ファッションなどあらゆるジャンルのデザインが投稿されています。UI/UXに関してはPC用サイトやモバイルアプリのデザインを閲覧可能です。

Behanceは、各業種のクリエイターのポートフォリオとしても活用されているため、クオリティの高いデザインから刺激をもらいたいときに役立つでしょう。UIデザインの参考としてだけでなく、ポートフォリオの見せ方や最新トレンドを学ぶ場としても便利です。

 6. Collect UI

引用:Collect UIより

Collect UIは、WebサイトやモバイルアプリのUIデザインをカテゴリ別に閲覧できるギャラリーサイトです。サインアップや問い合わせ画面、検索画面などパーツ別にまとめられているため、参考にしたいデザインを探しやすいのが魅力。

選別されたデザインのみが掲載されているので、ハイレベルな作品を見られるのも特徴と言えます。サイトは毎日更新されており、収集しているデザインは14,000越えと非常に豊富なので、インプット量を増やしたい方にもおすすめです。

7. Web Design Clip

引用:Web Design Clipより

Web Design Clipは、優れたWebデザインを収集しているギャラリーサイトです。ほかのギャラリーサイトに比べて、日本国内のデザインが豊富に掲載されています。

ランディングページやスマートフォンといった目的別カテゴリのほかにも、ファッションやエンタメ、旅行などの業種カテゴリ別でも検索可能。さらに、メインカラーやレイアウト、WordpressやSTUDIOなど制作ソフトでも調べられるので、デザインの引き出しを増やしたいときにもおすすめです。

8. Pinterest

引用:Pinterestより

Pinterestは、ネット上で見つけた気に入ったデザインをコレクション・シェアできる写真共有型SNSです。レシピやインテリア、ファッションなどさまざまなジャンルのデザインが投稿されており、自分好みのデザインを探せます。

「ピン留め」機能を使えば、デザインを保存して後から確認することも可能なので、UIデザインをストックしたいときにも役立つでしょう。他のユーザーが保存している画像・動画も閲覧できるため、引き出しの幅を広げたいときにも便利です。

9. デザインのこと – Web design gallery

引用:デザインのこと – Web design galleryより

デザインのこと – Web design galleryは、レスポンシブ対応のWebデザインを集めたサイトです。PCとスマートフォン、それぞれの表示が並んで掲載されているため、デバイスごとにUIの違いを比較できます。

フィルター項目も豊富で、フリーワード検索機能も用意されているため、参考にしたいサイトをすぐに見つけられるのも魅力。「デザインをさっと見る」機能を使えば、ランディングページ全体を縦スクロールで確認できるので、サイト全体の構成を把握するのに便利です。

10. sps collection

引用:sps collectionより

sps collectionは、国内のスマートフォン用サイトのデザインを厳選して集めたギャラリーサイトです。デザイン性に優れたサイトが豊富に掲載されており、スマートフォンの限られた画面幅でいかに使いやすいUIを実現するか、そのヒントが詰まっています。

更新頻度が高いため、常に新しいアイデアをインプットできるのが魅力です。ブックマーク機能を活用すれば、お気に入りのデザインを保存して、後からじっくり見返すこともできます。

【モバイルアプリ】UIデザインの参考になるギャラリーサイト5選

続いて、モバイルアプリのUIデザインの参考になるギャラリーサイトを5つ紹介します。

  • Pttrns
  • Refero
  • lovely ui
  • scrnshts
  • Page Flows

それぞれ1つずつ見ていきましょう。

1. Pttrns

引用:Pttrnsより

Pttrnsは世界中のデザイナーが使用している、UIデザインのコミュニティサイトです。2012年ごろから最新のものまで、モバイルアプリのUIデザインをスクリーンショットで閲覧できます。

検索機能も充実しており、使用デバイスや配色などのカテゴリ別に検索可能です。Pttrnsを利用するには料金がかかりますが、3日間の無料トライアル期間があるので、気になる方は登録してみてはいかがでしょうか。

2. Refero

引用:Referoより

Referoは、モバイルアプリのデザインパターンを収集したライブラリです。12万以上のWebページとiOS関連のスクリーンを閲覧できます。チュートリアル画面、プロフィール設定、検索など機能ごとに整理されており、類似機能を持つ複数のアプリを比較できる点が特徴です。

すべてのデザインパターンを閲覧するには有料会員になる必要がありますが、3日間の無料トライアルが設けられているので試してみても良いでしょう。iOSのUIデザインを学びたい方に特におすすめです。

3. lovely ui

引用:lovely uiより

lovely uiは、iPhone・Android・iPadといったモバイルアプリのUIデザインを閲覧できるギャラリーサイトです。UIデザインをスクリーンショット形式で掲載しており、アプリのホーム画面のほか、検索、設定、通知などさまざまなページのUIデザインをタグで検索できます。

スマートフォンとタブレットの表示を比較できるので、デバイスごとにどんなUIデザインが良いのかを学ぶのにうってつけです。

4. scrnshts

引用:scrnshtsより

scrnshtsは、App Storeのスクリーンショット画面を閲覧できるキュレーションサイトです。Googleやdyson(ダイソン)など、数多くの有名企業が提供するアプリケーションの画像を、カテゴリーから閲覧できます。

UIデザインそのものの参考サイトではないですが、アプリのダウンロード数に直結するストア画像の構成や見せ方は、UIデザインでも生かせるでしょう。すべての機能が無料で使用できるので、手軽に使いやすいサイトといえます。

5. Page Flows

引用:Page Flowsより

Page Flowsは、モバイルアプリやWebサイトのユーザーフロー(画面遷移や操作の流れ)に特化したギャラリーサイトです。サインアップ画面やアカウント設定画面、クレジットカード追加画面などの各フローが、静止画および動画で掲載されています。

有名アプリも数多く掲載されているので、大手企業がどのようにUIデザインに取り組んでいるのかを学べるでしょう。音楽やファイナンスなどのジャンル別でも検索できるので、参考にしたいUIデザインを見つけやすいのも魅力です。

ギャラリーサイトを参考にUIデザインを作るポイント

ギャラリーサイトを参考にUIデザインを行う際は、下記3つのポイントを意識しましょう。

  • 最初に自分でデザインを作る
  • 魅力を感じたデザインを言語化して取り入れる
  • カテゴリや業種ごとに必要な要素を取り入れる

それぞれ詳しく解説します。

最初に自分でデザインを作る

ギャラリーサイトを閲覧する前に、まずは自分でUIデザインを作ってみることが大切です。最初からギャラリーサイトを参考にすると、閲覧したデザインに引っ張られてしまい、オリジナリティに欠けたUIデザインに仕上がる可能性があります。

実際に自分でデザインを制作したうえで「利便性を高めるにはどうしたら良いか」「統一感を出すには何が必要か」などを確認する材料として、ギャラリーサイトを参考にしてください。

魅力を感じたデザインを言語化して取り入れる

ギャラリーサイトで気に入ったUIデザインを見つけたら「なぜ良いと思ったのか」を言語化してみましょう。サイトのデザインをそのまま取り入れてしまうと、パクリとみなされる可能性が高いです。

そのため、魅力的なデザインの要素を書き出し、自分なりの表現で取り入れるのがおすすめ。UIデザインをよく確認してボタンの配置やカラーデザイン、ビジュアルなどで気づいた点をメモに残してみましょう。

カテゴリや業種ごとに必要な要素を取り入れる

実装したい機能や業種、ジャンルによっても、適したUIデザインは異なります。たとえばスマホアプリの場合はパソコンに比べて操作画面が小さいため、直感的に操作できるボタンや画像配置が求められるでしょう。

ギャラリーサイトを参考にしながら、ユーザーにとって使いやすいデザインを考えることが大切です。操作性やレイアウトといった多様な視点からUIデザインを磨いていきましょう。

トレンドを知ろう!今、流行りのUIデザインの特徴は?

UIデザインは時代の流行りに合わせて設計することで、ユーザーに選ばれるサービスを構築できるでしょう。ここでは、2026年におけるUIデザインの最新トレンドを3つご紹介します。

  • Bento UI
  • 「人間味」のある不完全さ
  • 「奥行き」を感じさせるデザイン

注目トレンドを取り入れて、ユーザーに支持されるUIデザインを設計してみてください。

Bento UI

Bento UIとは日本の幕の内弁当のように、情報を長方形のボックス(セル)に分割して整理するスタイルのことです。Appleの製品紹介ページなどでもよく活用されています。

四角形のパーツを組み合わせたような構成のため、情報が多くてもシンプルで整った印象を与えられるのが特徴です。また、画面サイズに合わせてセルの配置を変えやすいため、レスポンシブ対応しやすい点も、現代のUIデザインにおいて支持されている理由です。

「人間味」のある不完全さ

近年、生成AIを活用したデザイン生成が急速に普及し、誰でも高品質で整ったビジュアルを作れるようになりました。しかし、AIによる「整いすぎた美しさ」への反動として、最近ではあえて「手作り感」や「不完全さ」を残したデザインに注目が集まっています。

たとえば、手書き風のフォントやラフな線を使う、少しだけ軸をずらした画像配置にするなどです。UIデザインにこうした手作り感をプラスすることで、作り手の人間味やブランド独自の個性を伝えられます。

「奥行き」を感じさせるデザイン

画面越しでも、思わず「触れられそう」と感じてしまうような、リアルな質感や奥行きを活かしたデザインも注目されています。ゲームやVR世界のような3D表現が、Webデザインにも多く取り入れられ始めているのです。

Webサイトのスクロールの動きを例に挙げてみましょう。これまでは「上から下へ」進んでいくのが一般的でしたが、最近では指を動かすたびに画面の奥へ奥へと進んでいくような、奥行きのあるサイトを多く見かけるようになりました。このように、リアルで臨場感を与えるUIデザインはユーザーに新しい体験を提供できるため、近年注目されています。

ギャラリーサイトを参考に、UIデザインを設計してみよう

UIデザインの設計に迷ったら、ギャラリーサイトを閲覧してみるのがおすすめです。Webサイトやモバイルアプリなどさまざまなジャンルのデザインが掲載されているため、参考になるサイトが見つかるでしょう。ギャラリーサイトを活用する際は、自分がどこに魅力を感じたのかを言語化しながらデザイン設計してみてください。

もし「今よりデザインの引き出しを増やしたい」「UIデザインについて学びたい」と考えている方は、女性向けキャリアスクール・SHElikes(シーライクス)で学んでみませんか?

「UIデザインコース」では、UIデザインの基本知識を学ぶことができます。また、他にもUXデザインやIllustrator、Figmaなどデザインツールの使い方を学べるコースを含む全50以上の職種スキルが学び放題なため、デザイナーに必要な幅広いスキルを習得することが可能です。

無料体験レッスンも実施しているので、興味のある方はぜひ参加してみてください。


関連記事



この記事のライター

SHEshares

SHEsharesは、女性向けキャリアスクールSHElikesが運営する、自分らしいキャリアのヒントが見つかるライフスタイルメディアです。Webデザインやライティングなど、未経験からスキルを身につけ、理想の働き方を叶えた女性たちのインタビューを豊富に掲載。キャリアチェンジの成功談や仕事事例などを通じて、一歩踏み出したい女性の背中を押し、新しい生き方のきっかけを提案しています。

ありがとうを贈ると
ライターさんの励みになります

他のおすすめ記事を読む
自分らしく働くには?

トップへ戻る

キャリアの人気ランキング

新着

公式アカウント