Web制作やモバイルアプリでUIデザインをする際、どのようなデザインにするか迷う方も多いのではないでしょうか。「ユーザーの利便性を高めるUIデザインが分からない」「イメージをうまく具現化できない」という方は、UIデザインの参考になるギャラリーサイトを利用するのがおすすめです。
この記事では、UIデザインの参考になるギャラリーサイト15選のほか、UIデザインの最新トレンドや学習方法などをご紹介します。数あるWebサイトやモバイルアプリと差別化を図るためにも、ぜひチェックしてみてください。
UIデザインの参考になるギャラリーサイト10選！
UIデザインの参考になるギャラリーサイトを紹介します。まずはWebサイト制作からアプリまで、幅広いジャンルで活用できるギャラリーサイトをピックアップしました。
- UI Pocket
- Mobbin
- UI Garage
- Dribbble
- Muzil
- UX Archive
- Behance
- Collevt UI
- Web Design Clip
それぞれの特徴や使い方などを解説するので、使いやすいギャラリーサイトを見つけて活用していきましょう。
UI Pocket
UI Pocketは、国内外におけるスマホアプリのUIデザインが集められているギャラリーサイトです。ビジネスやメディカルなど業種別にUIデザインのスクリーンショットがまとめられています。
各スクリーンショットは、ホーム画面や設定画面、操作画面などセクションごとに閲覧できるので、スマホアプリの動線からUIデザインまで細かくイメージしやすいのが特徴です。ダイアログやグラフ、テーブルなど機能ごとに検索することも可能なので、実装したいデザインがあれば絞り込んで調べてみましょう。
Mobbin
Mobbinは、世界中の約30万以上のモバイルアプリのUIデザインを閲覧できるギャラリーサイトです。iOS・Android・Webのアプリ別に、UIデザインがスクリーンショットで収集されています。
ホーム画面やログイン画面などセクションごとに確認できるので、参考にしたいUIデザインを検索しやすいのが魅力です。アプリのカテゴリやUI要素別の検索も可能なので、リサーチにしやすいでしょう。更新頻度も高いため、トレンドのUIデザインを把握できるのもポイントです。
UI Garage
UI Garageは、Webやモバイル、タブレットにおけるUIデザインパターンを検索できるギャラリーサイトです。アプリはiOS・Web・Android別に検索できるほか、カレンダーやホームページ、オンボーディングなどカテゴリごとに閲覧できます。
古い順・新しい順に調べることもできるので、最新トレンドを把握しやすいのも特徴です。UIデザインのツールやテンプレート、お役立ち記事なども提供しているので、UIデザインを学びたいと考えている方はぜひ一度チェックしてみてください。
Dribbble
アメリカ発祥のDribbbleは、世界各国のデザイナーやクリエイターがデザインを投稿しているギャラリーサイトです。デザイナー・デザインエージェンシー向けのSNSとして知られており、招待を受けたデザイナーしかデザインを公開できません。
Webサイトやダッシュボード、モバイルアプリなどのUIデザインが豊富に公開されており、世界トップクラスのデザインを見ることができます。閲覧だけなら無料で利用できるのでUIデザインを学んだり、他のデザイナーと交流したりしたい場合にも役立つでしょう。
Muzil
Muzilでは、海外のハイクオリティなUIデザインを閲覧できます。ランディングページやアイコン、ロゴなどさまざまなキーワードで検索でき、自分のイメージ通りのUIデザインを検索しやすいのが魅力です。
Webやモバイルアプリといったフィルター別の検索も可能なので、実装したいデザインに合わせて確認してみましょう。Webサイトやアプリのデザインを統一したい方は、ピンクやオレンジなどの色別に検索してみるのもおすすめです。気に入ったデザインを保存しておけば、いつでも簡単に閲覧できます。
UX Archive
UX Archiveは、モバイルアプリの操作手順ごとにUIデザインが並べられているギャラリーサイトです。予約やログイン、オンボーディング、注文といったフローごとにデザインを確認できるので、アプリの動線を考えたいときに役立つでしょう。
最新バージョンはもちろん、古いバージョンのデザインも閲覧でき、アップデートで変化したポイントを確認できるのも特徴です。「Spotify」や「Instagram」「Google マップ」をはじめとする181のアプリデザインが集められているので、アイディアに行き詰まったときはぜひチェックしてみてください。
Behance
Behanceは、アメリカのソフトウェア企業「Adobe」が運営するクリエイター向けのSNSサービスです。UIデザインやWebデザインのほか、写真や3Dアート、建築、ファッションなどあらゆるジャンルのデザインが投稿されています。UI/UXに関してはPC用サイトやモバイルアプリのデザインを閲覧できます。
Behanceは、各業種のクリエイターのポートフォリオとしても活用されているため、クオリティの高いデザインから刺激をもらえるのが特徴です。UIデザインの参考としてだけでなく、ポートフォリオの見せ方や最新トレンドを学ぶ場としても便利でしょう。
クリエイターと交流したり、自分のデザインを投稿してフィードバックを受けたりという使い方も可能なので、UIデザイナーを目指している方にもおすすめです。
Collect UI
Collect UIは、WebサイトやモバイルアプリのUIデザインをカテゴリ別に閲覧できるギャラリーサイトです。サインアップや問い合わせ画面、検索画面などパーツ別にまとめられているので、参考にしたいデザインを探しやすいですよ。
Dribbbleから選別されたデザインのみが掲載されているので、ハイレベルなUIデザインを見られるのも特徴と言えます。収集しているデザインは14,000越えと非常に豊富なので、インプット量を増やしたい方にもおすすめです。
Web Design Clip
Web Design Clipは、Webサイト制作の参考になる優れたWebデザインを収集しているギャラリーサイトです。ランディングページやスマートフォンといった目的別のほか、ファッションやエンタメ、旅行などの業種カテゴリ別に検索できます。
メインカラーやレイアウトを指定して調べることも可能なので、参考にしたいデザインを見つけやすいでしょう。
ほかのギャラリーサイトに比べて、日本国内のデザインが豊富に掲載されているのも特徴です。2024年1月時点で5,040サイトが登録されており、登録数も増加傾向にあるので、最新トレンドを調べたいときにも便利でしょう。
Pinterestは、ネット上で見つけた気に入ったデザインをコレクション・シェアできる写真共有型SNSです。レシピやインテリア、ファッションなどさまざまなジャンルのデザインが投稿されており、自分好みのデザインを探すことができます。
「ピン留め」機能を使えば、デザインを保存して後から確認することも可能なので、UIデザインのストックをしたいときにも役立つでしょう。他のユーザーが保存している画像・動画も閲覧できるため、普段とは違うインスピレーションを受けたいときにも便利です。
モバイルアプリのUIデザインの参考になるギャラリーサイト5選
つづいて、モバイルアプリのUIデザインの参考になるギャラリーサイトを5選ご紹介します。
- Pttrns
- UI Sources
- lovely ui
- AGT smartphone design gallery
- Screenlane
モバイルアプリのUIデザインを行う際は、タブレットやスマートフォンでの操作を想定した設計にすることがポイントです。
「ボタンの位置はどこにあるか」「各画面で必要な情報を盛り込めているか」などをギャラリーサイトで参考にしておくと、UIデザインの設計もスムーズになるでしょう。
Pttrns
Pttrnsは、40,000人を超えるデザイナーが使用しているUIデザインのコミュニティサイトです。2012年ごろから最新のデザインまで、モバイルアプリのUIデザインをスクリーンショットで閲覧できます。
検索機能も充実しており、使用デバイスや配色などのカテゴリ別に検索可能です。UIパターンも多数掲載されているので、画面設計を考えるときにも役立つでしょう。
Pttrnsを利用するには料金がかかり、3つの料金プランに分かれています。3日間の無料トライアル期間があるので、気になる方はまず登録してみるのがおすすめです。
UI Sources
UI Sourcesでは、海外のスマホアプリを中心としたUIデザインがまとめられています。2,400以上のスクリーンショットは操作フローごとに分類されており、参考にしたいUIデザインを探しやすいのが魅力です。
UI Sourcesの最大のポイントは、各UIデザイン別のユーザーのインタラクションを動画で確認できること。操作中の画面遷移もチェックできるので、UIだけでなくUXデザインの参考としてもおすすめのサイトです。
lovely ui
lovely uiは、iPhone・Android・iPadといったモバイルアプリのUIデザインを閲覧できるギャラリーサイトです。アプリのホーム画面のほか、検索画面、設定画面、通知画面などさまざまなページのUIデザインをタグで検索できます。
UIデザインのトレンドもタグで確認できるので、時代の流行を把握したいときにも便利です。
AGT smartphone design gallery
株式会社ヒカリナが運営するAGT smartphone design galleryは、スマートフォン・iPhone向けのUIデザインに特化したギャラリーサイトです。スマートフォンサイトのUI改善や制作、ユーザーリサーチ業務で見つけた、良質なモバイルアプリのサイトのみが掲載されています。
ビジネスやキャンペーン、ファッションなど業種やジャンル別に検索でき、閲覧したいUIデザインをすぐに見つけられるのが魅力です。カラー別のタグ検索も可能なので、UIデザインの配色を決めるときにも参考になるでしょう。
Screenlane
Screenlaneは、モバイルアプリのUIデザインをピンポイントで探せるギャラリーサイトです。スクリーンショットは、サインアップ画面やアカウント設定画面、クレジットカード追加画面といったフローごとに細かく分類されています。
カレンダーやプロモーションといった機能のほか、音楽やファイナンスなどのジャンル別でも検索可能なので、参考にしたいUIデザインを見つけやすいでしょう。気に入ったUIデザインはPinterestで保存できるので、組み合わせて利用するのもおすすめです。
ギャラリーサイトを参考にUIデザインを行う際のポイント
ギャラリーサイトを参考にUIデザインを行う際は、下記3つのポイントに留意すると良いでしょう。
- 最初に自分でデザインをしてみる
- 生かしたデザインを言語化して取り入れる
- カテゴリや業種ごとに必要な要素を取り入れる
単純にギャラリーサイトでUIデザインを閲覧するだけでなく、まずは自分でトレースしてみることが大切です。それぞれ詳しく解説します。
最初に自分でデザインをしてみる
ギャラリーサイトを閲覧する前に、まずは自分でUIデザインをしてみることが大切です。最初からギャラリーサイトを参考にすると、閲覧したデザインに引っ張られてしまい、オリジナリティに欠けるデザインになる恐れがあります。
実際に自分でデザインを制作したうえで「利便性を高めるにはどうしたら良いか」「統一性を持たせられるデザインはどれか」などを確認する際の材料として、ギャラリーサイトを参考にしてください。
生かしたデザインを言語化して取り入れる
ギャラリーサイトで気に入ったUIデザインを見つけたら「なぜ良いと思ったのか」を言語化してみましょう。UIデザインをよく確認し、ボタンの配置やカラーデザイン、ビジュアルなどで気づいた点をメモに残してみるのがおすすめです。
単純に魅力的なデザインを模倣するのではなく「使いやすいと感じたポイント」「見やすいと感じたポイント」などを明確にしておくと、自分でUIデザインを行う際に実践しやすくなります。
カテゴリや業種ごとに必要な要素を取り入れる
実装したい機能や業種、ジャンルによっても、適したUIデザインは異なります。たとえばスマホアプリの場合はパソコンに比べて操作画面が小さいため、直感的に操作できるボタンや画像配置が求められるでしょう。
ギャラリーサイトを参考にしながら、ユーザーにとって使いやすいデザインを考えることが大切です。操作性やレイアウトといった多様な視点からUIデザインを磨いていきましょう。
トレンドを取り入れよう！今、流行りのUIデザインの特徴は？
UIデザインは、ユーザーニーズに合わせて常にアップデートすることが大切です。時代の流行りに合わせてデザインを設計することで、ユーザーに選ばれるサービスを構築できるでしょう。
ここでは、2023年・2024年におけるUIデザインの最新トレンドを3つご紹介します。
- 生成AIを取り入れたデザイン
- 大胆なフォント・画像使い
- 立体的な3Dビジュアル
注目トレンドを取り入れて、ユーザーに指示されるUIデザインを設計してみましょう。
生成AIを取り入れたデザイン
近年では、生成AIをUIデザイン設計のプロセスに取り入れる動きがトレンドになっています。たとえば、デザインのアイデア出しやフォント・カラーパレットの自動生成を行うAIなどが登場しており、UIデザイン設計の効率化に役立てることが可能です。
生成AIサービスは年々増加傾向にあるので「AIをどのようにデザイン設計に活用するか」「AIを利用して最適なユーザー体験を提供できるか」など、AIの役割を考え続ける必要があるでしょう。
大胆なフォント・画像使い
文字や画像を「大きく」「太く」「大胆に」使用するのも、近年のUIデザインのトレンドです。タイプグラフィーを強調することで、ユーザーの印象に残りやすいデザインにできます。たとえば、個性的なフォントを使用したり、見出しの文字をあえて大きくしたりする方法が効果的です。
なかには「手書き風の文字や画像文字をあえて使用する」「大きく配置した文字と共にアニメーション加工をする」のように、オリジナリティあふれるデザインで差別化を図るケースも。ユーザーの興味を惹くために、さまざまなフォントやカラー、スタイルを組み合わせることが求められるでしょう。
立体的な3Dビジュアル
2022年ごろからトレンドとなっている3Dイラストにも、引き続き注目が集まっています。先進的で立体的な3Dビジュアルは、ブランドイメージの世界観や臨場感を伝えやすいのが特徴です。
2023年以降は3Dイラストとポップなキャラクター・カラーの組み合わせがトレンドとされているため、うまく調和させられるデザインを考案してみると良いでしょう。刺激的な印象を与えたい場合は、2Dと3Dを融合させたデザインもおすすめです。
UIデザインを学ぶ方法
未経験からUIデザイナーになりたいと考えている方の中には、どのように学習を進めるか迷っている方も多いのではないでしょうか。そこで最後に、UIデザインを学ぶ方法を2つご紹介します。
- 書籍で学ぶ
- スクールで学ぶ
それぞれ詳しく解説するので、UIデザインを独学で学びたい方はぜひチェックしてみてくださいね。
書籍で学ぶ
独学でUIデザインを学ぶなら、まずは関連書籍を購入してみるのがおすすめです。UIデザインの基礎知識から応用方法まで、UIデザインを学べる参考書は多く販売されているため、自分のレベルに合わせて購入できます。
UIデザインのトレンドは変化が速いので、書籍を購入する際は最新版を購入すると良いでしょう。
スクールで学ぶ
UIデザインのスキルを効率的に身につけたい方は、キャリアスクールを利用するのもひとつの方法です。プロの講師の指導を受けながら学べるので、実践スキルを身に付けやすいのが魅力です。
スクールによっては就職・転職のサポートがあったり、受講生同士のコミュニティに参加できたりする場合もあります。「仕事でなかなか通う時間がない」という場合は、オンラインで受講できるスクールを選ぶのがおすすめですよ。
ギャラリーサイトを参考に、UIデザインを設計してみよう
UIデザインの設計に迷ったら、ギャラリーサイトを閲覧してみるのがおすすめです。Webサイトやモバイルアプリなどさまざまなジャンルのデザインが掲載されているため、参考にしながらデザインを設計してみましょう。
女性向けキャリアスクールSHElikes（シーライクス）のUIデザインコースでは、UIデザインの基本知識を学ぶことができます。UXデザインやIllustrator、Figmaなどデザインツールの使い方を学べるコースもあり、デザイナーに必要な幅広いスキルを習得できますよ。
無料体験レッスンも実施しているので、興味のある方はぜひ参加してみてくださいね。
女性向けキャリアスクールSHElikes無料体験レッスンはこちら
