【保存版】Webデザイン用語集22選｜画像で解説・初心者でもわかる！
2026.06.13
はじめに
Webデザインを始めると、聞き慣れない専門用語がたくさん出てきます。この記事では、初心者がつまずきやすいWebデザイン用語を22個厳選して、画像付きでわかりやすく解説します。デザインツールを使い始めた方や、素材を活用してデザインを学んでいる方にもぜひ参考にしてください。
レイアウト・構成
Webデザインの基本となるレイアウトや構成に関する用語を解説します。デザインを作る前に知っておくと、制作がスムーズになります。
ワイヤーフレーム
デザインを作る前に作成する設計図のこと。色やデザインは入れず、ページの骨組みだけをシンプルに表現したものです。Webサイトやアプリを作る際、デザイン作業に入る前の企画・設計段階で使われます。FigmaやAdobeXDなどのツールでよく使われます。
デザインカンプ
実際の制作物と同じサイズ・デザインで作った完成見本のこと。クライアントへのデザイン確認や、エンジニアへのデザイン引き渡しの際に使われます。
モックアップ
実際の端末や製品にデザインを当てはめた完成イメージ画像のこと。スマホやPCの画面にデザインを合成して、実際の使用イメージを伝えるために使われます。ポートフォリオ制作でもよく活用されます。
UI
User Interface（ユーザーインターフェース）の略。ユーザーが実際に操作する画面・ボタン・メニューなどの見た目のこと。WebサイトやアプリのデザインにはUI素材が欠かせません。見た目だけでなく、使いやすさも含めた設計が重要です。
↓CanvasRootのUI素材例（無料でダウンロードできます）
→ [UI素材を全部見る]
UX
User Experience（ユーザーエクスペリエンス）の略。ユーザーがサービスやWebサイトを使う全体的な体験・感情のこと。見た目（UI）だけでなく、使いやすさ・わかりやすさ・快適さなど、ユーザーが感じるすべての体験を指します。「UIが良くてもUXが悪い」とユーザーは離れてしまうため、セットで考えることが大切です。
レスポンシブデザイン
画面サイズに合わせてレイアウトが自動で変わるデザインのこと。スマホ・タブレット・PCなど、さまざまな端末で見やすく表示されるように設計します。現在のWebサイト制作では必須の考え方です。
カラー
デザインにおける色の知識は、印象を大きく左右します。基本的なカラーの用語を押さえておきましょう。
16進数カラーコード
#FF0000（赤）や#000000（黒）のように、色を6桁の英数字で表す方法のこと。WebデザインやCSSで色を指定するときに使われます。最初の2桁が赤・次の2桁が緑・最後の2桁が青の強さを表しています。
RGB
Red（赤）・Green（緑）・Blue（青）の三原色を組み合わせて色を表現する方式のこと。PCやスマホなどの画面で使われる光の色の表現方法です。Webデザインや画像編集では基本的にRGBを使います。印刷物で使うCMYKとは別物なので注意が必要です。
CMYK
Cyan（シアン）・Magenta（マゼンタ）・Yellow（イエロー）・Key（ブラック）の4色を組み合わせて色を表現する印刷向けの方式のこと。チラシ・ポスター・名刺などの印刷物を作る際に使われます。Web用のRGBのまま印刷すると色味が変わってしまうため、印刷物を作る場合はCMYKに変換する必要があります。
補色
色相環で正反対に位置する色の組み合わせのこと。例えば赤と緑、青とオレンジなどが補色の関係にあります。補色を組み合わせると互いの色が引き立ち、目を引くデザインになります。ただし使いすぎると派手になりすぎるため、アクセントとして使うのがおすすめです。
ファイル形式
デザイン素材や画像を扱う上で、ファイル形式の違いを理解しておくことはとても重要です。用途に合わせて使い分けましょう。
SVG
Scalable Vector Graphics（スケーラブルベクターグラフィックス）の略。拡大・縮小しても画質が劣化しないベクター形式の画像ファイルのこと。Webサイトのアイコンやロゴ、イラスト素材によく使われます。ファイルサイズが軽く、CSSやJavaScriptで色や形を自由に変えられるのが特徴です。
PNG
Portable Network Graphics（ポータブルネットワークグラフィックス）の略。背景透過に対応した画像形式のこと。イラストや素材を重ねて使いたいときに便利です。JPEGと違い画質が劣化しないため、ロゴやイラスト素材に向いています。
↓CanvasRootのPNG素材例（無料でダウンロードできます）
【素材】
JPEG
Joint Photographic Experts Group（ジョイントフォトグラフィックエキスパーツグループ）の略。写真向きの画像形式のこと。ファイルサイズが小さく圧縮できるため、Webサイトの表示速度を上げたいときに便利です。ただし背景透過には対応しておらず、圧縮するたびに画質が劣化する特徴があります。写真や背景素材に向いています。
↓CanvasRootのJPEG素材例（無料でダウンロードできます）
【素材】
解像度
画像の細かさ・精細さを表す数値のこと。Web向けは72dpi、印刷向けは300dpi以上が目安です。ピクセル（px）で表されることも多く、解像度が高いほど画像がきれいに見えますが、ファイルサイズも大きくなります。素材をダウンロードする際はS・M・Lなどのサイズ選択で用途に合わせて選ぶことが大切です。
背景透過
画像の背景を透明にすること。背景透過に対応しているのはPNGとSVG形式です。背景透過済みの素材は、他の画像やデザインに重ねてそのまま使えるのでとても便利です。JPEGは背景透過に対応していないため注意が必要です。
↓CanvasRootのPNG素材は背景透過済みなのでそのまま使えます。（無料でダウンロードできます）
→ [背景透過素材を全部見る]
Web・タイポグラフィ
フォントや文字に関する用語は、読みやすいデザインを作る上で欠かせない知識です。基本を押さえておきましょう。
サンセリフ体
文字の端に飾り（セリフ）がないシンプルなフォントのこと。日本語でいうゴシック体に近いイメージです。スッキリとした印象でWebサイトや画面上での可読性が高く、現代的なデザインによく使われます。代表的なフォントはHelvetica・Noto Sans・游ゴシックなどです。
セリフ体
文字の端に飾り（セリフ）がついたフォントのこと。日本語でいう明朝体に近いイメージです。伝統的・高級感・信頼感のある印象を与えるため、新聞・書籍・ブランドロゴによく使われます。代表的なフォントはTimes New Roman・游明朝などです。Webよりも印刷物で使われることが多いです。
CTA
Call To Action（コール・トゥ・アクション）の略。ユーザーに特定の行動を促すボタンや文言のこと。「今すぐ無料登録」「詳しくはこちら」「ダウンロードする」などがCTAにあたります。WebサイトやLP（ランディングページ）では、CTAのデザインや文言がコンバージョン率に大きく影響します。
ツール系・その他
デザイン制作でよく使われるツールや、知っておくと便利な用語を解説します。
SEO
Search Engine Optimization（サーチエンジンオプティマイゼーション）の略。GoogleやYahoo!などで検索したときに、自分のWebサイトが上の方に表示されるように工夫することです。デザイン面では、画像の読み込みの速さ・スマホでの見やすさ・わかりやすいレイアウトがSEOに影響します。
LP（ランディングページ）
特定の目的のために作られた1枚もののWebページのこと。「会員登録してもらう」「商品を購入してもらう」など、ユーザーに1つの行動を促すために設計されます。縦長のデザインが多く、CTAボタンが複数配置されているのが特徴です。
アイコン
WebサイトやアプリのUIで使われる小さな図形・シンボルのこと。メニュー・検索・ハートマークなど、直感的に意味が伝わるように設計されています。SVG形式のアイコンはサイズを変えても劣化しないため、Webデザインでよく使われます。
↓CanvasRootのアイコン素材例（無料でダウンロードできます）
→ [アイコン素材を全部見る]
バナー
WebサイトやSNSで使われる告知・広告用の画像のこと。キャンペーン情報や新商品の紹介など、ユーザーの目を引くために使われます。サイズの規格が決まっていることが多く、用途に合わせたサイズで制作します。CanvaやPhotoshopなどのツールで作れます。
まとめ
今回はWebデザインでよく使われる用語を22個に厳選して解説しました。まだまだ奥深い用語もたくさんありますが、まずはここで紹介した基本を押さえておけば安心です。今後は各用語をさらに詳しく解説した記事やデザインの考え方、作り方も公開予定ですので、ぜひチェックしてみてください！
→ [CanvasRootで素材を探す]
デザインツールについては別記事で詳しく紹介しています。あわせてご覧ください😊