【2026年】component.galleryを使ってAIのUI生成指示を劇的に上手くする方法！コンポーネント用語図鑑の活用法

「AI（Claude CodeやCursor）に『いい感じの画面を作って』と頼んだのに、なんかイマイチ…。説明がうまく伝わらない」

そんな経験、ありませんか？

実は、AIにUI（画面）を作らせるときに一番効くのは、「Accordion（アコーディオン）」「Modal（モーダル）」「Card（カード）」といった"コンポーネントの名前（用語）"を正しく指示に入れることです。そして、その用語の正しい意味と実例をまとめた無料サイトが「The Component Gallery（コンポーネント・ギャラリー）」です。

本記事では、このサイトの見どころと、どうやってAIへの指示出し（プロンプト）に使えばいいかを、初心者の方にもわかるよう実例つきで解説します。

この記事を読めば：

component.gallery がどんなサイトか
「コンポーネント名」を使うとAIの出力がなぜ良くなるか
実際にどんなプロンプトを書けばいいか
日常のAI活用でどう取り入れるか

が、すべてわかります。

component.gallery ってどんなサイト？

一言でいうと、「世界中のデザインシステムからUIパーツの実例を集めた、無料の図鑑サイト」 です。

The Component Gallery のトップページ

AppleのHuman Interface Guidelines、GoogleのMaterial Design、GitHubのPrimer、Atlassianなど、有名なデザインシステムの「こんな部品がありますよ」という例を、1か所にまとめています。

何が載っているか

サイトの「Components」ページには、画面上で使う部品がずらっと並んでいます。

Components 一覧ページ（ButtonやCard、Modalなどが並ぶ）

たとえば以下のような部品（コンポーネント）が載っています：

Accordion（アコーディオン）：開閉できる折りたたみリスト
Alert（アラート）：注意やエラーのメッセージ
Avatar（アバター）：ユーザーを表す丸いアイコン
Badge（バッジ）：小さなステータス表示
Breadcrumbs（パンくずリスト）：現在位置の表示
Button（ボタン）：押すための部品
Card（カード）：情報をまとめる箱
Modal（モーダル）：画面の上に重なる dialog
Drawer（ドロワー）：横から出るメニュー
Dropdown menu（ドロップダウンメニュー）：折りたたみメニュー

各コンポーネントには、「その部品がそもそも何か」という定義と、各デザインシステムでの実際の見た目例 が載っています。

コンポーネントの実例をのぞいてみる

いくつか代表的なものを、サイトの実例付きで紹介します。

Button（ボタン）

ただの「ボタン」でも、前提（primary / secondary）、大きさ、アイコンの有無など、バリエーションが豊富にあることがわかります。

Card（カード）

Card の実例

情報を1つにまとめる「箱」のこと。SNSの投稿や、商品一覧などで使われます。

Modal（モーダル）

Modal の実例

画面の上に重なる「詳細表示」や「確認ダイアログ」。設定画面などでよく使います。

Accordion（アコーディオン）

Accordion の実例

タップで開閉する折りたたみリスト。FAQページなどでおなじみです。

なぜ「コンポーネント名」をAIに伝えると上手くいくのか

AIにUIを作らせるとき、多くの人はこう頼みがちです：

❌ 「いい感じの連絡先フォームを作って」

これだとAIは「いい感じ」を自分勝手に解釈します。結果、ばらばらの配置になったり、押しにくいボタンになったりします。

一方、component.gallery で用語を確認してからこう頼ると：

✅ 「Label付きの Text field と、primary の Button を並べた Form を作って。入力欄は Fieldset で囲って」

AIは「どの部品を、どう組み合わせるか」を正確に理解できるようになります。言葉（用語）が共通言語になるからです。

AIへの指示出し：NGとOKの対比

実際にどう変わるか、例を3つ挙げます。

例1：設定画面

	指示のしかた	結果
❌ NG	「設定画面を作って」	適当な並びになりがち
✅ OK	「左に Drawer メニュー、右に設定項目を Card で区切った画面を作って」	構造が明確になる

例2：商品一覧

	指示のしかた	結果
❌ NG	「商品を並べて」	ただの列挙
✅ OK	「各商品を Card にして、3列の Grid レイアウトに。Card には Image・Title・Badge を入れて」	見栄えのいい一覧に

例3：注意喚起

	指示のしかた	結果
❌ NG	「エラーを知らせて」	ただの文章
✅ OK	「削除時に Alert（danger）を Modal で表示して、Confirm 用の Button を2つ置いて」	使いやすい警告に

AIエージェントへの指示出しテクニック

コーディングエージェント（Claude Code、Cursor、Codex など）にUIを作らせる場合、以下の手順で component.gallery を活かせます。

ステップ1：作りたい画面を言語化する

「お問い合わせページがほしい」→「フォーム（Form）が必要。入力項目は Text field。送信は Button」のように、部品に分解します。

ステップ2：用語をサイトで確認する

意味が曖昧なら、component.gallery で該当コンポーネントを開き、定義と実例を確認します。

ステップ3：プロンプトにコンポーネント名を入れる

連絡先フォームを作って。
- 名前・メール・本文は Label 付き Text field
- 送信は primary の Button
- 全体を Card に入れて、中央寄せに
- 入力漏れは Alert で知らせる

ステップ4：AIの出力を見て微修正

「もう少し Modal っぽく」など、サイトの実例を参考にしながら言葉を足します。

よくある質問（FAQ）

Q1. component.gallery は無料ですか？

はい、無料で公開されているサイトです。アカウント登録も不要で、誰でも閲覧できます。

Q2. デザインができない人でも役立ちますか？

役立ちます。むしろ「言葉が通じない」のが原因の失敗を防げるので、非デザイナーこそ恩恵が大きいです。

Q3. 特定のフレームワーク（React等）の書き方が載っていますか？

サイト自体は「部品の意味と実例」が主眼です。実装コードではなく「設計の共通言語」として使うのが狙いです。

Q4. AIに伝える以外に何に使えますか？

デザインレビューや、チーム内での「あれ作って」の共通理解にも使えます。「Modalでいい？ Drawerにする？」と会話がスムーズになります。

Q5. スマホ画面の部品もありますか？

はい。モバイルでも使う部品（Bottom navigation、Drawer など）も含まれています。

Q6. このサイトの情報はいつまで正しいですか？

各デザインシステムの最新に合わせて更新される仕組みですが、細部は公式ドキュメント（Apple HIGやMaterial等）も併せて確認するのが確実です。

まとめ

The Component Gallery は、世界中のデザインシステムからUI部品の実例を集めた、無料の「コンポーネント用語図鑑」です。

AI（Claude CodeやCursor等）にUIを作らせるとき、「Accordion」「Modal」「Card」などの正しいコンポーネント名を指示に入れるだけで、出力の質が劇的に上がります。

まずはサイトで用語に触れる
作りたい画面を部品に分解する
コンポーネント名を入れたプロンプトでAIに頼む

このサイクルを回すだけで、これまで「なんか違う」だったAIとのUI制作が、ぐっと上手くいくようになります。

※本記事は情報提供を目的としており、component.gallery の内容は公式サイトの公開情報に基づいています。最新のコンポーネント一覧は公式サイトでご確認ください。