非エンジニアがプログラマーに依頼・指示を出すとき、 用語を少し知っているだけで伝達ミスが激減します。
このページでは、実務でよく使うUI・Web用語をわかりやすくまとめています。
表示・UI系の用語
アコーディオン
クリックすると下に開閉するUI。 FAQなどによく使われる。
✅ 指示例
この部分はアコーディオン形式（クリックで開閉）にしてください
プルダウン / ドロップダウン
クリックすると選択肢が下に表示されるメニュー。
| 用語 | 説明 |
|---|---|
| プルダウン | 日本でよく使われる口語的表現 |
| ドロップダウン | 技術用語・仕様書向き表現 |
✅ 指示例
ここはドロップダウン形式にしてください
タブメニュー
クリックすると画面の内容が切り替わるもの。
✅ 指示例
この部分はタブ切り替え方式にしてください
モーダルウィンドウ
表示中は背景の操作ができなくなるポップアップ。
◆特徴
- 背景が暗くなることが多い
- 強制力がある
- 閉じるまで操作を止める
✅ 指示例
ボタンを押したらモーダル表示してください
ポップアップ
画面上に重ねて表示されるウィンドウの総称。
※ モーダルもポップアップの一種
✅ 指示例
ここは非モーダルのポップアップで大丈夫です
トグルスイッチ
ON / OFF を切り替えるスイッチUI。
✅ 指示例
通知はトグル形式のスイッチにしたいです
カルーセル / スライダー
画像やコンテンツが横にスライドするUI。
✅ 指示例：
トップにカルーセルスライダーを設置してください
パンくずリスト
現在位置を示すナビゲーション表示。
例： ホーム ＞ 商品 ＞ リンゴ
✅ 指示例
ページ上部にパンくずリストを追加したいです
動作・挙動系の用語
追従メニュー / スティッキーメニュー
スクロールしてもついてくる固定メニュー。
✅ 指示例
ヘッダーはスクロール追従（スティッキー）にしてください
フェードイン / フェードアウト
ふわっと表示 / ふわっと消える動作。
✅ 指示例
表示時はフェードインにしてください
スムーススクロール
リンククリック時にスーッと移動するスクロール。
✅ 指示例
ページ内リンクはスムーススクロールにしたいです
スクロールロック
モーダル表示中などに裏画面をスクロール不能にすること。
✅ 指示例
モーダル表示中は背景スクロールをロックしてください
ローディング表示
読み込み中に表示されるくるくるマークなど。
✅ 指示例
データ取得中はローディング表示を出してください
トースト通知
右下などに一瞬表示されて消える通知。
✅ 指示例
保存完了時はトースト通知でお願いします
フォーム・入力関係
バリデーション
入力内容のチェック処理。
✅ 指示例
メール未入力はバリデーションでエラー表示してください
画面対応関係
レスポンシブ対応
PC・スマホ・タブレットに合わせてレイアウトが変わる対応。
✅ 指示例
ここはレスポンシブ前提で設計してください
用語の違いまとめ
| 用語 | ポイント |
|---|---|
| モーダル | 背景操作できない強制ポップアップ |
| ポップアップ | 上に被さる表示の総称 |
| プルダウン | 日本語寄り表現 |
| ドロップダウン | 技術寄り表現 |
| 追従 | スクロールしてもついてくる |
| フェード | ふわっと出現・消失 |
| トグル | ON/OFF切替スイッチ |
実際に使える指示文サンプル
・この項目はアコーディオン形式でクリック開閉にしてください
・メニューはスクロール追従のスティッキーヘッダーにしてください
・ボタン押下時はモーダル表示でスクロールロックお願いします
・フォームはバリデーションとトースト通知を実装してください
・スマホではドロップダウン形式に変更してレスポンシブ対応でお願いします
