はじめに
目的
本ドキュメントは、Web制作で使われる専門用語や略語を、企画・打ち合わせ、デザイン、開発・実装の各フェーズに分けて初心者向けにやさしく解説します。用語を正しく理解すると、チームとの会話や進行管理がスムーズになります。
対象読者
これからWeb制作に関わる方、打ち合わせで用語がわからず困っている方、ディレクターやクライアントと円滑にやり取りしたい方に向けています。専門知識は不要です。
本書の使い方
各章でフェーズごとの用語を並べ、意味と役割、実務での具体例を示します。まずは用語の“感覚”を掴み、実際の作業で確認しながら理解を深めてください。
用語を学ぶポイント
・具体例を想像して覚えると実用的です。例:「ワイヤーフレーム」はページ構成の設計図です。
・分からない用語はその場で質問しましょう。
この章では、本書の目的と使い方を説明しました。次章から各フェーズの用語解説に入ります。
Web制作の企画・打ち合わせフェーズの用語
工数
工数は、作業にかかる時間と人数の合計を指します。例えば「デザインに20人時（人×時間）が必要」という表現です。見積もりでは各作業（要件定義、デザイン、確認作業など）ごとに工数を出し、合計でプロジェクトの期間や費用を計画します。実務ではバッファ（余裕）を設けることが多く、急な仕様変更に対応しやすくなります。
リリース
リリースは、制作が完了したWebサイトを本番環境で公開することです。段階的に公開するケースもあり、まずテスト環境→ステージング→本番という流れで確認を行います。公開前に動作確認や最終チェックを行い、問題が無ければ公開します。公開後も監視を続け、必要があれば速やかに修正します。
リソース
リソースはプロジェクトに必要な人材、時間、予算、技術などの総称です。たとえば「デザイナー1名、エンジニア2名、4週間、サーバー費用」という具合に具体化します。リソースが足りないとスケジュールや品質に影響が出るため、早めに把握して調整します。
FIX（フィックス）
FIXには「決定する」「確定する」という意味と、「不具合を修正する」という意味があります。打ち合わせでは、要件やデザインを『FIXする』と表現して変更を止め、以降の作業を進めます。一方で、バグ対応で『FIXしました』と言うと修正完了を表します。文脈で意味が変わるため、どちらの意味かを明確に伝えると安心です。
Web制作のデザインフェーズの用語
ワイヤーフレーム
ワイヤーフレームはページの骨組みを示す図です。色や装飾を省いて、見出しや画像の位置、ナビゲーションの配置を決めます。家の間取り図のように、情報の置き方や優先順位を確かめるときに使います。
カンプ（完成予想図）
カンプは実際の見た目を示すデザインです。色やフォント、写真を使って完成イメージを作ります。これを基にコーダーがHTMLやCSSを組み立てます。
コーディング／HTML
デザインを動くページにする作業がコーディングです。HTMLはページの構造を作る言語で、見出しや段落、画像の置き方を記述します。デザインの意図を正しく伝えるため、カンプ通りに構造化します。
トンマナ（トーン＆マナー）
トンマナはデザインの一貫性を指します。色や余白、写真の雰囲気を揃えることでブランドらしさを出します。例として、明るい色と丸い角で親しみやすさを表現します。
ファーストビュー
ユーザーが最初に目にする画面領域です。ここで目的（商品の魅力や申し込みボタン）を明確に伝えると離脱を防げます。キャッチコピーと行動を促すボタンを置くのが基本です。
アクセシビリティ
障害を持つ人も含め誰でも使いやすくする考え方です。画像に代替テキストを付ける、色のコントラストを確保する、キーボードだけで操作できるようにするなどが含まれます。
インタラクション
ユーザーの操作に対する反応です。ボタンを押したときのアニメーションや入力のエラーメッセージなど、操作が伝わる工夫を設計します。適切なフィードバックで操作の不安を減らします。
Web制作の開発・実装フェーズの用語
サーバー
Webサイトのデータを保管し、閲覧者に配信するコンピューターです。具体例として、画像やHTMLファイルを置いておく場所をイメージしてください。共有スペース（レンタルサーバー）や専用のサーバーがあります。
ローンチ
開発が終わり、サイトを一般公開することです。公開前に動作確認や最終チェックを行い、公開日時を決めてリリースします。例：平日の夜に公開して問題が起きたら対応しやすくする、などの配慮をします。
DOM（ドキュメントオブジェクトモデル）
HTMLの構造をプログラムで扱うための仕組みです。ボタンを押したときに文字を変えたり、要素を追加したりする際に使います。JavaScriptがよく操作します。
フロントエンド／バックエンド
フロントエンドはブラウザで見える部分、デザインや動きを担当します。バックエンドはデータ処理や保存を担う裏側です。例：フォームの見た目がフロント、送信データを保存する処理がバックエンドです。
API
別のサービスとやり取りするための窓口です。地図や決済など外部機能を使うときに利用します。
デプロイ
作ったプログラムをサーバーに配置して動かす作業です。手順を自動化するとミスが減ります。
バージョン管理（Git）
コードの変更履歴を記録します。過去の状態に戻せるので安心です。
テスト
動作を確認する工程です。小さな部分を確かめるユニットテストや、実際の操作を再現するE2Eテストがあります。
SSL/TLS
通信を暗号化して安全にする技術です。URLがhttpsなら有効になっています。
以上は実装フェーズでよく使う用語です。具体例を意識すると理解が進みます。
Web制作の企画フェーズの用語
ECサイト
商品販売を目的としたネットショップのホームページです。例：洋服を売るオンラインストアや食品の定期便サイト。
ターゲット
想定する利用者のことです。年齢や趣味、生活習慣を具体的にして狙いを定めます。例：20〜30代の働く女性。
ペルソナ
代表的なユーザー像を詳しく表した架空の人物です。チームで共通理解を作るのに役立ちます。
カスタマージャーニー
ユーザーが商品を知って購入するまでの行動の流れです。接点（広告・検索・レビュー）を洗い出します。
KPI
目標達成を測る指標です。例：月間購入数、コンバージョン率、離脱率。
要件定義
サイトに必要な機能や条件を整理する作業です。決めることで後工程がスムーズになります。
サイトマップ
ページの構成図です。情報の階層を視覚化して、導線を確認します。
ワイヤーフレーム
ページの骨組みを示す図です。デザイン前に配置や優先順位を決めます。
競合調査
似たサービスの特徴や価格を調べることです。差別化ポイントを見つけます。
コンテンツ戦略
どんな情報や記事を載せるかの計画です。ユーザーの疑問に答える内容を優先します。
予算とスケジュール
費用と納期の見積もりです。現実的に設定してリスクを減らします。
承認フロー
企画やデザインを誰がどの段階で承認するか決めます。責任を明確にするため重要です。
