はじめに
Name That UI（サイト表記は NameThatUI）は、画面上の UI 部品を自分の言葉で探すと、正式な呼び名とコーディングエージェント向けのプロンプト手がかりが返ってくるビジュアル辞書です。個人開発や Colorism のような画面実装で、「あの半透明の裏レイヤー」「縦の三点メニュー」のように見た目は分かるのに、エージェントへ渡す主語が定まらないときに効きます。
英語圏では Name That UI とスペース区切りで呼ばれることもあり、検索でもその表記で見つかることがあります。この記事では公式サイトを見たうえでの整理と、個人開発での使いどころを書きます。
何ができるか
サイト上では、見た目や位置の雑な説明から UI 要素を探せます。返ってくるのは、たとえば次のような情報です。
- 見た目に対応する一般的な UI 名称（例は次の段落）
- Web／macOS など文脈に寄った呼び方や、関連する API・属性の手がかり
- コーディングエージェント向けに貼りやすい説明・プロンプトの足場
具体例を挙げると、イメージが付きやすいと思います。
- 弁当グリッド（Bento Grid） — ダッシュボードなどで、タイルの大きさがまちまちな格子レイアウト。お弁当の仕切りのように区画が並ぶイメージです。
- ケバブメニュー（Kebab） — 縦に並んだ三点「⋮」のボタン。押すと編集・削除などの追加操作が出る、よくあるオーバーフローメニューです（横三点「⋯」はミートボールと呼ばれることが多いです）。
- スクリム（Scrim） — ダイアログやモーダルのうしろで、ページを薄暗くする半透明の層です。
「半透明の裏」「縦の三点メニュー」のような雑な言い方から、こうした呼び名に辿れるのが NameThatUI の使い方です。名称だけ知るのではなく、実装やプロンプトに落とす距離が短いのが、実装者向けの要点だと思います。
実務フィルタ
自分の場合、Colorism や個人アプリでモーダル周りを整えるとき、スクリムとオーバーレイの呼び分けを確認したいときに開きます。Cursor などへ「右上の三点メニュー」と書く代わりに、meatballs／kebab のどちらを主語にするか揃えたいときも同様です。
向いているのは、UI の呼び名をエージェントや自分のメモに揃えたいときです。配色やタイポの原則を学ぶ本の代わりにも、コンポーネントライブラリの API リファレンスの代替にも、フォントや素材カタログ探しにも向きません。
個人開発でエージェントに UI を頼むことが多いなら、用語のズレを減らす補助として触ってみる価値があります。すでに厚いデザインシステム用語集があるなら、そちらを正にして常用しなくてよいでしょう。
呼び名が揃ったあとに、画面部品の使い方や一貫性を押さえたいときは、原田秀司『UIデザイン必携』（翔泳社）が近いです。ナビゲーションやフィードバックなど、実務で迷ったときのハンドブックとして使えます。
※ 一部リンクはアフィリエイトを含みます。
関連
- Colorism v2 — 仕様駆動で作り直した話 — UI／デザイン実装の一例
- CSS レスポンシブな font-size 指定 — 実装寄りのデザイン Tips
- 学習ハブ（/learn/） — UI・実装まわりの読み物入口
※ 執筆支援に AI を使用しています。事実確認・構成の最終判断は著者が行っています。サイトの表示内容は更新により変わる場合があります。