このサイトについて
Component Recipesの目的・特徴・掲載方針をご紹介します。
サイトの目的
「Component Recipes」は、Reactコンポーネントのデザインスタイルをインタラクティブに探索し、AIを活用した実装を支援するレシピ集です。 フラット・シャドウ・アウトラインなど、コンポーネントのさまざまなデザインスタイルをライブプレビューで確認しながら、ワンクリックでAIプロンプトをコピーして実装コードを生成できます。
主な目的
- AIプロンプトでのコンポーネント生成補助
- Tailwind CSSによるデザインスタイルのパターン提示
- 日本語コンポーネント名称のエイリアス対応による検索性の向上
- 行政・公共機関向けコンポーネントなど日本固有のUI要素のカバー
「日本版」ならではの特徴
- エイリアス対応：「モーダル」「ダイアログ」など複数の呼称を紐付けて横断検索が可能
- 行政・公共カテゴリ：デジタル庁・地方自治体等の公共機関向けコンポーネントを専用カテゴリで管理
- 縦書き対応：縦書きレイアウトに対応したコンポーネントを特殊カテゴリとして分類
- 日本語UIに最適化：全角文字・ルビ・振り仮名など日本語特有の要素を考慮したコンポーネントを収録
コンポーネント定義の考え方
UIコンポーネントとは
UIコンポーネントとは、ユーザーインターフェースを構成する再利用可能なUI部品のことです。ボタン・テキストフィールド・ダイアログ・ナビゲーションバーなど、アプリケーション全体で一貫したデザインと動作を提供するために使われます。
Component Recipesでは、これらのコンポーネントをデザインスタイル別に整理し、Tailwind CSSクラスで実装した各スタイルのライブプレビューとAIプロンプトを提供しています。
掲載基準
- React + Tailwind CSSで実装可能なUIコンポーネントであること
- デザインスタイルが明確に定義でき、視覚的差異があること
- AIプロンプトによる実装コード生成が有益なコンポーネントであること
- 商業的な宣伝・プロモーション目的でないこと
よくある質問
Q: このサイトのデータはどのように収集していますか？
A: コンポーネントの定義・スタイル設計は編集チームが手動で作成・整理しています。自動スクレイピングは行っていません。
Q: 新しいデザインスタイルの追加はどこで受け付けていますか？
A: 「寄稿・掲載依頼」ページからメールまたはGitHub Issueでご連絡ください。新スタイルの追加依頼・情報修正・誤りのご指摘など、どのようなフィードバックも歓迎します。
Q: 「コンポーネント名のエイリアス」とは何ですか？
A: 同じUIパターンが異なる名称で呼ばれることがあります（例：「モーダル」と「ダイアログ」、「トースト」と「スナックバー」）。このサイトでは複数の呼称をエイリアスとして登録し、どちらの名前で検索しても同じコンポーネントを見つけられるようにしています。
Q: AIプロンプトはどのAIツールで使えますか？
A: ChatGPT・Claude・Geminiなど一般的な対話型AIツールで使用できます。プロンプトをコピーして貼り付けるだけで、React + Tailwind CSSのコンポーネント実装コードを生成できます。
スタイル追加・情報提供
新しいデザインスタイルの追加依頼、既存情報の修正など、 皆さまからの情報提供をお待ちしています。
寄稿・掲載依頼はこちら