「あのUIの名前は？」を解決するサイト

UIコンポーネントの正式名称がわかる視覚辞典がおもしろかったので。

コーディングそのものの参考にもなります。

AIへの指示があいまいになっていませんか？

CursorやGitHub CopilotをはじめとするAIコーディングアシスタントの普及により、誰もが自然言語でソフトウェアを開発できる「バイブコーディング（Vibe Coding）」の時代が本格化しています。
しかし、AIを使って開発を進める中で、もどかしさを感じた経験はないでしょうか。

• 「右上にある三本線のボタンを作って」
• 「クリックしたら下に広がるやつを追加して」
• 「画面の後ろが暗くなるポップアップを出して」

このようなあいまいな指示を出すと、AIは意図を汲み取れず、期待とは異なるコードを生成してしまうことが少なくありません。
AIに正確なコードを書かせるためには、私たちが「正確な名前」で指示を出す必要があります。

そこでおすすめしたいのが、2026年7月に公開されて大きな話題を呼んでいる「Name That UI」というサイトです。
ここでは、このUI視覚辞典の魅力と、AIコーディングにおける語彙力の重要性について詳しく解説します。

サイト概要： UIの正式名称がわかる視覚辞典

Name That UI は、一言でいえば「UIの視覚辞典（The visual dictionary of UI）」です。
デザイナーや開発者が「見たことはあるけれど、名前がわからない」といったUIコンポーネントの正式名称を直感的に調べることができます。

現在、macOS（AppKit / SwiftUI）とWeb標準の2つのカテゴリで、60種類以上のUI要素が収録されています。

最大の特徴は、単なる名前の羅列ではない点です。
各要素には、実際に動かして確認できるインタラクティブなデモが用意されています。
さらに、フレームワーク上のAPI名（例：NSPopover）やHTMLの属性（例：role=”combobox”）まで明記されているため、そのままコーディングエージェントへのプロンプトとして活用できます。

いつからあるサイトなのか

Name That UIは、2026年7月12日に公開された非常に新しいサービスです。
公開からわずか5日間で75万回以上閲覧され、9,500件以上のブックマークを獲得するなど、開発者コミュニティで爆発的な反響を呼びました。

公開後も頻繁にアップデートが続けられており、「Multi-select（複数選択）」や「Steps（ステップ）」といった新しいコンポーネントが次々と追加されています。
現在もアルファ版として、利用者の検索履歴から新しい単語を学習し、辞書を拡張し続けている成長中のプロジェクトです。

誰が運営しているのか

このサイトを開発・運営しているのは、X（旧Twitter）で活動する@argofowl氏です。
プロフィールには「AI + Design + Development」と記されており、デザイナーとエンジニアの領域を横断して活動している人物であることがわかります。

同氏がこのサイトを作った動機は、非常に実践的なものでした。

「私は主にデザイナーですが、AIエージェントにプロンプトを出すとき、それが何と呼ばれるものなのかを知ることが常に最大の壁でした」

法人組織ではなく個人のプロジェクトですが、自身の切実な課題から生まれたツールだからこそ、多くの開発者の共感を集めています。

信用できるサイトなのか

結論から言えば、情報源として十分に信頼できるサイトです。

掲載されているAPI名やコンポーネントの名称は、Appleの公式ドキュメントやWAI-ARIA（Webアクセシビリティの標準仕様）に準拠しており、技術的な正確性が担保されています。

また、個人情報の入力やアカウント登録を求める機能はなく、サイト上にサードパーティのトラッキングスクリプトも埋め込まれていません。
プライバシーに配慮されたクリーンな設計となっています。

AIツールのキュレーションサイトであるFutureToolsでも「Matt’s Pick（厳選ツール）」として紹介されるなど、業界内での評価も確立されつつあります。

AIでコーディングするからこそ、正確な名前が武器になる

AIを活用した開発において、なぜUIの正確な名前を知ることがそれほど重要なのでしょうか。
それは、プロンプトの精度がそのまま出力コードの品質に直結するからです。

例えば、メニューを実装したいときに「三本線のボタン」と指示するのと、「ハンバーガーメニュー（<button aria-label=”menu”>）」と指示するのでは、AIの理解度がまったく異なります。
「クリックすると下に展開するやつ」ではなく「アコーディオン（<details>要素）」と伝えることで、AIは適切なHTMLタグやアクセシビリティ（ARIA属性）を考慮したコードを一瞬で生成してくれます。

あいまいな指示（NG）	正確な名前を使った指示（OK）
右上の三本線のボタン	ハンバーガーメニュー
クリックで下に広がるやつ	アコーディオン（<details>）
背景が暗くなるポップアップ	モーダルダイアログ（<dialog>）とスクリム（::backdrop）
読み込み中のぐるぐる回るやつ	スピナー（aria-busy=”true”）

「Name That UI」の利用者が語っているように、AIに「綺麗にして」「プロっぽくして」と曖昧な形容詞で頼むのをやめ、具体的なUIパターン名で指示を出せるようになることが、このツールの最大の価値です。
語彙力は、AIを正確にコントロールするための最も強力な武器となります。

眺めているだけでも楽しい、UIの奥深い世界

Name That UIの魅力は、実用性だけにとどまりません。
パラパラと辞書をめくるように眺めているだけでも、知的好奇心が刺激されます。

「このUIはこういう名前だったのか」
毎日使っているmacOSのウィンドウ左上にある赤・黄・緑のボタン。実は「Traffic Lights（Window Controls）」という正式名称があることを、このサイトで初めて知る人も多いでしょう。

「こういう名前のUIがあるのか」
「Bento Grid（弁当グリッド）」や「Masonry Layout（組積造レイアウト）」など、普段なんとなく見ている画面レイアウトにも、それぞれ確立された設計思想と名前があることに気づかされます。

「こういうUIがあったら面白そう」
多様なUIコンポーネントを一覧することで、「次のプロジェクトではToast（スナックバー）の代わりにInline Alertを使ってみよう」といった新しいインスピレーションが湧いてきます。

バイブコーディング時代の必須ツール

AIにコードを書かせる時代において、プログラミング言語の文法を暗記する重要性は下がりつつあります。
その代わり、作りたいものを言語化するための「語彙力」が、クリエイターにとって最も重要なスキルのひとつになりました。

「あのUIの名前、なんだっけ？」と迷ったときは、Name That UIを開いてみるとよさそうです。
正確な言葉を手に入れることで、あなたのAIコーディングはよりスムーズで楽しいものになるはずです。