Component Galleryについて
UIコンポーネント・デザインシステム・実装パターンを探せる日本語UI辞書としての目的、参照方針、掲載方針をまとめています。
サイトの目的
Component Galleryは、「ボタンを作りたい」「設定画面を設計したい」「ModalとDialogをどう使い分けるか知りたい」 という実務の探し方に合わせて、UIコンポーネントを体系化する日本語UI辞書です。
個別ライブラリの使い方だけでなく、Apple HIG、Material Design、Fluent UI、shadcn/uiなどの見方を比較し、 React、HTML/CSS、Flutter、SwiftUIで実装する際の考え方までつなげます。
参照方針
- ・公式ドキュメント、OSSリポジトリ、一次情報へのリンクを優先する
- ・外部文章を長く転載せず、要点はComponent Galleryの言葉で整理する
- ・仕様や呼称が変わりやすい情報は、更新日と参照確認日を残す
掲載方針
- ・単なるリンク集ではなく、使い分け、失敗例、アクセシビリティ、実装例を含める
- ・スクリーンショット転載に依存せず、自前の説明・プレビュー・コードを中心にする
- ・薄いページは公開対象にせず、ハブページと詳細ページの内部リンクを整える
免責
- ・掲載内容は一般的なUI設計・実装の参考情報であり、特定プロダクトへの適合を保証しない
- ・公式仕様、ライブラリAPI、ブラウザ仕様は変更されるため、最終判断は一次情報で確認する
- ・商標、ブランド名、ライブラリ名は各権利者に帰属する
レビュー状態と更新
各詳細ページには最終更新日とレビュー状態を表示します。未レビューのページは、公開前後に本文の薄さ、 公式リンク、実装例、アクセシビリティ観点を確認し、必要に応じてリライトします。
よくある質問
Q: Component Galleryは何のためのサイトですか？
A: UIコンポーネント、画面パターン、デザインシステム比較、実装レシピ、用語の違いを日本語で探せるUI辞書です。デザイナーとエンジニアが同じ言葉でUIを検討できることを目指しています。
Q: 公式ドキュメントとはどのような関係ですか？
A: 公式ドキュメントの代替ではありません。Apple、Google、Microsoft、OSSライブラリなどの公式情報を尊重し、参照リンクを示したうえで、実務での使い分けや実装時の注意点を独自に整理します。
Q: 掲載内容は自動スクレイピングですか？
A: いいえ。外部サイトの文章や画像を自動取得して転載する運用ではなく、編集した本文、独自の比較表、コード例、公式リンクを中心に構成します。
Q: AIプロンプトはそのまま使えますか？
A: 実装のたたき台として使えます。ただし、プロダクトのデザインシステム、アクセシビリティ要件、利用規約、セキュリティ要件に合わせて必ず調整してください。
情報修正・改善提案
用語の誤り、公式リンクの変更、掲載すべきコンポーネント、比較観点の不足があれば、改善提案として送れます。
寄稿・改善提案を見る