WEBデザインをはじめるなら知っておきたいWEBデザイン用語！
こんにちは！Webデザイナーのイワサキです。
これからWebデザインの勉強を始めたいけど何から勉強をすればいいのかわからない、WEBデザイン用語を言われて何を言っているかわからない時はありませんか？
当記事では、基本的なWebデザイン用語をやさしく解説します。
Webデザイン用語の意味をしっかり理解しておくことで、意思疎通もしやすくスムーズに制作を行えるようになります。
ではいってみましょう。
目次
UI
UI（ ユーザーインターフェース ）とは、の略称で、ユーザーがWebサイトやアプリケーションを利用する際に画面を見たり、操作したりする画面のことを指します。ボタン、ナビゲーションバー、フォーム入力欄、アイコン、カラー、タイポグラフィなど、見た目や配置、インタラクション設計全般が含まれます。使いやすく直感的なUIは、ユーザーの操作ストレスを軽減し、目的達成をスムーズにします。
UX
UX（ ユーザーエクスペリエンス ）とは、ユーザーが製品やサービスを使う過程で得る「 体験全体 」を意味します。初回訪問から情報検索、購入・申込み、アフターサポートまでの一連の流れや感情、満足度を包括的にデザインする概念です。良いUXは、UIだけでなくサイト構造、コンテンツ、ページ読み込み速度、信頼性などあらゆる要素が連携して生まれます。
ユーザビリティ
ユーザービリティとは、「 使いやすさ 」の度合いを示す指標で、効率性（ 目的達成までの手間 ）、習得容易性（ 初めてでも直感的に利用できるか）、誤操作防止、エラー回復のしやすさ、満足度などを評価します。ISO 9241-11では「 特定のユーザーが特定の条件下で特定の目的をどれだけ効果的・効率的・満足して達成できるか 」と定義されています。
SEO
SEO（ 検索エンジン最適化 ）とは、検索結果で上位表示を狙うための技術と施策の総称です。主に、キーワード選定とページ内（ タイトル・見出し・本文 ）の最適化（ オンページSEO ）、被リンク獲得やソーシャルシェア対策（ オフページSEO ）、サイト速度改善や構造化データの実装といった技術的SEOがあります。良質なコンテンツ提供と合わせて実施することで、流入増加やCVR向上につながります。
レスポンシブWebデザイン
レスポンシブデザインとは、PC・タブレット・スマホなど、異なる画面サイズや解像度に応じてレイアウトや要素のサイズ・配置を自動的に最適化する設計手法です。
CSSのメディアクエリ、柔軟なグリッド（ フレックスボックス／CSS Grid ）、可変画像（ max-width:100% ）などを組み合わせ、１つのHTMLで多様なデバイスに対応します。
モバイルファースト
モバイルファーストとは、設計の際に「 まずスマホ画面での体験を最優先に考える 」アプローチです。画面サイズや回線速度が制限される環境下で必要最小限の機能・情報を整理し、徐々にPC向けに拡張していくことで、無駄を省いたシンプルで高速なサイトを実現します。
サイトマップ
サイトマップとは、Webサイト内のページやリンク先、全体像をツリー状に表現した構成図を指します。サイトマップを作成することで、全体像の確認や情報の整理、計画性を持ってプロジェクトを進行することができます。
ワイヤーフレーム
ワイヤーフレームとは、設計図のことを指します。
ワイヤーフレームを作成することによって、Webサイトの要素や構成・情報を整理することができ、お客様の認識に合わせることができます。
デザインカンプ
デザインカンプとは、Design Comprehensive Layout(デザインカンプリヘンシブレイアウト)の略でデザインの完成見本のことを指し、カンプと呼ばれることもあります。
デザインカンプを作ることによって、完成イメージを共有することができ、お客様との認識のずれを防ぐことができます。
トンマナ
トンマナとは、「 トーンとマナー 」を指します。カラーやフォント、文章の語調、アイコンのスタイル、写真のテイストなど、全体の統一感を保つためのガイドラインとしてまとめ、ブランディング要素の一貫性を担保します。
あしらい
あしらいとは、ページ装飾や間を埋めるためのイラスト・アイコン・ラインなど余白の活用パーツを指すデザイン用語です。本文と本文の間に配置する区切り線、見出し横の装飾要素、背景パターンなど、小さなグラフィックがページのリズムや視覚的アクセントを生み出します。
Webフォント
Webフォントとは、サイト訪問時にサーバーから読み込んで利用するフォント技術です。ユーザー端末に依存せずデザイナーが指定したタイポグラフィを忠実に再現可能。Google FontsやAdobe Fonts、Font Awesome（ アイコンフォント ）などのサービスを利用し、読み込み最適化（ フォントサブセット化やプリロード ）を行うことでパフォーマンス向上を図ります。
パンくず
パンくずとは、現在のページがサイト階層のどこにあるかを示すナビゲーション要素です。
例：ホーム ＞ サービス ＞ Webデザイン ＞ サービス詳細
ユーザーの位置把握や戻る動線の提供、内部リンク強化によるSEO効果も期待できます。
ヘッダー
ヘッダーとは、ページ上部に配置される共通エリアで、サイトロゴ、グローバルナビゲーション、検索バー、問い合わせボタンなどが含まれます。ブランド認知と主要コンテンツへの導線を担う重要パーツで、スクロールに応じて固定（ Sticky ）させる場合もあります。
ファーストビュー
ファーストビューとは、ユーザーがWebサイトに訪れた際にスクロールをしていない最初の画面のことを指します。最初に目にする部分となるため重要な要素の一つで、ユーザーはファーストビューを見て「自分が欲しい情報があるか」を判断します。
コンテンツ
コンテンツとは、Webページ上の情報中身全般を指します。文章、画像、動画、インフォグラフィック、リンクリストなど、ユーザーが求める価値ある情報を提供し、信頼獲得やSEO上の評価にも直結します。目的に応じて構造化（ 見出し階層・リスト化 ）することが重要です。
フッター
フッターとは、ページ下部の共通エリアで、著作権情報、サイトマップ、プライバシーポリシー、SNSリンク、会社概要といった補助的情報をまとめます。ユーザーがスクロールの最後に確認すべきリンクや情報を集約し、サイト全体の網羅性を担保します。
カラム
カラムとは、ページを縦方向に分割する列レイアウトの単位です。2カラム（ メイン＋サイドバー ）、3カラムなどがあり、情報の優先度や可読性に応じて使い分けます。CSS Gridやフレックスボックスを用いて実装し、レスポンシブ時には単一カラムに切り替えることが一般的です。
ハンバーガーメニュー
ハンバーガーメニューとは、主にスマホ表示で、三本線のアイコンをタップするとナビゲーションが展開・格納されるメニュー形式です。画面スペースを節約しつつグローバルナビゲーションを提供できる反面、隠れた情報が見落とされやすい点に注意し、明確な誘導が求められます。
アコーディオンメニュー
アコーディオンメニューとは、見出し部分をクリック・タップすると、その下に隠れているコンテンツがスライドして開閉する仕組みです。FAQ、サイドナビ、リスト展開などで使われ、情報量の多いページをコンパクトに整理できます。開閉状態の視覚的フィードバックをわかりやすく設計することが重要です。
モーダルウィンドウ
モーダルウィンドウとは、ページ上に重ねて表示されるダイアログボックスで、背景を半透明に暗くしてフォーカスをモーダルに集めます。ログインフォームや重要通知、確認ダイアログなどに使われ、ユーザーの意思決定を促す役割があります。過度な頻度での表示はUXを損なうため要注意です。
カーセル
カーセルとは、横方向にスライドしながら複数の画像やコンテンツを順番に見せるスライダー機能です。トップページの事例紹介やバナーに利用され、視認性や操作性を考慮した自動・手動切り替えボタン、ページネーション（ ドット ）などを併設します。
ホバー
ホバーとは、マウスポインタを要素（ リンク、ボタン、画像など ）の上に重ねた際に発生する状態変化です。CSSの:hover疑似クラスで設定し、カラー変更、影の追加、拡大・縮小、装飾の切り替えなどで視覚的なフィードバックを与え、インタラクションの明確化に寄与します。
まとめ
いかがでしたか？
当記事では、基本的なWebデザイン用語を解説しました。
WEBデザイナーの勉強を始めたばかりの方は、用語が多くて戸惑うことが多いと思います。
Webデザイン用語の意味をしっかり理解しておくことで、クライアントと意思疎通もしやすくスムーズに制作を行えるようになり自信にもつながります！
基本的なWebデザイン用語をしっかりと覚えておきましょう👍
