UIデザインに行き詰まったとき、どこからインスピレーションを得るかはデザイン効率に直結する。本記事では、Webサイト全体・LP・SaaS・ナビゲーション・CTA・モバイルアプリ・ブランド・アイコン・デザインシステムの9カテゴリに特化したギャラリーサイトを紹介する。
Webサイト全体のレイアウト参考 — Craftwork Curated Websites
URL: https://craftwork.design/curated/websites/
厳選されたWebサイトのギャラリー。レイアウトの組み方、配色、余白の取り方など、Webサイト全体の構成を参考にするのに適している。
アニメーション表現のあるWebデザイン — landing.love
URL: https://www.landing.love/
アニメーションを活用したウェブサイト2000件超のショーケース。動きのあるUI表現やインタラクションのアイデアを探す際に参照できる。
SaaS製品サイトのページパターン — saaspo.com
URL: https://saaspo.com/
SaaSプロダクトのWebサイト実例集。料金ページの構成、機能紹介の見せ方、CTA（Call to Action）の導線設計など、SaaSに特有のページパターンを網羅している。
ナビゲーションバー設計 — navbar.gallery
URL: https://www.navbar.gallery/
ナビゲーションバーに特化したギャラリー。メニューの情報構造、CTAの配置、モバイル対応のパターンなど、ナビゲーション設計の参考になる。
CTAセクションの誘導設計 — cta.gallery
CTAセクションの実例集。登録・購入・問い合わせなどへの誘導デザインを多数収録しており、コンバージョンポイントの設計に役立つ。
モバイル・WebアプリのUXフロー — Mobbin
URL: https://mobbin.com/
人気モバイルアプリおよびWebアプリの画面フローを網羅したリソース。オンボーディング、認証フロー、設定画面など、UX（ユーザー体験）設計の具体的な参考として活用できる。
リブランディング事例集 — rebrand.gallery
URL: https://www.rebrand.gallery/
リブランディング事例のギャラリー。ロゴ刷新やブランドアイデンティティの更新事例を多数掲載しており、ブランディング施策の参考になる。
統一感のあるアイコン選定 — HugeIcons
5万4千点以上のアイコンを収録した大規模ライブラリ。統一感のあるUIデザインを実現したいときに、スタイルの一貫したアイコンセットを選べる。
コンポーネント設計のパターン比較 — component.gallery
URL: https://component.gallery/design-systems/
各社のデザインシステムを横断的に参照できるギャラリー。ボタン、フォーム、ナビゲーションなど、コンポーネント単位での設計パターンを比較検討するのに適している。
AIと組み合わせた活用法
これらのサイトをAIと組み合わせて使うのも効果的だ。UIに悩んだ際に参考サイトのURLや画面の説明をAIに渡すことで、より具体的な改善案を引き出せる。ナビゲーション設計に迷えば navbar.gallery、アプリのフロー設計なら Mobbin、という具合に目的を絞ってから参照すると効率が上がる。