更新日：2025.03.25
Web制作の過程では、さまざまな専門用語が使われています。
きちんと理解せずに、なんとなく使っている、という方も多いのではないでしょうか。
用語の意味をきちんと覚えなくても業務ができる、と思う方もいるでしょう。
しかし、間違えたままで用語を使うと、相手に意図を正しく伝えることができません。
ましてや、Web制作に必要なやりとりにも齟齬が発生し、イメージとおりのサイトに仕上がらないというリスクも出てきます。今回はWebデザイン用語を中心に、Web制作に携わる方がよく使う用語をご紹介します。
すでに知っている用語でも、間違った認識で使用してしまっている場合がありますので、ぜひチェックしましょう。
Webコンテンツ制作を依頼するうえで重要なこと
まずは、Webサイト制作を依頼する前に準備しておきたいことを確認していきましょう。
制作の目的を明確にする
制作依頼の段階で特に重要なことは、Webサイトを制作する目的です。
その根本となるきっかけを明らかにし、確認しておくことが大切です。
具体的な情報の共有
大前提として、Webサイトは商品のように「発注さえすればイメージどおりの完成品が届く」というわけではありません。
Webサイトを構成する要素を決めるために、制作会社との情報共有が必要になります。
Webサイトリリース後の動き
Webサイトは作ってリリースしたら終わり、というものではありません。
リリース後は、分析 → ターゲットやコンテンツの見直し → 改善 を繰り返し、最適化する必要があります。
また、Webサイト内に情報や機能を詰め込みすぎると、のちの対応工数が増える原因にもなります。真に必要な情報や機能を、しっかりと検討しましょう。
Webサイト・デザイン用語
ここからは、Web制作でよく使われる用語を、具体的な意味と合わせて紹介します。
すでに知っているという方も、間違った認識をしていないか、もう一度確認しましょう。
Webサイトの種類
コーポレートサイト
その企業についての情報を発信するWebサイトのことをいいます。
例えば、当社「コクー株式会社」のWebサイトは、所属する社員（人財）と会社が掲げるミッションをメインコンテンツとした、コーポレートサイトです。
企業概要や事業内容はもちろん、セミナー情報や社内活動情報などの様々なニュースも掲載しています。
プロモーションサイト
プロモーションとは、販売促進を意味します。
そして、特定の製品やサービスのアピール、イベントの告知などに使うWebサイトのことをいいます。
コーポレートサイトに比べると、紹介する情報の範囲が狭くなります。
下記のような目的に合わせ、ターゲットとなるユーザー層を絞って制作します。
ECサイト
ECサイトとは、インターネット上で商品やサービスを販売するWebサイトのことを指します。
また、ショッピングサイト、オンラインストアサイトとも呼ばれ、多くのページで構成されているのが特徴です。
ECサイトを制作する目的としては、以下のようなことが挙げられます。
LP（ランディングページ）
LPは、商品やサービスの紹介を行う、縦長の１ページ完結型のページです。
商品の注文や問い合わせ、資料請求などのアクションに結び付けるためにも、そこへ導く画面構成が重要になります。LPは、検索結果や広告などを経由し訪問者（ユーザー）が最初にアクセスするページでもあります。
そのため、ユーザーの目的とサイトの内容が一致していない場合、離脱に繋がる恐れがあります。
離脱を防ぐためにも、ファーストビューに訴求力のある要素を配置したり、コンバージョンに結び付くボタンをページ内に繰り返し設置するなど、業種やサイトの目的によって、工夫して制作する必要があります。
Webサイト全体の考え
UI（ユーザーインターフェース）
ユーザーが、「Webサイトやアプリを快適に使うためのヴィジュアル設計」です。視覚に触れる部分全ての情報を指します。
UX（ユーザーエクスペリエンス）
プロダクトやサービスを通じて得られる、使いやすさや印象といったすべてのユーザー体験のことをいいます。
Webサイトページの構成要素
Webサイトの構成要素は、ある程度形式が決まっています。サイトを作る目的を明確にし、成果を上げるためにも、構成要素を把握しておくことは非常に重要です。
ヘッダー
- ロゴ
- グローバルナビゲーション（プライマリーナビゲーション）
- パンくずリスト
以上のような要素を配置します。
コンテンツ
- メイン画像
- 情報発信エリア
- ピックアップコンテンツへのリンク
- バナー
以上のような要素を配置します。
ヘッダーやフッターのように、Webサイト全体で共通の部分ではなく、Webサイトによって内容が変わります。ユーザーの欲している情報を提供し、自社の商品やサービスにつながるような内容であることが重要です。
フッター
- フッターナビゲーション
- コピーライト
Webサイト全体で共通する要素で、ナビゲーションや著作権表示などを、Webサイトの下部に記載することが一般的です。
フッターにリンクを置くことで、
- お問い合わせ
- 予約
など、コンバージョンにつながる重要なページに、記事を読んだユーザーを誘導することができます。
Webデザインに関する用語
トンマナ
トーン＆マナーの略で、デザインの色味や雰囲気などに一貫性を持たせることです。
あしらい
デザインの装飾、ディテールのことをいいます。
カーニング
隣り合う文字の間隔を調整することをいいます。
文字間の余白を整えることにより、文章が読みやすく、美しくなります。
カラム
Webサイトの構成で、「段組み」という意味です。
レイアウトの例
２カラムレイアウト（２列配置）
３カラムレイアウト３列配置）
サイト全体の幅やWebサイトの操作性を考慮し、カラム数を決めましょう。
ファーストビュー
ユーザーがWebページにアクセスした時に、スクロールせずに最初に画面に表示される部分のことをいいます。
ファーストビューを見て離脱してしまうユーザーもいるため、最も重要な部分です。
ナビゲーション
Webサイト上で目的のページを探す手がかりとなる、リンクがまとめられているメニューのことをいいます。
psd
Photoshopのデータの拡張子です。
ai
Illustratorのデータの拡張子です。
ビットマップデータ
小さな点（ピクセル）が集合し、画像を表現します。ベクターデータと異なり、画像を拡大すると見た目が粗くなります。
写真や複雑な画像を表現する際に向いており、Photoshopはこのデータ方式です。
ベクターデータ
点の座標とそれを結ぶ線などの数値データをもとにして、描画する方式です。
画像を拡大・縮小しても劣化することがありません。線や面を扱うイラストやアイコン、テキストを表現する際に向いており、Illustratorはこのデータ方式です。
Webサイトのギミックに関する用語
ホバー
画像やリンクにマウスカーソルを合わせた時に、アニメーションが起こるような表現のことをいいます。
マウスオーバー、マウスホバーとも呼ばれます。
カルーセル
ユーザーのアクションや一定の時間で、画像などのコンテンツをスライド表示させる手法です。
限られたエリアで、複数のビジュアルをユーザーに訴求するために使われます。
モーダルウィンドウ
元のウィンドウに、別枠で表示されるウィンドウのことです。
指定された操作を完了、もしくはキャンセルするまで表示され続け、他のウィンドウに移ることができません。
ただし、モーダルウィンドウの使い方を誤ると、ユーザーのストレスにつながることもあります。
「ユーザーの手を止めるべきではない画面」での使用は控えましょう。
アコーディオンメニュー
指定部分をクリックすることで、開閉して隠れている部分が出てくる動きをするメニューです。
Q&Aや、長文になりやすいページで活用されることが多いです。
ハンバーガーメニュー
サイト内の３本線のナビゲーションメニューのことで、クリックすると隠れている情報が表示されます。
主にスマートフォンのUIデザインで使われることが多く、パソコンと比べて画面サイズに制限があります。
そのため、グローバルナビゲーションなどをハンバーガーメニューのなかに隠すことで、情報を整理しています。
Webサイト制作で使われるプログラミング用語
HTML
Webサイトを作る土台や骨組みとなる言語です。Webページに表示したい文章を「< >」で挟まれた「タグ」と呼ばれる文字列で囲んで書いていきます。
インターネット上に存在する多くのWebサイトが、HTMLを使って作られています。
CSS
HTMLで作った骨組みに、背景や文字の色、フォントなどを追加して、文章を装飾するための言語です。
CSSを適用することで、HTMLだけで構成されたWebサイトに比べ、見た目を大きく変化させます。
JavaScript
Webサイトに動きをつけるために使われます。
例えば、画像を自動でスライドさせる、送信フォームの必須項目の入力チェックを行う、などの動きを実現することができます。
PHP
動的にWebページを生成することができる、サーバーサイドのスクリプト言語(※)です。
HTMLとセットで活用されることが多く、HTMLで制作された静的なページに、PHPを使い動的な処理を加える、というイメージです。
PHPは、ECサイトを構築する際によく使われます。
さらに知っておきたい用語
CMS（コンテンツ・マネジメント・システム）
Webサイトのコンテンツを構成するための、編集・管理システムのことです。
CMSを導入することで、Webの専門知識がない方でも簡単にWebサイトの作成や更新ができます。
サイトの更新頻度を高めることで、タイムリーに情報発信をすることができ、ユーザー満足度の向上にもつながります。
モバイルファースト
必ずしも「スマートフォン向けに優先的に制作する」ということではありません。
ユーザーの利用状況などを元にスマートフォン向けに最適化され、スマートフォンでもストレスなく利用できるデザインにすることです。
以下のようなポイントを踏まえた上で、デザインを決めていきます。
レスポンシブWebデザイン
Webサイトに掲載するコンテンツを変更することなく、表示領域の幅によって見え方が変わるようにデザインされたWebサイトのことです。
PCやスマートフォンなど、デバイスの画面サイズに合わせ、CSSだけで見た目を変更することができます。
スマートフォンが急速に普及している現代では、PCのWebデザインだけでなく、スマートフォンにも対応させてほしいというニーズも高まっています。
レスポンシブWebデザインは、SEOにおいても重要です。ただし、デメリットもあります。
合わせて知っておきたい！制作段階で使用される用語
ここからは、Web制作の制作段階で使用される用語をご紹介します。
ディレクトリマップ
Webサイト内の全ページのURLと、タイトルや記事内容がまとめられた一覧表のことです。
クライアントや制作スタッフにとって、以下を正確に把握するための重要な資料になります。
サイトマップ
Webサイト全体のコンテンツを一覧で表示したページのことで、ユーザーや検索エンジンに、サイト内にどのようなページがあるかを知らせる役割があります。
「ユーザーのことを第一に考えた、使いやすいサイトマップの設計」をすることが、とても大切です。
Photoshop
画像の編集・作成、写真加工ソフトです。幅広い用途に使用します。
Illustrator
自由度の高いデザイン機能を持ち、以下のようなグラフィック制作を行うことができます。
XD
WebサイトやモバイルアプリのUI/UX（デザインや操作性）デザインツールです。以下の作成が可能です。
ワイヤーフレーム
Webページのレイアウトを決める設計図のことをいいます。
サイト制作では欠かせないものであり、デザインやコーディングなどの作業に入る前に作成し、完成イメージを「見える化」する目的で作られます。
デザインカンプ
「デザインの完成イメージ」のことです。クライアントとの認識のズレが生じないよう、制作物のイメージを共有するために作られます。
デザインカンプは、PhotoshopやIllustratorなどのデザインツールを使用して作成されます。
プロトタイプ
ページデザインに加え、実際のWebサイトまたはアプリのように操作することができる機能です。
デザイン制作段階から動作を検証することができるため、デザインや動作性のイメージがしやすくなります。
コーディング
プログラミング言語を使って、Webデザインをブラウザ上で見える形にするためにソースコードを記述していく作業のことです。主に、以下のような言語を使用します。
Basic認証
Webサイトに対して必要最低限の認証設定をかけることができる、簡易的な認証システムです。
Basic認証をかけたWebサイトにアクセスしようとすると、認証ダイアログが立ち上がり、ユーザー名(ID)とパスワードの入力が求められます。
ただし、セキュリティの脆弱性や、クローラー(※)がアクセスできないなどのデメリットもあるため、使用する場合は注意しましょう。
まとめ
Web制作の過程でよく使われる用語を、幅広くご紹介しました。
Web制作の過程で大切なことは、目指すデザインのゴールをしっかり汲み取り、サイトリリース後の運用面も考えたサイト設計をすることです。
そのためには、Web制作を依頼する側と受注する側で認識に齟齬が生じないよう、基本の用語を正しく理解することが大切です。
もし、Webサイト・LP制作に困ったら、株式会社コクーの制作代行サービスをご活用ください。「デジマ女子」Webサイト制作・運用サービスが今抱えていらっしゃる課題をしっかりと把握し、解決のご提案・対応させていただきます。
また、サポート期間やご支援内容、予算に応じて、最適なプランのご提案もいたします。ぜひ、お気軽にお問い合わせください。
また、サポート期間やご支援内容、予算に応じて、最適なプランのご提案もいたします。ぜひ、お気軽にお問い合わせください。
PAGE TOP
お役立ち資料ダウンロード
「マーケターの常駐・スポット派遣」のサービス内容・料金について詳しくご紹介しています。