Webディレクターになったものの、打ち合わせや資料に出てくる専門用語に戸惑っていませんか？
というわけで今回はWebディレクター10年以上の現役筆者が、押さえておくべき専門用語を60個厳選しました。
最初は30個にしたかったのですが、あれもこれもで60個になりました。
意味や使い方も載せていますので是非参考にしてください。
筆者は制作経験が長いので、制作関連の用語が多めです。
Webサイトの種類編
コーポレートサイト
会社の「顔」となる公式サイト。企業や団体の情報を発信するために作られます。
公式サイトとか企業サイトっていうよね
会社概要、事業内容、採用情報、問い合わせページなどが含まれます。
ECサイト
商品をWeb上で販売するサイトのこと。ECはElectronic Commerce（電子商取引）の略（あまり使わない）。
ネットショップとかオンラインショップとかいうよね
カート機能や決済機能を持ち、売上や在庫管理との連携も必要です。
楽天やAmazonのようなモール型と、自社運営型（BASE・フューチャーショップ・ec-being・Shopifyなど）があります。
LP（ランディングページ）
これ、2つの意味があります
①広告用の1枚完結型ページ
商品やサービスを紹介し、問い合わせや購入へ導く“セールス用ページ”。
主に広告やSNSからの流入を想定して作られます。
よく見かける長～～いページです
なんかうっとうしいなと思いつつも、よく使われるのは、1枚なので逃げ場がないんですよね。そのまま問い合わせ・購入・登録へつなげることができます。
使い方例：集客したいから、LP作りましょか。
②最初に着地したページ
ユーザーが最初に訪れたページをいいます。
ランディング（Landing）は「着地する」という意味です。
Googleアナリティクスなど解析ツールでの「ランディングページ」はこちらの意味。
使い方例：結構この記事ランディングページになってますね。＝Google検索等からの流入が多い
本来の意味は②ですが、あまり会話では使わないかな。①は「エルピー」で②は「ランディングページ」って言い方をします。解析するの項目にあるので項目名として覚えておくとよいですよ！
キュレーションサイト
特定のテーマに関する情報をまとめて紹介するサイト。
例：グルメまとめ、子育て情報、ガジェットレビューなど。
SEOとの相性がよく、メディア運用型サイトとして成長しやすい形式です。
おまけ：Webサイトとホームページの違いわかる？
「Webサイト」は複数のページで構成されたインターネット上の情報の集合体を指します。
一方で「ホームページ」という言葉は、本来「サイトのトップページ（＝HOME）」や「入口ページ」のことを意味します。
ブラウザを開いたときに「好きなページをホーム画面にする」って設定ありますよね。そこからきています。
日常会話では混同されがちですが、サイト全体を指すときは「Webサイト」というのが正確です。
意味を知ってからホームページって言わなくなりました(∀｀*ゞ)ﾃﾍｯ
Web制作・設計編
要件定義
プロジェクトの「土台」を固める重要工程
クライアントの要望を整理し、どんな機能・ページが必要かを文書化する工程。
制作の方向性や工数、見積もりにも関わるため、最初のすり合わせが超重要です。
ヒアリングですね。会社によっては営業さんやWebプロデューサーさんが対応してくれます
あいみつ（相見積もり）
クライアントが複数の制作会社から見積もりを取ること。
価格や提案内容、納期などを比較して選定します。
ディレクター側も、競合がいる前提で提案の質を高める意識が必要です。
使い方例：あいみつとりましょか
ペルソナ
サイトやサービスのターゲット像を、年齢・性別・職業・価値観まで具体的に落とし込んだ仮想人物像。
ユーザー目線の設計やライティング、UI設計に役立ちます。
サイトマップ
Webサイト全体の構成を階層的に整理した一覧図。
ユーザー向け（HTML）と設計用（XML、もしくはExcelなど）があります。
構造が複雑なサイトでは特に重宝されます。
ディレクトリマップ
Webサイトのディレクトリ（フォルダ）構造を整理した図。
SEOや運用効率にも関わるため、公開前にきちんと設計しておくことが重要です。
タイトルタグ／ディスクリプションタグ
検索結果に表示されるページタイトルと説明文を設定するHTMLタグ。
クリック率（CTR）やSEOに影響するため、コンテンツの内容を的確に表すことが重要です。
これはサイトマップorディレクトリマップを作るときにまとめて作っておくと忘れないよ
ワイヤーフレーム
ワイヤーフレームとは、Webページの構成や要素の配置をざっくり示した設計図のこと。
デザイン前の段階で「ここに画像」「ここに見出し」など、コンテンツの流れを整理します。
デザイナーやエンジニアとの意思疎通にも欠かせません。基本色は使わず、白・黒・グレーで作ります。
ワイフレ とも言いますし｢WF｣と書くことがあります。
よくある使い方例：
このページのワイヤー、クライアントに共有済みですか？
Web制作・デザイン編
レスポンシブ
1つのHTMLで、PC・スマホ・タブレットなど複数の画面サイズに自動対応するWebデザイン手法。
画面幅に応じてレイアウトが柔軟に変化するため、追加でスマホ用サイトを用意する必要がありません。
現在はレスポンシブ対応が標準となっており、Googleのモバイルフレンドリー評価にも影響します。
使い方例：
「このページ、スマホで崩れてるからレスポンシブの調整が必要だね」
モバイルファースト
サイトを設計するときにスマホでの表示を優先的に考える手法。
現在はスマホユーザーが多いため、PCではなくモバイル画面を基準に設計するのが一般的です。
レスポンシブがモバイルファーストなのであまり会話で使わない印象。考え方として当たり前という感じです。
メインビジュアル
Webサイトのトップに配置される大きな画像やビジュアルエリアのこと。
サービスの魅力やブランドイメージを強く印象づける役割があり、ファーストビューにも含まれます。
キーヴィジュアルとも言います。
MVとも言いますが、「ミュージックビデオ」間違われることがあるのでメインヴィジュアルというようにしています。
ファーストビュー
Webページを開いたときに、スクロールせずに表示される範囲のこと。
ユーザーの第一印象を左右するため、訴求力のあるキャッチコピーやビジュアルが重要です。
これはFVともいいます。MVと同じく「FVって何？」となるのであまり略さず使うようにしています。
パララックス
スクロール時に背景と前景のスピード差で奥行きを演出する技法。
動きがあることでサイトの印象がアップしたり、飽きずに見てもらえるという利点がありますが、過度に使うと読みづらさの原因にもなるので要注意。
カルーセル
複数のバナーや画像を横スライドで切り替えて表示する仕組み。
ECやキャンペーンサイトのトップなどでよく使われます。
スライドでいいです
よくある使い方例：
このエリアはカルーセルにすることで、見やすくなると思います。
ハンバーガーメニュー
スマホ画面でよく見かける、横3本線のアイコン。「三」こんなやつ。
タップするとナビゲーションメニューが開きます。
ネーミングかわいいですよね、他にも「ケバブ」とか「ミートボール」もあります
ユーザーが迷わず操作できるように設置場所やデザインに配慮が必要です。
パンくずリスト
サイト内での現在地を階層的に表示するナビゲーション。
SEOにも効果的で、ユーザーが上位階層に戻りやすくなる利点もあります。
例：HOME ＞ 商品一覧 ＞ Tシャツ ＞ メンズ ＞ 黒
ヘッダー／フッター
ヘッダーはページ上部にあるナビゲーションやロゴ、連絡先情報など。
フッターはページ下部にあり、サイトマップや会社情報、SNSリンクなどが配置されます。
共通パーツとして、デザインや情報整理の要です。
ホバー
ユーザーがマウスを要素に“重ねた”ときに反応するアクションのこと。
ボタンの色が変わる、下線が出る、メニューが開くなど、視認性や操作性を高めます。
筆者はここにこだわりがあります。基本は透過ですが、絶対透過以外にしてもらいます。
よくある使い方例：
この（ボタンの）ホバーアクションいいですね
UI（ユーザーインターフェース）
ユーザーがWebサイトを操作するための画面やナビゲーションなどの見た目・動作のこと。
誰でも直感的に操作できる設計が求められます。
ユーザビリティともいいます。面倒なら「使い勝手」でいいです。
UX（ユーザーエクスペリエンス）
ユーザーがサイトを利用して得られる体験全体を指します。
デザイン、動線、読み込み速度、コンテンツ内容などすべてがUXに影響します。
カラム
Webページの横方向の分割単位のこと。
例：2カラム＝左にメインコンテンツ、右にサイドバーというレイアウト。
セクション
コンテンツの内容ごとに区切られた意味のあるまとまり。
例：サービス紹介・料金・FAQなど、ページの構成を考える上での基本単位です。
モックアップ
モックアップとは、完成版に近いデザインを再現した試作品のこと。
ワイヤーフレームに色や画像、フォントを反映させて、実際の見た目やUIを確認します。
クライアントへの提案や社内レビューにも活用されます。
類義語に「プロトタイプ」があります。プロトタイプのほうが進化系ですが一緒の意味で使われることもあります。
Web制作・構築編
HTML
HTMLはWebページの構造を記述するためのマークアップ言語です。
見出し・段落・画像・リンクなどの「意味」をブラウザに伝えます。
デザイナーやコーダーとやり取りする際に、基本構造を理解しておくと会話がスムーズになります。
CSS
CSSはHTMLで書かれた要素に色・フォント・レイアウトなどの装飾を適用するスタイル指定の言語。
例：文字の大きさを変更、背景色を付ける、余白を調整するなど。
コーディング
HTMLやCSS、JavaScriptなどのコードを書いて、デザインをWeb上に反映させる作業のこと。
設計通りに動くか、表示崩れがないかなども確認しながら進めます。
CMS（コンテンツマネジメントシステム）
WordPressに代表されるような、専門知識がなくてもサイトを更新できる仕組み。
ブログ記事の投稿や、画像の差し替えなどがブラウザ上で簡単に行えます。
スクラッチ
テンプレートやCMSを使わず、設計・デザイン・実装すべてを完全オーダーメイドで行う開発手法。
高い自由度と専門性が求められますが、コストや工数も大きくなりがちです。
スクラッチとCMSは対の関係と覚えておきましょう
プラグイン
CMSに機能を追加できる拡張ツール。
例：問い合わせフォームを追加、SEO最適化、セキュリティ強化など。
WordPressでは「プラグイン管理画面」から簡単に追加できます。
プラモデルの追加装備みたいなイメージです
ドメイン
「example.com」など、WebサイトのURLとなる固有のアドレス。
ブランドや事業内容を意識して選定されることが多く、SEOにも影響します。
サーバー
HTMLや画像などのWebファイルを保管し、ユーザーのリクエストに応じて配信するコンピューター。
レンタルサーバーやクラウドサーバーなど、予算や規模によって選びます。
FTP
FTP（File Transfer Protocol）は、Webサーバーとローカル環境をつなぎ、ファイルをやり取りする仕組み。
ディレクターが直接使うことは少ないですが、アップロードや更新時に知っておくと便利です。
FTPの有名なツールが「FFFTP」と知ったとき噛んだのか？と思いました
SSL
ユーザーの個人情報やパスワードを守るため、通信内容を暗号化する技術。
SSLが設定されているサイトは、URLが「https」ではじまり、鍵マークが表示されます。
別タブ
リンクをクリックしたときに、現在のページを残したまま新しいタブで表示する動作。
外部リンクやPDFファイルを開くときによく使われます。
よくある使い方例：
このリンク、別タブで開く設定にしてください
ベーシック認証
WebサイトやページにIDとパスワードで簡易的にアクセス制限をかける仕組みのこと。
公開前のテストサイトや、クローラーに見せたくない制作中のページに使用されます。
テストページにパスワードかけてますっていうことなんですが、なんでこんな名前なんだと思いましたよ。もう慣れました。
サーバー側で設定され、URLにアクセスするとログインウィンドウが表示されます。
使い方例：
テスト環境にはベーシック認証かけてあるので、IDとパスは別途共有しますね
静的ページ／動的ページ
- 静的ページ：あらかじめ決まった内容を表示するページ（例：HTMLファイル）。表示が速いが更新には作業が必要。
- 動的ページ：CMSやデータベースと連携し、表示内容が都度変化するページ（例：マイページ、検索結果等）。
デバイス
スマホ、PC、タブレットなどの端末の総称。
レスポンシブ対応ではどのデバイスでどう表示されるかをチェックすることが重要です。
アクセス解析編
GA4
Googleが提供する最新の無料アクセス解析ツール。グーグルアナリティクスの略。
従来のUA（ユニバーサルアナリティクス）に代わるサービスで、イベントベースでユーザー行動を分析できます。
ディレクターも「何ページが読まれているか」「CVがどこで発生しているか」などを把握するために最低限の知識が必要です。
無料なのでサイト制作時には必ず入れておきましょう
サーチコンソール
Google検索での表示状況を確認・改善できる無料ツール。通称「サチコ」
検索キーワード（クエリ）や表示回数、クリック率などがわかります。
サーチコンソールに登録されて初めて、Googleの検索結果に表示されます
SEO対策やサイトのインデックス状況を把握するうえで必須のツールです。
使い方例：新しい記事を書いたら…
これ、サチコ登録されてる？まだなら呼んどいて（登録しておいて）
クエリ
ユーザーがGoogleなどの検索エンジンに入力するキーワードのこと。
先ほどのサチコさんを使いながらチェックすることが多いです。
キーワードといっても問題ないです。解析してたら自然と「クエリ」といってしまう不思議。
使い方例：
このブログ「インスタ リール テンプレート」のクエリで1位とれてますよ！
パラメータ
URLの末尾に追加される文字列で、アクセス元やキャンペーン情報を追跡する目的で使われます。
計測用に使用するもので、自分で作る際はパラメータを作ってくれる無料ツールを使って作ります。
ある程度のルールがあるので使うときに学ぼう
例： ?utm_source=instagram&utm_campaign=summer_sale
使い方例：
広告経由の流入はパラメータ付きURLで区別できます
SEO
検索エンジン最適化（Search Engine Optimization）の略。
Google検索などで上位表示されるようにサイト構成・コンテンツ・タグ設定などを調整する施策です。
奥が深いのでいったん言葉だけ覚えといて
コンバージョン（CV）
サイト上での最終目標、ゴールのこと。
例：商品購入、問い合わせ完了、資料請求など。
「CVを増やす」ことが多くの施策の目的になります。
「ゴール」でいいです。なぜかサイトだとコンバージョンって使いますね。逆にサイト以外で使うとカッコつけてるみたいに聞こえる。
使い方例：
このサイトのコンバージョン（ゴール）どこに設定しますか。
使い方悪い例：
君の人生のコンバージョンはどこにある？
離脱率
特定のページを最後に、サイトから離れたユーザーの割合。
ページ単体で完結している場合は問題ないこともありますが、次のアクションにつながっていない場合は要改善です。
直帰率
サイトに訪問して1ページだけ見て離脱したユーザーの割合。
トップページの直帰率が高い場合は、導線やコンテンツに課題がある可能性があります。
PV（ページビュー）
ページが表示された回数。「ピーブイ」でも「ページビュー」でもどちらでも通じます。
1人のユーザーが同じページを複数回見た場合も、その都度カウントされます。
セッション
ユーザーがWebサイトにアクセスしてから離脱するまでの一連の行動のまとまりを表す単位。
ページを何枚見ても、一定時間内であれば1セッションとカウントされます（GA4ではデフォルトで30分）。
例：
1ユーザーが10ページ見て10分後に離脱したら、セッション数は「1」になります。
筆者は昔PVとセッションの違いが判らず苦労しました…
使い方例：
今月のセッション数は先月より増えてるけど、直帰率も上がってるので要確認ですね
インプレッション
広告やコンテンツがユーザーの画面上に表示された回数。広告用語。
クリックされなくても表示されたら1インプレッションとしてカウントされます。
エンゲージメント
ユーザーがコンテンツに対して行った反応の総称。SNSでよく使われる用語。
例：シェア、いいね、コメント など。
GA4ではエンゲージメント率として分析できます。
プロジェクト管理編
ローンチ
Webサイトやサービスを正式に公開・リリースすること。
「納品」との違いは、納品がクライアントへの提出、ローンチが一般公開を意味する点です。
使い方例：
今月末ローンチ予定なので、スケジュールは要注意です
「公開」でいいです。
FIX（フィックス）
内容やデザイン、仕様などが確定した状態を指します。
制作現場では「もう変更できない（してはいけない）」タイミングでよく使われます。
使い方例：
このワイヤー、FIXしましたのでデザイン進行お願いします
校了ともいいますが、紙の現場で使われるイメージ。「確定」より強い意味を持ってる感じがするので「FIX」って使います。
リソース
人・時間・予算など、プロジェクトに投入できるあらゆる資源のこと。
「リソースが足りない＝人的・時間的余裕がない」という意味でよく使われます。
使い方例：
今週はデザイナーのリソースが埋まっているので、来週以降になります
忙しいんだ！ということをやんわり伝えるために「ちょっと今リソース足りないですね…」と自分に使うこともあります。
レギュレーション
制作物におけるルールや基準のこと。
トンマナ（トーン＆マナー）、表記ルール、色やフォントの指定などが含まれます。
使い方例：
ロゴの使用レギュレーションはPDFで共有済みです
タスク
プロジェクトを進めるための個々の作業項目。
スケジュール管理ツール（Backlog、Trello、Notionなど）でタスクを細分化して管理します。
toB／toC
- toB（BtoB）：企業向けのサービス・ビジネス（Business to Business）
- toC（BtoC）：一般消費者向けのサービス（Business to Consumer）
ターゲットによって、デザインや導線、訴求の仕方も変わります。
まとめ
いかがでしたか。結構ありますね。
こんなにあるのかよ、と思いますが、実務をしていれば勝手に覚えますw
気を付けてほしいのは、無駄に（!?）カタカナが多く、Webに詳しくない社内の方やお客様だと伝わらない場合がありますので、かみ砕いて言えるように覚えておくとよいと思います。
そのうち、（あ、これちょっとイキって使ってしまったかも？）と気づきますのでご安心ください。
それでは、お互い頑張りましょう！
基礎から学ぶなら、ウェブ解析士の資格がおすすめ
今回ご紹介した専門用語は、Webディレクターの“基礎体力”ともいえるスキルの一部です。
特にマーケティングやデータ解析に強くなりたい方には、「ウェブ解析士」の資格取得がおすすめ。
WEBマーケティング全体を学べるうえ、社内外からの信頼も高まります。
