こんにちは！UIデザイナーのYunyです。
- 日本国内向けのWebサービスやスマホアプリをデザインしている方
- 海外ギャラリーだけだと日本語フォントの収まりや情報密度が参考にしづらいと感じている方
- アプリ画面、パーツ別UI、デザインシステムなど目的別の参考サイトを効率よく探したい方
UIやWebデザインを作るとき、普段どんなサイトを参考にしていますか？
海外のおしゃれなギャラリーを眺めるのもすごく刺激になりますし、最新トレンドを知る上でも欠かせないインプットですよね。
ただ、日本のユーザーに向けたプロダクトを作るなら、やっぱり日本のサービスを見るのが一番しっくりくると感じています。
日本語特有のフォントの詰まり感や、安心感を持たせる情報設計は、国内の実プロダクトから学ぶのが一番の近道です。
今回は、自分自身が現場の実務で毎日のように開いているおすすめの参考サイトを、目的別に分かりやすくまとめました！
- なぜ「日本のサービスUI・Webデザイン」を参考にする必要があるのか？
- 【一覧比較】UIデザイン参考サイト10選の目的別早見表
- 【国内スマホアプリUI】実務の画面遷移とコンポーネントを研究するサイト
- 1. UI Pocket（ユーアイ・ポケット）
- 2. Web Design Clip（ウェブデザイン・クリップ）
- 【国内Web・サービスサイト・LP】全体の構成とトーンを掴むサイト
- 3. SANKOU!（サンコウ）
- 4. MUUUUU.ORG（ムーオルグ）
- 5. 81-web.com（エイティワン・ウェブ）
- 6. URAGAWA（ウラガワ）
- 【パーツ別UI・コンポーネント】実装レベルのUIパーツを逆引きするサイト
- 7. Parts.（パーツ）
- 8. Component Gallery（コンポーネント・ギャラリー）
- 【番外編】世界標準のUIと比較したいときに役立つ海外ギャラリー2選
- 9. Mobbin（モビン）
- 10. Dribbble（ドリブル）
- 実務で差がつく！UIデザイナーが実践する「参考サイト・競合リサーチ」の活用手順
- UIリサーチ・デザイン参考に関するよくある質問（FAQ）
- Q1. 参考サイトのUIを参考にするとき、トレースや模倣の著作権的・法的リスクは？
- Q2. 有料プランに課金するメリットは？ どんな基準で判断すべき？
- Q3. 集めた参考スクリーンショットを効率よく整理し、チーム共有・レビューに活かすコツは？
- 参考リンク
- 終わりに
なぜ「日本のサービスUI・Webデザイン」を参考にする必要があるのか？
海外のUIをそのまま真似しようとして、「あれ、なんかスカスカに見えるな…」「日本語を入れた途端に窮屈になったな」と感じたことはありませんか？
英語は単語が短くて余白を広く取りやすいのですが、漢字・ひらがな・カタカナが混ざる日本語は文字自体の情報量が多く、同じ感覚で組むとバランスが崩れやすいんです。
日本のユーザーは「必要な情報がきちんと整理されて並んでいる状態」に安心感を覚える傾向があります。
そのため、極端に削ぎ落としたミニマルさよりも、安心感と分かりやすさを両立した情報設計が求められることが多いです。
日本語タイポグラフィの具体的な行間設計や文字サイズのジャンプ率ルールについては、以下の記事でも詳しく解説しています。
国内のプロダクトを観察するときは、以下の3つのポイントを意識して見てみるのがおすすめです。
- 日本語の文字組みと余白のバランス: 長文やラベルが窮屈にならず、すっきり読める文字サイズと行間
- 安心感を与える情報設計: 入力フォームの補足テキストやエラー表示など、ユーザーを不安にさせない親切な配慮
- 迷わず押せるコンポーネント配置: ボトムナビやタブ切り替えなど、日本のユーザーが直感的に操作できる配置
ターゲット層の心理や行動フローを整理する手法については、以下の記事で詳しく解説しています。ユーザー理解とUIリサーチをセットで進める際の参考にしてみてください。
【一覧比較】UIデザイン参考サイト10選の目的別早見表
まずは、今回紹介する10個の参考サイトの特徴や料金形態、おすすめの利用シーンを一目で比較できるよう一覧表にまとめました。目的に合わせてぴったりのギャラリーを使い分けてみてください。
| サイト名 | 主な対象領域 | 料金形態 | 主な特徴・おすすめ用途 |
|---|---|---|---|
| UI Pocket | 国内スマホアプリUI | 無料（一部機能は有料） | 画面種別比較に加え、「解約」「本人確認」等の日本語・画面内文字検索で逆引き |
| Web Design Clip | 国内Web・スマホ特化Web・LP | 完全無料 | PCとスマホが分離。スマホ表示時のメニュー・CTA配置や技術・カラー別の逆引き |
| SANKOU! | 国内Web・LP・サービスサイト | 完全無料 | テイスト別・業界別の詳細タグで、クライアントワークの初期トンマナ合わせに活用 |
| MUUUUU.ORG | 国内縦長Web・LP | 完全無料 | 縦長LPのストーリー展開（課題提起→根拠→実績→料金）と視線誘導を研究 |
| 81-web.com | 国内洗練Webデザイン | 完全無料 | 日本語フォントのジャンプ率や余白感を観察し、モダンで洗練されたUIのヒントに |
| URAGAWA | 制作会社・制作者クレジット | 完全無料 | 制作会社の強み（ビジュアル重視か設計重視か）を把握し、提案時の比較軸に活用 |
| Parts. | 国内パーツ別UI | 完全無料 | 料金比較表や機能紹介など、Web/LPのパーツ単位でUIパターンをバリエーション出し |
| Component Gallery | 世界のデザインシステム | 完全無料 | コンポーネントの状態変化（Hover/Focus等）や仕様策定、AI実装のベースに |
| Mobbin（番外編） | 世界標準アプリ・Web | 無料（Proプランあり） | グローバルトップアプリの一連の画面遷移フローやアップセル導線の研究 |
| Dribbble（番外編） | 有志のコンセプトUI・作品 | 無料（Proプランあり） | 初期ブレストでのビジュアルアイデア出しや、インタラクションのインスピレーション |
【国内スマホアプリUI】実務の画面遷移とコンポーネントを研究するサイト
スマホアプリのUI設計では、1枚の画面の見た目だけでなく、前後の画面との自然な繋がりやコンポーネントの使い分けがとても大切です。
国内の主要アプリがどんな画面構成にしているか調べるなら、以下のギャラリーが本当に頼りになります。
1. UI Pocket（ユーアイ・ポケット）
UI Pocketは、メルカリやLINE、PayPay、マネーフォワードなど、日本国内の人気アプリの画面キャプチャを網羅したギャラリーです。
ショッピングや金融、SNSといった業界別はもちろん、「オンボーディング」「マイページ」「検索画面」などの画面タイプで絞り込めるのがすごく便利です。
そして、自分が実務で一番助かっているのが「日本語キーワードや画面内の文字検索」ができることです。
「クーポン」「解約」「本人確認」「通知設定」といった言葉を入れるだけで、その文言が実際に使われている各社アプリの画面を一発で逆引きできます。普通にアプリを触っていてもなかなか辿り着けないニッチな設定画面も、ピンポイントで探せるのが最高です。
- 料金プラン・利用形態: 無料でも一部の画面は見られますが、全画面の閲覧や文字検索を使うには有料プラン（課金）が必要です。自分自身も実際に課金して実務で愛用していますが、リサーチのスピードが格段に上がるので十分元が取れると感じています。
- おすすめの活用法:
- ニッチな業務フローの逆引き: 「本人確認」「解約」などで検索し、国内アプリの導線やエラーメッセージの書き方を比較
- 画面種別ごとの標準UI把握: 「オンボーディング」「マイページ」などで絞り込み、業界標準のレイアウトやボタン配置の学習に活用
2. Web Design Clip（ウェブデザイン・クリップ）
Web Design Clipは、国内のWebデザインを「Japan（PC）」「Smartphone（スマホ）」「Landing Page（LP）」「World（海外）」の4つに分けて掲載している定番サイトです。
PC表示とスマホ表示がタブで綺麗に分かれているので、「スマホ表示のときのファーストビューやメニューの配置パターンを見たい」というときにすごく探しやすいんですよね。メインカラーや使われている技術（React、GSAPなど）のタグで絞り込めるのも便利です。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- スマホ専用WebのUI検証: 「Smartphone」タブで、スマホ表示時のメニュー展開やフローティングCTAボタンの配置を比較
- 技術・カラー別の逆引き: 「React」「GSAP」などの技術タグや使いたいメインカラーで絞り込み、実装イメージの具体化に活用
破綻しないレスポンシブの組み方やFigmaでの画面設計については、以下の記事も参考にしてみてください。
【国内Web・サービスサイト・LP】全体の構成とトーンを掴むサイト
SaaSやWebサービスのLP、サービスサイトを設計するときは、ファーストビューの訴求力と情報の見せ方の順番を掴むことが大切です。
国内の洗練されたWebサイトが集まる定番ギャラリーを活用しましょう。
3. SANKOU!（サンコウ）
SANKOU!は、国内のWebサイトやLP、サービスサイトを幅広く集めた最大級のギャラリーサイトです。
サイト自体のデザインも可愛らしくて見ていて楽しいので、自分も普段からよく眺めています。
「ポップ」「信頼感・誠実」「ミニマル」といったデザインテイスト別や、業界別、サイトの機能別など、タグがとても細かく整理されているので、求めているトーンがすぐに見つかります。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- 初期トンマナの合意形成: クライアントとの要件定義で「信頼感」「先進的」などのタグを使い、世界観を合わせるムードボード作成に活用
- 業界別の情報設計リサーチ: 「BtoB」「採用」などのカテゴリで絞り込み、情報の優先順位や見せ方の把握に活用
4. MUUUUU.ORG（ムーオルグ）
MUUUUU.ORGは、縦に長くスクロールするWebサイトを中心に、クオリティの高い国内サイトを厳選して紹介している老舗ギャラリーです。
情報がぎゅっと詰まっていて、LPでよくある「問題提起 → 解決策 → 導入実績 → 料金プラン」というストーリー展開の構成を学ぶのにすごく役立つと感じています。スクロールに合わせて自然に読ませるレイアウトを組みたいときにぴったりです。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- 縦長LPのストーリー展開研究: ファーストビューから「課題提起→根拠→実績→料金プラン→FAQ」へと繋がる論理的なセクション展開のリファレンスに活用
- CV導線（CTA）の配置設計: スクロール中に離脱させず、自然に行動を促す追従ボタンやCTAの強弱設計に活用
5. 81-web.com（エイティワン・ウェブ）
81-web.comは、日本の優れたWebデザインを厳選してアーカイブしているサイトです。
サムネイルが大きめに表示されるので、ファーストビューのタイポグラフィや余白の取り方をパッと直感的に見比べられます。日本語フォントの綺麗な文字組みや、余白を活かしたモダンなデザインを探したいときによく開きます。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- 日本語タイポグラフィの観察: 見出しと本文の文字サイズの強弱（ジャンプ率）や行間を観察し、文字が多いWebをすっきり見せるヒントに活用
- 余白（ホワイトスペース）設計: 要素が詰まりがちな国内サービスで、余白を活かしたモダンなレイアウトの参考に活用
6. URAGAWA（ウラガワ）
URAGAWAは、Webサイトを手掛けた制作会社やデザイナーのクレジット情報が載っているユニークなギャラリーです。
Webデザインのリサーチでは、画面の見た目だけでなく「どの制作会社が作ったのか」という背景を意識すると理解がぐっと深まります。「この会社は世界観づくりやビジュアル表現が圧倒的」「こちらはSaaSや複雑なUIの情報設計が得意」といった強みを知っておくと、デザインの狙いが見えてきます。
クライアント提案のときも、「世界観重視の事例」「情報設計重視の事例」のように制作会社の文脈を添えてリファレンスを出すと、クライアントも方向性を選びやすくなり、合意形成がとてもスムーズになります。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- 制作スタジオの強み軸での分類提案: 「ビジュアル演出が得意な会社」と「情報設計に強い会社」の事例を分類し、提案時の比較軸に活用
- 制作者ポートフォリオからの深掘り: 気になったUIの制作会社クレジットを辿り、裏側にある制作意図や設計思想の学習に活用
グリッドレイアウトのモダンな活用法については、以下の記事でも詳しく解説しています。カード型UIの配置や視線誘導は国内サイトでも広く取り入れられています。
【パーツ別UI・コンポーネント】実装レベルのUIパーツを逆引きするサイト
「料金プランの比較表ってどう組むのがベスト？」「よくある質問（アコーディオン）はどう開閉させる？」など、具体的なパーツ単位で迷ったときのリサーチ方法です。
パーツ単位で調べるなら、アプリ画面やマイクロコピーなら先ほどの「UI Pocket」、WebサイトやSaaS系LPのパーツなら「Parts.」を使うのがおすすめです。
7. Parts.（パーツ）
Parts.は、国内のWebサイトを「ヘッダー」「フッター」「料金表」「お客様の声」「フォーム」といったパーツ（コンポーネント）別に集めたギャラリーです。
特にSaaSやWebサービスのLPでよく使われる料金比較表や機能紹介セクションがたくさん集まっていて、パーツ単位で探すときにすごく重宝します。日本語の長いプラン名や注釈テキストをすっきり収めるレイアウトの工夫がとても勉強になります。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- 料金プラン・比較表の設計: SaaSの3カラム料金表など、情報量が多くて崩れやすいテーブルUIのパターン収集に活用
- コンポーネント単位のバリエーション出し: 「FAQ」「ステップ案内」「お客様の声」など、パーツごとの見せ方の引き出し増加に活用
8. Component Gallery（コンポーネント・ギャラリー）
Component Galleryは、世界中の主要なデザインシステム（デジタル庁やSmartHR、Shopify Polarisなど）で使われているコンポーネント仕様をまとめたサイトです。
コード寄りの内容なので最初は少し難しく感じるかもしれませんが、最近のAIを使ったコーディング（バイブコーディング）や、実装を前提にしたUI仕様を決めるときにものすごく頼りになります。ボタンや入力欄の状態変化（Hover, Active, Focus, Disabled）やアクセシビリティの考慮事項をプロンプトに落とし込むときに役立ちます。
- 料金プラン・利用形態: 完全無料で利用可能です。
- おすすめの活用法:
- UI状態変化の定義漏れチェック: 「Hover」「Focus」「Disabled」「Error」など、設計で見落としがちな状態の抜け漏れ防止に活用
- アクセシビリティ仕様・AI実装のベース: キーボード操作などの要件を把握し、AIコーディングへの指示プロンプトやデザインシステム策定に活用
【番外編】世界標準のUIと比較したいときに役立つ海外ギャラリー2選
基本的には日本のユーザーに合わせて国内事例を参考にするのが確実ですが、「世界標準のUIフローはどうなっているんだろう？」「枠にとらわれない最新のビジュアルアイデアに触れたい！」というときもありますよね。
ここでは、視野を広げるための番外編として、世界中で定番の2大ギャラリーを紹介します。
9. Mobbin（モビン）
Mobbinは、iOS、Android、Web、SaaSの画面キャプチャと画面遷移フローを網羅した世界最大級のリファレンスサイトです。
日本でもお馴染みのグローバルアプリ（Uber, Airbnb, Notion, Spotifyなど）の画面遷移が最初から最後まで記録されていて、「世界のスタンダードな画面設計を日本向けにどうアレンジするか」を考えるときの比較基準として欠かせません。
- 料金プラン・利用形態: 無料でも一部の最新アプリは見られますが、過去ログや全画面フロー、詳細フィルタを使うには有料プラン（Proプラン）が必要です。
- おすすめの活用法:
- 一連のユーザーフロー（画面遷移）全体の把握: オンボーディングから有料プランへの課金導線まで、トップアプリの一連の流れを一気通貫で把握
- 世界標準UIのローカライズ検証: 海外サービスのUI作法を参考にしつつ、日本のユーザー向けのアレンジ検討に活用
10. Dribbble（ドリブル）
Dribbbleは、世界中のデザイナーが最新のデザインショットや作品を投稿しているデザインSNSです。
実際のプロダクトとしてリリースされていないコンセプトUIも多いですが、純粋なビジュアルの面白さや、最新のグラフィック・アニメーションのアイデアがたくさん集まっています。アイデア出しの初期段階で頭を柔らかくしたいときに、自分もインスピレーション源としてよく見ています。
- 料金プラン・利用形態: 無料で自由に検索・閲覧できます（一部プロ機能は有料）。
- おすすめの活用法:
- 初期ブレストでのビジュアルアイデア出し: 固定観念にとらわれない新しいレイアウトや配色、グラフィックのヒント収集に活用
- マイクロインタラクションの研究: ボタンの動きや画面切り替えのアニメーションなど、心地よい操作感のアイデア壁打ちに活用
実務で差がつく！UIデザイナーが実践する「参考サイト・競合リサーチ」の活用手順
参考サイトや競合アプリをただ眺めてスクショを撮るだけだと、いざ自分で作るときに「結局どうデザインすればいいんだっけ？」と手が止まってしまいがちです。
自分が普段実務で意識している、アウトプットに直結させる3つのリサーチ手順をまとめました。
- ① 先入観を持たずに「とにかく幅広く集める」: 最初から「これがおしゃれ」と絞り込まず、競合や近しい業界のUIをまずは網羅的に集めます。全体を広く眺めることで、その業界の暗黙のルールやユーザーの慣れが見えてきます。
- ② 集めた画面から「共通点」を見つけ、その「役割」を考える: 集めた画面を並べると、複数のサービスで共通しているレイアウトやボタン配置が必ずあります。「なぜみんなこの位置に置いているのか」「この画面でユーザーに何をさせたいのか」というように、そのUIが果たしている本質的な役割を深掘りします。
- ③ 自社の文脈に合わせて、アイデアを組み合わせて落とし込む: 共通点が見つかっても、そのまま丸ごと真似していいわけではありません。自分のサービスのターゲット層やブランドの特徴をしっかり考えた上で、各社から得たヒントを組み合わせて自社に合ったUIを作っていきます。
また、クライアントやチームにデザインを提案するときは、単に「このサイトがおしゃれです」と見せるのではなく、制作会社ごとの強み（ビジュアル重視 vs 設計重視）という軸を添えて見せるのがおすすめです。
「こちらは世界観やブランド演出に強みがある会社の事例」「こちらは情報設計や操作性に定評がある会社の事例」のように業界の文脈とセットで提示すると、クライアントも完成イメージを持ちやすくなり、プロジェクト全体の方向性がスムーズに決まります。
デザインを感覚だけでなく論理的・定量的に捉える考え方については、以下の記事でも詳しく解説しています。
UIリサーチ・デザイン参考に関するよくある質問（FAQ）
実務でUIリサーチを行うときに、若手デザイナーやメンバーからよく受ける質問をQ&A形式でまとめました。
Q1. 参考サイトのUIを参考にするとき、トレースや模倣の著作権的・法的リスクは？
ボタン配置や一般的な入力フォーム、標準的な画面レイアウトといった「アイデア」や「使いやすさを追求した配置」自体には、基本的に著作権は発生しません。
ただし、独自のイラスト、写真、ロゴ、特徴的なアイコン、オリジナルのキャッチコピーや文章は著作権で保護されているため、そのままコピーするのは明確な著作権侵害になります。
リサーチの本質は「見た目を真似すること」ではなく、「なぜその配置になっているのかという構造や役割を抽出し、自社に合わせて新しく組み立て直すこと」です。意図を借りて、自分のデザインとして作り直すことを意識しましょう。
Q2. 有料プランに課金するメリットは？ どんな基準で判断すべき？
自分自身の体験として、UI Pocketに課金したことで「解約」や「本人確認」といった普段は見つけにくい画面を一瞬で逆引きできるようになり、リサーチにかかる時間が圧倒的に減りました。
判断基準としては、「仕事の現場でスピードや網羅性が求められているかどうか（費用対効果）」で考えるのがおすすめです。日々の業務を効率化して成果を出したいなら課金する価値が十分にありますが、勉強中や自主制作の段階であれば、まずは無料枠から試してみるので全く問題ありません。
Q3. 集めた参考スクリーンショットを効率よく整理し、チーム共有・レビューに活かすコツは？
デザインレビューのときは、Figma上に参考にしたUIを並べて、自分が作ったデザインのすぐ隣に参考UIを置いておくのがすごくおすすめです。「なぜこの配置にしたのか」の理由がひと目で伝わるので、感覚論ではなく論理的で前向きな議論ができます。
また、日々のリファレンス保存には、デジタル素材管理ツールの「Eagle（イーグル）」を長年愛用しています。Web上のキャプチャをタグやフォルダで瞬時にストックできるので、インプット整理に欠かせない相棒です。
※このEagleを活用したデザイナー向けの素材管理術については、近日中に特集記事を公開予定ですので、ぜひ楽しみにしていてください！
参考リンク
- UI Pocket – 国内スマホアプリUIギャラリー
- Web Design Clip – Web・スマホUIデザインクリップ
- SANKOU! – 国内Webデザイン・LPギャラリー
- MUUUUU.ORG – クオリティの高い縦長Webサイト集
- 81-web.com – 日本の優れたWebデザインアーカイブ
- URAGAWA – 制作会社・制作者の裏側が見えるWebギャラリー
- Parts. – Webデザインパーツ別ギャラリー
- Component Gallery – 世界のデザインシステムコンポーネント集
- Mobbin – 世界最大級のアプリ・Web UIリファレンス
- Dribbble – 世界中のデザイナーによるポートフォリオ＆デザインSNS
終わりに
最後までお読みいただき、ありがとうございます！
UIデザインで行き詰まったときは、目的に応じて見るギャラリーを切り替えるだけで、頭の中がすっきり整理されて作業がぐっと進みやすくなります。
まずは今日から、気になる国内サービスを1つ選んで、その文字組みやレイアウトの工夫をじっくり観察してみてはいかがでしょうか。
これからも、日々のデザインの引き出しを広げる工夫を一緒に楽しんでいきましょう。
それでは、良いデザインライフを！
