Webデザインを学び始めたときに最初の壁になるのが「専門用語の多さ」です。
「ファーストビューって何？」「レスポンシブってどういうこと？」――デザイナー同士の会話は、まるで外国語のように聞こえるかもしれません。
そこで本記事では、現役デザイナーがWebデザインの必須用語60個を6つのカテゴリーに整理し、わかりやすい比喩やイメージと一緒に解説します。
ぜひブックマークして、いつでも見返せる辞書代わりにご活用ください。
Webデザイン必須用語60選をカテゴリー別に解説！
学習の基盤となるWebデザイン必須用語60選を、6つのカテゴリーに分けて解説します。
ある程度知っている単語がある場合は、わからないところだけ見るという使い方でもOKです。
初心者が構造的に理解しやすいように、以下の順番で解説します。
- サイトの構造
- デザイン基礎
- デザインの種類
- グラフィック素材
- ツール操作
- 実践コミュニケーション
一つ一つの言葉を具体的なイメージとセットで脳に保存すれば、応用力が格段に高まり、デザイナー同士のコミュニケーションでも齟齬がぐっと減ります！
サイトの構造に関する用語9選
Webサイトの骨組みや設計図を理解しておくと、後から出てくるUI/UXやデザイン原則もスムーズに学べます。
ここでは、基礎となる9つの用語を押さえましょう。
- Webサイト
- ワイヤーフレーム
- ヘッダー
- フッター
- ファーストビュー（FV）
- レスポンシブデザイン
- モバイルファースト
- ブレイクポイント
- グリッドシステム
1.Webサイト
インターネット上にある「お店」や「家」そのものです。
複数のページで構成され、情報を発信したり商品を販売したりする拠点の役割を果たします。
企業のコーポレートサイト、ブログ、ECサイトなど形はさまざまですが、すべて「Webサイト」と呼ばれます。
2.ワイヤーフレーム
Webサイト制作における設計図であり、色や写真などの装飾を省き、「どこに・何を配置するか」を線や箱だけで示した骨組みのことです。
建築で言えば、インテリアを置く前の間取り図のようなもの。
制作の初期段階で方向性をすり合わせるために用いられます。
3.ヘッダー
サイト最上部に常に表示される部分で、「お店の看板」や「総合案内」の役割を担います。
ロゴ、グローバルナビゲーション（主要メニュー）、検索窓などが配置され、ユーザーが迷わずサイト内を移動できるように設計されています。
4.フッター
サイト最下部にあるエリアで、本の「奥付」のような位置づけです。
コピーライト表記や会社概要、プライバシーポリシー、問い合わせ先など、補足情報がまとめられています。
5.ファーストビュー（FV）
ユーザーがサイトを訪れたときにスクロールせずに最初に目にする画面領域です。
例えるなら、お店の「ショーウィンドウ」。ここで心を掴めるかどうかが、離脱率やコンバージョン率に大きく影響します。
キャッチコピーやメインビジュアルを効果的に配置するのがポイントです。
6.レスポンシブデザイン
パソコン、スマートフォン、タブレットなど異なる画面サイズでも最適に表示されるようにするデザイン手法です。
「どんなコップに注いでも形を変えてフィットする液体」のように、デバイスごとに自動でレイアウトが調整されます。
7.モバイルファースト
Web閲覧の主流がスマホになったことを背景に生まれた考え方で、「まずスマホ向けからデザインを作る」ことを指します。
スマホでの見やすさを優先し、その後PCやタブレットに展開するアプローチです。
8.ブレイクポイント
レスポンシブデザインにおいて、レイアウトが切り替わる境界点のことです。
例えば「画面幅768px以下ならスマホ用、769px以上ならPC用に切り替える」のように設定します。
まるで変身のタイミングを設定するように、デザインの分岐点を決めます。
9.グリッドシステム
画面に目に見えない「格子（グリッド）」を引き、その線に沿って要素を配置する手法です。
整列や余白が揃うことで一貫性が生まれ、情報が見やすく整理されます。
デザイン基礎に関する用語12選
ここからは、Webデザインの品質そのものを左右する「原則」に関する用語です。
- UI（ユーザーインターフェース）
- UX（ユーザーエクスペリエンス）
- インフォメーションアーキテクチャ（IA）
- 余白（ホワイトスペース）
- トーン＆マナー（トンマナ）
- ジャンプ率
- 可読性
- 視認性
- ペルソナ
- アクセシビリティ
- タイポグラフィ
- カーニング
10.UI（ユーザーインターフェース）
ユーザーが直接触れる「見た目すべて」を指します。
ボタンの形や色、文字のフォント、読みやすさ、レイアウトなど、ユーザーが操作するときに目にするデザイン部分全体がUIです。
どれだけサービスが良くても、UIが不親切だと使いにくく感じてしまいます。
11.UX（ユーザーエクスペリエンス）
ユーザーがサービスやサイトを使ったときに得られる体験そのものを指します。
「このサイトは分かりやすくて使いやすい！」と感じたら良いUX、「分かりにくい、戻りたい」と感じたら悪いUXです。
つまり、UI（見た目）はUX（体験）を良くするための手段といえます。
12.インフォメーションアーキテクチャ（IA）
Webサイト内の情報を「どう整理し、どう配置するか」を決める設計のことです。
メニューの並び順や「どのページにどの情報を置くか」を設計するのがIAであり、UXを支える土台になります。
13.余白（ホワイトスペース）
デザインにおける「間（ま）」。文章や画像の周囲にある何もない空間を指します。
適切に余白を取ることで、情報が整理されて見やすくなり、高級感や落ち着きも生まれます。
14.トーン＆マナー（トンマナ）
ブランドやサービス全体の雰囲気や世界観を統一するためのルールです。
例えば「落ち着いた雰囲気を出すために青を基調にする」「若者向けだからポップな色と丸いフォントを使う」といった具合です。
トンマナを決めることで、広告やWebサイト、SNS投稿に一貫性が生まれ、ブランドイメージを強化できます。
15.ジャンプ率
見出しと本文の文字サイズの差を表す比率のことです。
ジャンプ率が大きいと元気でポップな印象になり、ジャンプ率が小さいと落ち着いて知的・高級な印象になります。
16.可読性
可読性とは、文章の読みやすさを指します。
長文でも疲れにくい文字組み、適切な行間、見やすいフォントを選ぶことで高められます。
17.視認性
一方で、視認性は「瞬時に認識できるか」という分かりやすさを示します。
両者は似ていますが、可読性は“読むときにストレスがないか”、視認性は“パッと見て伝わるか”という違いがあります。
18.ペルソナ
デザインを届けたい理想の顧客像を具体的に設定した人物像のことです。
名前、年齢、職業、趣味、悩みまで細かく設定します。
抽象的な「20代女性」ではなく「25歳、会社員、趣味は旅行、悩みは忙しくて美容に時間がかけられない」と具体化することで、ユーザー目線に立ったデザインが可能になります。
19.アクセシビリティ
誰にとっても使いやすいデザインを目指す考え方です。
高齢者や障害を持つ方、色覚多様性を持つ方など、さまざまな人が問題なく情報にアクセスできるように配慮します。
19.タイポグラフィ
文字のデザイン全般を指します。フォント選び、サイズ、行間、字間などを調整し、文字を美しく・読みやすく配置する技術です。
同じ言葉でも書き方で印象が変わるため、デザインの雰囲気を決定づける重要な要素です。
20.カーニング
特定の文字と文字の間隔を微調整する作業です。
例えば「W」と「A」が並ぶと隙間が大きく見えることがありますが、そこを詰めて自然に整えるのがカーニングです。
デザインの種類に関する用語6選
ここからは、Webデザイナーが制作する具体的な「デザインの種類」に関する用語を見ていきましょう。
- サムネイル
- LP（ランディングページ）
- Webアプリケーション
- ECサイト
- オウンドメディア
- ポートフォリオサイト
21.サムネイル
動画や記事の内容を一枚の画像で要約した、小さな看板や本の表紙のような存在です。
YouTubeの動画一覧でクリックを促す画像や、ニュースサイトの一覧に表示される画像が典型的なサムネイル。
サムネイルはクリック率を大きく左右する“第一印象”であり、コンテンツの顔とも言えます。
22.LP（ランディングページ）
「LandingPage」の略で、特定の商品やサービスを売ることに特化した1枚の長いWebページのこと。
イメージは、縦に長いセールスレター。広告や検索結果から訪れたユーザーを説得し、購入や申し込みといった具体的な行動（コンバージョン）につなげるのが目的です。
リンクを最小限にして離脱を防ぎ、ストーリー仕立てで魅力を伝えるのが特徴です。
23.Webアプリケーション
ブラウザ上で動作する、多機能な道具箱のようなツールです。
GoogleスプレッドシートやX（旧Twitter）、予約システムなどが代表例で、単に情報を見るだけでなく、データの作成・編集・保存・共有といった双方向の操作が可能。
ユーザーが特定のタスク・やりたいことを完了させるための目的として構築されています。
25.ECサイト
「ElectronicCommerce」の略で、インターネット上のショップやデパートを指します。
商品カタログ、ショッピングカート、決済システム、顧客管理などの機能が揃っており、買い物体験をWeb上で完結できます。
Amazonや楽天市場、自社のオンラインストアなどが典型的な例です。
26.オウンドメディア
企業が自ら所有・運営するWebメディアのこと。企業ブログ、事例紹介サイト、情報発信サイトなどがあります。
すぐに商品を売るのではなく、役立つ情報やノウハウを提供して読者をファンにし、将来的な顧客獲得やブランディングにつなげます。
27.ポートフォリオサイト
デザイナーやクリエイターが自身のスキルや実績をアピールするための作品集サイトです。
今までに手がけた制作物を並べて公開することで、客観的にスキルを証明できます。
就職・転職活動やフリーランスの営業ツールとして必須といえます。
グラフィック素材に関する用語10選
ここでは、Webデザインを構成する素材や見た目の部品に関する用語を紹介します。
- あしらい
- アイコン
- バナー
- キービジュアル（メインビジュアル）
- ベクター画像
- ラスター画像（ビットマップ画像）
- RGB
- ピクセル（px）
- スキューモーフィズム
- フラットデザイン
28.あしらい
デザインを補うために使う装飾素材全般のこと。イメージは料理のパセリや盛り付けの飾りです。
星のキラキラ、集中線、吹き出しなど、なくても成り立つけれど、あるとデザインが一気に華やかになります。
29.アイコン
言葉の代わりに情報を伝える、小さな絵文字のようなものをいいます。
家のマーク＝ホーム、虫眼鏡のマーク＝検索、ゴミ箱のマーク＝削除、といった具合に、直感的に意味を伝えられるのが強みです。
30.バナー
Webサイト上の広告看板のような画像。
キャンペーン告知や他ページへの誘導に使われ、クリックを促す役割があります。
画像とテキストを組み合わせて目立たせるのが一般的です。
31.キービジュアル（メインビジュアル）
Webサイトやキャンペーンの顔となる、最も中心的な画像。ブランドのポスターのようなイメージです。
ファーストビューに大きく配置され、その世界観やメッセージを一瞬で伝えます。
32.ベクター画像
点と線を数式で記録する、設計図のような画像です。
拡大縮小しても画質が劣化せず、常に滑らかなのが特徴で、ロゴやアイコンなど、さまざまなサイズで使われるデザインに最適です。
33.ラスター画像（ビットマップ画像）
ピクセル（点）の集合でできているドット絵のような画像で、写真や複雑なイラストが代表例です。
拡大するとギザギザが目立つのが特徴で、ベクター画像と対比して理解すると分かりやすいです。
34.RGB
モニター上で色を表現するための、光の三原色のレシピです。
Red（赤）、Green（緑）、Blue（青）の組み合わせで無数の色を作り出します。
Webデザインでは必須の色指定方法で、「FFFFFF」や「000000」など16進数で表現されます。
35.ピクセル（px）
デジタル画像を構成する最小単位の点。モザイクを作る小さな四角のイメージです。
Webデザインでは、「幅300pxの画像」という具合に画像サイズや余白を「px（ピクセル）」で指定します。
36.スキューモーフィズム
現実世界の質感を再現した、本物そっくりデザインの手法です。
例えば、革の手帳のようなUI、金属の光沢を再現したボタンなどが挙げられます。
37.フラットデザイン
スキューモーフィズムと対になる概念で、影や光沢などの装飾を排除。
シンプルで平面的（フラット）に見せるデザインです。
ツール操作に関する用語9選
ここでは、FigmaやPhotoshopなどのデザインツールを扱う上で欠かせない基本用語を紹介します。
- レイヤー
- アートボード（フレーム）
- パス
- ペンツール
- シェイプ
- マスク
- 不透明度（オパシティ）
- ブラシ
- コンポーネント（シンボル）
38.レイヤー
デザインを構成する要素を、透明なフィルムの重ね合わせのように扱う概念です。
文字のフィルム、写真のフィルム、背景色のフィルムなど、重ねて1つのデザインを作ります。
レイヤーの順番を整理することで、意図通りのデザインを作れるようになります。
39.アートボード（フレーム）
デザイン作業を行うための、キャンバスや画用紙そのものです。
Photoshopでは「アートボード」、Figmaでは「フレーム」と呼ばれ、この領域の中に文字や画像を配置していきます。
40.パス
点と点を結ぶ、糸のような線のことです。
ハンドルを動かすと曲げたり伸ばしたりでき、正確な形を描くことができます。
ロゴやアイコンの制作に欠かせない技術です。
41.ペンツール
前項の「パス」を自在に描くための専用のペンです。
ペンツールを使いこなすと、ハート型や自由な図形を思い通りに作れるようになります。
42.シェイプ
デザインツールに最初から用意されている、図形スタンプのような機能です。
四角形、円、三角形、星などの基本図形を簡単に作成できます。
43.マスク
クッキー型で生地を抜くように、下のレイヤーを上のレイヤーの形に切り抜く機能です。
マスクを使えば、写真を丸く切り抜いてSNSアイコンにしたり、特定の範囲だけを表示したりするデザインが簡単に作れます。
44.不透明度（オパシティ）
レイヤーの透明度を調整する機能です。100%なら完全に不透明、0%なら完全に透明になります。
背景をうっすら透けさせたいときなどに使い、デザインに奥行きや軽やかさを与えます。
45.ブラシ
デジタル世界の絵筆です。
水彩風、スプレー風、鉛筆風など、質感の異なる筆を使い分けられます。
あしらい作りに欠かせないツールです。
46.コンポーネント（シンボル）
ボタンなどのデザインパーツを「親」として登録し、複数の場所で効率的に再利用する仕組みです。
「親」を変更するとコピーした「子」パーツにも自動で反映されるため、修正の手間が大幅に減ります。
実務コミュニケーションに関する用語14選
ここでは、クライアントとの打ち合わせやデザイナー同士の会話で頻繁に出てくる実用的な用語を紹介します。
- CTA（Call To Action）
- カンプ（モックアップ）
- テクスチャ
- パンくずリスト
- ハンバーガーメニュー
- コンバージョン（CV）／コンバージョンレート（CVR）
- CMS（コンテンツ・マネジメント・システム）
- SEO（検索エンジン最適化）
- ドロワーメニュー
- プロトタイプ
- ファビコン
- コーディング
- ディレクション
- テンプレート
47.CTA（Call To Action）
行動への呼びかけを意味します。購入や登録、問い合わせなどWebサイトの目的へとユーザーを導く、最も重要な要素です。
例えば、「資料請求はこちら」「今すぐ購入」などのボタンやリンクが挙げられます。
48.カンプ（モックアップ）
完成イメージを伝えるための、デザインの見本です。
ワイヤーフレームに色や写真を加えた完成形に近い状態を指します。
クライアントにデザイン方向性を確認してもらうときによく使われます。
49.テクスチャ
デザインに加える、質感のことです。
紙っぽい、布っぽい、金属っぽいなど、背景や要素に重ねて使うことで、立体感や世界観を演出できます。
50.パンくずリスト
ユーザーがサイト内のどこにいるかを示す、足跡ナビゲーションです。
童話「ヘンゼルとグレーテル」のパンくずに由来して名付けられました。
「ホーム>カテゴリ>記事ページ」のように表示され、サイトの階層構造を把握しやすくなります。
51.ハンバーガーメニュー
三本線がハンバーガーに見えることから名付けられたメニューアイコンです。
スマートフォンサイトでよく使われ、タップするとメニュー全体が表示されます。
52.コンバージョン（CV）／コンバージョンレート（CVR）
コンバージョン（CV）とは、Webサイトにおける最終的な成果のこと。商品購入、会員登録、資料請求などが該当します。
一方でコンバージョンレート（CVR）は、その成果に至った割合を示す指標。サイトに訪れたユーザーのうち、どれくらいがCVに至ったのかを示します。
CVR ＝ コンバージョン率（CV）÷ サイト訪問数 × 100
CV＝ゴール、CVR＝その達成率、と覚えると理解しやすいです。
53.CMS（コンテンツ・マネジメント・システム）
プログラミングの知識がなくても、テキストや画像を編集・更新できる「サイト管理システム」のことをいいます。
代表例は「WordPress」で、企業サイトやブログで広く使われています。
54.SEO（検索エンジン最適化）
Googleなどの検索結果で、自分のサイトを上位に表示させるための施策のこと。
例えるなら、検索ロボットに「ここに良い情報があるよ！」と目印をつける作業です。
55.ドロワーメニュー
ハンバーガーメニューを押したときに、横からスライドして現れる、引き出し型メニューのことをいいます。
56.プロトタイプ
デザインカンプに実際にクリックできる動きを加えた試作品です。
完成前に操作感を検証し、使いやすさを確かめる目的で作られます。
57.ファビコン
ブラウザのタブやブックマークに表示される小さなサイトのアイコンのことです。
YouTubeでいうと、赤い再生マークが設定されています。
58.コーディング
デザインデータをHTMLやCSSを使って、ブラウザに理解できる形へ翻訳する作業です。
デザイナーが作った見た目を、エンジニアがコードで再現します。
59.ディレクション
プロジェクト全体を取りまとめる、監督の役割です。
スケジュール管理、品質管理、クライアントとのやり取りなどを行い、チームが円滑に進むよう舵を取ります。
60.テンプレート
あらかじめ用意されたデザインのひな型のことをいいます。
料理でいう「カレーのルー」のような存在で、短時間でクオリティの高い成果物を作れる便利なものです。
まとめ：Webデザイン用語を理解して、学習・実務のスピードを上げよう！
本記事では、Webデザイン必須用語60選をカテゴリーごとに解説してきました。
Webデザインの世界は専門用語が多く、最初はまるで外国語のように聞こえるかもしれません。
しかし、用語の意味をイメージと一緒に覚えていくことで、会話の理解がスムーズになり、学習や実務のスピードが飛躍的にアップします。
ポイントは、一度に全部を完璧に覚えようとしないこと。
分からない用語に出会ったら、その都度調べて、少しずつ知識を積み重ねていきましょう。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
デイトラ情報局を運営する株式会社デイトラは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を提供しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
船越良太（@ryota_funakoshi）
デイトラWebデザインコース運営者。未経験から独学でWebデザインを学び、社会人2年目に独立。現在はデザイン会社社長・現役デザイナーでありながら、デイトラで受講生にWebデザインを教えている。