はじめてのWeb制作用語集：基本用語をカテゴリ別にやさしく解説

Webサイト制作に携わると、聞き慣れない専門用語に戸惑うこともあるかもしれません。
この記事では、Webデザインに関する基本用語をカテゴリ別に簡潔にまとめています。
初心者の方にもわかりやすいよう、短くシンプルに解説しました。
気になる用語があれば、ぜひ参考にしてください。

デザイン制作に関する用語

サイトマップ（ページ構成図）

Web制作におけるサイトマップとは、サイト全体のページ構成を図や表で整理した資料のことを指す。
主にExcelやPowerPointなどのツールで作成され、どのページがどこに配置されているか（親子関係や階層構造）を可視化する。
サイト全体の設計やナビゲーションの検討に役立つ。

ワイヤーフレーム

ページの構成や要素の配置を簡易的に示した設計図。主にレイアウトや導線を確認するために使われる。
基本的には画像や具体的なテキストは使用せず、矩形や記号などで表現する。

デザインカンプ

ワイヤーフレームに画像や色、フォントなどを加えて、完成イメージに近づけたデザイン案。
クライアントとデザイナー間で、デザインイメージの共有や認識のズレを防ぐために使われる。

プロトタイプ

実際の操作感を確認できる試作デザインのこと。UIやUXの検証に活用される。

トンマナ（トーン＆マナー）

デザインやコンテンツに一貫性を持たせるためのルール。文体・色・画像の雰囲気などを統一する。

ビットマップデータ

ピクセルの集まりで構成された画像。拡大すると画像が粗くなる。

ベクターデータ

点や線の情報で構成された画像。拡大しても劣化しない。

Photoshop

主にビットマップ画像の加工に使われるAdobeの画像編集ソフト。

Illustrator

ベクター形式のグラフィックを扱うAdobeのデザインソフト。

XD

UIデザインやプロトタイプ（画面遷移や動作の確認）制作に特化したAdobeのデザインツール。
共同作業にも対応し、リンクで共有してフィードバックを受けることも可能。

カラースキーム

Webデザインで使用する色の組み合わせや配色パターンのこと。

UIキット

ボタンやフォームなどのUIパーツをまとめたデザイン素材集。デザインの統一や効率化に役立つ。

ページ構成に関する用語

ヘッダー

Webページの最上部にあるエリア。ロゴやグローバルメニューが配置されることが多い。

フッター

Webページの最下部にあるエリア。著作権表記やお問い合わせリンクなどが入る。

サイドメニュー

ページの左右に設けられる補助的なナビゲーションエリアのこと。カテゴリ一覧やバナーなどが配置される。

コンテンツエリア

ページのメイン情報が表示される中央の領域。記事や商品説明などが含まれる。

ファーストビュー

Webページを開いたとき、スクロールせずに表示される最初の範囲のこと。
ユーザーの第一印象に大きく影響する。

パンくずリスト（Breadcrumb）

現在のページの位置を階層構造で示すナビゲーション。ユーザーの迷子防止に役立つ。

サイト構造・仕組みに関する用語

フロントエンド

ユーザーが実際に目にし、操作する部分。
ウェブページのデザインやボタンの動き、スマホアプリの画面などが該当する。
「クライアントサイド」とも呼ばれる。

バックエンド

フロントエンドで入力された内容をもとに、データの処理・保存・取得などを行う裏側の仕組み。
ログイン情報のチェックや、注文内容の保存といった処理を担当。
「サーバーサイド」とも呼ばれる。

コーポレートサイト

企業情報や事業内容、採用情報などを掲載する公式Webサイト。信頼性やブランディングが重視される。

プロモーションサイト

商品やサービスの魅力を伝えるための特設サイト。

ECサイト

商品をWeb上で販売・購入できるサイト。ショッピング機能が中心。

LP

Landing Page（ランディングページ）の略。
主に広告などから訪問される1ページ完結型のWebページ。
商品購入や資料請求など、特定のアクションを促すことが目的。

API

Application Programming Interface の略。
外部サービスや機能と連携するための仕組み。

コーディング・開発に関する用語

コーディング

HTMLやCSSなどを使って、デザインをWeb上で再現する作業。

HTML

HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。
Webページの構造を定義するマークアップ言語。

CSS

Cascading Style Sheet（カスケーディング・スタイル・シート）の略。
Webページの見た目やレイアウトを指定するスタイルシート言語。

Sass（サス）

CSSを効率的に書くための拡張言語。変数やネストが使える。

JavaScript

Webページに動きを加えるスクリプト言語。

jQuery

JavaScriptをより簡単に書けるようにしたライブラリ。

PHP（Hypertext Preprocessor）

サーバー側で動くプログラミング言語。データベースとの連携などに使われる。

エディタ

コードを書くためのソフト。Visual Studio Code などが代表的。

Basic認証

Webページにアクセス制限をかける簡易的なログイン認証方法。
IDとパスワードで制限されたユーザーのみ閲覧できる。

フレームワーク

開発を効率化するための枠組み。例：React、Vue.js、Laravelなど。

バージョン管理（Git）

ソースコードの変更履歴を管理する仕組み。複数人での開発や、過去の状態への復元に役立つ。

デバイス対応・ユーザー体験に関する用語

アクセシビリティ

すべてのユーザーが使いやすいWebサイトを作るための考え方や技術。

UI

User Interface（ユーザーインターフェース）の略。
ユーザーが目にする画面や操作部分のこと。見やすさ・使いやすさが重視される。

UX

User Experience（ユーザーエクスペリエンス）の略。
ユーザーがWebサイトを通じて得る体験全体。使いやすさ、ストレスのなさ、満足感などが重視される。

レスポンシブデザイン

スマホやタブレット、PCなど、さまざまな画面サイズに応じてレイアウトを自動調整する設計方法。

モバイルファースト

スマホ画面を基準にデザイン・開発を行う考え方。

UIパーツ・機能に関する用語

カラム

レイアウトにおける「列」の単位。2カラム、3カラムなど。

ホバー

マウスカーソルを要素に重ねた際に起こる視覚的変化。
例：リンクの色が変わる、ボタンが膨らむなど。

カルーセル

画像やコンテンツを横方向にスライドして切り替えるUIパーツ。

モーダルウィンドウ

画面上に重ねて表示されるポップアップ。ユーザーの操作を一時中断させ、必ず操作が必要な状態にする。

アコーディオンメニュー

クリックで開閉する縦方向のメニュー。FAQなどに使われる。

ハンバーガーメニュー

三本線のアイコンで開閉するメニュー。スマホなど画面幅の狭いデバイスでよく使われる。

サイト公開・管理に関する用語

ドメイン

Webサイトの住所にあたる文字列（例：www.example.com）。
サーバーと紐づけることで、そのWebサイトにアクセスできる。

DNS

Domain Name System の略。
ドメイン名をIPアドレスに変換する仕組み。

サーバー

Webサイトを公開するためのコンピューター。データを保管・配信する役割。

SSL

通信を暗号化する仕組み。URLが「https」になる。

FFFTP

Windows向けのFTPクライアントソフト。

WinSCP

SFTPにも対応したWindows用のファイル転送ソフト。

Cyberduck（サイバーダック）

Mac対応のFTP/SFTPクライアントソフト。MacおよびWindowsの両方で利用可能。

CDN

Content Delivery Network の略。
世界中のサーバーにコンテンツを分散配置し、表示速度を向上させる仕組み。

CMSプラグイン

CMSに機能を追加する拡張モジュール。例えばWordPressのSEO対策プラグインなど。

マーケティング・運用に関する用語

ブラウザ

Webページを表示するためのソフトウェア。例：Chrome、Safari、Firefoxなど。

検索エンジン

入力したキーワードに関連するWebページを探し表示する仕組み。
Google、Yahoo、Bingなどが代表的。

SEO（検索エンジン最適化）

Search Engine Optimization の略。
検索結果で上位表示されるための施策。
ユーザーが検索するキーワードに合った内容を提供するなどの工夫を行う。

CMS（コンテンツ管理システム）

Content Management System の略。
専門知識がなくてもWebサイトの更新・管理ができるシステム。
WordPress、Movable Type、Drupal などが代表的。

検索エンジン用サイトマップ（sitemap.xml）

検索エンジンにサイト内のページ情報を伝えるためのXMLファイル。
Googleなどの検索エンジンに送信することで、クロールの効率を高め、検索結果に反映されやすくなる。

コンバージョン（CV）

Webサイト上での成果（購入や問い合わせなど）を指す。

リスティング広告

検索結果に連動して表示される広告。Google広告など。

コンテンツマーケティング

有益なコンテンツを発信してユーザーを集め、商品やサービスの認知・購入につなげる手法。

直帰率（Bounce Rate）

訪問者が1ページだけ見て離脱する割合。ユーザーの関心度合いを測る指標。

まとめ

Web制作には専門的な用語が多く登場しますが、一つひとつの意味を理解することで業務の流れもつかみやすくなります。
本記事が用語の理解や実務へのスムーズな導入にお役立ていただければ幸いです。