web制作では、何を調べたらいいかわからない、といったことが良くあります。
そんな時に使える用語集を一覧で作成してみました。
逆引き辞典としてご活用ください。
レイアウト・エリア構成
ヘッダー
ページ最上部のエリア。ロゴ・グローバルナビ・CTAボタンなどを配置。ユーザーが最初に目にする重要な領域で、サイトのブランド印象を左右する。
🔍 ヘッダー デザイン ギャラリー
フッター
ページ最下部。会社情報・プライバシーポリシー・サイトマップリンク・コピーライト表記などを置く。SEO的にも内部リンク設計の補助として機能する。
🔍 フッター 項目 一般的
ファーストビュー FV
ページを開いた瞬間にスクロールなしで見えるエリア。離脱率・コンバージョン率に直結するため、最も注力すべきゾーン。キャッチコピーとCTAを必ず含める。
🔍 ファーストビュー 構成 要素
ヒーローエリア
大きな背景画像や動画とキャッチコピーで構成するメインビジュアルセクション。ファーストビューと重なることが多い。視覚インパクトでブランドを伝える。
🔍 ヒーローイメージ 作り方
サイドバー
コンテンツ左右に配置する補助メニューエリア。カテゴリ一覧・最新記事・バナーなどを配置。ブログ・メディアサイトで多用。スマホでは非表示にするケースも多い。
🔍 サイドバー 固定 実装
カード型レイアウト
画像・タイトル・テキストを1つの矩形ボックスにまとめる定番レイアウト。一覧ページや実績紹介でよく使われる。余白・シャドウ・角丸がカードらしさを演出する。
🔍 カードレイアウト css
Bento UI
弁当箱のようにサイズ違いのグリッドで情報を整理するトレンドUI。Appleのイベントページなどで人気に。CSS Gridを活用し、情報量の多いランディングページを美しく整理できる。
🔍 Bento UI デザイン
グリッドレイアウト
行と列の格子状に要素を並べる手法。CSS Gridを使うことが多い。整然とした構造を作りやすく、複雑な2Dレイアウトにも対応。Flexboxと使い分けるのが基本。
🔍 CSS Grid レイアウト 実装
Flexbox
1方向（行 or 列）に要素を柔軟に並べるCSSの仕組み。ナビメニューや横並びアイテムの整列に最適。justify-content・align-itemsで配置をコントロールする。
🔍 flexbox 使い方 わかりやすい
セクション
ページをテーマごとに区切った縦方向のブロック単位。「サービス紹介」「実績」「料金」などがそれぞれ1セクション。HTMLでは<section>タグを使うことが多い。
🔍 セクション デザイン 参考
ナビゲーション・UI部品
インタラクション・アニメーション
アコーディオン
クリックで詳細コンテンツが開閉するUI。FAQページでよく使われる。CSSのmax-height + transition、またはJSで実装。HTMLでは<details><summary>でも実現可能。
🔍 アコーディオン FAQ 実装
モーダルウィンドウ
背景をオーバーレイして画面中央にポップアップ表示するダイアログ。画像拡大・確認ダイアログ・フォーム表示などに使用。背景クリックで閉じるUXが一般的。
🔍 モーダルウィンドウ 注意点
カルーセル / スライダー
画像や要素が横に自動スライドまたは手動で切り替わるUI。Swiper.jsが定番ライブラリ。実績・製品・バナーの展示に多用。autoplayとpauseonhoverの設定に注意。
🔍 Swiper.js 実装 おすすめ
ツールチップ
要素にホバーした時に表示される小さな補足説明の吹き出し。CSSのみで実装可能。アイコン単体だと意味が伝わりにくい場合などに使いアクセシビリティを補う。
🔍 ツールチップ css のみ
スケルトンスクリーン
コンテンツ読み込み中にグレーの枠（骨格）を表示しておく手法。体感速度が向上しユーザーへの不安感を軽減。SNS・ニュースアプリで広く採用されているローディングUX。
🔍 スケルトン 読み込み中
パララックス
スクロール時に背景と前景を異なる速度で動かす視差演出。奥行きと没入感を生む。JavaScriptまたはCSS backgroundで実装。重い場合はwill-changeやGPUレイヤーを活用。
🔍 視差効果 web 実装
マイクロインタラクション
ボタンを押した瞬間のリップル・ハートのアニメーション・いいねのバウンスなど、ユーザー操作に対する微細なフィードバック。品質感・満足度を高めるUX設計の重要要素。
🔍 ボタン 動き UX
スクロールアニメーション
スクロールで要素が画面に入った瞬間にフェードイン・スライドインする演出。AOS.jsやIntersection Observer APIで実装。使いすぎるとパフォーマンスが低下するため注意。
🔍 スクロールアニメーション js 実装
ローディング / スピナー
処理中であることをユーザーに示す回転するアニメーション。CSSのanimationで実装可能。長時間かかる処理ではプログレスバー（進捗バー）を使う方がUX上好ましい。
🔍 CSS ローディングアニメーション
トースト通知
画面の隅に一時的にポップアップして数秒後に自動的に消える通知UI。「保存しました」「コピーしました」などの完了フィードバックに使用。パンのトーストが跳び出るイメージから命名。
🔍 トースト通知 js 実装
吹き出し
漫画のセリフのようなデザインパーツ。キャラクターとセットで使うことでコンテンツを親しみやすく演出。CSSの:beforeで三角形を作る実装が一般的。
🔍 吹き出し css 作り方
フォーム・コンバージョン最適化
EFO Entry Form Optimization
入力フォームを最適化して離脱を防ぎCVRを上げる手法の総称。項目数の削減・リアルタイムバリデーション・住所自動入力などが施策例。フォーム離脱率の改善に直結する。
🔍 EFO 改善 施策
バリデーション
入力値のチェック処理。メールアドレス形式・必須項目の未入力・文字数超過などを送信前または入力中にリアルタイムで警告。HTMLのrequired属性やJavaScriptで実装。
🔍 入力チェック js
プレースホルダー
フォームの入力欄に最初から薄く表示されている入力例テキスト。「例：yamada@example.com」など。入力すると消える。ラベルの代替にはならないのでラベルとの併用が推奨。
🔍 placeholder デザイン
サンクスページ
フォーム送信や購入完了後に表示されるお礼ページ。Google Analyticsのゴールとして設定されることが多い。CVR計測の基準点になるためURLを固定するのが重要。
🔍 サンクスページ 改善
マイクロコピー
ボタンの直下の「登録は30秒・無料でいつでも解約可」など、ユーザーの不安を解消しクリックを後押しする短いテキスト。UXライティングの一分野。CVR改善に効果的。
🔍 マイクロコピー 例文集
ステップフォーム
1画面に多くの質問を出すのではなく、数ステップに分割して進めるフォーム形式。1問ずつ答える方が心理的ハードルが下がりCVRが上がるケースが多い。
🔍 ステップフォーム UX
価格表 Pricing Table
複数のサービスプランを並べて比較・提示するセクション。「おすすめ」バッジや強調色で特定プランに視線を誘導するデザインが定石。LPやSaaSサイトの定番UI。
🔍 料金表 コーディング
ステップ図
「利用の流れ」「申し込みの手順」などを1→2→3と図解するパーツ。ユーザーの不安を払拭し行動を促す。番号・アイコン・矢印をセットにしてデザインするのが一般的。
🔍 ステップ デザイン 流れ
WordPress 関連
子テーマ
親テーマを継承しつつカスタマイズを加えるWordPressの手法。テーマ更新があっても上書きされないため安全に改変できる。functions.php・style.cssを用意するだけで作成可能。
🔍 WP 子テーマ なぜ必要
プラグイン
WordPressに機能を追加する拡張ソフト。SEO対策・フォーム作成・セキュリティ・バックアップなど多岐にわたる。無闇に増やすとサイト速度低下・競合が起きるため厳選が必要。
🔍 WP おすすめ プラグイン
スラッグ
URLの末尾に使われる半角英数字の文字列。/blog/web-design-tips の「web-design-tips」部分がスラッグ。日本語は自動でエンコードされるためSEO上は英語スラッグが推奨。
🔍 スラッグ 決め方 SEO
カスタム投稿タイプ
「ブログ」以外に「実績」「スタッフ」「FAQ」などの独自の投稿枠を作る機能。Custom Post Type UIプラグインやfunctions.phpのregister_post_type()で作成。
🔍 カスタム投稿 作り方
タクソノミー / ターム
独自の分類（タクソノミー）とその中の個々の項目（ターム）。例：「業種」タクソノミーの中に「IT」「製造」などのタームを作る。カスタム投稿との組み合わせで強力な構造を作れる。
🔍 ターム 一覧 表示
アイキャッチ画像
投稿に設定するメイン画像。記事一覧・OGP・ヘッダーに使われる。サイズは横1200×縦630pxが一般的なSNSシェアの推奨サイズ。設定忘れによる「画像なし」に注意。
🔍 アイキャッチ 画像 サイズ
ブロックエディタ Gutenberg
WordPress標準の記事編集画面。コンテンツをブロック単位で組み立てる。旧来のクラシックエディタとはUIが大きく異なる。カスタムブロックの作成にはReactの知識が必要。
🔍 Gutenberg 使い方
パーマリンク
WordPressの各ページのURL構造の設定。「/%postname%/」（スラッグのみ）が一般的なSEO推奨設定。一度公開したサイトで変更するとリンク切れが発生するため慎重に設計する。
🔍 パーマリンク 設定 SEO
設計・デザインプロセス
ワイヤーフレーム WF
デザインカラーや写真は入れず、レイアウト・情報構造・導線を確認するためのモノクロ設計図。FigmaやXDで作成。クライアントとの認識合わせをデザイン前に行うことで手戻りを減らす。
🔍 ワイヤーフレーム ツール
サイトマップ
サイト全体のページ構成と階層関係を示す一覧図。制作開始前に作成しクライアントと合意する。SEO用XMLサイトマップ（検索エンジン向け）は別物。Googleサーチコンソールに登録する。
🔍 サイトマップ 構成図 作り方
モックアップ / デザインカンプ
実際のビジュアルに近いデザイン案を画像として作成したもの。コーディング前にデザインを確定させる。「カンプ」はcomprehensiveの略。FigmaやPhotoshopで制作が一般的。
🔍 デザインカンプ Figma 作り方
プロトタイプ
クリックやタップで画面遷移できるインタラクティブなデモ。Figmaのプロトタイプ機能で作成可。ユーザーテストやクライアントへのプレゼンに活用し、コーディング前に操作性を検証できる。
🔍 Figma プロトタイプ 作成
デザインシステム
色・フォント・コンポーネントのルールを一元化した設計ガイドライン。チームで統一されたUIを維持するために大規模プロジェクトで構築される。Figmaのコンポーネント機能と相性が良い。
🔍 デザインシステム 作り方
UI / UX
UI（User Interface）はボタン・フォームなどの視覚的な操作要素。UX（User Experience）はサイト全体を通じたユーザーの体験・印象全体。UIはUXを構成する一要素に過ぎない。
🔍 UI UX 違い わかりやすく
カラーパレット
サイトで使用する色の組み合わせ一覧。ベース色・アクセント色・テキスト色などを定義する。CSSカスタムプロパティ（変数）として管理することで一括変更が容易になる。
🔍 カラーパレット 作成 ツール
タイポグラフィ
サイトで使用するフォントの種類・サイズ・行間・字間などの設計。読みやすさとブランドの印象に直結する。Web用フォントはGoogle Fontsを活用することが多い。
🔍 Google Fonts 日本語 おすすめ
開発・環境・運用
レスポンシブデザイン
PC・タブレット・スマホなど様々な画面幅に対応してレイアウトを最適化する設計手法。CSSのmedia queryで各ブレークポイントを設定。モバイルファーストで設計するのが現在の主流。
🔍 メディアクエリ スマホ 書き方
本番 / ステージング環境
本番（production）は実際にユーザーが見ているサーバー。ステージングは公開前の確認用テストサーバー。本番に直接修正を加えるのは危険なため、ステージングで検証してからデプロイするのが基本。
🔍 ステージングサイト 作り方
デプロイ
ローカルやステージングで完成した修正データを本番サーバーに反映させること。FTPソフト・Git・CIツールなどを使う。「デプロイする」「リリースする」と同義で使われることが多い。
🔍 サーバー 反映 手順
キャッシュクリア
ブラウザが以前のページデータを保存（キャッシュ）しているため、サイト更新後も古い表示になることがある。Ctrl+Shift+R（スーパーリロード）で強制再読み込み。CDNキャッシュの削除も必要な場合がある。
🔍 スーパーリロード 方法
バージョン管理 Git
ファイルの変更履歴を記録・管理するシステム。Gitが世界標準。GitHubでリモート管理しチームで共同開発が可能。「コミット」「プッシュ」「プルリクエスト」が基本操作。
🔍 Git 入門 コマンド
ローカル環境
自分のPC上でWebサーバーを立ち上げ、インターネットに公開せずに開発・確認できる環境。WordPressならLocal・MAMP・XAMPPが定番ツール。開発の出発点となる環境。
🔍 Local WordPress ローカル 環境
API Application Programming Interface
異なるシステム・サービス間でデータをやり取りするための接続口。地図表示（Google Maps API）・決済（Stripe API）など外部サービスとの連携に不可欠。REST APIが現在の主流形式。
🔍 REST API とは わかりやすく
npm / Node.js
JavaScriptのパッケージ管理ツール（npm）と実行環境（Node.js）。Sassのコンパイル・バンドル・タスク自動化などのフロントエンド開発環境の構築に使用。npm installでライブラリを導入。
🔍 Node.js インストール 初心者
SEO・SNS・解析
OGP Open Graph Protocol
SNSでシェアされた際に表示されるタイトル・説明文・画像を制御するmeta情報。og:title / og:description / og:imageを<head>に記述。Twitter（X）用にTwitter Cardも設定が必要。
🔍 OGP 設定 チェック
メタタグ
<head>内に書くHTMLタグでページ情報を定義する。title・description・keywordsなど。titleとdescriptionはGoogle検索結果のタイトルと概要文として表示されSEOに直結する。
🔍 メタタグ SEO 書き方
構造化データ
Googleがページ内容を正確に理解できるようにJSON-LD形式でスキーマ情報を埋め込む手法。FAQページや口コミ・パンくずリストの構造化によりリッチスニペット表示が期待できる。
🔍 構造化データ JSON-LD 書き方
コアウェブバイタル
Googleが定めるUX品質の指標群。LCP（最大コンテンツの表示速度）・CLS（レイアウトのずれ）・INP（応答性）の3指標。SEOランキング要因の一つでありPageSpeed Insightsで確認できる。
🔍 Core Web Vitals 改善
Google Analytics GA4
Googleの無料アクセス解析ツール。訪問者数・流入経路・滞在時間・コンバージョンなどを計測。現在はGA4（Google Analytics 4）が標準。GTM（Googleタグマネージャー）と組み合わせて使うことが多い。
🔍 GA4 設定 初期 手順
Google Search Console
Googleの無料SEOツール。検索キーワード・クリック数・表示回数・インデックス状況・クロールエラーを確認できる。XMLサイトマップの登録もここで行う。SEO改善の起点となるツール。
🔍 Search Console 使い方 初心者
SSL / HTTPS
通信を暗号化しURLをhttps://にするセキュリティ対応。Let’s Encryptで無料取得可能。Google Chromeではhttp://サイトを「保護されていない通信」と警告表示。SEO・信頼性両面で必須の対応。
🔍 SSL 設定 WordPress
A/B テスト
2つのデザインや文言を同時に公開し、どちらがCVRが高いかを統計的に検証する手法。CTAボタンの色・コピーの違いなどを検証。Google Optimizeの終了後はVWOやAbly等の代替ツールが使われる。
🔍 A/Bテスト ツール 無料
HTML・CSS・JavaScript 基礎
セマンティック HTML
意味を持つタグを正しく使うこと。<header><nav><main><article><footer>などHTML5の要素を目的に応じて使い分ける。SEOとアクセシビリティの両方に好影響を与える。
🔍 セマンティック HTML5 タグ 一覧
CSSカスタムプロパティ
–color-primary: #333; のように変数を定義し、var(–color-primary)で呼び出す機能。デザインシステムの実装やテーマ切り替えに活用される。IE11以下非対応だが現在はほぼ全ブラウザ対応。
🔍 CSS 変数 カスタムプロパティ 使い方
Sass / SCSS
CSSに変数・ネスト・Mixin（関数的な書き方）などを加えたメタ言語。.scssファイルをコンパイルして.cssに変換して使う。大規模制作での管理が格段に楽になる。
🔍 SCSS 入門 書き方
BEM命名規則
Block__Element–Modifierの形式でCSSクラス名を統一する設計手法。.card__title–activeのように構造を名前で表現する。チーム開発での可読性と保守性を高める。
🔍 BEM CSS 設計 命名
アクセシビリティ a11y
視覚・聴覚・運動などの障害を持つユーザーも含め、誰でも使えるサイト設計のこと。alt属性の記述・キーボード操作対応・コントラスト比の確保が基本。WCAG 2.1が国際標準ガイドライン。
🔍 webアクセシビリティ 対応 基本
遅延読み込み Lazy Load
スクロールして画面に入ってきた時に初めて画像を読み込む手法。初期ページ読み込みを高速化できる。現在はloading=”lazy”属性をimgタグに付けるだけで対応可能。
🔍 lazy load 画像 実装
WebP（次世代画像形式）
GoogleがJPEGの代替として開発した画像フォーマット。同画質でJPEGより約25〜34%ファイルサイズが小さい。<picture>タグでJPEGとWebPを出し分けることでブラウザ互換性を保てる。
🔍 WebP 変換 方法
z-index
要素の重なり順をコントロールするCSSプロパティ。数値が大きいほど手前に表示される。positionを指定した要素のみに有効。モーダルやドロップダウンの表示制御でよく使う。
🔍 z-index 効かない 原因
position プロパティ
要素の配置方法を指定するCSSプロパティ。static（デフォルト）・relative（自身の元位置基準）・absolute（祖先要素基準）・fixed（ビューポート固定）・sticky（スクロール追従）の5種類。
🔍 CSS position 種類 違い
疑似要素（::before / ::after）
HTMLにタグを追加せずCSSだけで要素の前後にコンテンツを生成できる機能。装飾用の線・アイコン・吹き出しの三角形などに活用。contentプロパティとセットで使用する。
🔍 before after CSS 使い方
「」に一致する用語が見つかりませんでした。
