vocabulary

デザイン用語集

デザインや UI に関する逆引き辞典です。曖昧な概念の説明から、正確で合意された用語を見つけ、互いに置き換えられそうに見えても異なる用語の違いを理解することを目的としています。

index.how/to/articulate にある用語です。「デザイナーが、目の前にあるものを理解しているときに使う言葉」です。

信頼できる情報源

用語と定義の正式な一覧は、このファイルと同じ場所にあります。

vocabulary.md

定義は、必ずそこから正確な内容を取得してください。そこにあるものが正式な内容です。同じ場所にある terms-index.md は、すべての用語名をカテゴリ別にまとめた一覧です。探している言葉がまだわからないときに、素早く確認できます。インデックスと vocabulary.md の内容が食い違う場合は、vocabulary.md を優先してください。

使い方

逆引き（主な使い方 —「〜を表す言葉は何ですか？」）

1. ユーザーによる、概念についての大まかな説明を読みます。
2. terms-index.md を見て候補となる用語を探し、カテゴリで絞り込みます（説明からカテゴリがわかることがよくあります。文字間の間隔 → Typography、ページ上の何もない領域 → Layout、要素に付随するラベル → Components）。
3. vocabulary.md を開き、該当する定義を読みます。
4. 用語とその定義に加え、定義で挙げられている対比用語も必ず回答します。単語だけでなく、違いもユーザーが理解できるようにします。

用語の意味を調べる（「X とはどういう意味ですか／この使い方で合っていますか？」）

vocabulary.md で用語を見つけ、定義を伝えます。さらに、混同しやすい最も近い用語も示し、意図した用語が合っているか確認できるようにします。

違いを明確にする（「これはバッジですか、タグですか？」）

両方の定義を確認し、違いを明確に説明します。vocabulary.md には違いを示すために書かれた定義が多くあります。その箇所を引用してください。

正確な用語の使用を促す

コピー、仕様書、PR の説明、コミットメッセージをレビューするときは、曖昧な表現を、該当する正確な用語に置き換えます（「文字間の間隔」→「トラッキング」、「何もないスペースを広げる」→「ネガティブスペースを広げる」）。平易な表現のほうが明確な場合は、専門用語を無理に使わないでください。目指すのは正確さであり、専門用語を詰め込むことではありません。

違いを明確にしたい類義語に近い用語

次のペアは、片方を間違えて使いがちなものです。いずれかに関する質問があれば、違いも先回りして説明してください。

• カーニング vs トラッキング — カーニングは特定の 2 文字間の調整です。トラッキングはテキストの一続きの範囲全体に均等に適用されます。
• バッジ vs タグ — バッジは要素に付随する情報表示です。タグは単独で存在し、選択または削除できます。
• ツールチップ vs ポップオーバー — ツールチップにはインタラクティブなコンテンツを含められません。ポップオーバーには含められます。
• 不透明度 vs 表示状態 — 不透明度が 0 でも領域は占有され、ポインターイベントを受け取ります。非表示の状態では領域を占有したまま、操作はできなくなります。
• イーズイン vs イーズアウト — 画面に入ってくる要素にはイーズアウト、画面から出ていく要素にはイーズインを使います。
• モーダル vs シート vs ドロワー — 操作を中断するオーバーレイ、画面の端からスライドするパネル、下から引き上げるパネルの違いです。
• ボイス vs トーン — ボイスは一貫した個性です。トーンは状況に応じて変化します。
• クロマ vs 彩度 — クロマは、知覚的な正確さを重視した OKLCH における彩度に相当します。
• WCAG vs APCA — WCAG は広く定着しているコントラスト基準です。APCA はフォントサイズとウェイトを考慮する新しいモデルです。
• 変数 vs トークン — 変数は名前付きの値です。トークンは、デザインツールとコードの両方から参照できるデザイン上の決定事項です。

カテゴリーの概要

terms-index.md の該当箇所にすぐ移動するには、以下を使ってください。

カテゴリー	内容
タイポグラフィ	テキストの組み方、間隔、読みやすさ
色	色の定義、混色、適用方法
アイコン	アイコンの描画とバランス
レイアウト	ページの空間と構造の整理方法
インタラクション	入力に対する要素の反応
モーション	要素の動きとトランジション
アクセシビリティ	すべての人が使えるインターフェース
情報アーキテクチャ	コンテンツの構成と見つけ方
コピーライティング	言葉による案内と安心感の提供
ツール	デザインの作成と共有
分析	デザイン上の判断の測定
コンポーネント	インターフェースを構成する基本要素

例

用語の逆引き

ユーザー：「特定の2文字の間にあって、手作業で調整する小さな隙間は何と呼びますか？」

vocabulary.md の「タイポグラフィ」を読んで、次のように回答します。

それは カーニング です。特定の2文字間のスペースを手動で調整することです。 トラッキング と混同しないでください。こちらは単語やブロック全体に 均一に適用される文字間隔です。

用語の使い分け

ユーザー：「この小さな『New』というラベルは、バッジとタグのどちらにすべきですか？」

別の要素に付属し、単に情報を示すだけなら、バッジ です。 しかし、「New」のような語やステータスを示すようになると、タグ のように 振る舞うようになります。独立していて、選択や削除が可能な場合もあり、 その扱いが必要です。この2つは同じものではありません。

レビューでの正確な用語の使用

仕様：「行が詰まりすぎないように、少しスペースを追加する。」

用語は 行送り です。行間の垂直方向のスペースを指します。 トラッキング（水平方向の文字間隔）や ギャップ（flex／gridの子要素間の スペース）と混同しないよう、明確に名前を挙げるとよいでしょう。

ガイドライン

• 言い換えるのではなく、vocabulary.md から定義を引用してください。表現には 意図があります。
• 対になる用語がある場合は、必ずそれも示してください。この用語集の価値は 個々の語だけでなく、語と語の境界にあります。
• vocabulary.md の表記に合わせてください（「centre」のようなイギリス英語の 綴りが使われています）。
• 用語を作り出さないでください。該当する用語がない場合は、その旨を伝え、 専門用語を新たに作らず、概念を平易に説明してください。