WEB用語は、使い慣れないと名称を忘れてしまったり、名称は覚えているけどデザインを忘れてしまうことがあるので…用語を調べたい時に便利なリストを作成しました。※随時、更新中。
効率よくこのページを使うために、「目次」と「ページ内検索」の使用をオススメします。
ポイント
このページでは、「WEBの用語」だけでなく「分かりやすい言葉・普段つかっている言葉」でも検索できるように作成しましたので、あなたの言葉で「ページ内検索」をしてみてください。このページの使い方
- 目次を使って、五十音で調べる
- ページ内検索を使って、知りたい用語を検索する
・Windowsの場合：[ctrl]+［F］
・Macの場合：[command（⌘）]+［F］
あ行
あ
- アコーディオン
クリックすると領域が開閉する
※左右のナビゲーション・FAQ・ご利用ガイドなどに利用する
- アニメーション
動きを作ること
い
- インジケーター
標識。現在の地点がわかる指標となるものです。
WEB制作の現場で使う機会が多いのは、サイトを読み込む際に表示させるローディング画面や、カルーセルなどです。
＜表現方法＞
・ローディング場合
どれだけローディングができているのかをローディングアニメーションで再現
・カルーセルの場合
画像枚数などが何個あるのか＆何個目なのかを分かるようにデザインで再現
- インターフェース
接点、境界面。WEBの場合は、UI・WEBサイトのことです。
＜使い方＞
・例文：インターフェースがあまりよくないですよね…
・意味：見た目や操作性が悪くて、使いにくいですよね…
う
- ウェブブラウザ｜WEBブラウザ
サイトを閲覧する際に表示するソフトウェア。
WEBブラウザには、Google Chrome・Firefox・Microsoft Edge・Internet Explorer・Safariなどがあります。
え
- エフェクト
効果
- エレメント
要素
- エーピーアイ｜API｜Application Programming Interface
アプリケーションプログラミングインターフェースのこと。WEB制作の現場でよく使われているのは、Web APIと呼ばれているもので、自社や自身で制作したものと、他社や他者が制作したコンポーネントの一部（機能）を連携するためなどに使います。
ちなみに、サイトの制作でよく使われているのは、Facebook・Twitterなど。Instagramが、オシャレで見栄えが良かったよく使っていたのですが、今は使えなくなってしまいました…。
お
- オージーピー｜OGP｜Open Graph Protcol
SNSでシェアされた際に表示される情報のことです。
WEB制作の現場では、metaで情報登録の登録をする必要があります。
クライアントへ確認する項目には、タイトル（title）・説明文（description）・OGP画像などがあります。
- オートログイン｜自動ログイン
予めID・パスワードを記憶させ、次回以降は自動でログインができることです。これがあると、ログインのフローを簡略化できるため、ユーザーにとっては便利な機能です。（IDは、ユーザー名やメールアドレスなどがあり、その辺はサイトによって異なります）
- オブジェクト
モノ、物体
か行
か
- カーニング
文字間。文字同士の間隔。文字と文字の間の空白。
- カラム
段組み
→ カラムとは｜その種類と構成はこちら
- カルーセル
複数枚の画像などがスライドし、順番に表示されるパーツのことをいいます。
小スペースに複数の情報が掲載できる点やサイトに動きを持たせることができる点が、カルーセルをサイトに設置するメリットになります。
→ カルーセルとは｜役割とレイアウト＆デザイン例
- 可読性
テキスト（文章）の読みやすさ。
WEB制作の現場でよく起こっているのが、可読性をあまり気にしないデザインです。それが考慮できていないサイトは、ブランディングも集客もできない離脱率の高いサイトとなります。サイトを作る上で重要なのは、ユーザーに対して、無意識にすらすらとテキストを読んでもらえるような、デザインやカラーにすることです。
き
- キービジュアル｜KV｜ケーブイ
サイトのメインになる画像のことです。
サイトイメージをユーザーに対して印象付ける大事な画像となるので、サイト制作する上で、かなり重要な箇所です。KVは、見る人の心に残るものをセレクトし、効果的に配置することが重要となります。
く
- クッキー｜Cookie
一時的にWEBブラウザへ個人情報を保存するための仕組みです。
サイトなどにクッキーを使う時は、GDPR（個人情報の保護）の観点から、クッキーポリシーなどの設置が必要っです。
→ 詳細はこちら
- グローバルナビゲーション
全頁共通で表示される、WEBサイトの案内をする領域のことです。PCの場合は、ページの上部（ヘッダー部分）に主要コンテンツのタイトルなどを集約して配置させる場合が多いです。
→ グローバルナビゲーションの種類はこちら
け
- ケーブイ｜KV｜キービジュアル
キービジュアルのこと
→ キービジュアルの詳細はこちら
こ
- コンポーネント
部品
さ行
さ
- サジェスト｜サジェスト機能
ユーザーへのキーワード提案
検索窓にキーワードを入力した際に、検索されやすい次の候補が自動的に表示される機能
し
- シーティーエーセクション｜CTA｜Call To Action
行動喚起のためのセクション
コンバージョン率向上のためのセクション
＜補足＞
・ホワイトペーパー請求、ホワイトペーパーダウンロード
・資料請求、資料ダウンロード
・お問い合わせ、電話
・セミナー申し込み
・会員登録
・メルマガ登録
・定期購読登録
・購入 など
- 視認性
見た瞬間の確認のしやすさ、認識のしやすさ
す
- スクロールエフェクト
スクロールに合わせてデザインや動き・表示が変化する効果
- スクロールバー
ブラウザの右と下部に付いている
スクロールすると画面位置を動かすことができるバー
・矢印：アロー
・動かせる部分：ノブ
- ステータス｜ステイタス
現在の状態・状況
- スライダー
複数枚の画像などがスライドし、順番に表示される
せ
- セクション
タイトルや文章、項目などのひとかたまりのこと。
そ
- ソリッド｜ソリッドレイアウト｜ソリッドデザイン
固定レイアウト
＜ポイント＞
画面幅によって変わることがないため、レイアウト崩れは起こらないが、画面幅を広げた時に余白ができすぎてしまう。
＜関連用語＞
→ リキッド
た行
た
- ダークモード
昨年から注目さえている「黒地に白文字」の配色。
見やすい＆目にやさしいと言われている。
- タグ
分類するための札、付箋
※表記の場合は、HTMLのタグなど
ち
- 準備中
つ
- 追従型メニュー｜フローティングメニュー
固定。画面をスクロールしても表示されたまま
※グロバルナビゲーションなどで利用する
- ツールチップ
ホバーするとポップアップ表示される機能
ユーザーがわかない補足情報などを表示させるために使う
形状（デザイン）は、吹き出しやスクエアのオブジェクトなどを使う場合が多い
て
- デッドライン
死線
これ以上を越えると、ローンチに間に合わないギリギリのライン
と
- トランジション
演出の効果、変化、移行
- ドロップダウン｜プルダウン
クリックすると、その下部にリスト表示されるリストのこと。
クリックするとリストが表示され、その中から選択できる挙動。
※入力フォームや、グロバルナビゲーションなどで利用する
- ドロワーメニュー
引き出しのように、枠外（画面の外）からスライドインするメニュー
※SPやタブレットでは主流の手法で、メニューなどで使われる。
背景に半透明のオーバーレイ（上に置く）などが多い。
な行
な
- ナレッジサイト
会社・個人のもつ知識・経験・ノウハウ・事例などの情報を蓄積し、取り纏めたサイト
会社の知見を取り纏めた社内ポータルサイトとして作成する場合が多い
＜補足＞
社内業務の効率化などに繋がる
に
- 準備中
ぬ
- ヌル｜null
何もない、からっぽ
ね
- 準備中
の
- ノーコード
コーディング不要（ソースコードを書かない）
＜関連用語＞
ローコード
は行
は
- バッチ
メールやアプリアイコンの右上に表示される数字
※例：お知らせアイコンなど
- バリデーション｜フォームバリデーション
入力チェック
フォームへ入力したものに対しての妥当性をチェックする
- ハンバーガーメニュー
二本もしくは三本線のグローバルメニューで、クリックするとメニューが表示される
- 判読性
文章のわかりやすさ
ひ
- 準備中
ふ
- ファーストビュー
サイトを表示させた時にスクロールせずに閲覧できるページ領域
- ファビコン
サイトのシンボルマーク（イメージ画像）
・PC：サイトのタブに表示、ブックマーク
・SP：ショートカット作成時に表示
- フェードイン
徐々に現れる
もしくは、画面外から画面へ移動し、表示される
- フェードアウト
徐々に消えていく
もしくは、画面から画面外へ移動し、表示されなくなる
- プルダウン｜ドロップダウン
クリックすると、その下部にリスト表示される
※入力フォームや、グロバルナビゲーションなどで利用する
- プレースホルダー
入力フォームや検索窓などに、仮で入っているテキスト
＜プレースホルダ―例＞
・検索窓の中に、最初から入っているテキスト
・入力フォームの入力欄に、最初から入っているテキスト
・テキストのカラーは、グレー
・テキストは、説明や候補などの情報
- プログレスバー
処理の進捗度を表したもの
どの程度が完了できているのか視覚的に分かる
※ダウンロードなどに利用する
- フローティングメニュー｜追従型メニュー
表示位置固定のメニュー
- フローティングボタン
表示位置固定のボタン
※「TOPに戻る」など
- プロトタイプ
試作品（デザイン・挙動・アニメーションが確認できる）
＜メリット＞
実際に完成品を使用しているような感覚を味わえる
- プロパティ
物体（ファイルやオブジェクトなど）の、属性・設定・状態・性質・特性
へ
- ページネーション｜ページング｜ページャー
長いページをページ分割（複数のページに分けて）をして、各ページをナンバリングし、該当ページへのリンクを設置したもの
ほ
- ポップアップ
表示されているページの上に、突然表示されるウィンドウ
※ページに訪れた時や、一定の時間で表示させたい時なのに利用
- ホワイトスペース
余白のこと
ま行
ま
- マイクロインタラクション
ユーザーアクション（ユーザーの操作）に対して、最小限で分かりやすいフィードバックを返すこと。
・マイクロ（微小）インタラクション（相互作用）
・閲覧者の操作に対して、小さなレスポンスをすること（挙動を付けること）
み
- 準備中
む
- 無限スクロール
大量のコンテンツを一定数ずつ表示させる手法
め
- メガメニュー｜メガドロップダウンメニュー
グローバルナビゲーションを、ドロップダウンを大きく使って表示させる手法
ホバーすると表示される
通常のグローバルメニューに比べ、情報量を多く盛り込むことが可能
も
- モーダル｜モーダルウィンドウ
表示されているページの上に、表示されるウィンドウ
ウィンドウを閉じない限り、他の操作ができない＆元画面に戻れない
- モジュール
部品
や行
や
- 準備中
ゆ
- ユーザーインターフェース｜UI
サイトの見た目、使いやすさ、優れた操作性
- ユーザーエクスペリエンス｜UX
ユーザー体験
よ
- 準備中
ら行
ら
- ライブラリ
プログラムの部品を1つにしたファイル
- ランディングページ｜LP
売上向上・会員獲得・リード獲得などを目的としたページ
＜補足＞
・広告を経由して訪問者が最初にアクセスするページ
・新商品やキャンペーンなどの集客の受け皿になるページ
り
- リキッド｜リキッドレイアウト｜リキッドデザイン
レイアウト手法（画面構成）の1つ
画面サイズ（画面幅）に合わせて、表示サイズが可変（レイアウトが変化）するWEBデザイン
＜関連用語＞
→ ソリッド
- リロード
再読み込み
短縮キー：［F5］
＜関連用語＞
スーパーリロード
キャッシュを破棄してから再読み込み
短縮キー：［Ctrl］+［F5］
る
- ルートディレクトリ
最上位・最階層のディレクトリ、フォルダ
＜関連用語＞
ドキュメントルート
- ループ
繰り返し
れ
- レスポンシブ｜レスポンシブデザイン
マルチデバイスに対応したデザイン
様々なデバイス（PC・スマートフォン・タブレットなど）に対応しているデザイン
ろ
- ローコード
最低限（一部）だけコーディングする
＜関連用語＞
ノーコード
- ログ
履歴や記録
- ローディング画面
ページを読み込むまでの時間に表示させる画面
- ローディングアニメーション
ページを読み込むまでの時間に表示させるアニメーション
・スピナー
ロード中に表示されるぐるぐる回るアニメーションは見る機会多め
・ローディングバー｜プログレスバー
ローディングしている時間にステイタス表示させるバー
3～4秒以上の場合は、閲覧者を飽きさせない＆ストレス緩和のためにもこちらがおススメ
＜関連用語＞
→ プログレスバー - ローンチ
サービスの公開日
わ行
わ
- ワードプレス
CMS（コンテンツ管理システム）
オープンソースのブログソフトウェア
・PHPで開発、データベースはMySQLを利用
・カスタマイズ可能
・プラグイン（拡張機能）あり
