はじめに
個人開発や Colorism のような画面実装で、エージェントに渡す UI 部品の呼び名を揃えたいときに効くビジュアル辞書です。「あの半透明の裏レイヤー」「横に並んだ重なりアバター」のように見た目は分かるのに、正式名やプロンプトの主語が定まらないことがあります。
NameThatUI は、自分の言葉で探すと、サイトが示す 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 を使用しています。事実確認・構成の最終判断は著者が行っています。サイトの表示内容は更新により変わる場合があります。