本文へスキップ
SYRUP

Web制作用語集

海辺康志
26.5.16
用語集
Web制作

概要

Web制作ロードマップに対応した用語集です。

Web開発イントロダクション

Web開発ロードマップ

ダウンロード

PDF版

内容

戦略・企画

用語説明
3C分析顧客、競合、自社の3つの視点から状況を整理する分析手法です。市場の中でどんな勝ち筋があるかを考える時に使います。
Backlogタスク管理、進行管理、課題管理を行うためのプロジェクト管理ツールです。誰が何を担当しているかを整理しやすくなります。
CVConversionの略で、サイト上で目的の成果が達成された回数です。問い合わせ完了や購入完了などが代表例です。
FigJamFigma系のオンラインホワイトボードツールです。アイデア整理、構造化、ユーザーフローやカスタマージャーニーの可視化に使われます。
Google Analyticsサイトに何人来たか、どのページを見たか、どこで離脱したかなどを確認できるアクセス解析ツールです。ユーザー行動の全体像を把握するのに使います。
Google Search ConsoleGoogle検索で自分のサイトがどう見られているかを確認するツールです。検索キーワード、表示回数、クリック数、検索上の問題点などを把握できます。
Google Trends検索キーワードの人気や関心の変化を時系列で調べられるツールです。市場の関心や季節変動を把握したい時に役立ちます。
Google スプレッドシート表形式で情報を整理・共有できるクラウド型の表計算ツールです。KPI管理、競合比較、進行管理表の作成などに向いています。
Keyword PlannerGoogle広告の機能の1つで、検索キーワードの候補やおおまかな検索需要を調べるためのツールです。キーワード選定の参考に使われます。
KGIKGIは最終的に達成したい大きな目標のことです。売上や問い合わせ件数など、プロジェクトのゴールそのものを表します。
KGI/KPIKGIは最終的に達成したい大きな目標、KPIはその途中経過を見るための指標です。たとえば「問い合わせ件数を増やす」がKGIで、「問い合わせボタンのクリック数」がKPIになります。
KPIKPIは目標達成に向かっているかを見るための中間指標です。PV、CV、クリック数など、改善判断の基準になります。
Microsoft Excel表や数式を使ってデータを整理・分析できる表計算ソフトです。KPI管理、比較表、一覧管理などで広く使われています。
Microsoft PowerPointプレゼン資料や提案資料を作るためのツールです。企画内容や構成案を整理して共有する時によく使われます。
Notionメモ、要件整理、タスク管理、資料共有などをまとめて行いやすい情報整理ツールです。企画や進行管理でよく使われます。
PVPage Viewの略で、ページが表示された回数です。サイトがどれくらい見られているかを知る基本的な指標の1つです。
RFPRequest for Proposalの略で、制作会社や開発会社に提案を依頼するための文書です。目的、要件、予算、納期などをまとめます。
SMART目標を分かりやすく現実的に設定するための考え方です。具体的で、測定できて、達成可能で、目的に合っていて、期限がある目標にすると、進捗を追いやすくなります。
STP分析Segmentation / Targeting / Positioning の略で、市場を分類し、狙う相手を決め、その中で自社をどう位置付けるかを整理する分析手法です。
SWOT分析強み、弱み、機会、脅威の4つに分けて状況を整理する分析手法です。自社の内部要因と外部環境を合わせて考えたい時に役立ちます。
USPUnique Selling Propositionの略で、「そのサービスならではの強み」や「他と比べた時の独自の価値」を指します。差別化の軸を考える時に重要です。
VOC分析Voice of Customerの略で、ユーザーの声や要望、不満を集めて分析することです。レビュー、問い合わせ、アンケート結果などから改善点を見つけます。
WBSWork Breakdown Structureの略で、作業を細かい単位に分解して整理した計画表です。何を誰がいつやるかを見えやすくします。
アンケート設計何を知りたいかに合わせて、質問内容や聞き方、回答形式を決めることです。質問の作り方によって、集まる情報の質が大きく変わります。
イベント設計ユーザーの行動を計測できるように、「どの操作を、どんな名前で記録するか」を決めることです。分析や改善の土台になります。
ガントチャートタスクごとの開始日・終了日・進捗を横棒で表したスケジュール表です。全体の流れや遅れを把握しやすくなります。
コンバージョンサイトで達成したい成果のことです。問い合わせ、購入、応募、資料請求など、サイトの目的に直結する行動を指します。
サイトマップ (サイトストラクチャー)サイト全体のページ構成や階層関係を整理した図や一覧です。サイトストラクチャーの整理、必要ページの抜け漏れ確認や導線設計に役立ちます。
スコープ今回のプロジェクトで「どこまでやるか」と「何をやらないか」を決めることです。作業の膨張を防ぎ、関係者の認識をそろえるために行います。
ターゲットサイトやサービスが誰に向けて作られているか、メインの対象層を明確にすることです。ペルソナ設計やコンテンツ方針の基盤になります。
ベンチマーク分析参考にしたい他社や優れた事例を比較し、自分たちの改善のヒントを得る分析です。良い実践例を学ぶ時によく使います。
ペルソナサイトやサービスの代表的な想定ユーザー像のことです。年齢、職業、悩み、目的などを具体的に設定することで、誰のために作るかを明確にします。
ボタン状態設計ボタンを見た人が「押せる」と分かるように、通常時・マウスを乗せた時・押した時・無効な時などの見た目や反応を決めることです。操作の分かりやすさや使いやすさに関わります。
ポジショニング分析競合と比べて自社がどの位置にいるかを整理する分析です。「安い」「高品質」「初心者向け」など、どんな立ち位置で選ばれるかを考える時に使います。
マイルストーン管理プロジェクトの重要な節目を設定し、そこに向けて進捗を確認する管理方法です。大きな遅れや認識ずれに気づきやすくなります。
ユーザーインタビュー実際のユーザーに話を聞いて、考え方や困りごと、行動の理由を深く理解する調査方法です。数字では分からない本音を知るのに向いています。
ユーザーストーリーユーザーが「どんな立場で、何をしたいか」を短く表した文章です。機能をユーザー視点で考えるために使います。
ユーザーリサーチユーザーの行動、意見、悩みを調べる調査全般のことです。インタビューやアンケート、行動観察など様々な手法があり、ユーザー理解の土台になります。
共感マップユーザーが見ていること、聞いていること、感じていること、言っていることなどを整理して理解するための枠組みです。ユーザー視点を深める時に使います。
役割分担表誰が企画、制作、レビュー、運用を担うかを明確に整理した表です。作業の重複や抜け漏れを防ぎ、チーム内の認識をそろえます。
情報アーキテクチャサイト内の情報を分類・整理し、ユーザーが迷わず目的の情報にたどり着けるように構成することです。サイトの使いやすさに大きく関わります。
技術選定目的や予算、納期、運用体制に合う技術を選ぶことです。後から大きく影響するため、早い段階での判断が重要です。
数値分解大きな目標を、より細かい数字の要素に分けて考えることです。どの数字を改善すれば成果につながるかを見つけやすくなります。
検索ワード分析ユーザーが実際にどんな言葉で検索しているかを調べることです。興味や悩みを把握し、コンテンツや導線の改善に役立てます。
機能要件整理サイトやシステムに必要な機能を洗い出して、優先度や必要性を整理することです。作るべきものを明確にするために行います。
直帰率ユーザーが最初に見た1ページだけでサイトを離れた割合です。必ずしも悪いとは限りませんが、導線や内容の見直し材料になります。
競合分析他社サイトや類似サービスを調べて、特徴や違い、差別化の方向を探ることです。自社の強みや改善点を見つけるために行います。
要件定義何を作るのか、どんな機能が必要か、どんな条件があるかを整理して決める工程です。後の設計や実装の土台になります。

ユーザー体験(UX) / 情報設計

用語説明
CTACall To Actionの略で、ユーザーに次の行動を促す要素のことです。たとえば「問い合わせる」「資料をダウンロードする」などのボタンやリンクが該当します。
CTA / フォーム導線設計行動を促すボタンから、フォーム入力、送信完了までをスムーズに進められるように流れを設計することです。途中で迷ったり離脱したりしないように整えます。
EFOEntry Form Optimizationの略で、入力フォームを使いやすく改善する考え方です。入力項目を減らす、エラーを分かりやすくするなどして、離脱を減らします。
FigJamオンラインホワイトボード形式でアイデアやユーザーフローを整理できるツールです。情報設計や導線の議論をチームで進める時に使われます。
Figmaワイヤーフレームや画面構成を作成・共有するためのデザインツールです。情報設計や導線設計を可視化しながら検討する時に役立ちます。
Google Analyticsユーザーがどのページを見て、どこで離脱したかなどの行動を確認できるアクセス解析ツールです。体験や導線の改善点を見つける時に役立ちます。
Google Search ConsoleGoogle検索での表示状況や検索キーワードを確認できるツールです。検索流入の実態を見ながら、情報設計や導線の見直しに活かせます。
アンケート設計何を聞くか、どう聞くか、どんな選択肢にするかを考えることです。質問の作り方によって、集まる回答の質が大きく変わります。
カスタマージャーニーユーザーがサービスを知ってから比較し、利用や問い合わせに至るまでの流れを整理した考え方です。行動だけでなく、その時の気持ちや悩みも合わせて考えます。
カスタマージャーニーマップカスタマージャーニーを図や表で見える化したものです。どの段階で何に困るか、どこで情報が必要かを整理しやすくなります。
グローバルナビゲーションサイト全体で共通して表示される主要メニューのことです。どのページからでも重要な情報へ移動しやすくする役割があります。
コンバージョン導線問い合わせや購入などの成果地点まで、ユーザーが迷わず進める流れのことです。CTA、フォーム、完了画面までを含めて設計します。
ナビゲーション設計ユーザーが迷わず目的のページに移動できるように、メニューやリンクの構成を考えることです。使いやすさに直結する重要な設計です。
パンくずリスト今見ているページがサイト内のどの位置にあるかを階層で示す案内です。現在地の把握や上位ページへの移動に役立ちます。
ユーザビリティテスト実際のユーザーに使ってもらい、どこで迷うか、どこが使いにくいかを確認するテストです。作り手では気づきにくい問題を見つけるのに役立ちます。
ユーザーアンケートユーザーに質問して、意見や満足度、困りごとなどを集める調査方法です。広く傾向を把握したい時に向いています。
ユーザーシナリオあるユーザーが、どんな状況で、何を目的に、どうサイトを使うかを具体的に想定した流れです。設計や改善の判断に使います。
ユーザーフローユーザーがサイト内でどの順番にページを見て、どこで操作するかという動きの流れです。カスタマージャーニーよりも、画面上の動線に近い考え方です。
ユーザー体験(UX)ユーザーがサービスやサイトを使う中で感じる体験全体のことです。見た目だけでなく、分かりやすさ、使いやすさ、安心感、満足感まで含みます。
ラベリングメニュー名、見出し、ボタン名などの言葉を、ユーザーに分かりやすく付けることです。言葉選びが悪いと、内容が正しくても伝わりにくくなります。
ローカルナビゲーション特定のカテゴリやページ群の中で使うメニューです。その範囲の中で関連ページへ移動しやすくするために使います。
ワイヤーフレーム画面に何をどこに配置するかを示す設計図です。色や装飾よりも、情報の優先順位やレイアウトを整理するために使います。
内部リンク同じサイト内の別ページへ移動できるリンクのことです。関連情報へつなげることで、回遊しやすさや情報の見つけやすさを高めます。
回遊導線設計ユーザーが1ページだけで終わらず、関連する別ページや次の行動へ自然に進めるように流れを設計することです。閲覧数や理解度の向上にもつながります。
回遊率サイト内で複数のページを見たユーザーの割合、または1セッションあたりの平均閲覧ページ数です。サイトの魅力や導線の効果を測る指標の1つです。
情報設計情報を整理し、必要な人に必要な内容が分かりやすく届くように構成することです。サイトを迷わず使えるかどうかに大きく関わります。
関連記事導線今読んでいる内容に近い別の記事やページへ案内する仕組みです。興味の流れに沿って次のページへ進んでもらいやすくなります。

ユーザーインターフェース(UI) / ビジュアルデザイン

用語説明
After EffectsAdobeのモーション・アニメーション制作ツールです。動画演出や動きのある表現設計に使われます。
CIガイドライン企業やブランドの見た目の統一ルールをまとめた指針です。ロゴ、色、書体などの使い方をそろえて、ブランドイメージを保つために使います。
FigmaUIデザイン、コンポーネント設計、プロトタイプ作成を行いやすいデザインツールです。画面の見た目だけでなく、操作の流れを確認する時にも使われます。
IllustratorAdobeのベクターグラフィック制作ツールです。ロゴ、アイコン、図版などの制作に使われます。
KV設計サイトやページの第一印象を決める中心的なビジュアルを設計することです。KV（キービジュアル）とも呼ばれ、サービスの特徴や世界観をひと目で伝える役割があります。
PhotoshopAdobeの画像編集・写真加工ツールです。ビジュアル制作や画像補正に広く使われます。
WCAGWeb Content Accessibility Guidelines の略で、Webを多くの人が使いやすくするための国際的な指針です。色の見やすさ、キーボード操作、読み上げ対応などの基準が含まれます。
アイコン / 画像設計写真、イラスト、アイコンなどの視覚素材を、どの場面でどう使うかを決めることです。情報の理解を助けたり、印象を強めたりする役割があります。
インタラクションデザインユーザーの操作に対して、画面やコンテンツがどう反応するかを設計する考え方です。押した時の反応、入力時の変化、体験型コンテンツのふるまいなどを含みます。
カラーパレットサイト全体で使う色の組み合わせを整理したものです。メインカラー、アクセントカラー、背景色などを定義し、統一感のある配色にします。
グリッドシステム画面を見えない線で区切り、要素をそろえて配置するためのルールです。デザインの一貫性や整った印象を作りやすくなります。
コンポーネント設計ルールボタンやカードなどの部品を再利用しやすくするために、使い分けやバリエーションの基準を決めることです。画面ごとのばらつきを減らせます。
ストーリーボード体験の流れや演出の意図を、時系列で絵や図にして整理した資料です。動画やアニメーション、動きのある表現を作る前の設計図として使います。
タイポグラフィ文字を読みやすく、美しく見せるための考え方や技法のことです。書体、文字の大きさ、行間、太さ、文字間隔などを調整して、読みやすく印象のよい文字表現を作ります。
デザインシステム色、文字、余白、UI部品などのルールをまとめて、チームで一貫したデザインを作るための仕組みです。効率化と品質の安定に役立ちます。
トーン&マナー設計表現の雰囲気や言葉づかい、見た目の統一感を決めることです。やさしい、信頼感がある、先進的など、ブランドらしさを一貫して伝えるために行います。
バリアント設計同じ部品でも用途に応じて複数の見た目や種類を持たせる設計です。たとえば主ボタン、補助ボタン、危険操作ボタンなどの違いを整理します。
ビジュアルデザイン色、文字、余白、画像、レイアウトなどを使って、見た目の印象や分かりやすさを整えることです。見栄えだけでなく、読みやすさや使いやすさにも関わります。
フォームUI入力欄、ラベル、補足文、エラーメッセージなど、フォームの見た目と構造を設計することです。入力しやすさや迷いにくさに直結します。
ブランドガイドラインブランドの見せ方や表現ルールをまとめた資料です。ロゴ、色、書体、写真の使い方などを統一するために使います。
ブランドパーソナリティブランドを人の性格のように捉えた時の特徴です。たとえば「親しみやすい」「誠実」「洗練されている」などの印象を設計する考え方です。
ブレイクポイントレスポンシブデザインで、表示を切り替える画面幅の基準となるポイントです。たとえば768pxや1024pxなど、端末サイズに応じたレイアウト変更の境目になります。
プロトタイピング完成前に画面遷移や操作感を試せる試作品を作り、見た目や流れを確認しながら改善していく進め方です。関係者との認識合わせや、早い段階で問題点を見つける時に役立ちます。
ボタン状態設計ボタンの通常時、ホバー時、押下時、無効時などの見え方や反応を設計することです。押せるかどうか、今どういう状態かを分かりやすく伝えます。
ボタン設計ボタンの見た目、大きさ、色、状態変化、優先度などを決めることです。どの行動を促したいかを伝える上で重要な要素です。
ムードボード参考になる色、写真、書体、デザイン事例などを集めて、表現したい雰囲気や世界観を共有するための資料です。完成形そのものではなく、デザインの方向性をチームでそろえる時に使います。
モーション / インタラクション設計画面の動きや操作に対する反応を設計することです。分かりやすさを高めたり、気持ちよい体験を作ったりする目的があります。
モーションデザイン動きを使って情報や感情を伝えるデザインのことです。画面遷移、ボタンの反応、ローディング表現なども含まれます。
ユーザーインターフェース(UI)ユーザーが画面上で直接見たり触ったりする部分のことです。ボタン、入力欄、メニュー、文字、画像など、操作に関わる見た目全体を指します。
レスポンシブデザインスマートフォン、タブレット、PCなど、画面サイズの違いに応じて見やすく使いやすく表示を変えるデザイン手法です。1つのサイトをさまざまな端末に対応させる時に使います。
余白・グリッド設計要素同士の間隔や、配置の基準となる枠組みを決めることです。情報を整理して、画面全体を見やすく整えるために使います。
動画・アニメーション設計動きや時間の変化を使って、情報や演出をどう見せるかを考えることです。視線誘導や理解の助けになる一方で、やりすぎると使いにくくなるため調整が重要です。
状態設計UI部品がどんな状態を持つかを整理することです。通常、ホバー、押下、選択中、無効、読み込み中などを想定します。
配色設計サイト全体で使う色のルールを決めることです。ブランドの印象を伝えたり、重要な情報を目立たせたり、読みやすさを保ったりする目的があります。

フロントエンド開発

用語説明
Astroコンテンツ中心のサイトを軽く速く作りやすいフレームワークです。必要な部分だけJavaScriptを使う考え方が特徴で、静的サイトにも向いています。
async/await非同期処理を、順番に処理しているように読みやすく書くための構文です。Promiseをより分かりやすく扱いやすくします。
axe DevToolsアクセシビリティ上の問題を検出し、WCAG基準との照合や改善点の確認に使うツールです。
CDNContent Delivery Network の略で、ユーザーに近い場所から画像やファイルを配信する仕組みです。表示速度や安定性の改善に役立ちます。
Chrome DevToolsChromeブラウザに標準搭載されている開発者向けツールです。表示崩れの確認、JavaScriptのデバッグ、通信やパフォーマンスの確認に使います。
Cookieブラウザに保存される小さなデータのことです。ログイン状態の保持やユーザー設定の記憶など、サーバーとブラウザ間で情報を受け渡す時に使われます。
CSSWebページの見た目を整えるための言語です。色、余白、文字サイズ、配置などを調整し、デザインを画面に反映します。
CSS Grid行と列を使って、2次元で要素を配置できるCSSのレイアウト手法です。複雑な画面構成を整理して作りやすくなります。
ESLintJavaScriptやTypeScriptの書き方をチェックするツールです。ミスや書き方のばらつきを減らし、コード品質を保つのに役立ちます。
FigmaデザインカンプやUI設計を確認・共有するためのツールです。実装前の認識合わせや、デザイン参照に使われます。
Flexbox要素を横並び・縦並びにしながら、位置や間隔を柔軟に調整できるCSSのレイアウト手法です。1列方向の配置に向いています。
Framer MotionReactでアニメーションを簡単に実装できるライブラリです。画面遷移やUI要素の動きを滑らかに表現する時に使われます。
Gitソースコードの変更履歴を記録・管理する仕組みです。いつ何を変えたかを追跡でき、複数人での開発にも欠かせません。
GitHubGitで管理しているコードを共有・レビュー・管理しやすくするサービスです。プルリクエストやCI/CD連携でもよく使われます。
GraphQL必要なデータだけを柔軟に取得しやすいAPIの仕組みです。複数の情報を1回でまとめて取得したい時などに便利です。
GSAPWeb上のアニメーションを細かく制御しやすいJavaScriptライブラリです。滑らかな動きや複雑な演出を実装する時に使われます。
HTMLWebページの骨組みを作るための言語です。見出し、文章、画像、リンク、フォームなど、ページに何があるかを表します。
ISRIncremental Static Regeneration の略で、静的ページを必要に応じて再生成する仕組みです。更新頻度が低くても最新情報を反映したい時に使われます。
JavaScriptWebページに動きや処理を加えるためのプログラミング言語です。ボタンを押した時の反応や、データの切り替えなどを実装する時に使います。
JestJavaScriptやTypeScriptのテストを書くためのツールです。関数やUIの動作が想定通りかを自動で確認できます。
JWTJSON Web Tokenの略で、ログイン状態や認証情報を安全に受け渡すための仕組みです。API認証などでよく使われます。
Lighthouseページのパフォーマンス、アクセシビリティ、SEOなどを計測できるツールです。改善点を見つける時の参考になります。
Netlify静的サイトやフロントエンドの公開・デプロイを手軽に行えるホスティングサービスです。Jamstack系の運用でもよく使われます。
Next.jsReactをベースにしたフレームワークです。ルーティング、SSR、SSGなどをまとめて扱いやすく、Webアプリやサイト制作で広く使われます。
Node.jsJavaScriptをブラウザの外でも実行できる実行環境です。開発サーバーの起動、ビルド、パッケージ管理ツールの利用などで使われます。
npmNode.jsで使うパッケージ管理ツールです。ライブラリの追加、更新、スクリプト実行などを行う時に使います。
NuxtVueをベースにしたフレームワークです。ページ構成やデータ取得、SSRなどを整理しやすく、Vue系の開発でよく使われます。
OAuth外部サービスのアカウントを使って認証や認可を行う仕組みです。GoogleログインやXログインなどでよく使われます。
Pixi.js2Dグラフィックスやアニメーションを高速に描画しやすいJavaScriptライブラリです。ゲーム風の表現や動きの多い画面に向いています。
PostmanAPIのリクエストやレスポンスを確認・テストするためのツールです。フロントエンドとバックエンドの連携確認に役立ちます。
Prettierコードの見た目を自動で整えるフォーマッタです。インデントや改行位置などを統一し、読みやすさとチーム内の一貫性を保ちます。
Promise非同期処理の結果を後から受け取るための仕組みです。通信や時間のかかる処理が終わった後の流れを整理しやすくします。
ReactUIを部品ごとに分けて作れるJavaScriptライブラリです。再利用しやすい画面設計がしやすく、多くのフロントエンド開発で使われています。
React Hook FormReactでフォームの入力管理やバリデーションを効率的に行えるライブラリです。再レンダリングを抑えつつ、複雑なフォームも扱いやすくなります。
ReduxReactでよく使われる状態管理ライブラリです。複数の画面や部品で共有するデータを整理しやすくします。
REST APIURLごとに役割を分けてデータをやり取りする、代表的なAPI設計の考え方です。Webサービス同士の連携で広く使われています。
SassCSSの変数、ネスト、mixinなどを使い、スタイルの保守性と再利用性を高めるCSS拡張言語です。複雑なスタイル管理をしやすくなります。
Sentry本番環境で発生したエラーを収集し、原因調査につなげる監視ツールです。利用者の環境で起きた不具合を把握しやすくなります。
SSGStatic Site Generation の略で、あらかじめ静的なHTMLを生成して配信する仕組みです。表示が速く、更新頻度が低いページに向いています。
SSRServer Side Rendering の略で、サーバー側でHTMLを作ってからブラウザに返す仕組みです。初回表示やSEOに有利な場面があります。
StorybookUIコンポーネントを単体で確認・整理できるツールです。部品ごとの見た目や状態を確認しやすく、デザインと実装の共有にも役立ちます。
Svelte記述量が少なく、コンパイル時に最適化されるJavaScriptフレームワークです。軽量で高速な画面実装に向いています。
Tailwindあらかじめ用意されたクラス名を組み合わせて、素早く見た目を整えられるCSSフレームワークです。細かなCSSを一から書く量を減らしやすいのが特徴です。
Three.jsブラウザで3D表現を扱いやすくするJavaScriptライブラリです。立体的な演出やインタラクティブな表現を実装する時に使います。
TurbopackRustで作られた高速なビルド・バンドルツールです。特にNext.js系の開発で、起動や更新反映を速くする目的で使われます。
TypeScriptJavaScriptに型の考え方を加えた言語です。入力やデータの形を明確にできるため、ミスを減らし、保守しやすいコードを書きやすくなります。
VercelNext.jsなどのモダンフレームワークと相性のよいデプロイ・ホスティングサービスです。プレビュー環境の自動生成や高速なCDN配信が特徴です。
Viteフロントエンド開発向けの高速な開発環境構築ツールです。起動や更新反映が速く、最近の開発でよく使われます。
VitestViteと相性のよい高速なテストツールです。フロントエンド開発でユニットテストを実行する時によく使われます。
VS Codeフロントエンド開発で広く使われるコードエディタです。拡張機能が豊富で、編集、デバッグ、整形などをまとめて行いやすいのが特徴です。
VueHTMLに近い書き方で画面を組み立てやすいJavaScriptフレームワークです。学びやすさと柔軟さのバランスがよく、幅広い案件で使われます。
VuexVueで使われる代表的な状態管理ライブラリです。アプリ全体で使う状態をまとめて管理する時に使います。
WAI-ARIA支援技術に画面の意味や状態を伝えやすくするための属性の仕組みです。アクセシビリティを高める時に使います。
Webpack複数のJavaScriptやCSS、画像などをまとめて管理し、本番用に最適化するビルドツールです。少し古くからある仕組みですが、今も多くの現場で使われています。
Yupフォームやデータの入力内容を検証するためのライブラリです。入力値が条件に合っているかを確認する時に使います。
ZodTypeScriptと相性のよいバリデーションライブラリです。データの形や型を明確に検証しやすいのが特徴です。
エラーバウンダリReactコンポーネントで発生したエラーをキャッチし、画面全体が崩れるのを防ぐ仕組みです。エラー発生時に代替表示を出すことで、ユーザーへの影響を抑えられます。
セマンティックHTML見た目のためだけでなく、要素の意味に合ったHTMLタグを使う考え方です。アクセシビリティやSEOの改善にもつながります。
デザインシステム色、文字、余白、UI部品などのルールを整理し、一貫した画面を効率よく作るための仕組みです。
ボックスモデルHTMLの各要素が「内容・余白・枠線・外側の間隔」の4層で構成される考え方です。レイアウトや余白の計算に影響するため、CSS実装の基礎として重要です。
メタタグ設計タイトル、説明文、OGPなど、ページの情報を検索エンジンやSNSに正しく伝えるためのタグ設計です。SEOや共有時の見え方に関わります。
メディアクエリ画面サイズや端末条件に応じてCSSを切り替える仕組みです。スマートフォン、タブレット、PCで表示を最適化する時に使います。
構造化データ検索エンジンがページ内容を理解しやすいように情報を記述する仕組みです。SEO改善にも役立ちます。
構造化データ (JSON-LD)ページ内容を検索エンジンが理解しやすい形で記述する仕組みです。検索結果での見え方を改善したい時に使われます。
画像最適化画像の容量やサイズを調整して、ページ表示を速くすることです。見た目の品質を保ちながら、読み込み負荷を減らします。

バックエンド開発

用語説明
ComposerPHPで使うパッケージ管理ツールです。ライブラリの導入や依存関係の管理に使います。
Contentfulグローバルでも利用されるヘッドレスCMSです。複数チャネル向けにコンテンツを一元管理しやすいのが特徴です。
CORS別のドメイン間で通信する時に、どこまで許可するかを制御する仕組みです。APIを安全に公開する上で重要です。
CSPContent Security Policy の略で、読み込んでよいスクリプトや画像の出所を制限する仕組みです。XSS対策の1つとして使われます。
DBインデックスデータベース検索を速くするための仕組みです。本の索引のように、目的のデータへ早くたどり着きやすくします。
DjangoPythonで使われるWebフレームワークです。管理画面や認証などが最初からそろっていて、機能をまとめて作りやすいのが特徴です。
Dockerアプリや開発環境をコンテナとしてまとめて動かす仕組みです。実行環境の差異を減らし、同じ環境を再現しやすくします。
ER図データ同士の関係を図で整理したものです。どの情報がどう結び付くかを設計する時に役立ちます。
ESLintJavaScriptやTypeScriptの書き方をチェックするツールです。ミスや書き方のばらつきを減らし、コード品質を保つのに役立ちます。
ExpressNode.jsでWebサーバーやAPIを作るための軽量なフレームワークです。シンプルで柔軟に構成しやすいのが特徴です。
Gitソースコードの変更履歴を記録・管理する仕組みです。いつ何を変えたかを追跡でき、複数人での開発にも欠かせません。
GitHubGitで管理しているコードを共有・レビュー・管理しやすくするサービスです。プルリクエストやCI/CD連携でもよく使われます。
GraphQL必要なデータだけを柔軟に取得しやすいAPIの仕組みです。複数の情報を1回でまとめて取得したい時などに便利です。
JestJavaScriptやTypeScriptのテストを書くためのツールです。関数や処理が想定通りかを自動で確認できます。
JWTJSON Web Tokenの略で、ログイン状態や認証情報を安全に受け渡すための仕組みです。API認証などでよく使われます。
LaravelPHPで使われる代表的なWebアプリケーションフレームワークです。ルーティング、認証、DB操作などを整理して実装しやすくなります。
microCMS日本でよく使われるヘッドレスCMSです。管理画面でコンテンツを管理し、API経由でフロントエンドへ配信できます。
MySQL広く使われているリレーショナルデータベースです。表形式でデータを管理し、Webサービスでもよく使われます。
Node.jsJavaScriptをサーバー側でも実行できる実行環境です。APIやサーバーサイド処理の実装によく使われます。
npmNode.jsで使うパッケージ管理ツールです。ライブラリの追加、更新、スクリプト実行などを行う時に使います。
OAuth外部サービスのアカウントを使って認証や認可を行う仕組みです。GoogleログインやGitHubログインなどでよく使われます。
OpenAPIAPIの仕様を共通の形式で記述するための仕組みです。どんなエンドポイントがあり、何を返すかを文書化・共有しやすくなります。
OWASPWebアプリケーションのセキュリティ対策でよく参照される知見や指針のまとまりです。代表的な脆弱性や対策を学ぶ時の基準になります。
PHPWebサーバー上で動く処理を実装する時によく使われるプログラミング言語です。CMSや業務システムの開発でも広く使われています。
PHPUnitPHPで使われる代表的なテストツールです。PHPアプリケーションの動作確認や回帰防止に使われます。
pipPythonで使うパッケージ管理ツールです。必要なライブラリのインストールや更新に使います。
PostgreSQL高機能なリレーショナルデータベースです。複雑な検索や厳密なデータ管理が必要な場面でも使いやすいのが特徴です。
PostmanAPIのリクエストやレスポンスを確認・テストするためのツールです。バックエンド開発ではAPIの動作確認によく使われます。
Prettierコードの見た目を自動で整えるフォーマッタです。インデントや改行位置などを統一し、読みやすさとチーム内の一貫性を保ちます。
PrismaNode.js/TypeScript系でよく使われるORMです。コードからデータベースを扱いやすくし、型安全に操作しやすいのが特徴です。
pytestPythonでよく使われるテストツールです。シンプルにテストを書きやすく、幅広いPython開発で使われています。
Python読みやすさと書きやすさに強みがあるプログラミング言語です。Web開発、データ処理、自動化など幅広い用途で使われます。
RBACRole-Based Access Control の略で、ユーザーの役割に応じて操作できる範囲を制御する仕組みです。管理者、編集者、閲覧者など権限を分けて管理します。
Redisデータをメモリ上に保持して高速に扱える仕組みです。キャッシュやセッション管理、処理の高速化によく使われます。
REST APIURLごとに役割を分けてデータをやり取りする、代表的なAPI設計の考え方です。Webサービス同士の連携で広く使われています。
Sentry本番環境で発生したエラーを収集し、原因調査につなげる監視ツールです。サーバー側で起きた不具合の把握にも役立ちます。
SequelizeNode.jsで使われるORMの1つです。JavaScriptからSQLデータベースを扱いやすくするために使われます。
SQLデータベースに対して検索、追加、更新、削除を行うための言語です。多くのリレーショナルDBで使われます。
SQLインジェクション対策悪意のあるSQL文を入力値に混ぜられても不正操作されないようにする対策です。プレースホルダ利用や入力検証などが含まれます。
StrapiオープンソースのヘッドレスCMSです。コンテンツモデルの設計とAPIの自動生成がしやすく、柔軟なコンテンツ管理に向いています。
VitestViteと相性のよい高速なテストツールです。Node.js系の開発でもユニットテスト実行に使われます。
WordPress世界的によく使われているCMSです。記事管理やページ作成がしやすく、拡張機能も豊富です。
XSS対策ユーザーの入力を通じて悪意のあるスクリプトが実行されるのを防ぐ対策です。出力時のエスケープ処理やCSPの設定などが含まれます。
エラーレスポンスAPIやサーバーでエラーが発生した時に返すエラー内容のことです。ステータスコードと合わせて、何が起きたかを分かりやすく伝えます。
カスタムフィールドCMSで標準の入力項目以外に、独自の項目を追加できる仕組みです。案件ごとに必要な情報を柔軟に設定できます。
キャッシュ戦略データやページの表示を速くするために、一時保存したデータをどう使い回すかを計画することです。更新頻度と表示速度のバランスを考慮します。
クエリ最適化データベースへの問い合わせを速く効率的にすることです。無駄なデータ取得を減らし、応答速度を改善します。
ステータスコードHTTP通信の結果を示す3桁の番号です。200は成功、404はページ未検出、500はサーバーエラーなど、通信の成否を判断する基準になります。
セッション管理ユーザーのログイン状態や操作の流れをサーバー側で管理する仕組みです。ログイン後の状態維持やタイムアウト処理などに使われます。
パスワードハッシュ化パスワードを元に戻せない形に変換して保存する仕組みです。万が一データが漏れても、パスワードそのものが分からないようにします。
プラグインCMSやアプリに機能を追加するための拡張モジュールです。標準機能では足りない部分を補うことができます。
ミドルウェアリクエストとレスポンスの間で共通処理を行う仕組みです。認証チェックやログ出力など、複数の処理で使い回す処理をまとめます。
リフレッシュトークンアクセストークンの有効期限が切れた後に、新しいトークンを取得するために使う認証情報です。ユーザーに再ログインを促さずにセッションを継続できます。
リレーションデータベースでテーブル同士を関連付ける関係のことです。1対多や多対多など、データ同士のつながりを定義します。
ルーティングURLとそれに対応する処理を結び付ける仕組みです。どのアドレスにアクセスされたらどの処理を実行するかを決めます。
入力値バリデーションユーザーが入力した値が正しい形式や範囲に合っているかを確認する仕組みです。不正なデータの送信を防ぎ、安全な処理を守ります。
正規化データの重複を減らし、整合性を保ちやすくするためにテーブル構造を整理する考え方です。DB設計の基本の1つです。

インフラ / DevOps

用語説明
.env環境変数をファイルで管理する時によく使われるファイル名です。APIキーや接続先設定などを環境ごとに分ける時に使います。
AmplifyAWS上でフロントエンドのホスティングやデプロイ、周辺機能の連携を行いやすくするサービスです。
Apache長く広く使われてきたWebサーバーソフトウェアです。設定の柔軟さがあり、さまざまな環境で利用されています。
AuroraAWSが提供する高性能なマネージドリレーショナルデータベースです。MySQL互換やPostgreSQL互換で使われることがあります。
AWSAmazonが提供するクラウド基盤です。サーバー、ストレージ、DB、監視など多くのサービスを利用できます。
AzureMicrosoftが提供するクラウド基盤です。サーバーやデータベース、各種業務サービスと連携しながら運用できます。
CI/CDContinuous Integration / Continuous Delivery の略で、ビルド・テスト・デプロイを自動化して、変更を安全に反映しやすくする考え方です。
CI/CDパイプラインビルド、テスト、デプロイまでの一連の自動処理の流れのことです。コードの変更から本番反映までを継続的に実行できるようにします。
CLICommand Line Interface の略で、文字を入力してコンピューターを操作する方法です。サーバー作業や設定変更でよく使います。
CloudflareDNS、CDN、セキュリティ保護などをまとめて扱えるサービスです。表示速度改善や防御強化に役立ちます。
CloudFrontAWSのCDNサービスです。世界中のユーザーへコンテンツを高速配信しやすくします。
CloudWatchAWSの監視サービスです。ログやメトリクスを収集し、可視化やアラート設定に使えます。
Datadogサーバーやアプリのログ、メトリクス、監視ダッシュボードをまとめて扱える監視サービスです。異常の早期発見や可視化に役立ちます。
DDoS対策大量の不正な通信でサーバーに負荷をかけ、サービスを止めようとする攻撃への対策です。防御サービスやアクセス制限などで対応します。
DevOps開発（Development）と運用（Operations）が連携しながら、素早く安定してサービスを改善していく考え方です。作るだけでなく、公開後の運用や改善まで含めて見ます。
DNSドメイン名とIPアドレスを結び付ける仕組みです。人が分かりやすいURLでサイトにアクセスできるようにします。
DNSレコードドメインに関する様々な設定情報のことです。どのサーバーにアクセスするか、メールの送信先などを指定します。
Dockerアプリや開発環境をコンテナとしてまとめて動かす仕組みです。実行環境の差異を減らし、同じ環境を再現しやすくします。
Docker Compose複数のコンテナを連携させて起動・管理するためのツールです。Webサーバーとデータベースなど、複数サービスの構成を1つのファイルで定義できます。
DockerfileDockerイメージを自動で作成するための設定ファイルです。ベースとなる環境やインストールするソフトウェア、コピーするファイルなどを記述します。
FTPFile Transfer Protocol の略で、サーバーへファイルを送受信するための仕組みです。古くからある公開手段の1つです。
GCPGoogle Cloud Platform の略で、Googleが提供するクラウド基盤です。アプリ実行、データ処理、インフラ運用などに使えます。
Gitソースコードの変更履歴を記録・管理する仕組みです。デプロイや共同作業の土台にもなります。
GitHub ActionsGitHub上でビルド、テスト、デプロイなどを自動化できる仕組みです。CI/CDの実現によく使われます。
HTTPWebブラウザとサーバーが情報をやり取りするための通信ルールです。ページの表示やAPI通信の基本になります。
HTTPSHTTPを暗号化して安全に通信できるようにした仕組みです。ログイン情報や個人情報を扱うサイトでは特に重要です。
IAMIdentity and Access Management の略で、誰がどのサービスや操作を使えるかを管理する仕組みです。クラウド運用で重要な権限管理の考え方です。
LambdaAWSのサーバレス実行サービスです。サーバーを常時管理せず、必要な時だけコードを実行できます。
Let’s Encrypt無料でSSL/TLS証明書を発行・更新できるサービスです。HTTPS化を手軽に実現でき、小規模サイトでも安全な通信を導入しやすくなります。
Lintコードの書き方や潜在的な問題を自動でチェックする仕組みの総称です。チーム内のコード品質を一定に保つために使われます。
Linuxサーバーで広く使われているOSです。Webサーバーやアプリケーションを動かす土台としてよく使われます。
NeonPostgreSQL系のマネージドデータベースサービスです。サーバー管理をあまり意識せずにDBを利用しやすいのが特徴です。
Netlify静的サイトやフロントエンドの公開・デプロイを手軽に行えるホスティングサービスです。Jamstack系の運用でもよく使われます。
Nginx高速なWebサーバーソフトウェアです。静的ファイル配信やリバースプロキシ用途でもよく使われます。
Node.jsJavaScriptをサーバー側でも実行できる実行環境です。WebアプリやAPIの実行環境としても使われます。
PHPWebサーバー上で動く処理を実装する時によく使われるプログラミング言語です。CMSや業務システム開発でも広く使われています。
productionユーザーが実際に利用する本番環境のことです。安定性や安全性が特に重要になります。
Python読みやすさと書きやすさに強みがあるプログラミング言語です。サーバー処理、自動化、データ処理など幅広く使われます。
RDSAWSのマネージドデータベースサービスです。DBの運用や保守の負担を減らしながら使えます。
Redisデータをメモリ上に保持して高速に扱える仕組みです。キャッシュやセッション管理などに使われます。
S3AWSのオブジェクトストレージサービスです。画像、動画、バックアップ、静的ファイルの保存によく使われます。
Sentryアプリやサーバーで発生したエラーを収集し、原因調査につなげる監視ツールです。本番環境の不具合把握に役立ちます。
SSHSecure Shell の略で、サーバーへ安全に接続して操作するための仕組みです。コマンド実行やファイル操作、設定変更などに使います。
SSH鍵認証パスワードの代わりに公開鍵・秘密鍵の組み合わせで認証する方法です。SSH接続をより安全に行いやすくします。
SSL/TLS通信を暗号化して安全に送受信するための仕組みです。HTTPSを実現するために使われます。
staging本番公開前に動作確認を行うための検証環境です。本番に近い条件でテストしたい時に使います。
TCP/IPインターネット通信の基本となる仕組みです。Webサイトやアプリがネットワーク越しにやり取りする土台になります。
UbuntuLinux系OSの1つです。扱いやすく情報も多いため、開発用やサーバー用として広く使われています。
VercelフロントエンドやWebアプリのデプロイを簡単に行いやすいホスティングサービスです。プレビュー環境も作りやすいのが特徴です。
VPSVirtual Private Server の略で、1台の物理サーバーを仮想的に分けて専用に近い形で使えるサーバーです。共用サーバーより自由度が高いのが特徴です。
WAFWeb Application Firewall の略で、Webアプリへの攻撃を検知・遮断するための仕組みです。SQLインジェクションやXSS対策などに使われます。
イメージコンテナを作成する元となる設計図のようなものです。Dockerfileから作成され、同じ環境を何度でも再現できます。
インフラWebサイトやアプリを動かすための土台となる環境のことです。サーバー、ネットワーク、データベース、ストレージなどが含まれます。
オートスケーリングアクセス増加に応じてサーバーを自動で増やし、減少に応じて減らす仕組みです。トラフィックの変動に対応して安定稼働を保ちます。
クラウドインターネット経由でサーバーやDB、ストレージなどを必要に応じて利用できる仕組みです。物理機器を自前で持たずに運用しやすくなります。
コンテナアプリを必要な設定や依存関係ごとまとめて動かす単位です。環境差異を減らし、配布や再現をしやすくします。
サーバレスサーバーの管理や構築を意識せずにアプリケーションを実行できる仕組みです。コードを書くことに集中でき、運用負荷を減らせます。
シェルスクリプトシェルで実行するコマンドを順に記述したファイルです。定型的な作業を自動化する時に使われます。
シークレット管理APIキーやパスワードなどの機密情報を安全に保管・管理する仕組みです。コードに直接書かずに環境変数や専用サービスで管理します。
ステージング環境本番公開前に動作確認を行うための検証環境です。本番に近い条件でテストしたい時に使います。
スナップショットある時点のデータやサーバー状態を保存したものです。障害時の復旧やバックアップに使われます。
ドメインWebサイトの住所にあたる名前です。たとえば example.com のような形で、サイトの公開先を表します。
バーチャルホスト1台のサーバーで複数のドメインやサイトを運用する仕組みです。1つのサーバーで複数のWebサイトを公開したい時に使います。
ビルドソースコードを実行可能な形式に変換する作業のことです。コンパイル、バンドル、最適化などの処理を含みます。
ビルドパイプラインソースコードの変更から実行可能な形式への変換までを自動化した一連の流れです。テストや最適化も含めて継続的に実行します。
ファイアウォール通信を許可・拒否するルールを設定して、不正なアクセスを防ぐ仕組みです。サーバー防御の基本の1つです。
ポートネットワーク通信で、どのサービスにデータを届けるかを識別するための番号です。たとえばHTTPは80番、HTTPSは443番など、用途ごとに割り当てられています。
リージョンクラウドサービスのデータセンターが所在する地理的な場所です。ユーザーに近いリージョンを選ぶことで、通信の遅延を減らせます。
ログ解析ログとして記録された情報を読み取り、何が起きたかや原因を調べることです。障害時の切り分けで重要です。
ロードバランサー複数のサーバーに通信を振り分ける仕組みです。負荷分散や可用性向上に役立ちます。
ロールバック不具合が起きた時に、前の安定した状態へ戻すことです。リリース運用の安全性を高めるために重要です。
共用サーバー1台のサーバーを複数の利用者で共通利用する形のサーバーです。手軽ですが、自由度や性能面では制約があります。
冗長化一部が故障してもサービスを止めにくくするために、構成を二重化・多重化する考え方です。安定運用の基本です。
本番環境ユーザーが実際に利用する環境のことです。安定性や安全性が特に重要になります。
環境変数アプリの設定値をコードの外で管理する仕組みです。環境ごとに値を切り替えたい時や、秘密情報を分離したい時に使います。
自動テストコードの変更に合わせてテストを自動で実行する仕組みです。手動確認の手間を減らし、品質低下に早く気づけるようにします。
開発環境機能の開発やテストを行うための環境です。本番環境に影響を与えずに、自由に試行錯誤できるのが特徴です。

品質管理 / テスト

用語説明
Android StudioAndroidアプリ開発向けの統合開発環境です。Android端末向けのシミュレーター確認にも使えます。
axe DevToolsアクセシビリティ上の問題を自動で見つけやすくするツールです。見落としやすい改善点を確認する時に役立ちます。
Backlog不具合管理や確認項目、対応状況の整理に使いやすいプロジェクト管理ツールです。誰が何を直すかを共有しやすくします。
ChromaticStorybookと連携し、UIコンポーネントのビジュアルリグレッションテストを自動化するサービスです。コード変更前後のスクリーンショットを比較し、見た目の変化をレビューしやすくします。
ChromeGoogleが提供するWebブラウザです。表示や動作確認の基準として使われることが多いです。
Chrome DevToolsChromeブラウザに標準搭載されている開発者向けツールです。表示崩れ、コンソールエラー、通信状況の確認に使います。
CIパイプラインコードの変更を検知して、ビルドやテストを自動で実行する一連の流れです。品質低下に早く気づけるようにします。
E2EテストEnd-to-End テストの略で、ログインや購入など実際のユーザー操作の流れを通して確認するテストです。複数の画面や機能にまたがる動作を、ユーザー視点で確認できます。
EdgeMicrosoftが提供するWebブラウザです。Windows環境での確認対象としてよく使われます。
FirefoxMozillaが提供するWebブラウザです。主要ブラウザ間の表示差異確認で使われます。
GitHub ActionsGitHub上でテスト実行やチェックを自動化できる仕組みです。変更のたびに品質確認を回しやすくなります。
GitHub IssuesGitHub上で不具合や改善項目をチケットとして管理する仕組みです。コード管理と一緒に課題を追いやすいのが特徴です。
Google Analyticsサイトの閲覧状況やユーザー行動、コンバージョン状況を確認できるアクセス解析ツールです。導線や改善点を見つける時にも役立ちます。
Google Search ConsoleGoogle検索での表示状況や構造化データの状態を確認できるツールです。検索上の問題把握にも役立ちます。
JestJavaScriptやTypeScriptで単体テストを書く時によく使われるツールです。処理が想定どおりに動くかを自動で確認できます。
Lighthouseページのパフォーマンス、アクセシビリティ、SEOなどを計測し、改善点を提示するツールです。
meta description検索結果でページ説明文として使われることがあるHTMLタグです。内容を短く伝え、クリック率改善に役立ちます。
Meta Sharing DebuggerMeta公式の共有デバッグツールです。OGPがどのように読み取られているかや、共有プレビューを確認する時に使います。
OGPSNSやチャットで共有された時のタイトル、説明文、画像などを指定する仕組みです。共有時の見え方を整えるために使います。
Playwrightブラウザ操作を自動化し、E2Eテストを実行しやすくするツールです。実際の画面操作に近い形で確認できます。
Rich Results Test構造化データがGoogleのリッチリザルトとして認識されるか確認するツールです。検索結果で追加情報が出るかの確認に使います。
SafariAppleが提供するWebブラウザです。iPhoneやMacでの表示確認では特に重要です。
Schema Markup Validatorschema.orgやJSON-LDの記述内容が正しいかを確認するツールです。構造化データの文法や内容確認に役立ちます。
Schema.org構造化データを記述するための語彙（ボキャブラリー）を提供する仕組みです。検索エンジンがページ内容を理解しやすくするために使われます。
titleタグページのタイトルを検索エンジンやブラウザに伝えるHTMLタグです。検索結果の見え方にも影響します。
VitestViteと相性のよい高速なテストツールです。フロントエンド開発での単体テストによく使われます。
WAI-ARIA支援技術に画面の意味や状態を伝えやすくするための属性の仕組みです。アクセシビリティ改善でよく使われます。
XcodeApple製アプリ開発向けの統合開発環境です。iPhoneやiPad向けのシミュレーター確認に使われます。
アクセシビリティテスト支援技術（スクリーンリーダーなど）を使うユーザーを含め、誰もが利用できる状態かを確認するテストです。ツールによる自動検査と手動確認を組み合わせて行います。
アサーションテストの中で「この結果になるはず」と期待値を確認する記述のことです。自動テストが正しいかどうかを判定する中心になります。
エッジケース想定外の入力や極端な条件など、めったに起きないが確認しておくべきケースのことです。見落としやすい不具合を見つけるために重要です。
エラーメッセージエラーが発生した時にユーザーに伝える案内文のことです。何が起きたか、どうすればよいかを分かりやすく伝えることが重要です。
カバレッジテストでどの程度のコードや機能を確認できたかを割合で示す指標です。確認の網羅性を把握し、未確認部分を見つけるのに役立ちます。
クロスブラウザテスト複数のブラウザで同じように表示・動作するかを確認するテストです。ブラウザごとの差異による問題を見つけるために行います。
コンバージョン導線ユーザーが問い合わせや購入などの成果地点まで迷わず進める流れのことです。ボタン配置や文言、画面遷移の分かりやすさが関わります。
スクリーンショット比較変更前後の画面を自動で撮影し、ピクセル単位で差分を検出する手法です。ビジュアルリグレッションテストで使われます。
テストケース何をどう確認するかを整理した確認項目です。手順や期待結果を明確にしておくことで、確認漏れを防ぎやすくなります。
テストシナリオユーザーがどの順番で操作し、どの結果になるかを流れとして整理したものです。画面をまたぐ動作確認やE2Eテストで使います。
テスト対象 / 範囲今回どこまでを確認するのかを決めることです。対象画面や機能、確認しない部分を整理しておくと、確認漏れや無駄な作業を減らせます。
バグトラッキング不具合や改善項目を記録し、状況や対応を追跡する仕組みです。誰がどの不具合に対応しているかを共有しやすくなります。
バリデーションフォームに入力された値が正しい形式か、必須項目が埋まっているかなどを確認する仕組みです。誤入力を防ぎ、正しいデータを受け取るために重要です。
ビジュアルリグレッションテスト画面の見た目が意図せず変わっていないかを、コード変更の前後でスクリーンショットを比較して確認するテストです。デザイン崩れや意図しないスタイル変更を早期に発見できます。
ビューポートブラウザで表示される画面の領域のことです。レスポンシブデザインでは、ビューポートの幅に応じてレイアウトを切り替えます。
ブラウザ互換性異なるブラウザで同じように表示・動作するかどうかの性質です。主要ブラウザでの差異を減らすことで、より多くのユーザーに安定した体験を提供できます。
ブレイクポイントレスポンシブデザインで、表示を切り替える画面幅の基準となるポイントです。たとえば768pxや1024pxなど、端末サイズに応じたレイアウト変更の境目になります。
モックテスト時に、本物のAPIやDBの代わりとして使う仮のデータや部品のことです。外部要因に左右されずにテストしやすくなります。
再現手順不具合を再現するために必要な操作手順のことです。誰が見ても同じ不具合を再現できるように、具体的な手順を整理します。
単体テスト関数やコンポーネントなど、個別の部品が正しく動くかを確認するテストです。小さい単位で問題を早く見つけられるのが強みです。
受け入れ基準「この状態なら公開してよい」「納品してよい」と判断するための条件です。何を満たせば合格かを先に決めておくことで、認識ずれを減らせます。
品質基準何をもって品質がよいとするかを定めた基準です。表示の正し�さ、操作のしやすさ、安全性など、確認すべき観点を明確にします。
品質管理サイトや機能が意図どおりに動き、利用者にとって問題なく使える状態を保つために確認・改善を行うことです。公開前の確認だけでなく、継続的な見直しも含みます。
回帰テスト修正や機能追加を行った後に、既存の動作が壊れていないかを再確認するテストです。変更による意図しない影響を早期に発見できます。
境界値テスト入力値の境界付近で正しく動くかを確認するテスト手法です。最小値、最大値、その前後の値など、エラーが起きやすい条件を重点的に確認します。
構造化データ (JSON-LD)ページ内容を検索エンジンが理解しやすい形で記述する仕組みです。検索結果での見え方を改善したい時に使われます。
正常系想定どおりに入力・操作した時に、正しく動くかを確認する観点です。基本的な成功パターンの確認にあたります。
異常系入力ミスや通信失敗など、想定外やエラー時の動きを確認する観点です。トラブル時の分かりやすさや安全性を確認するために重要です。
結合テスト複数の部品を組み合わせたときに、正しく連携するかを確認するテストです。単体テストでは見つけにくい、部品同士のつなぎ目の問題を検出できます。

SEO / マーケティング

用語説明
A/Bテスト2つ以上の案を比較して、どちらがより良い成果を出すか検証する方法です。タイトルや導線改善で使われます。
ABテスト2つ以上の案を用意して、どちらがよりよい成果を出すかを比較する方法です。タイトルやボタン文言、レイアウト改善などで使われます。
canonical重複や類似ページがある時に、どのURLを正規ページとして扱ってほしいかを検索エンジンに伝える仕組みです。重複評価を防ぎやすくします。
CTACall To Action の略で、ユーザーに次の行動を促す要素のことです。問い合わせ、購入、資料請求などの成果地点へ導く役割があります。
CTRClick Through Rate の略で、表示された回数のうち何回クリックされたかを示す割合です。検索結果や広告の見え方改善で重要な指標です。
CVConversion の略で、問い合わせや購入などサイトで達成したい成果のことです。施策の成果判断で重要な指標です。
Google AdsGoogle検索広告やディスプレイ広告を配信するための広告サービスです。検索意図に合わせた集客にも使われます。
Google Analytics流入経路やユーザー行動、コンバージョン状況を把握できるアクセス解析ツールです。施策の効果確認にも使います。
Google Search ConsoleGoogle検索での表示状況や検索クエリ、掲載順位、技術的課題を確認できるツールです。SEO改善で欠かせません。
Google Trends検索キーワードの人気や関心の変化を調べられるツールです。季節性や話題の変化を把握したい時に役立ちます。
HタグHTMLの見出しタグ（h1〜h6）のことです。ページ内の情報構造を示すために使われ、SEOや読みやすさに影響します。
Keyword Planner検索キーワード候補や検索需要の目安を調べられるGoogleのツールです。SEOや広告運用でのキーワード選定に使われます。
KGIKGIは最終的に達成したい大きな目標です。SEOやマーケティング施策の成果地点を定義する時に使います。
KPI目標達成に向かっているかを見るための中間指標です。たとえば流入数、クリック数、問い合わせ数などが該当します。
LPLanding Page の略で、広告やSNSなどから流入したユーザーが最初に訪れるページのことです。成果地点までの導線設計が重要になります。
Meta AdsFacebookやInstagram向けに広告配信を行うサービスです。ターゲット設定やクリエイティブ設計と合わせて使われます。
meta description検索結果でページ説明文として使われることがあるHTMLタグです。ページ内容を短く分かりやすく伝えることでクリック率改善につながります。
Meta Sharing DebuggerMeta公式の共有デバッグツールです。OGPの読み取り結果や共有プレビュー、キャッシュ状況の確認に使います。
noindex検索エンジンにこのページを検索結果に表示しないよう伝えるためのHTMLタグです。限定ページや重複ページの非表示に使われます。
OGPOpen Graph Protocol の略で、SNSやチャットで共有された時のタイトル、説明文、画像などを指定する仕組みです。共有時の見え方を整えるために使います。
PageSpeed Insightsページの表示速度や改善ポイントを確認できるGoogleのツールです。表示体験の改善や技術的課題の把握に使われます。
PDCAPlan・Do・Check・Act の略で、計画→実行→確認→改善を繰り返す考え方です。運用や改善を継続的に回す時の基本になります。
Rich Results Test構造化データがGoogleのリッチリザルトとして認識されるか確認するツールです。検索結果での追加表示の確認に使われます。
robots.txt検索エンジンのクローラーに、どのページを見てよいか・見ないでほしいかを伝えるファイルです。クロール制御で使われます。
Schema Markup Validatorschema.orgやJSON-LDの記述内容が正しいかを確認するツールです。構造化データの文法や内容確認に役立ちます。
Schema.org構造化データを記述するための語彙を提供する仕組みです。検索エンジンが内容を理解しやすくなります。
SEOSearch Engine Optimization の略で、検索結果から見つけてもらいやすくするための改善のことです。検索順位だけでなく、検索結果での伝わりやすさや流入後の成果も関わります。
SNS連携サイトとSNSを相互につなぐ仕組みです。シェアボタンの設置や、SNSへの自動投稿、ログイン連携などが含まれます。
titleタグページのタイトルを検索エンジンやブラウザに伝えるためのHTMLタグです。検索結果に表示されることが多く、クリック率にも影響します。
XMLサイトマップ検索エンジンに対して、サイト内のページ一覧を伝えるためのファイルです。新しいページや重要なページを見つけてもらいやすくします。
イベント計測ボタンクリックやスクロール、動画再生など、ユーザーの特定行動を計測する仕組みです。改善ポイントを細かく把握したい時に使います。
キーワードマップどのキーワードをどのページで扱うかを整理した表や図です。ページ同士の役割分担を明確にし、キーワードの重複や抜けを防ぎます。
キーワード調査どんな言葉で検索されているかを調べることです。ユーザーの関心や悩みを把握し、どのテーマを扱うか決める土台になります。
コピーライティングユーザーの行動を促すために、見出しや本文、ボタンの文言などを工夫して書くことです。伝わりやすさと行動のしやすさの両方を意識します。
コンバージョン測定問い合わせや購入など、サイト上の成果がどれだけ達成されたかを計測することです。施策の効果を判断するための基準になります。
シェアボタンサイトのページをSNSで簡単に共有できるようにするボタンです。拡散を促し、自然な流入を増やす役割があります。
トラフィック推移サイトへのアクセス数が時系列でどう変化しているかを示すデータです。施策の効果や季節変動、トレンドの把握に使います。
パンくずリスト今見ているページがサイト内のどの位置にあるかを階層で示す案内です。ユーザーの現在地把握や内部リンク強化にも役立ちます。
ヒートマップどこがよく見られたか、どこがクリックされたか、どこで離脱しやすいかを視覚的に確認できる仕組みです。ページ改善の判断材料になります。
ファネル分析ユーザーが目標達成までの各段階でどれだけ離脱しているかを分析する手法です。どこでユーザーが減っているかを特定し、改善の優先順位を決めます。
ファーストビューページを開いた時に、スクロールせずに最初に見える範囲のことです。ユーザーの第一印象を決める重要なエリアです。
ユーザー行動分析ユーザーがサイト内でどのページを見て、どこで離脱し、どんな行動をとっているかを分析することです。改善の方向性を見つける基礎になります。
内部リンク同じサイト内の別ページへ移動できるリンクのことです。関連情報につなぐことで、回遊性や理解しやすさを高めます。
広告導線広告を見たユーザーが、LPや問い合わせ・購入ページまで進む流れのことです。広告内容とページ内容のつながりが成果に影響します。
検索クエリ分析実際にユーザーがどんな言葉で検索しているかを分析することです。検索意図の把握や、ページ改善のヒントにつながります。
検索ボリュームあるキーワードが月にどれくらい検索されているかを示す数値です。需要の大きさを把握し、優先するキーワードを決める時に使います。
検索意図ユーザーが検索した時に、何を知りたいか、何を解決したいかという目的のことです。コンテンツの方向性を決める上で重要です。
構造化データ (JSON-LD)ページ内容を検索エンジンが理解しやすい形で記述する仕組みです。検索結果に追加情報を表示したい時に使われます。
競合難易度あるキーワードで検索上位を獲得する難しさの指標です。既存の競合サイトの強さやコンテンツ量などから判断します。
見出し構造ページ内の見出しを階層的に整理することです。読みやすさだけでなく、検索エンジンが内容を理解する助けにもなります。
関連記事導線今見ている内容に近い別ページや記事へ自然に移動してもらうための導線です。回遊性向上に役立ちます。

運用 / 監視 / 改善

用語説明
Backlog更新依頼や課題、改善項目の管理に使いやすいプロジェクト管理ツールです。公開後の運用でも進捗共有に役立ちます。
CMSContent Management System の略で、記事やページ内容を管理画面から更新しやすくする仕組みです。専門的なコード編集を減らしやすいのが特徴です。
GitHub Issues不具合や改善タスクをチケットとして管理するための仕組みです。開発チームと連携しながら運用課題を追いやすくなります。
Google Analyticsサイトの流入数や閲覧状況、コンバージョンなどを確認できるアクセス解析ツールです。運用改善の判断材料になります。
Google Search ConsoleGoogle検索での表示状況や検索上の課題を確認できるツールです。公開後のSEO運用でも役立ちます。
KGI最終的に達成したい大きな目標のことです。KPIが途中経過の指標であるのに対し、KGIはゴールそのものを表します。
KPI目標達成に向かっているかを見るための中間指標です。運用レポートや改善判断の基準になります。
KPIダッシュボードKPIの数値を視覚的にまとめた画面のことです。進捗や課題を一目で把握し、改善判断を迅速に行えるようにします。
PDCAPlan・Do・Check・Act の略で、計画→実行→確認→改善を繰り返す考え方です。公開後の運用改善を継続するための基本です。
Sentry本番環境で発生したエラーや障害を収集し、原因調査につなげる監視ツールです。公開後の不具合把握に役立ちます。
WordPress世界的によく使われているCMSです。記事更新や固定ページ更新、運用管理に広く使われています。
インシデント管理障害や不具合の発生から復旧までを体系的に管理する仕組みです。影響範囲の把握、原因調査、対応記録を整理し、再発防止につなげます。
エスカレーション自分だけで対応できない問題を、より適切な担当者や上位の窓口へ引き継ぐことです。障害対応や保守運用で重要な流れです。
セキュリティパッチ既知の脆弱性や不具合を修正するための更新プログラムです。定期的に適用することで安全性を保ちやすくなります。
トラフィック分析サイトへのアクセス数や流入経路、推移などを分析することです。施策の効果や傾向の変化を把握するのに使います。
バックアップ障害や誤操作に備えて、データやファイルを別に保存しておくことです。復旧できる状態を保つために重要です。
プラグイン更新CMSの拡張機能を最新の状態に保つことです。セキュリティ修正や機能改善が含まれるため、定期的な更新が重要です。
ログ確認サーバーやアプリの記録を確認することです。エラーの原因究明や、アクセス状況の把握に使います。
世代管理バックアップを複数の時点で保存し、古いものから順に管理することです。必要に応じて過去の状態に戻せるようにします。
二段階認証パスワードに加えて、別の手段（メールやアプリ）でも本人確認を行う仕組みです。アカウントの安全性を大きく高めます。
原因切り分け障害が起きた時に、どこで問題が発生しているかを順序立てて特定することです。的確な対応と復旧につなげます。
定例レポート定期的に作成して共有する運用報告資料です。更新内容、アクセス状況、課題、次回対応方針などを整理します。
影響範囲障害や変更がどの機能やユーザーに影響を与えるかを把握することです。対応の優先順位やエスカレーションの判断に使います。
承認フローコンテンツの公開や更新前に、確認・承認を経る手順のことです。誤った情報の公開を防ぎ、品質を保ちます。
更新スケジュールどのコンテンツをいつ更新するかを時系列で整理した計画です。定期的な更新の抜け漏れを防ぎます。
更新フローコンテンツの更新依頼から確認、公開までの手順の流れです。誰が確認し、誰が公開するかを明確にします。
更新計画どの情報を、いつ、誰が更新するかを整理した計画です。属人化を防ぎ、継続的な運用をしやすくします。
月次レポート月ごとのアクセス状況、更新内容、課題、対応方針などをまとめた定例レポートです。継続的な改善判断に使います。
権限管理誰がどこまで操作できるかを整理・制御することです。不要な変更や情報漏えいを防ぐために必要です。
死活監視サイトやサーバーが正常に動いているかを定期的に確認する仕組みです。停止に早く気づき、迅速な対応につなげます。
直帰率ユーザーが最初に見た1ページだけでサイトを離れた割合です。導線や内容改善の判断材料になります。
稼働率サービスが正常に動いていた時間の割合です。99.9%などで表され、安定稼働の目安になります。
脆弱性通知ソフトウェアに見つかったセキュリティ上の弱点に関する情報です。影響範囲や対策方法が含まれ、迅速な対応が求められます。
課題ページ離脱が多い、成果につながりにくい、情報が古いなど、改善が必要なページのことです。分析結果をもとに見つけます。
離脱率ページを開いた後に、何もせずにサイトを離れたユーザーの割合です。ページの魅力や導線の課題を見つめる指標になります。

Web開発イントロダクション

海辺康志
26.5.16

Web制作ロードマップ

海辺康志
26.5.16