トピック別用語 · 147 ガイド

インターフェース

画面上で人々が使用するボタン、メニュー、フォーム、その他の部分の名前を学びましょう。

01 / アトラス

全てのインターフェース用語

簡単な意味、例、使用時期、公式度、コードネームを含む用語を開く

  1. 01 · さらに詳細

    ARIAグリッド ARIA Grid

    ARIAグリッドは、行とセルのインタラクティブなセットです。矢印キーでフォーカスを上下左右に移動できます。

  2. 02 · さらに詳細

    ARIAフィードパターン ARIA Feed Pattern

    ARIAフィードパターンは記事のような項目が変化するストリームです。人々がそれを通過するにつれて、新しい項目が追加されたり古い項目が削除されたりします。

  3. 03 · さらに詳細

    Web通知 Web Notification

    ウェブ通知は、ブラウザやオペレーティングシステムがページ外で表示するメッセージです。ユーザーは許可を与える必要があり、メッセージはシステムのルールに従います。

  4. 04 · コア

    アイコン Icon

    アイコンは、人々がアクション、オブジェクト、状態、またはグループを認識するのに役立つ小さなシンボルです。

  5. 06 · コア

    アクセシブル名 Accessible Name

    アクセシブル名は、コントロールまたは画像に対してソフトウェアが計算するラベルです。スクリーンリーダーはそれを使って項目を識別します。

  6. 07 · さらに詳細

    アクティビティログ Activity Log

    アクティビティログは、時間順に製品のアクションを一覧表示します。各行には、誰が何を、どのアイテムに対して、いつ行ったかが記載されています。

  7. 08 · コア

    アコーディオン Accordion

    アコーディオンは、自身のコンテンツを開閉できる見出しを持つセクションを積み重ねます。

  8. 09 · コア

    アバター Avatar

    アバターとは、小さな画像、イニシャル、またはシンボルのことです。人、チーム、ボット、またはアカウントを識別するのに役立ちます。

  9. 11 · コア

    アラート Alert

    アラートは、キーボードのフォーカスを移動せずに通知される短く重要なメッセージです。ユーザーにすぐに回答を求めるものではありません。

  10. 13 · さらに詳細

    アラートダイアログ Alert Dialog

    アラートダイアログは、緊急の選択のためのモーダルダイアログです。続行する前に、ユーザーは結果を理解する必要があります。

  11. 14 · コア

    エラーサマリー Error Summary

    エラーサマリーは、フォームの上部にある短いリストです。それぞれの項目はエラーを説明し、そのフィールドへのリンクがあります。

  12. 15 · コア

    エラーステート Error State

    エラー状態は、アクションやページが失敗した場合に表示されたままになります。具体的な問題を説明し、安全に回復する方法を提供します。

  13. 17 · コア

    カード Card

    カードは、1つのテーマについて、その詳細や関連するアクションを、はっきりとまとまった形で見せるよ。

  14. 18 · さらに詳細

    カスケーダー Cascader

    カスケーダー(Cascader)は、1つずつレベルごとに選択肢を見せるよ。1つ選ぶと、それに合った次のリストが開くんだ。

  15. 19 · コア

    カラーピッカー Color Picker

    カラーピッカーは、色を選べるようにするよ。色のフィールド、色相のバー、数値、または色見本を見せることがあるよ。

  16. 20 · コア

    カルーセル Carousel

    カルーセルは、一度に1つかいくつかのパネルを見せるよ。人は矢印やドット、またはスワイプで動かせるんだ。

  17. 21 · コア

    カレンダービュー Calendar View

    カレンダービューは、スケジュールされた項目を日付や時間枠に配置します。人々は日、週、または月ごとに確認できます。

  18. 22 · コア

    カンバンボード Kanban Board

    カンバンボードは、作業が進む実際のステップを示します。カードは作業を表し、WIP(作業中の制限)は開始が多すぎるのを防ぎます。

  19. 26 · さらに詳細

    コマンドパレット Command Palette

    コマンドパレットは、キーボードで操作しやすい検索パネルです。アクションを実行したり、ページや最近のアイテムを開いたりできます。

  20. 27 · さらに詳細

    コンテキストメニュー Context Menu

    コンテキストメニューは、それを開いたオブジェクトや領域のコマンドを表示します。通常、右クリックまたはコンテキストメニューキーで開きます。

  21. 28 · コア

    コンテンツリフロー Content Reflow

    コンテンツのリフローは、コンテンツや機能を失うことなくページを狭いスペースに収めます。ほとんどの読書では双方向スクロールは必要ありません。

  22. 29 · さらに詳細

    サイズ変更ハンドル Resize Handle

    リサイズハンドルは、端や角にあるつまみのことです。これをドラッグして、パネルや入力欄、列のサイズを変えます。

  23. 31 · コア

    サイドバー ナビゲーション Sidebar Navigation

    サイドバーナビゲーションは、名前付きリンクを持ち、開いたままにすることも折りたたむこともできるサイドエリアです。製品内の関連する場所をグループ化することが多いです。

  24. 32 · コア

    サイトフッター Site Footer

    サイトのフッターは、ウェブサイトの一番下にあるまとまりです。重要度の低いリンクや法的な詳細、連絡先、信頼できる情報を置きます。

  25. 33 · コア

    サイトヘッダー Site Header

    サイトのヘッダーは、サイトの一番上にブランド名やメインのメニュー、アカウント、サイト全体のツールをまとめた場所です。

  26. 34 · コア

    サインインフォーム Sign-In Form

    ログインのためのアカウント情報を集めるフォームです。アカウントの復旧、パスワードマネージャー、分かりやすいエラー、そして安全な送信に対応しなければなりません。

  27. 36 · コア

    スイッチ Switch

    スイッチは、1つの設定をオンまたはオフにします。たいていは切り替えるとすぐに反映されます。

  28. 37 · コア

    スキップリンク Skip Link

    スキップリンクは、キーボードを使う人が同じメニューを何度も飛ばせるようにします。フォーカスをメインの内容や大事な場所へ直接移動させます。

  29. 38 · さらに詳細

    スクリム Scrim

    スクリムは、ポップアップの後ろにある、少しだけ暗い透明の幕です。これがあることで下のページは見えなくなり、ポップアップが際立ちます。

  30. 39 · コア

    ステータスメッセージ Status Message

    ステータスメッセージは、ダイアログを開いたりフォーカスを奪ったりすることなく、結果、進行状況、または待機を報告します。

  31. 40 · コア

    ステップス Steps

    ステップは短いプロセスにおけるその人の位置を示します。この過程には決まった順序と終わりがあります。

  32. 41 · コア

    スピナー Spinner

    完了するまでの割合が分からない時、スピナーはクルクル回って作業中であることを伝えます。

  33. 42 · さらに詳細

    スピンボタン Spinbutton

    スピンボタンは、セット範囲から1つの値を選択するコントロールのARIA名です。通常、ユーザーは値を入力するか、増減させることができます。数値ステッパーがその一例です。

  34. 43 · コア

    スライダー Slider

    スライダーは、バーの上のつまみを動かして、1つの値や範囲を選びます。

  35. 45 · コア

    セマンティックHTML Semantic HTML

    セマンティックHTMLとは、見た目だけでなく、その要素が持つ意味や機能に基づいてHTML要素を選ぶことを意味します。CSSがなくてもページは構造や組み込みの動作を保持します。

  36. 46 · コア

    ソーシャルプルーフ Social Proof

    ソーシャルプルーフとは、人々が確認できる証拠です。それは、関連する人々や団体が製品を使用、信頼、または評価していることを示します。

  37. 47 · コア

    ターゲットサイズ Target Size

    ターゲットサイズとは、人がコントロールを使用するためにクリックまたはタップできる全範囲のことです。目に見えるアイコンより大きい場合があります。

  38. 48 · コア

    タイムライン Timeline

    タイムラインは、イベントや状態、目標を、1つの線に沿って時間の順番に並べます。

  39. 49 · コア

    タグ Tag

    タグは通常クリックできない短いラベルです。アイテムをグループ化するか、安定したステータスを示します。タグはデザインパターンであり、Web標準ではありません。

  40. 50 · コア

    タブ Tabs

    タブはラベルを使って、1つの共有パネル内のコンテンツを切り替えます。メインタスクは開いたままです。

  41. 51 · コア

    チェックボックス Checkbox

    チェックボックスは、四角の中をチェックしたり外したりできるよ。それぞれの選択肢は単独で選ぶことができるんだ。

  42. 52 · コア

    チップ Chip

    チップは、入力、フィルター、選択、または取り外し可能な項目を表す、小さなインタラクティブなアイテムです。その正確な動作は明確でなければなりません。

  43. 53 · さらに詳細

    チャート Chart

    チャートはデータを絵にするよ。比べたり、傾向を見せたり、範囲を見せたり、つながりを示したりできるんだ。

  44. 54 · コア

    チャットUI Chat UI

    チャットUIは、メッセージ、送信者の名前、入力ボックス、送信状態、そして添付ファイルをまとめるよ。エラーの直し方も見せられるんだ。

  45. 55 · コア

    ツールチップ Tooltip

    ツールチップは、コントロールについての短いメモです。マウスを乗せたり、キーボードでフォーカスを合わせたりすると開きます。ボタンのように使うことはできません。

  46. 56 · さらに詳細

    ツールバー Toolbar

    ツールバーは、人々がよく使うコントロールの名前付きグループです。Tabキーでグループに一度入り、その後は矢印キーで内部を移動します。

  47. 57 · さらに詳細

    ツリーグリッド Treegrid

    ツリーグリッドは、子行を持つことができる行を備えたインタラクティブな表です。セルが列に揃ったまま、行レベルを開くことができます。

  48. 58 · さらに詳細

    ツリーセレクト Tree Select

    ツリーセレクトは、開くことができるツリーの中に、階層になった選択肢を表示します。1つだけ、または複数選ぶこともできます。

  49. 59 · コア

    ツリービュー Tree View

    ツリービューは、階層のあるリストです。親の行を開いたり閉じたりして、中の子アイテムを表示します。

  50. 61 · さらに詳細

    データグリッド Data Grid

    データグリッドは、アプリみたいな表です。たくさんのデータを並べ替えたり、選んだり、編集したりできます。

  51. 62 · コア

    テキストエリア Textarea

    テキストエリアは、複数行の文章を打ち込める箱です。大きさを固定することも、変えられるようにすることもできます。

  52. 64 · コア

    テキスト選択 Text Selection

    テキスト選択はマークされたテキスト範囲です。人々はテキストをコピー、置換、メモ、または編集するために選択します。

  53. 65 · コア

    トースト通知 Toast

    トーストは短い状態のメッセージです。ページをブロックせず、たいていは時間が経てば自動的に消えます。

  54. 66 · さらに詳細

    トグルグループ Toggle Group

    オンかオフにできるボタンの、ラベルの付いたグループです。一つ、あるいは複数の選択肢を押したままにできます。

  55. 67 · コア

    トップに戻る Back to Top

    トップに戻るは長いページのショートカット。表示とフォーカスを開始付近に戻す。

  56. 68 · さらに詳細

    ドロップダウン&コンテキストメニュー — ラーニングバンドル Dropdown & Context Menu — Learning Bundle

    この学習バンドルは、開き方によってメニューを比較します。ドロップダウンはコントロールから開きます。コンテキストメニューは1つのオブジェクトに属し、しばしばポインタで開きます。このバンドルは、標準的なメニュー用語の1つではありません。

  57. 69 · コア

    ドロップダウンメニュー Dropdown Menu

    ドロップダウンメニューは、ボタンから開き、ボタンの横に表示される短命のコマンドメニューです。その通常のセマンティックパターンは、メニューボタンとメニューの組み合わせです。

  58. 71 · コア

    ナビゲーションレール Navigation Rail

    ナビゲーションレールは、画面の端に沿った主要な場所の短い縦リストです。これは一般的なデザインパターンであり、ウェブ標準ではありません。

  59. 72 · コア

    バッジ Badge

    バッジは、他のアイテムに付けられる小さく、クリックできないマークです。これはカウント、状態、または短い信号を示すもので、ウェブ標準ではなくデザインパターンです。

  60. 73 · さらに詳細

    バッジ、チップ&タグ — 学習バンドル Badge, Chip & Tag — Learning Bundle

    この学習バンドルは、デザインシステムによって異なる3つのラベルを比較します。バッジはしばしばステータスやカウントを表示します。タグはコンテンツをグループに分類します。チップはインタラクティブである場合があります。このバンドルは、標準的なコンポーネント用語の1つではありません。

  61. 74 · コア

    バナーマーク Banner Landmark

    バナーランドマークは、ウェブサイト全体のメインヘッダー領域です。広い告知用ストリップもバナーと呼ばれることがありますが、これは異なるデザインパターンです。

  62. 75 · コア

    バルクアクション Bulk Actions

    バルクアクションは、多くの項目を選択し、選択したセット全体に対して1つのアクションを実行できるようにします。

  63. 76 · コア

    パンくずリスト Breadcrumb

    パンくずリストは、今見ているページと、その上の親ページへのリンクの道しるべだよ。

  64. 78 · コア

    ヒーローセクション Hero Section

    hero sectionは、ページの一番最初に見えるメインの場所です。そのページの魅力、誰のためのものか、証拠、そして次にするべきことをすぐに伝えます。

  65. 81 · コア

    フィルター Filter

    filterは、選んだ条件に合うものだけを表示する仕組みです。元のデータを書き換えません。

  66. 82 · コア

    フォーカス管理 Focus Management

    ページが変更された後、フォーカス管理はキーボードのアクティブポイントを移動させます。また、一時的なサーフェスが閉じたときにフォーカスを戻します。

  67. 83 · コア

    フォーカス順序 Focus Order

    フォーカス順序は、ページを通してキーボードフォーカスがたどる経路です。読み順やタスク順と一致する必要があります。

  68. 84 · コア

    フォームの検証 Form Validation

    フォーム検証では、規則とメッセージを使用して、欠落または間違った回答を見つけ、防止し、説明します。

  69. 85 · コア

    フォームフィールド Form Field

    入力欄の一式です。見えるラベル、コントロール、必要ならヘルプ、チェックの状態、そして対応するエラーメッセージがあります。

  70. 86 · コア

    フォームラベル Form Label

    Form Labelは、その入力欄に何を書けばいいかを伝えます。コードで、対応する入力欄としっかり結びつけます。

  71. 87 · コア

    ページネーション Pagination

    ページネーションはコレクションを番号付きページに分割し、どのページが開かれているかを表示します。

  72. 88 · コア

    ポインター&カーソル Pointer & Cursor

    ポインタやカーソルは、画面上でポインティングデバイスがどこにあるかを示すよ。その形を見れば、選択、入力、ドラッグ、サイズ変更、待機、不可、のどれかわかるよ。

  73. 89 · コア

    ボタン Button

    ボタンは、今見ている画面で何かを起こすために押すスイッチだよ。

  74. 90 · コア

    ポップオーバー Popover

    ポップオーバーは、開いたコントロールにくっついた小さなパネルだよ。ページをブロックせずに、まとまったコンテンツやアクションを置けるよ。

  75. 91 · さらに詳細

    ボトムシート Bottom Sheet

    ボトムシートは、タップしやすいパネルだよ。画面の下からニュッと上がってきて、決まった高さで止まることもあるよ。

  76. 92 · さらに詳細

    ホバーカード Hover Card

    hover cardは、ちょっとした詳しいプレビューです。参照にマウスを乗せたり選んだりしたときに開き、ページを塞ぎません。

  77. 94 · コア

    メーター Meter

    メーターは、既知の範囲内で1つの測定値を表示します。また、低値、高値、最適範囲を示すこともできます。

  78. 95 · コア

    メディアプレーヤー Media Player

    メディアプレーヤーは、音声や動画を操作するためのボタンのセットだよ。再生、進行、音量、字幕などの再生の選択肢が含まれているよ。

  79. 96 · コア

    メニュー Menu

    コマンドメニューは、特別なキーボードフォーカスルールを持つ一連のアクションまたは選択肢です。通常、ボタンや他のコマンド領域から開きます。

  80. 98 · さらに詳細

    メニューバー Menubar

    メニューバーは、常に表示されるメニューで、多くの場合、1 行の水平に並んでいます。これらの項目は、アプリスタイルのキーボード規則で、コマンドやサブメニューを開きます。

  81. 99 · さらに詳細

    メニューボタン Menu Button

    メニューボタンは、操作や選択肢のリストを開きます。メニューが開いているかどうかをソフトウェアに伝えます。

  82. 100 · コア

    メンバー管理 Member Management

    メンバー管理は、許可された管理者が人々を招待したり、ステータスを確認したり、役割を変更したり、アクセスを削除したりする場所です。

  83. 101 · コア

    モーダルダイアログ Modal Dialog

    モーダルダイアログは、集中するためのウインドウだよ。誰かが閉じるか完了するまで、今の画面をブロックするよ。

  84. 102 · コア

    よくある質問 FAQ

    FAQは、人々が決定を下す前や助けを求める前によく尋ねる質問を集めます。回答は、そうした人々が知っている言葉や状況を使います。

  85. 103 · さらに詳細

    ライトボックス Lightbox

    ライトボックスは、メディアをもっと大きな画面で開いて、その周りのページを暗くするよ。

  86. 104 · さらに詳細

    ライブリージョン Live Region

    ライブリージョンは、重要なページテキストが変更されたときに支援技術に通知します。フォーカスを移動させずに更新を発表できます。

  87. 106 · コア

    ランドマーク Landmark

    ランドマークはページの主要な領域です。支援技術は、人々がその領域に直接ジャンプできるようにします。

  88. 107 · コア

    リスト List

    リストは、関連する項目を見やすく、使いやすい順番で並べたものだよ。

  89. 108 · さらに詳細

    リストボックス Listbox

    リストボックスは選択肢のカスタムリストです。どの選択肢がアクティブか、矢印キーでリストをどう移動するかを管理します。

  90. 109 · コア

    リンク Link

    リンクは、別のページ、ファイル、場所を開くための文字やメディアだよ。

  91. 111 · コア

    引き出し Drawer

    drawerは、画面の端からスライドして現れます。その後ろにあるページの一部も見えたままです。

  92. 112 · コア

    引用 Quote

    引用は、誰かの言葉をそのまま伝え、その言葉がどこから来たのかをはっきり示します。

  93. 113 · コア

    価格表 Pricing Table

    料金表は、比較しやすいように、プラン、料金、制限、機能、購入条件を整理するよ。

  94. 114 · コア

    画像 Image

    画像はコンテンツ内の写真です。目的に応じたサイズ、読み込み、トリミング、代替テキストのルールが必要です。

  95. 115 · コア

    開示 Disclosure

    開示要素は、関連するセクションを表示または非表示にするボタンです。また、ソフトウェアにそのセクションが開いているかどうかを知らせます。

  96. 116 · さらに詳細

    強制カラー モード Forced Colors Mode

    強制カラー モードは、多くのページカラーの代わりにユーザーが選択したシステムパレットを使用します。これにより、コントロールやテキストを区別しやすくすることができます。

  97. 117 · コア

    区切り Separator

    セパレーターは、部分間の実際の区切りを示すこともできる目に見える線です。人々がフォーカスして移動できる場合、それは調整可能なスプリッターになります。

  98. 118 · コア

    区切り線 Divider

    dividerは、グループ、コントロール、トピックの境目となる線です。目で見える線もあれば、プログラム用の線もあります。

  99. 119 · コア

    空、エラー&成功状態 — 学習バンドル Empty, Error & Success State — Learning Bundle

    この学習バンドルは、3つの異なるアプリ状態をカバーします。Emptyはまだコンテンツがないことを意味します。Errorは何かが失敗したことを意味します。Successは完了したことを確認します。それぞれに独自のメッセージと次のステップが必要です。このバンドルは、標準的な状態用語ではありません。

  100. 120 · コア

    空の状態 Empty State

    リストやワークスペースに現在コンテンツがない場合、空の状態が表示されます。それがなぜかを説明し、有用な次のステップを示します。

  101. 122 · コア

    権限マトリックス Permission Matrix

    権限マトリックスは、選択した領域でどの役割が各アクションを実行できるかを示します。アクセスルールの比較が容易になります。

  102. 123 · コア

    見出しの階層 Heading Hierarchy

    見出し階層は、ページセクションがどのように組み合わさっているかを示すために見出しレベルを使用します。

  103. 125 · コア

    行動喚起 Call to Action

    コールトゥアクションは、次にしてほしい便利な行動へ誘う、はっきりした案内だよ。

  104. 126 · コア

    骨格 Skeleton

    スケルトンは、これから表示される内容と同じ形をした、シンプルなプレースホルダー(仮の枠)です。

  105. 127 · コア

    時間ピッカー Time Picker

    時刻ピッカーは、現地時刻を入力または選択するためのコントロールです。そのステップサイズと現地表示形式は明確である必要があります。

  106. 128 · コア

    進行バー Progressbar

    進捗バーは、時間制のタスクがどれだけ完了したかを示します。人々はそれを読むことはできますが、直接制御することはできません。

  107. 129 · コア

    進行状況インジケーター Progress Indicator

    進行状況インジケータは、作業が進んでいることを示すよ。バーやリングは分かっている進行状況を示すよ。スピナーは、どれくらい待つ必要があるか分からないことを意味するよ。

  108. 131 · さらに詳細

    数値ステッパー(視覚パターン) Numeric Stepper (Visual Pattern)

    Numeric Stepper は、数字が入力できて、足したり引いたりするコントロールがついたものだよ。ネイティブの number input や、ARIA spinbutton のセマンティクスを使うことがあるよ。プラスボタンとマイナスボタンだけじゃ、そのセマンティクスは作れないよ。

  109. 132 · コア

    成功の状態 Success State

    成功状態は、アクションが完了したことを確認します。それは永続的な結果と役立つ次のステップを表示します。

  110. 133 · コア

    設定ページ Settings Page

    設定ページには、アプリの動作をタスク全体で変更する選択肢が含まれています。適切なデフォルト設定は、ほとんどの人がすぐに開始できるようにします。

  111. 134 · コア

    説明リスト Description List

    Description Listは、名前とその値や説明をセットにします。短く、読むだけの事実を伝えるのに適しています。

  112. 135 · コア

    選択 Select

    セレクトは、リストを開いて、そこから1つ選ぶためのものです。

  113. 136 · さらに詳細

    挿入点キャレット Insertion Caret

    挿入キャレットは、編集可能なテキスト内で点滅する線です。次に入力または貼り付けされる文字の位置を示します。

  114. 137 · コア

    代替テキスト Alternative Text

    代替テキストは、誰かが画像を見られない場合に、その画像の有用な意味を説明します。それはそのページ上の画像の役割に一致する必要があります。

  115. 138 · コア

    統計量 Statistic

    統計は1つの数字を際立たせます。そのラベル、単位、時間の範囲、そして前後の話で数字の意味を説明します。

  116. 141 · コア

    日付ピッカー Date Picker

    日付ピッカーは、カレンダー上の日を入力したり選択したりするためのコントロールです。時刻を選ぶことはできません。

  117. 142 · コア

    表 Table

    表は、関連する情報をラベルのついた行と列に並べます。たいていは読み取り専用か、簡単な操作しかありません。

  118. 143 · コア

    評価 Rating

    評価は、決まった基準にそって意見を示します。星マーク、数字、または名前のついたレベルなどを使います。

  119. 146 · コア

    保存されたビュー Saved View

    保存されたビューは、リストがどのようにフィルタリング、並べ替え、表示されるかを記憶するので、同じ便利なビューを再度開くことができます。