初心者ガイド
Web用語辞典
「ヘッダーって何？」「APIって何のこと？」 Web制作の専門用語を、図解と具体例でやさしく解説します。
カテゴリ
サイトの構造
ヘッダー (Header)
へっだー
サイト最上部のナビゲーション領域。ロゴ、メニュー、検索バーが置かれる。
具体例
このサイトの上部にある「AIGP」ロゴとメニューの部分
フッター (Footer)
ふったー
サイト最下部の情報領域。著作権表示、リンク集、連絡先が置かれる。
具体例
ページ一番下の「© AIGP」と書いてある部分
サイドバー (Sidebar)
さいどばー
メインコンテンツの横に配置される補助的な領域。カテゴリ一覧やフィルタが置かれる。
具体例
管理画面の左にあるメニュー部分
パンくずリスト (Breadcrumb)
ぱんくずりすと
現在のページがサイト内のどこにあるかを示す階層表示。 HOME > カテゴリ > 記事名。
具体例
HOME / プロンプト集 / AOS.jsフェードイン
ハンバーガーメニュー
はんばーがーめにゅー
三本線（≡）のアイコン。タップするとメニューが開く。スマホ画面で使われる。
具体例
スマホでサイトを見ると右上に出る三本線
デザイン・レイアウト
レスポンシブデザイン
れすぽんしぶでざいん
PC・タブレット・スマホなど、画面サイズに応じて自動的にレイアウトが変わるデザイン手法。
具体例
このサイトをPCとスマホで見ると、カードの列数が変わる
グリッドレイアウト
ぐりっどれいあうと
要素を格子状（行と列）に並べるレイアウト方法。カード一覧でよく使われる。
具体例
トップページの記事カードが4列に並んでいる部分
アスペクト比
あすぺくとひ
画像や動画の横と縦の比率。16:9はワイド、4:3は標準、9:16は縦長（スマホ動画）。
具体例
YouTubeは16:9、インスタのストーリーズは9:16
マージン / パディング
まーじん / ぱでぃんぐ
マージンは要素の外側の余白、パディングは要素の内側の余白。
具体例
カードの周りの隙間（マージン）と、カード内の文字と枠の間（パディング）
アニメーション・動き
フェードイン / フェードアウト
ふぇーどいん / ふぇーどあうと
要素がゆっくり表示される（フェードイン）・消える（フェードアウト）アニメーション。
具体例
スクロールすると記事カードがふわっと現れる効果
スライダー / カルーセル
すらいだー / かるーせる
画像やコンテンツが横にスライドして切り替わるUI。Swiperが代表的なライブラリ。
具体例
ショッピングサイトのメイン画像が自動で切り替わる部分
パララックス
ぱららっくす
スクロールすると背景と前景が異なる速度で動き、奥行き感を演出する効果。
具体例
スクロールすると背景画像がゆっくり動くサイト
ホバーエフェクト
ほばーえふぇくと
マウスカーソルを要素に重ねた時に起きる変化。色が変わる、拡大するなど。
具体例
ボタンにカーソルを乗せると色が濃くなる効果
トランジション
とらんじしょん
状態変化がスムーズに行われるアニメーション。色が「パッ」ではなく「ふわっ」と変わる。
具体例
メニューを開くときに「スッ」とスライドして出てくる動き
技術用語
API (エーピーアイ)
えーぴーあい
ソフトウェア同士が情報をやり取りする窓口。「このURLにアクセスしたらデータをくれる」仕組み。
具体例
AIGPがWordPressからブログデータを取得するのにREST APIを使っている
CSS (スタイルシート)
しーえすえす
Webページの見た目（色、大きさ、配置、アニメーション）を指定する言語。
具体例
文字を赤くする、ボタンを角丸にする、余白を調整する
JavaScript (JS)
じゃばすくりぷと
Webページに動きや対話性を加えるプログラミング言語。クリックしたら何か起きる、を実現する。
具体例
ボタンをクリックしたらメニューが開く動作
CDN
しーでぃーえぬ
ファイルを世界中のサーバーに配置し、ユーザーに最も近いサーバーから配信する仕組み。
具体例
Swiperのコードを自分のサーバーに置かず、CDNから読み込む
npm / パッケージ
えぬぴーえむ
他の人が作ったプログラム（ライブラリ）をダウンロードして自分のプロジェクトで使う仕組み。
具体例
npm install swiper でスライダー機能を追加
SEO・マーケティング
SEO (検索エンジン最適化)
えすいーおー
Googleなどの検索結果で上位に表示されるようにサイトを最適化すること。タイトル・見出し・内部リンクなどを調整する。
具体例
「Swiperスライダー」で検索した時に1ページ目に出るようにする
MEO (マップエンジン最適化)
えむいーおー
Googleマップ検索で上位表示されるための施策。実店舗ビジネスで重要。Googleビジネスプロフィールの最適化が中心。
具体例
「渋谷 カフェ」で検索するとマップに出るお店の順位を上げる
AIO (AI検索最適化)
えーあいおー
ChatGPTやPerplexityなどのAI検索で自社サイトが引用・参照されるよう最適化すること。AIオーバービュー対策とも。
具体例
Google検索のAIまとめ機能で自社サイトの情報が引用される
LLMO (大規模言語モデル最適化)
えるえるえむおー
ChatGPT・Gemini・ClaudeなどのLLMが回答生成時に自社コンテンツを参照・引用するよう最適化する手法。
具体例
「おすすめのCSSライブラリは？」とChatGPTに聞いた時に自社記事が引用される
GEO (生成エンジン最適化)
じーいーおー
AI検索エンジン（SGE、Perplexity等）の生成結果に自社情報が含まれるよう最適化すること。構造化データとE-E-A-Tが鍵。
具体例
Perplexityで技術的な質問をした時に自社の解説記事がソースとして表示される
OGP (オージーピー)
おーじーぴー
SNSでリンクを共有した時に表示されるタイトル・画像・説明文の設定。Open Graph Protocolの略。
具体例
LINEにURLを送った時に出るサムネイル画像
JSON-LD (構造化データ)
じぇいそんえるでぃー
検索エンジンにページの内容を「これは記事です」「これは手順です」と伝える特殊なJSON記述。リッチリザルトの源。
具体例
Google検索結果に★評価や手順が出るのはJSON-LDのおかげ
アフィリエイト
あふぃりえいと
自分のサイトで商品やサービスを紹介し、そこから購入・登録があると報酬がもらえる仕組み。
具体例
「このツールおすすめ」のリンクから登録すると、紹介者に報酬が入る
プログラミング言語
HTML (エイチティーエムエル)
えいちてぃーえむえる
Webページの「骨格」を作る言語。見出し、段落、画像、リンクなどの構造を定義する。全てのWebサイトの土台。
具体例
<h1>タイトル</h1><p>本文</p> のように書く
PHP (ピーエイチピー)
ぴーえいちぴー
サーバー側で動くプログラミング言語。WordPressの中核。データベースとやり取りして動的なページを生成する。
具体例
WordPressのテーマやプラグインはPHPで書かれている
TypeScript (タイプスクリプト)
たいぷすくりぷと
JavaScriptに「型」を追加した言語。変数に入る値の種類を事前に決めることで、バグを防ぐ。大規模開発で必須。
具体例
const age: number = 25; と書くと、文字列を入れるとエラーで教えてくれる
Python (パイソン)
ぱいそん
AI・機械学習・データ分析で最も使われる言語。文法がシンプルで読みやすい。Web開発ではDjango/Flaskが有名。
具体例
ChatGPTやStable Diffusionの裏側はPythonで作られている
SQL (エスキューエル)
えすきゅーえる
データベースに対して「このデータをください」「これを保存して」と指示する専用言語。
具体例
SELECT * FROM users WHERE age > 20; で20歳以上のユーザー一覧を取得
フレームワーク・ライブラリ
React (リアクト)
りあくと
Meta（旧Facebook）が開発したUI構築ライブラリ。コンポーネントという部品を組み合わせてページを作る。現在最も人気。
具体例
Instagram、Netflix、Airbnbなどが使用。AIGPもReactベース
Next.js (ネクストジェイエス)
ねくすとじぇいえす
Reactをベースにした本格的なWebフレームワーク。サーバーサイドレンダリング、静的生成、APIルートを統合。
具体例
このAIGPサイトはNext.js 16で構築されている
Vue.js (ビュージェイエス)
びゅーじぇいえす
学習コストが低いUIフレームワーク。HTMLテンプレートベースで直感的。日本のWeb制作現場で人気が高い。
具体例
社内ツールや管理画面をサクッと作りたい時に選ばれやすい
Tailwind CSS
ているうぃんどしーえすえす
クラス名を組み合わせてスタイルを適用するCSSフレームワーク。デザインファイルなしで高速にUIを構築できる。
具体例
class="text-lg font-bold text-blue-600" で大きい太字の青文字になる
jQuery (ジェイクエリー)
じぇいくえりー
かつて圧倒的シェアだったJSライブラリ。DOM操作を簡単に書ける。現在はReact/Vue等に移行が進んでいる。
具体例
$('.menu').slideToggle(); でメニューの開閉アニメーション
Node.js (ノードジェイエス)
のーどじぇいえす
JavaScriptをサーバー側で動かすための実行環境。フロントもバックも同じ言語で書けるのが強み。
具体例
npm installコマンドやNext.jsの開発サーバーはNode.jsで動いている
サーバー・インフラ
レンタルサーバー
れんたるさーばー
月額数百円〜でWebサイトを公開できる共用サーバー。WordPressが簡単に使える。初心者向け。
具体例
エックスサーバー、ConoHa WING、さくらサーバーなど
VPS (仮想専用サーバー)
ぶいぴーえす
1台の物理サーバーを仮想的に分割し、専用サーバーのように使えるサービス。root権限があり自由度が高い。
具体例
AIGPのNext.jsはXserver VPS上のDockerで稼働している
AWS (アマゾンウェブサービス)
えーだぶりゅーえす
Amazonが提供する世界最大のクラウドサービス群。EC2（サーバー）、S3（ストレージ）、Lambda（サーバーレス）など200以上のサービス。
具体例
Netflix、任天堂、NASAなど世界中の大企業が利用
Docker (ドッカー)
どっかー
アプリケーションを「コンテナ」という箱に入れて、どの環境でも同じように動かせる仮想化技術。
具体例
docker compose up で開発環境が一発で立ち上がる
Vercel (ヴァーセル)
ゔぁーせる
Next.jsの開発元が提供するホスティングサービス。GitにpushするだけでWebサイトが自動デプロイされる。
具体例
GitHub連携で、コードを更新すると数秒で本番サイトに反映
Cloudflare (クラウドフレア)
くらうどふれあ
CDN・DNS・DDoS防御・SSL証明書を無料で提供するサービス。Cloudflare Pagesでサイトホスティングも可能。
具体例
サイトの前に置くだけで高速化とセキュリティ強化ができる
SSL / HTTPS
えすえすえる
Webサイトとブラウザ間の通信を暗号化する仕組み。URLがhttps://で始まるサイトはSSL対応済み。SEOにも影響。
具体例
ブラウザのアドレスバーに🔒マークが出ているのがSSL通信の証拠
nginx (エンジンエックス)
えんじんえっくす
高速なWebサーバー／リバースプロキシ。同時に大量のアクセスを処理できる。Apacheの次世代として普及。
具体例
VPS上でNext.jsの前段にnginxを置いてSSL処理とキャッシュを担当させる
AI・生成AI
LLM (大規模言語モデル)
えるえるえむ
膨大なテキストデータで学習した巨大なAIモデル。文章生成・要約・翻訳・コード生成など多用途。
具体例
ChatGPT (GPT-4)、Claude、Gemini、DeepSeekなど
プロンプト
ぷろんぷと
AIに対する指示文・質問文のこと。プロンプトの書き方でAIの出力品質が大きく変わる。
具体例
「Swiperで無限ループスライダーを作って」がプロンプト
RAG (検索拡張生成)
らぐ
AIが回答する前に外部データベースを検索し、最新情報を含めて回答を生成する技術。ハルシネーション対策。
具体例
社内文書を検索してから回答する社内チャットボット
ファインチューニング
ふぁいんちゅーにんぐ
既存のAIモデルを特定の用途に特化させるため、追加データで再学習させること。
具体例
汎用のGPTを医療用語に強い専門AIにカスタマイズする
Stable Diffusion
すてーぶるでぃふゅーじょん
テキストから画像を生成するオープンソースAI。ローカルPCでも動作可能。モデルのカスタマイズが自由。
具体例
「ドラゴンと少女」と入力するとイラストが自動生成される
トークン
とーくん
AIが文章を処理する際の最小単位。日本語1文字≒1〜3トークン。APIの料金はトークン数で決まる。
具体例
DeepSeekは100万トークンあたり$0.14と激安