📔

Web 開発の画面制作のときに使う用語 113選

2023/09/22に公開

Web

用語集

tech

UI とか画面デザインを設計するときに他のメンバーと意思疎通の齟齬をなくすために、頻度問わず使う用語をまとめてみました。
参考となるスクリーンショットには Flowbite のコンポーネントを使っています。

文字関連

フォントサイズ

文字の大きさのこと

フォントウェイト

文字の太さのこと

フォントファミリー

フォントの種類のこと

フォントカラー

文字の色のこと

ボールド

文字を太くすること。フォントファミリーによっては使用できない

ライト

文字を細くすること。フォントファミリーによっては使用できない

イタリック

斜体。文字を斜めにすること。フォントファミリーによっては使用できない

ボールド

太字。文字を太くすること。フォントファミリーによっては使用できない

アンダーライン

文字の下に線を引くこと。

マーカー

マーカーペンのように文字の背景に色をつける装飾の総称。

文字高さ・行間・line-height

行間のこと。文字の上下の余白のこと。

文字詰め・カーニング

文字の間隔のこと。

セリフ体

セリフとは、文字の線の端についている飾りのこと。セリフ体とは、セリフがあるフォントのこと

サンセリフ体

セリフがないフォントのこと

明朝体

縦線が太く、横線が細い書体

ゴシック体

縦横の線の太さが同じになるようにデザインされている書体

バリアブルフォント

フォントのウェイトや幅を細かく調整できるフォントのこと

等幅フォント

全ての文字の幅が同じになっているフォントのこと

プロポーショナルフォント

文字の幅が異なるフォントのこと

画像関連

ラスター画像

ピクセルで構成された画像のこと

ベクター画像

数式で構成された画像のこと。サイズや解像度によらず画質を保つことができることも大きな特徴

透過

画像の一部または全部を透明にすること

マスク・マスキング

何らかのオブジェクトなどで覆った部分に画像効果をかけたり透過すること

クリッピング

何らかのオブジェクトなどで覆った部分を切り抜くこと

レタッチ

フォトレタッチとも。撮影した写真などの画像データを目的にあわせて加工したり、修正したりする作業。
写真の色温度をあわせたり、ホコリを除去したり、肌のシミを消したり、などの作業がある。

フィルター

画像に効果をかけること

dpi

画像の精細さのこと。1 インチ（2.54 センチ）の幅の間にどれだけのドットを表現できるかを表す単位

解像度

出力解像度、入力解像度、画像解像度などが存在し「解像度」という言葉はコンテキストによって指しているものが異なる。
よく耳にする割に難しい概念なので、詳しい解説記事を紹介させていただきます。

ピクセル

ラスター画像を構成する最小単位のこと

ディスプレイ

画像を表示するための装置のこと。モニター、スマホ、タブレットまたはサイネージやプロジェクターなどが想定される

彩度

色の鮮やかさのこと

コントラスト

色の明るさの差のこと

明度

色の明るさのこと

JPEG/JPG(ジェイペグ)

ラスター画像のファイル形式の一つ。写真などの画像を圧縮することができる。透過はできない。

PNG（ピング）

フルカラーの約 1677 万色を反映でき、無劣化で圧縮して保存することが出来る。透過ができる。
近年アニメーション(コマ送り形式)も扱える APNG が登場している。（参考: https://ics.media/entry/2441/ ）

GIF（ジフ）

256 色までの画像を扱うことができる。透過ができる。アニメーション(コマ送り形式)も扱える。軽量。

WebP（ウェッピー）

Google が開発したラスター画像のファイル形式の一つ。JPEG や PNG よりも軽量で高画質。透過もできる。サポートブラウザの拡大に伴い広く使用されつつある。アニメーション(コマ送り形式)も扱える。

SVG（エスブイジー）

ベクター画像のファイル形式の一つ。拡大・縮小しても画質が劣化しない。CSS でスタイリングできる。アニメーション(要素の表示操作)も扱える。

レイアウト関連

フローレイアウト

Web における通常レイアウト、つまり見た目の配置方法を明示的に指定していないデフォルトレイアウト挙動。
あまり用語としては登場することはないが、要素配置の基本の挙動を理解する上で重要な概念なので覚えておくと良い。

ワンカラムレイアウト

コンテンツを大きく分けて縦 1 列に並べるレイアウトのこと。スマホ向けのレイアウトによく使われる。

2 カラム・マルチカラムレイアウト

コンテンツを大きく分けて縦 2 列以上に並べるレイアウトのこと。PC 向けのレイアウトによく使われる。見出しや広告などを配置するのに適している。

グリッドレイアウト

縦横にコンテンツを配置するレイアウトのこと。要素を縦横の秩序を保って整列させるケースや、あえて崩すケースが有る。あえて崩す場合については masonry（石積みという意味）と表現することが多い。

フルスクリーンレイアウト

コンテンツを画面いっぱいに広げて表示するレイアウトのこと。

レスポンシブレイアウト

構図ではなく実装の用語となる。表示するデバイスのサイズに合わせてレイアウトを変更すること。画面幅が一定以下の場合はワンカラムレイアウト、一定以上の場合はマルチカラムレイアウトに切り替える形がよく見られる。

画面を構成する要素

セクション

文書の自立した一般的なセクション。

見出し・ヘディング

セクションのタイトルのこと。h1 〜 h6 までのタグで実装することができる。

アーティクル・記事

文書、ページ、アプリケーション、サイトなどの中で自己完結しており、個別に配信や再利用を行うことを意図した構成物。例えばブログの記事やニュース記事の内容部分などが該当する。

フォーム・画面操作関連

ボタン

ユーザーのクリック・タップを操作を促す要素。
button タグで実装することができる。

リンク

クリック・タップすると別のページに遷移する要素。
a タグで実装することができる。

テキストボックス

ユーザーがテキストを入力することができる要素。
text タイプの input タグで実装することができる。

テキストエリア

ユーザーが複数行のテキストを入力することができる要素。
textarea タグで実装することができる。

プレースホルダー

テキストボックスやテキストエリアなどの入力フォームに対して、入力する内容や例を説明する要素。
placeholder 属性で実装することができる。

ラベル

テキストボックスやチェックボックスなどの入力フォームに対して、入力する内容を説明する要素。
label タグで実装することができる。

チェックボックス

ユーザーが複数の選択肢から複数選択することができる要素。
input タグの type 属性に checkbox を指定することで実装することができる。

ラジオボタン

ユーザーが複数の選択肢から一つ選択することができる要素。
input タグの type 属性に radio を指定することで実装することができる。

プルダウン・セレクトボックス

ユーザーが複数の選択肢から一つ選択することができる要素。プルダウンリストとも呼ばれる。
select タグで実装することができる。

コンボボックス

ユーザーが複数の選択肢から一つ選択することができる要素。セレクトボックスと異なりユーザーの任意入力を受け付けることができる形の要素。
Web 非標準の要素になるため独自に実装を行う必要がある。

ファイルアップロード

ユーザーがファイルをアップロードすることができる要素。input タグの type 属性に file を指定することで実装することができる。よく見かける形のドラッグ＆ドロップなどを用いる場合は JavaScript で関連処理を実装する必要がある。

フォーム

ユーザーが入力した内容をサーバーに送信するための要素。テキストボックスやチェックボックスなどの入力フォームをまとめたもの。form タグで実装することができる。

フィールドセット

フォームの要素の一部をグループ化したもの。fieldset タグで実装することができる。

カレンダー・日付入力

ユーザーが日付を入力することができる要素。input タグの type 属性に date を指定することで実装することができる。
ただしブラウザにより挙動と見た目が異なるため、2023 年現在時点では JavaScript で独自に実装することが多い。

トグル

ユーザーが項目に対するオン・オフを切り替えることができる要素。明示的に二値の選択を行う場合に使うことが多い。
webの標準要素としては存在しておらず、チェックボックスやラジオボタンなどの見た目を調整してトグル要素として見せる形で実装することが多い。

ダイアログ

ユーザーに対して何らかのメッセージを表示する要素。dialog タグで実装することができるが、ブラウザによって見た目が異なるため、独自で div タグなどを用いて実装するケースが多い。

CSS 関連

インライン要素

フローレイアウトにおいて、文書の書字方向に従って、文の中で言葉が表示される方向に表示される要素。
つまり、左から始まり横並びになる。テキストやリンクなどが該当する。
昔はタグの種類によって要素の定義があったが、HTML5 になった際に廃止されており、現在は CSS の display プロパティでインライン要素にすることができる。後述のブロック要素についても同様。

ブロック要素

フローレイアウトにおいて、上から始まりページの下に向かう形で配置される。

Width・幅

要素の横幅。ブロック要素のみ指定可能。

Height・高さ

要素の縦幅。ブロック要素のみ指定可能。

Margin・マージン

要素の外側の余白のこと。ブロック要素のみ指定可能。

Padding・パディング

要素の内側の余白のこと。ブロック要素のみ指定可能。

Gap・ギャップ

要素の間隔のこと。フレックスボックスやグリッドレイアウトなどでよく使われる。

Position・ポジション

要素の位置関連についてよく使うものを抜粋。
詳しくは MDN のリファレンスがわかりやすいので参考にしてください。

Relative・リレーティブ

要素の位置を相対値で指定すること。
top, right, bottom, left で位置を指定することができる。

Absolute・アブソリュート

要素の位置を絶対値で指定すること。
top, right, bottom, left で位置を指定することができる。

Fixed・フィックスド

要素の位置を画面の左上を基準に絶対値で指定すること。
top, right, bottom, left で位置を指定することができる。

Sticky・スティッキー

親要素の範囲内でスクロールすると指定した画面の位置に「粘着」させることができる。
動作を伴うため、挙動について文字だけでの解説が難しいが、挙動についてはこちらの記事の解説が丁寧で詳しい。

Float・フロート

要素を左右に浮かせること。近年は要素の左右回り込みは Flex が用いられることが多いためあまり使わなくなってきている。

Clearfix・クリアフィックス

要素の浮かせた状態を解除すること。近年はあまり使わない。

Flex・フレックス

要素を 1 次元に並べるレイアウト定義。flexbox とも呼ばれる。
動作については MDN のリファレンスがわかりやすいので参考にしてください。

Grid・グリッド

要素を縦横に並べるレイアウト定義。Table と挙動が似ている。
動作については MDN のリファレンスがわかりやすいので参考にしてください。

Animation・アニメーション

CSS プロパティを変化させて要素を断続的に動かすこと。
CSS でアニメーションを実装する場合は @keyframes で要素をどのように動かすかのアニメーションの定義を行い、animation プロパティでアニメーションを付与する。

Transition・トランジション

要素の 2 つの状態間の変化を定義するためのもの。例えば標準状態とホバー状態での見た目の定義に変化をつけるなどの用途でよく使われる。
動作については MDN のリファレンスがわかりやすいので参考にしてください。

状態関連

主にユーザー操作や明示的な制限によって変化する状態を表現するためのものを記載。

Enabled・イネーブル

ユーザーが操作できる状態のこと。要するに標準状態であるためあまり用語としては使う機会がない。

Disabled・ディスエーブル

イネーブルの対義語になる。操作不能な状態のこと。ボタンなどの操作を制限する場合によく使われる。

Hover・ホバー

ユーザーが要素にマウスカーソルを重ねた状態のこと。
操作可能な要素に対してホバー時の見た目を変更したりエフェクトを出すことで、ユーザーの操作を促すことができる。

Focus・フォーカス

ユーザーが要素に対してクリック・タップなどの操作を行い、操作対象として選択された状態になっていること。
画面内のどの要素にフォーカスがあるかによってキー操作やスクロール操作の対象が変わることがある。

Visited・ビジット

a タグのみが持つ状態。ユーザーが過去に a タグの遷移先にアクセスしたことがあるかどうかを判定することができる状態のこと。

モードがある状態。つまり、システムが特定の機能の使用に制限された状態。モーダルウィンドウやモーダルダイアログなどの表現でよく使われる。
ダイアログの状態としてモーダルダイアログと表現する場合、ダイアログが閉じられるまでユーザーの他の操作を制限することができるものを指す。画面を閉じても良いかの確認などのダイアログなどでよく見かける。

Modeless・モードレス

モードがない状態。状況に応じた機能制限がない状態を指す。モーダルの対義語になる。

コンポーネント定義用語関連

アトミック(原子)

UI を構成する最小の要素のこと。ボタンやテキストボックスなどが該当する。

モレキュール（分子）

アトミックを組み合わせて作られる要素のこと。ヘッダーやフッターなどが該当する。
表現としてはあまり使わない。代わりにコンポーネントという表現を使用することが多い。

オーガニズム（有機体）

アトミックやモレキュールを組み合わせて作られる要素のこと。ラベルとテキストボックス群とボタンを組み合わせた入力フォームや、ヘッダーとコンテンツとフッターを組み合わせたものなどが該当する。
表現としてはあまり使わない。代わりにコンポーネントという表現を使用することが多い。

コンポーネント

アトミックやモレキュールを組み合わせて作られる要素のこと。

よく見かけるコンポーネントや画面要素の名称

自分の偏見などが入っているのでご意見や誤用があったらコメントいただけると幸いです。

ヘッダー

一般にサイトやセクションの上部に位置する要素。サイトのロゴやナビゲーション、検索フォームなどを配置することが多い。

ヘッダーのイメージ

フッター

一般にサイトやセクションの下部に位置する要素。サイトのコピーライトやサイトマップ、サイト内検索などを配置することが多い。

フッターのイメージ

ハンバーガーボタン

3 つの線からなるアイコンの名称。上下のバンズとそれに挟まれた具に見えることからそう呼ばれているらしい。見えるか？

これの右端のやつ

メニュー

ナビゲーションとほぼ同様だが、ハンバーガーメニューなどの形で表示することが多い。ログインや会員登録などのユーザ操作を伴うものを入れる場合により呼称を区別するケースもある。
スマホアプリのような UI になぞらえて作る場合画面下部などに表示するボタン群などを指して呼称する場合もある。

ロゴ

サイトの名称やロゴを配置する要素。

ジャンボトロン

見出しとして目立つレイアウトの画像やフォーム。ファーストビューに配置することが多い。
そのままファーストビューと呼ぶほうが多いかもしれない。

アバター・ユーザアイコン

ユーザーのアイコンを配置する要素。

カード

関連情報を纏めて表示する矩形の要素の総称。タイトルとサムネイルや詳細への導線ボタンなどを配置することが多い。

サイドバー

サイトやセクションの横に位置する要素。ナビゲーションや広告などを配置することが多い。

アイコン

絵柄や画像などで表現された要素。ユーザー操作を促すためのものや、情報を表現するためのものなどがある。

アコーディオン

ユーザーがクリック・タップすると開閉する要素。開閉することで画面のスペースを節約することができる。
Details と Summary というタグで実装することができるが、独自で実装するケースもまだよく見られる。

タブ

複数のコンテンツをタブで切り替えて表示する要素。タブの切り替えに伴ってコンテンツが切り替わることが多い。

ドロワー

操作に伴ってシュッと出てくるタイプの画面要素。

トースト

画面の上部や下部からシュッと出てくるタイプの画面要素。食パンを焼くトーストの動きになぞらえてこう呼ばれている。通知メッセージなどを配置することが多い。

通知・ノーティフィケーション

ユーザーに対して何らかの通知があることを表示する要素。

緑色の要素

通知・バナー・アラート

ユーザーに対して何らかの通知を表示する機能。サーバーメンテナンスなどの通知やボタンをあわせて設置して、ユーザーの操作を促すようなものにする場合もある。

パンくずリスト

ユーザーが現在のページの位置を把握するための要素。階層構造のサイトでよく使われる。
複数の親となる要素を持つページを表示するときに実装に悩むことがよくある。

バッジ

他の要素に付与して数字や文字を表示する要素。通知の未読数などを表示することが多い。

カルーセル

複数のコンテンツを順番に表示する要素。横並べの要素をスライドさせることで実装することが多い。

インジケータ・ステッパー

進捗状況を可視化する要素の総称。フォーム操作手順のステップ数やスクロール位置などを表示することが多い。
特に手順数が明示的に表されているものをステッパーと呼ぶ場合もある。

プログレスバー

進捗状況を可視化する要素。ファイルアップロード率などを表示するのに使われることが多い。
progress タグで実装できるが、デザインの自由度が低いため、独自に実装することが多い。

ページャー

ページを分割して表示している場合に、ページの移動を促す要素。

スケルトン

コンテンツの読み込み待ちの状態を表現する要素。実際のコンテンツの配置や表示を模した状態を表示することで、ユーザーの体感の待ち時間を軽減することができる（と言われている）。

テーブル

表組みのこと。table タグで実装できるが、レスポンシブの対応を柔軟に行うためにtable タグを用いないで表組みを作るケースもある。

リストアイテム

リストの項目のこと。li タグで実装することができる。

ツールチップ

要素にマウスを重ねたときやフォーカスしたときに、ユーザーに対してヒントを表示する要素。
特段定義や決まりがある訳では無いが吹き出し型のものが多くみられる。

バルーン

要素にマウスを重ねたときやフォーカスしたときに、ユーザーに対してヒントを表示する要素。
ツールチップよりサイズが大きいものを称する場合に使うことがある。

スピナー

ぐるぐる回るだけの要素。アフォーダンスとして待ち状態を表すものして使われることが多い。

操作・アクション類

クリック

マウスで行う対象に対する操作のこと。マウスの左ボタンをクリックすることで実行されることが多い。

タップ

タッチパネルで行う対象に対する操作のこと。スマホなどのタッチ操作可能端末で指でタッチすることで実行されることが多い。

スクロール

画面のスクロールを行う操作のこと。
マウスのホイールでの操作やタッチパネルで指を上下にスライドさせることで実行されることが多い。
画面や要素のスクロール操作に使用する。

スワイプ

タッチパネルで左右に指を滑らせることで実行する操作のこと。
横スクロール操作や、オブジェクトをスライドさせて何らかの操作を行う場合などに使われることが多い。

クリッカブル領域

ユーザーがクリック・タップすることができる領域のこと。
ボタンやリンクなどが該当する。明確な基準などは定められていないが、ユーザの利用しやすさの観点からは 40~44 ピクセル四方以上の領域を確保することが推奨されている。

ドラッグ

マウスで要素を掴んで移動させる操作のこと。

ドロップ

ドラッグした要素をドロップ先に移動させる操作のこと。

アニメーション関連

フェード

衰える、しぼむといった意味の英単語。アニメーションでは徐々に表示・非表示にすることを指す。
要素をフェードイン・フェードアウトさせるアニメーションのこと。

イージング

アニメーションの動きの加減速のこと。アニメーションの動きを表現する関数のこと。
ICS Mediaさんの記事がわかりやすいのでそちらを参照してください。
https://ics.media/entry/18730/

閲覧ソフトウェア関連

ブラウザ

Web ページを閲覧するためのソフトウェアのこと。Chrome や Safari などが該当する。
ブラウザの種類によって挙動や見た目が異なる要素が存在することはWeb開発時の留意点として覚えておく必要がある。
各ブラウザがどのような対応状況になっているかはcaniuseを参照すると良い。
https://caniuse.com/

アドレスバー

ブラウザの上部に表示される URL を入力するための領域。
スマートフォンのブラウザの場合、設定により背景色を指定できる。

タブ

ブラウザの上部に表示されるタブのこと。複数のページを開いておくことができる。

ファビコン

ブラウザのタブやブックマークなどに表示されるアイコンのこと。
近年OS・閲覧デバイスの多様化やブラウザの対応が進んだことにより、仕様が複雑化している。
SVGで作るか、ツールを使用するのがおすすめ。
https://sdesignlabo.com/web/favicon/

スクロールバー

ブラウザの右側や下側に表示されるスクロール操作を行うためのバーのこと。
OSにより仕様が異なるが、OSX(mac)や iOS などではスクロールバーが表示されない設定になっていることが多い。
ただし、Windowsの場合はデフォルトでスクロールバーが表示され、かつ横幅が存在する要素となっている。
このため、100vw幅の要素を作成した場合は必ず画面領域の横幅からはみ出すため注意が必要。

その他

ファーストビュー

ページを開いたときに画面内に最初に表示される領域。

セカンドビュー

ファーストビューの下に表示される領域。
ページ閲覧者の離脱を防ぐための構成にすることが多い。

到達率

ユーザーが画面のどの領域に到達したかを表す指標。画面の上部に配置された要素ほど到達率が高くなる傾向がある。

ヒートマップ

ユーザーの操作を記録し、どの領域にどれだけのユーザーが到達したかを可視化したもの。

アクセシビリティ

障害者や高齢者など、あらゆる人が情報にアクセスしやすい・できる状態のこと。
デジタル庁のアクセシビリティガイドブックがわかりやすいので参考にしてください。

WebGL

Web 上で 3D グラフィックスを描画するための API。WebGL を用いることで、Web 上でゲームや 3D コンテンツを実装することができる。
ブラウザでかなりインタラクティブな表現ができるが、実装には専門性が求められる。

変更履歴

解像度・dpiの項目を分割し、解像度の項目に参考を追記しました（@fkmさん、@M_Rdesignさんありがとうございました）
閲覧ソフトウェア関連の項目を追加
操作・アクション類の項目を追加
一部に説明画像を追加