デザインインスピレーションインデックス は何をしますか？
これは検索マップです。「Xのインスピレーションが必要なので、ソースYを見に行け」という形式で利用します。公開ギャラリーとレジストリのインデックスであり、デザインの権威ではありません。参考を得たら、uiスキルで構築し、anti-slopで結果を確認してください。各サイトの詳細（アクセス方法、形式、フィルター、取得のヒント）は references/galleries.md にあります。
ここに記載されているものは必須ではありません。すべてのソースは公開Webサイトです。MCPサーバーを持つ2つ（Mobbin、Refero）はオプションであり、頻繁に使用する場合にのみ接続する価値があります。
Xが必要なときは、Yへ
| 必要なもの | 参照先 | 備考 |
|---|---|---|
| 鑑賞するための完全なWebサイト（幅広いテイストの入力） | collected.li（シャッフル）、siteofsites.co（フィルター可能）、unmatchedstyle.com（編集部選定）、recent.design（毎日更新） | collectedはランダムに8サイト表示、siteofsitesはプラットフォームでフィルター、unmatchedstyleはトレンド記事あり |
| ヒーローまたは全ページレイアウト | landing.love（モーション重視）、craftwork.design/inspiration/websites（広範囲） | landing.loveは全ページビデオを録画 |
| モーションのあるランディングページ | landing.love | GSAP、WebGL、ThreeJSコレクションでフィルター |
| SaaSマーケティングサイトまたは1つのSaaSページタイプ | saaspo.com | ページタイプ（料金、機能）と業界でフィルター |
| 料金ページ | saaspo.com（ページタイプ）とcta.gallery（CTAブロック） | |
| ナビバー、ヘッダー、メガメニュー | navbar.gallery | スティッキー、メガメニュー、サイドバー、全画面でフィルター |
| CTA、サインアップ、ニュースレターブロック | cta.gallery | 業界、ボタン、フォーム、ニュースレター、モーダルでフィルター |
| モーションやマイクロインタラクションのアイデア | 60fps.design（モーション自体）、designspells.com（アイデアと理由） | designspellsはモバイルとデスクトップの1つの楽しいディテールを説明 |
| 楽しいディテール、イースターエッグ、「魔法」のようなタッチ | designspells.com | タグ: イースターエッグ、紙吹雪、トランジション、404 |
| 実際の製品UI: ページタイプ、フロー、UXパターン（Web） | refero.design | ページタイプ、フロー、パターン、要素、フォントでフィルター。オプションのMCPサーバーあり |
| OG画像、App Storeスクリーンショット、アプリアイコン | recent.design | 他にほとんどない専用タブ |
| ロゴ、ブランドアイデンティティ、リブランド | rebrand.gallery | ここでは唯一のブランディングソース |
| UIコンポーネントの構築方法や命名方法 | component.gallery | 名前のエイリアス（アコーディオン = 折りたたみ = 開示）付きのクロスシステムリファレンス |
| すぐに使えるコンポーネントコード（React） | shadcn/ui、mapcn（マッピング） | プロジェクトですでに使用しているものから始める |
| ビルド済みアプリブロック（フォーム、認証、サイドバー、テーブル） | blocks.so | 無料、コピー＆ペースト |
| ビルド済みマーケティング/ランディングブロック | tailark.com（厳選）、shadcnblocks.com（大規模、フリーミアム）、shadcnspace.com | フリーミアム |
| 複雑な複合ウィジェット（ガントチャート、カンバン、エディター、テーブル） | kibo-ui.com | 無料、shadcn CLIレジストリ |
| アニメーションコンポーネントやマイクロインタラクションコード | smoothui.dev、ui-layouts.com | MotionまたはGSAPベース |
| shadcnのテーマ生成 | shadcnstudio.com | 無料のコミュニティティア |
| レトロまたはピクセルアートルック | 8bitcn.com | shadcnのリスタイル、ニッチなデザイン |
| React Aria（Radixではない）のアクセシブルコンポーネント | intentui.com | Radixベースのshadcnとはうまく混ざらない |
| アイコンまたはSVG | lucide.dev（デフォルト）、react-icons、reicon.dev、hugeicons.com | Lucideはshadcnのデフォルト、線スタイル。react-iconsはブランドロゴを含む多くのセットをバンドル。Reiconはアウトラインと塗りつぶし。Hugeiconsは大規模でフリーミアム |
| モバイルアプリのフローと画面 | Mobbin | ログイン必須。MCPサーバーがあればそれを使用、なければWebサイト |
| 有名ブランドのデザインシステムの文書化 | awesome-design-mdリポジトリ (github.com/VoltAgent/awesome-design-md) | デザイン言語を定義する前に2～3つ読む |
| レビュー結果に名前を付けるUX原則 | lawsofux.com | 法律名で引用: フィッツ、ヒック、ヤコブ、ピークエンド |
| コンポーネント検索または生成されたUIバリアント | 21st.dev | 独自のUIを書き始める前に検索 |
独自のレジストリを持つ無料のコンポーネントライブラリは、ブロックを手書きする前に確認する価値があります。インポートしたものはすべて、プロジェクトのトークンとアクセシビリティルールに適合させてください。
研究すべきデザインエンジニア
サイトやオープンソースの作品が研究とフォローに値する、影響力の大きい人物。
| 人物 | サイト | で知られる |
|---|---|---|
| Emil Kowalski | emilkowal.ski | Sonner、Vaul、Webアニメーションの技術 |
| shadcn | shadcn.com | shadcn/ui、コピーインコンポーネントとレジストリ |
| Paco Coursey | paco.me | cmdk、next-themes、キーボード優先の最小限UI |
| Rauno Freiberg | rauno.me | インターフェースの不変条件と洗練の理由 |
| Raphael Salaja | raphaelsalaja.com | モーション豊富なポートフォリオ、遊び心のあるインタラクション技術 |
| Gavin Nelson | nelson.co | プロダクトデザインとアイコンデザイン |
| floguo | floguo.com | 表現力豊かなマイクロインタラクション、個性 |
| Syed Subhan | syedsubhan.in | マイクロトランジション。再利用可能なマイクロトランジションパターン集 Amicro (amicro.vercel.app) を構築 |
Mobbin と Refero: オプションのMCPサーバー
両方ともログインが必要で、MCPサーバーが接続されている場合はそれを通じてクエリするのが最適です。Mobbinは画面、フロー、セクション検索を公開しています。Referoのサーバーは https://api.refero.design/mcp（ドキュメント: https://doc.refero.design/mcp/getting-started）で、実際の製品スクリーンショットを返します。どちらも持っていない場合は、手動でサイトを閲覧してください。スクレイピングはしないでください。
アクセスチートシート
依存する前に確認してください。サイトは変更される可能性があります。
- オープンで無料、ログイン不要: landing.love、navbar.gallery、cta.gallery、60fps.design、collected.li、siteofsites.co、unmatchedstyle.com、recent.design、designspells.com、lucide.dev、reicon.dev、component.gallery、saaspo.com。
- フリーミアム（無料で閲覧、アセットや全ライブラリは有料）: craftwork.design、rebrand.gallery、hugeicons.com、refero.design。
- ログインまたはMCP: Mobbin、refero.design。
これらのうちいくつか（saaspo.com、component.gallery、landing.love、designspells.com）は自動フェッチを403または429でブロックしますが、通常のブラウザでは問題なく開きます。godly.websiteは現在recent.designにリダイレクトされます。ブロックされたサイトからプログラムでデータを取得するには、プレーンなHTTPフェッチではなく、実際のブラウザ（Playwright MCPなどがインストールされている場合）を駆動してください。
このインデックスを拡張する方法
新しいギャラリーを references/galleries.md に、同じフィールド（名前、URL、カテゴリ、最適な用途、アクセス方法、形式、取得のヒント）で追加し、その後、上のテーブルにルーティング行を追加してください。