あのUI要素やコンポーネントの名前は？弁当グリッド、ケバブ、信号機、スクリム、名称や役割やコードやプロンプトが分かる -NameThatUI

Post on:2026年7月30日

sponsorsr

WebサイトやスマホアプリのUIでよく見かけるけど、これはなんて名前？役割は？というのが分かるUIデザイン用のビジュアル辞書を紹介します。

デザイナーやデベロッパーがバイブコーディングするときに使えるプロンプト、デバッグ用プロンプト、コードの解説なども分かります。

弁当グリッドとケバブは下記に、信号機はmacOSのウインドウ上部にある赤・黄・緑のコントロール、スクリムはモーダルとページを隔てる半透明の層のことです。

UI要素やコンポーネントの名称、役割、コード、プロンプトが分かる -NameThatUI

NameThatUIは先日ローンチされたばかりのサイトで、UIデザイン用のビジュアル辞書です。Webサイトやスマホアプリで使用されるUI要素の正式名称、役割、APIシンボル、そしてバイブコーディング用のAIエージェントにそのまま利用できるプロンプトも収録されています。

NameThatUI
キャプチャ画像は、ブラウザで自動翻訳したものです。

利用方法は簡単で、登録など面倒なことはありません。

さっそくいくつか見てましょう。まずはThe Three Dots、3つのドットで構成されている要素です。

ミートボール、ケバブ、ハンバーガー

3つのドットが横並びだとハンバーガー、縦並びだとケバブ、これらは主に二次的な操作をおこなうオーバーフローメニューです。3本線だとハンバーガーと呼ばれ、通常はナビゲーションメニューを開きます。「開く...」のようにラベルにある省略記号は句読点で、操作が完了する前にさらに入力が必要であることを示すものです。

The Three Dots

それぞれのUI要素の詳細な説明やバイブコーディング用のプロンプトも掲載されています。下記は、自動翻訳したプロンプトです。

適切な3点マークコントロールを使用してください。コンテキストに応じたオーバーフロー/詳細メニューには、aria-haspopup="menu" を指定した水平方向の省略記号（ミートボール）または垂直方向の省略記号（ケバブ）ボタンを使用します。ナビゲーションドロワーには、aria-controls を指定した3行のハンバーガーボタンを使用します。コマンドが完了する前にさらに入力を求める場合は、「開く…」などのコマンドラベル内に省略記号を使用します。

1	適切な3点マークコントロールを使用してください。コンテキストに応じたオーバーフロー/詳細メニューには、aria-haspopup="menu" を指定した水平方向の省略記号（ミートボール）または垂直方向の省略記号（ケバブ）ボタンを使用します。ナビゲーションドロワーには、aria-controls を指定した3行のハンバーガーボタンを使用します。コマンドが完了する前にさらに入力を求める場合は、「開く…」などのコマンドラベル内に省略記号を使用します。

Bento Gridもここ1,2年でよく見かけるようになりました。
Bento Gridは、1つの大きなタイル上に異なるサイズのタイルが混在して配置されており、日本の弁当箱の仕切りのようになっています。カードグリッドとの違いはタイルの配置で、少なくとも1つのタイルが2×2または2×1のセルを占め、すべてのタイルが同じトラックと間隔に整列しています。

弁当グリッド

Bento Gridのプロンプトは、下記の通り。

弁当グリッドを作成します。1 つの CSS グリッド (display: grid; grid-template-columns: repeat(4, 1fr); 1 つの一貫したギャップ) で、フィーチャ タイルが grid-column: span 2 / grid-row: span 2 を介して複数のセルにまたがり、すべてのタイルが同じ角の半径と不透明な背景を共有し、全体の構成が異なるサイズの区画の単一の丸みを帯びたボックスとして認識されます。

1	弁当グリッドを作成します。1 つの CSS グリッド (display: grid; grid-template-columns: repeat(4, 1fr); 1 つの一貫したギャップ) で、フィーチャタイルが grid-column: span 2 / grid-row: span 2 を介して複数のセルにまたがり、すべてのタイルが同じ角の半径と不透明な背景を共有し、全体の構成が異なるサイズの区画の単一の丸みを帯びたボックスとして認識されます。

Bento Grid

デバッグ用のプロンプトは、下記の通り。

弁当グリッド（スパンタイルを使用したCSSグリッド）のデバッグ。除外する項目：スパンがその行の残りの列を超えているためにグリッドに穴が開いている（grid-auto-flow: denseを検討してください。DOMではなく視覚的に再配置されます）。グリッドの単一のギャップではなく、タイルごとのマージンによる不均一なガター。角の半径が異なるタイルや半透明の背景を持つタイルが弁当箱のような外観を損なっている。メディアクエリの下でスパンが縮小されないため、ヒーロータイルが小さな画面で崩れる。

1	弁当グリッド（スパンタイルを使用したCSSグリッド）のデバッグ。除外する項目：スパンがその行の残りの列を超えているためにグリッドに穴が開いている（grid-auto-flow: denseを検討してください。DOMではなく視覚的に再配置されます）。グリッドの単一のギャップではなく、タイルごとのマージンによる不均一なガター。角の半径が異なるタイルや半透明の背景を持つタイルが弁当箱のような外観を損なっている。メディアクエリの下でスパンが縮小されないため、ヒーロータイルが小さな画面で崩れる。