WebサイトのUI用語一覧｜制作の相談で使う基本パーツと意味

「ボタンを目立たせたい」「メニューを整理したい」と思っても、UIの名前や役割が分からないと、制作会社や社内の担当者へ意図を伝えにくくなります。この記事では、Webサイトでよく使われるUI用語を、意味・使われる場面・依頼時の伝え方とあわせて紹介します。

UI（ユーザーインターフェース）とは、利用者がWebサイトやアプリを見たり操作したりするときに接する画面や仕組みのことです。用語を覚える目的は、専門家らしく話すことではありません。画面のどこを、誰にとって、どう変えたいのかを具体的に共有することです。

まず押さえたいUIの基本用語

UI用語は、画面の部品を指す言葉と、部品の振る舞いや設計の考え方を指す言葉に分けると理解しやすくなります。まずは土台になる用語を確認しましょう。

UI・UX・ユーザビリティ

• UI（ユーザーインターフェース）：利用者とサービスの接点です。Webサイトなら、文字、画像、ボタン、メニュー、入力フォームなど、画面上で見たり操作したりするものが含まれます。
• UX（ユーザーエクスペリエンス）：サービスを知る前から利用後までに、利用者が得る体験全体です。情報を探しやすいか、安心して問い合わせできたかなど、画面の外も含みます。
• ユーザビリティ：目的を達成するために、どれだけ効果的・効率的・満足できる形で使えるかを表す考え方です。見た目の好みだけでなく、迷わず操作できるかを確認します。

UIとUXの違いや関係を詳しく知りたい方は、UIとUXが一緒に語られる理由を解説した記事もご覧ください。

コンポーネント・パターン・状態

• UIコンポーネント：ボタンや入力欄、カードなど、画面を構成する再利用可能な部品です。見た目だけでなく、押したときやエラー時の動作も含めて設計します。
• UIパターン：似た課題に対して繰り返し使われる、部品の組み合わせや操作の型です。たとえば、商品を探す一覧ページで「絞り込み＋並べ替え＋商品カード」を使う形が一例です。
• 状態（ステート）：部品がその時点でどのような状態かを示します。ボタンの通常・押下・無効、フォームの入力中・エラー、メニューの開閉などが該当します。
• インタラクション：利用者の操作に対して画面が反応することです。ボタンを押す、メニューを開く、入力内容に応じてエラーを表示するといった動きです。
• アフォーダンス：形や表示から、どのように操作できるかを利用者が推測できる手がかりです。下線付きの文字がリンクに見える、立体的な形がボタンに見える、といった例があります。見た目だけに頼らず、ラベルや状態表示も合わせて使います。
• デザインシステム：色・文字・余白・部品・利用ルールをまとめ、複数ページや担当者の間で一貫したデザインを保つための仕組みです。
• レスポンシブデザイン：画面幅や利用環境に応じて、情報やレイアウトを調整する設計です。PCの画面を単純に縮小するだけでなく、スマートフォンでの読みやすさや操作のしやすさも考えます。

ナビゲーション・画面構成に関するUI用語

ナビゲーションは、利用者がサイト内の情報を探し、ページ間を移動するための仕組みです。ページが増えるほど、現在地や移動先を分かりやすく示すことが大切です。

• グローバルナビゲーション：サイト全体で共通して表示する主要メニューです。「サービス」「事例」「会社情報」など、重要なページへの入口になります。
• ローカルナビゲーション：特定のカテゴリやページ群の中で使うメニューです。サービス詳細ページ内の各項目や、同じカテゴリの一覧への移動などに使います。
• パンくずリスト：トップページから現在のページまでの階層を示すリンクの列です。利用者が現在地を把握し、上位階層へ戻る助けになります。
• タブ：関連する複数の内容を切り替えて表示する部品です。同じページ内で同じ階層の情報を切り替える場合に向いています。ページ移動のリンクをタブ風に見せる場合とは役割が異なります。
• ページネーション：長い一覧を複数ページに分け、ページ番号や「次へ」で移動させる仕組みです。利用者が全体の量や現在位置を把握できるようにします。
• ステッパー：申し込みや購入など、複数の手順を進める際に、全体の工程と現在の段階を示す部品です。「入力 → 確認 → 完了」のような流れで使われます。
• ハンバーガーメニュー：三本線のアイコンなどを押すと、ナビゲーションが開く仕組みです。スマートフォンでよく使われますが、重要な情報まで隠すと利用者が気づけない場合があります。

操作に使うUIパーツの用語

操作パーツは、利用者が選択・入力・送信などを行うための部品です。似た見た目でも役割が違うことがあるため、「何を起こす部品か」を基準に使い分けます。

• ボタン：押すことで処理や動作を実行する部品です。送信、保存、検索、メニューを開くなどに使います。次のページへ移動するだけなら、リンクとして設計するのが基本です。
• CTA（コール・トゥ・アクション）：問い合わせや資料請求など、サイト上で利用者に促したい行動です。CTAは特定のボタン部品そのものというより、行動を促す目的や導線を指します。
• テキストリンク：クリックまたはタップすると、別のページや関連情報へ移動する文字列です。色だけに頼らず、下線などリンクだと分かる見た目にします。
• テキストフィールド：名前やメールアドレスなど、利用者が文字を入力する欄です。何を入力すればよいか、必須かどうか、形式の条件などを近くに示します。
• セレクトボックス：複数の選択肢から一つを選ぶ入力部品です。選択肢が非常に多い場合や、候補を検索する必要がある場合は別の方法も検討します。
• チェックボックス：複数の選択肢をそれぞれ独立して選べる部品です。複数回答や、規約への同意確認などに使います。
• ラジオボタン：複数の選択肢から一つだけ選ぶ部品です。選択肢を一覧でき、比較しながら決める場面に向いています。
• トグル：設定のオン・オフを切り替える部品です。変更するとすぐに設定が反映される場合に使います。送信ボタンを押すまで変更が確定しない選択では、チェックボックスの方が分かりやすいことがあります。
• モーダル・ダイアログ：現在の画面の上に重ねて表示する小さな画面です。確認や重要な入力など、利用者の注意を一時的に集める場面で使います。頻繁に表示したり、閉じ方が分からなかったりすると、操作を妨げます。
• ツールチップ：アイコンや項目に補足説明を表示する小さな吹き出しです。補足情報向けであり、利用者が重要な判断をするための情報をツールチップだけに隠さないようにします。
• アコーディオン：見出しを押すと、対応する内容を開閉できる部品です。FAQなどでページの長さを抑えられます。見出しが開閉操作であること、開いているかどうかが分かることも必要です。

ボタンは処理の実行、リンクは移動という役割の違いを踏まえ、見た目だけでなくキーボード操作や状態も含めて設計します。W3Cのボタンパターンやアコーディオンパターンでは、操作や状態の伝え方が説明されています。

情報を整理して見せるUI用語

情報を見つけやすくする部品にも、それぞれ役割があります。部品を増やすこと自体を目的にせず、利用者が情報を理解したり次の操作を決めたりする助けになるかを確認しましょう。

• カード：画像・見出し・説明・リンクなどをひとまとまりにした表示です。事例や商品を一覧で比較しやすくします。カード全体がクリックできるのか、一部のリンクだけが操作対象なのかを明確にします。
• バッジ：新着、受付中、人気など、短い状態や属性を目立たせる表示です。色だけで意味を伝えず、文字でも状態を示します。
• タグ：記事や商品を分類したり、特徴を示したりする短いラベルです。分類へのリンクとして機能する場合と、単なる属性表示の場合を区別します。
• トースト通知：保存完了などを画面の端に一時表示する短い通知です。消えるまでの時間や読み上げられ方にも配慮し、重要なエラーや長い説明は画面内に残るメッセージにします。
• アラート・エラーメッセージ：注意事項や問題を利用者に伝える表示です。何が起きたかだけでなく、解決するために何をすればよいかを具体的に示します。
• ローディング表示：データ取得や処理を待っている間に、読み込み中であることを伝える表示です。待ち時間が長いときは、処理状況や再試行方法も案内します。
• スケルトン：読み込み中に、これから表示される内容の形を薄く示す表示です。画面が準備中であることを伝え、レイアウトの急な変化を抑える目的で使われます。
• 空状態（エンプティステート）：検索結果や登録データがまだないときの表示です。「結果がありません」だけで終わらせず、検索条件の見直しや最初の登録など、次にできることを案内します。

用語を制作相談で使うときのコツ

専門用語を知っていても、部品名だけを伝えると意図がずれることがあります。「タブを追加してください」だけでは、どの情報を切り替えるのか、スマートフォンではどう見せるのかが分かりません。次の三点を添えると、制作側が判断しやすくなります。

• 場所：どのページ、どの位置の話か
• 目的：利用者に何を分かりやすく、何をしてほしいのか
• 条件：PC・スマートフォンでの違い、開閉やエラーなどの状態、優先順位

依頼の前に、実際の画面のスクリーンショットへ対象箇所を印し、「現状」「困っていること」「変えたい状態」を書き添えるのも有効です。すべての仕様を決めて渡す必要はありません。目的を共有し、実装方法は制作担当者と相談しましょう。

また、UI改善では色や形を変えるだけでなく、ラベルが具体的か、操作後の結果が伝わるか、エラーから戻れるかを確認します。アクセシビリティや使いやすさの観点を含めて見直す手順は、WebサイトのUI改善チェックリストで紹介しています。

WebサイトのUI用語に関するよくある質問

UIパーツとUIコンポーネントは同じ意味ですか？

日常的な会話では、ほぼ同じ意味で使われることがあります。UIパーツは画面上の部品を広く指し、UIコンポーネントは再利用できる単位として仕様や状態まで含めて扱うときに使われる傾向があります。会社やプロジェクトによって用語の範囲が異なるため、話し合いの中で具体例を確認すると確実です。

UIデザイン用語とUX用語はどう違いますか？

UIデザイン用語は、画面の部品・見た目・操作方法に関する言葉が中心です。UX用語は、利用者が目的を達成するまでの体験や、その体験を調べて改善する方法に関する言葉を含みます。画面の改善では両方が関わるため、用語の分類だけでなく、誰のどんな課題を解決するかを確認しましょう。

最初に覚えるなら、どのUI用語ですか？

まずはボタン、リンク、ナビゲーション、フォーム、状態の五つを押さえると、サイトの主要な画面について相談しやすくなります。次に、カードやタブ、アコーディオンなど、自社サイトで実際に使っている部品の名前を覚えると、改善点を具体的に伝えられます。

まとめ：用語は、画面と目的を共有するために使う

UI用語を覚えると、Webサイトのどの部品を、どのような目的で見直したいのかを伝えやすくなります。ただし、用語だけでは改善の正解は決まりません。対象ページ、利用者の困りごと、期待する行動、端末ごとの条件を合わせて共有することが大切です。

ボタンやフォームなどの身近な部品から、実際のサイトを見ながら整理してみましょう。サイト制作やUI改善についてお悩みの方は、お問い合わせページからご相談ください。

参考：W3C WAI-ARIA Authoring Practices Guide（ボタン、アコーディオン、タブの操作パターン）

公開後に取り組む点検や改善を全体から整理したい方は、ホームページ公開後の運用・改善ガイドもご覧ください。