初心者ガイド
Web用語辞典
「ヘッダーって何？」「APIって何のこと？」 Web制作の専門用語を、図解と具体例でやさしく解説します。
カテゴリ
サイトの構造
ヘッダー (Header)
へっだー
サイト最上部のナビゲーション領域。ロゴ、メニュー、検索バーが置かれる。
具体例
このサイトの上部にある「AIGP」ロゴとメニューの部分
フッター (Footer)
ふったー
サイト最下部の情報領域。著作権表示、リンク集、連絡先が置かれる。
具体例
ページ一番下の「© AIGP」と書いてある部分
サイドバー (Sidebar)
さいどばー
メインコンテンツの横に配置される補助的な領域。カテゴリ一覧やフィルタが置かれる。
具体例
管理画面の左にあるメニュー部分
パンくずリスト (Breadcrumb)
ぱんくずりすと
現在のページがサイト内のどこにあるかを示す階層表示。 HOME > カテゴリ > 記事名。
具体例
HOME / プロンプト集 / AOS.jsフェードイン
ハンバーガーメニュー
はんばーがーめにゅー
三本線（≡）のアイコン。タップするとメニューが開く。スマホ画面で使われる。
具体例
スマホでサイトを見ると右上に出る三本線
グローバルナビゲーション
ぐろーばるなびげーしょん
ウェブサイトの主要なページ（ホーム、会社情報、製品、お問い合わせなど）へのリンクを集めた、サイト全体で共通して表示されるメインメニューです。通常はヘッダーやサイドバーに配置され、ユーザーがサイト内の重要なセクションに素早く移動できるようにします。
具体例
企業サイトの上部に常に表示されている「ホーム」「会社概要」「サービス」「採用情報」「お問い合わせ」というメニューバーがグローバルナビゲーションです。
メインコンテンツエリア
めいんこんてんつえりあ
ウェブページの中心部分で、そのページの主要な情報（記事、製品説明、画像など）が表示される領域です。ヘッダーやフッター、サイドバーに囲まれており、ユーザーが訪れる目的のコンテンツがここに集中しています。
具体例
ブログ記事のページでは、記事のタイトル、本文、画像が表示される中央の広い部分がメインコンテンツエリアです。
ローカルナビゲーション
ろーかるなびげーしょん
特定のセクションやページ内でのみ表示される、その部分に関連した詳細なメニューやリンク集です。グローバルナビゲーションの下位に位置し、ユーザーが現在のカテゴリやトピック内を深く移動するのを助けます。
具体例
オンラインショップの「パソコン」カテゴリページに表示される「ノートパソコン」「デスクトップ」「周辺機器」といったサブメニューがローカルナビゲーションです。
ヒーローセクション
ひーろーせくしょん
ウェブページの最上部、ヘッダーの直下に配置される大きな視覚的な領域です。目を引く画像やビデオ、キャッチコピー、主要な行動喚起ボタン（CTA）を含み、訪問者に強い第一印象を与え、サイトの目的をすぐに伝えます。
具体例
企業のランディングページで、背景に美しい画像、中央に「革新のテクノロジーで未来を創る」という大きな見出し、その下に「詳細を見る」ボタンがある部分がヒーローセクションです。
検索バー (Search Bar)
けんさくばー
ウェブサイト内で特定の情報を見つけるための入力欄です。ユーザーがキーワードを入力すると、サイト内の関連コンテンツが表示されます。多くのウェブサイトで、訪問者が効率的に情報を探せるように上部やサイドバーに配置されています。
具体例
オンラインストアで探している商品名を入力するボックスや、ニュースサイトで特定の記事を見つけるための入力フィールド。
コールトゥアクション (Call to Action / CTA)
こーるとぅあくしょん
ウェブサイトの訪問者に特定のアクション（購入、登録、詳細を見るなど）を促すための要素です。通常、ボタンやリンクの形で表示され、ユーザーの注意を引くように目立つデザインが施されます。ウェブサイトの目標達成に不可欠な部分です。
具体例
「今すぐ購入」「無料登録」「詳細はこちら」と書かれたボタン、または「お問い合わせ」へのリンク。
ページネーション (Pagination)
ぺーじねーしょん
多数のコンテンツを複数のページに分割し、ユーザーがそれらのページ間を移動できるようにするナビゲーションシステムです。通常、「1, 2, 3... 次へ」のような数字やリンクのセットで表示されます。これにより、一度に多くの情報を表示することなく、コンテンツを整理して提供できます。
具体例
ブログの記事一覧ページや、検索結果ページの下部にある、「前のページ」「1」「2」「3」「次のページ」といった数字やリンクの並び。
セクション (Section)
セクション
ウェブページ内で、関連するコンテンツをまとめるための独立した領域です。通常、見出しや特定のテーマに基づいて内容が区切られます。これにより、ページの構造が明確になり、訪問者が情報を探しやすくなります。
具体例
ブログ記事のページで、「関連する記事」や「コメント」といった見出しの下にあるそれぞれのコンテンツブロックがセクションです。
カード (Card)
カード
画像、テキスト、ボタンなど、関連する情報の断片をまとめて表示する長方形のUI要素です。通常、クリック可能で、情報を見やすく整理し、複数のコンテンツ項目を効率的に表示するために使われます。
具体例
オンラインショップの商品一覧ページで、各商品が小さな画像、名前、価格、購入ボタンとともに表示されている一つ一つの四角い枠がカードです。
アコーディオン (Accordion)
アコーディオン
クリックすると内容が展開または折りたたまれるUI要素です。スペースを節約し、大量の情報を整理して表示するのに役立ちます。よくある質問（FAQ）セクションなどで頻繁に使用されます。
具体例
ウェブサイトのFAQページで、質問をクリックするとその答えが表示され、再度クリックすると答えが隠れる形式がアコーディオンです。
フォーム (Form)
フォーム
ユーザーが情報を入力してウェブサイトに送信するための要素の集まりです。氏名、メールアドレス、メッセージなどを入力するテキストフィールド、選択肢を選ぶラジオボタンやチェックボックスなどで構成されます。
具体例
連絡先ページにある「お問い合わせ」セクションで、名前、メールアドレス、メッセージを入力して「送信」ボタンをクリックする一連の入力欄がフォームです。
デザイン・レイアウト
レスポンシブデザイン
れすぽんしぶでざいん
PC・タブレット・スマホなど、画面サイズに応じて自動的にレイアウトが変わるデザイン手法。
具体例
このサイトをPCとスマホで見ると、カードの列数が変わる
グリッドレイアウト
ぐりっどれいあうと
要素を格子状（行と列）に並べるレイアウト方法。カード一覧でよく使われる。
具体例
トップページの記事カードが4列に並んでいる部分
アスペクト比
あすぺくとひ
画像や動画の横と縦の比率。16:9はワイド、4:3は標準、9:16は縦長（スマホ動画）。
具体例
YouTubeは16:9、インスタのストーリーズは9:16
マージン / パディング
まーじん / ぱでぃんぐ
マージンは要素の外側の余白、パディングは要素の内側の余白。
具体例
カードの周りの隙間（マージン）と、カード内の文字と枠の間（パディング）
フレックスボックス (Flexbox)
ふれっくすぼっくす
CSSのレイアウトモデルの一つで、アイテムを一行または一列に並べたり、スペースを均等に配分したりするのに役立ちます。複雑なレイアウトを簡単に作成でき、特にナビゲーションバーやカードリストなどによく使われます。
具体例
ウェブサイトのヘッダーでロゴとナビゲーションリンクを横に並べ、余白を自動で調整するためにフレックスボックスを使います。
ビューポート (Viewport)
びゅーぽーと
ユーザーがウェブページを見ている、デバイスの画面上の可視領域を指します。デスクトップPC、タブレット、スマートフォンなど、デバイスによってビューポートのサイズは異なります。
具体例
スマートフォンでウェブサイトを見るときの、ブラウザがコンテンツを表示する画面の範囲がビューポートです。ウェブサイトは、このビューポートに合わせて表示を調整します。
Zインデックス (Z-index)
ぜっといんでっくす
CSSプロパティの一つで、ウェブページ上の要素の重なり順を制御します。値が大きい要素ほど、他の要素の上に表示されます。ポップアップウィンドウやドロップダウンメニューなどで使われます。
具体例
ポップアップ広告がウェブサイトのコンテンツの上に表示されるように、その広告に高いZインデックス値を設定して、他の要素よりも手前に来るようにします。
ブレイクポイント (Breakpoints)
ぶれいくぽいんと
レスポンシブデザインにおいて、特定の画面幅（ビューポート）に到達したときに、ウェブサイトのレイアウトやスタイルが切り替わる境界点のことを指します。これにより、異なるデバイスサイズに最適化された表示を提供できます。
具体例
モバイルデバイスではナビゲーションバーを縦に積み重ね、タブレットやデスクトップでは横に並べるために、特定の画面幅（例: 768px）をブレイクポイントとして設定します。
ホワイトスペース (White Space)
ほわいとすぺーす
ホワイトスペースは、デザイン要素の間にある空白の領域のことです。コンテンツを読みやすくし、重要な部分に視線を集める役割を果たします。適切な余白は、全体のバランスを整え、洗練された印象を与えます。
具体例
ニュース記事の見出しと本文の間に十分な余白を設けることで、読みやすさが向上します。
ヒーローセクション (Hero Section)
ひーろーせくしょん
ヒーローセクションは、ウェブページの最上部にある大きな画像やビデオ、キャッチコピーを配置するエリアです。訪問者の目を引き、サイトの目的や魅力をすぐに伝える役割があります。多くの場合、主要な行動を促すボタン（CTA）が配置されます。
具体例
企業のホームページで、背景に美しい風景写真、中央に「今すぐ無料トライアル」という大きなボタンがある部分がヒーローセクションです。
カードレイアウト (Card Layout)
かーどれいあうと
カードレイアウトは、情報を小さな独立したボックス（カード）にまとめて配置するデザイン手法です。各カードは画像、タイトル、短い説明文などを含み、一覧性が高く、整理された印象を与えます。特に商品一覧やブログ記事の表示によく使われます。
具体例
ECサイトの商品一覧ページで、各商品の写真、名前、価格、評価がそれぞれのカードに収まって並んでいるデザインです。
フッター (Footer)
ふったー
フッターは、ウェブページの最下部にあるエリアです。サイトマップ、連絡先情報、著作権表示、ソーシャルメディアリンクなど、主要コンテンツ以外の重要な情報を配置します。すべてのページで共通して表示されることが多く、ナビゲーションの補助的な役割も果たします。
具体例
企業サイトの一番下に、会社概要、お問い合わせ、プライバシーポリシーへのリンク、SNSアイコン、コピーライトがまとめてある部分です。
ヘッダー (Header)
へっだー
ウェブページの上部に位置する領域で、通常、サイトのロゴ、ナビゲーションメニュー、検索バーなどが含まれます。ウェブサイト全体のブランドや主要な機能に素早くアクセスできるように設計されています。
具体例
ウェブサイトを開いたときに、ページの一番上にある会社のロゴとメニューボタンが表示されている部分がヘッダーです。
サイドバー (Sidebar)
さいどばー
ウェブページの主要コンテンツの隣（通常は左右いずれか）に配置される縦長の領域です。ナビゲーションリンク、広告、関連情報、検索フィルタなど、補助的なコンテンツを表示するためによく利用されます。
具体例
オンラインショップで商品カテゴリのリストや絞り込みオプションがページの左側に縦に並んでいる場合、それがサイドバーです。
コンテナ (Container)
こんてな
ウェブページのレイアウトにおいて、関連するコンテンツや要素をグループ化し、整理するための仮想的な「箱」です。幅を制限したり、中央寄せにしたり、パディングを適用したりすることで、コンテンツの見た目を制御し、読みやすくします。
具体例
多くのウェブサイトでは、中央にコンテンツが配置され、左右には余白があるデザインになっています。この中央のコンテンツが収まっている仮想的な箱がコンテナです。
スティッキー要素 (Sticky Element)
すてぃっきーようそ
ユーザーがページをスクロールしても、特定の画面位置（例：画面上部）に固定されたまま表示され続ける要素です。ナビゲーションメニューや重要な情報などを常にアクセス可能な状態に保つためによく使われます。
具体例
ニュースサイトでページを下にスクロールしても、画面上部のナビゲーションバーがずっと見えている状態であれば、それはスティッキー要素です。
アニメーション・動き
フェードイン / フェードアウト
ふぇーどいん / ふぇーどあうと
要素がゆっくり表示される（フェードイン）・消える（フェードアウト）アニメーション。
具体例
スクロールすると記事カードがふわっと現れる効果
スライダー / カルーセル
すらいだー / かるーせる
画像やコンテンツが横にスライドして切り替わるUI。Swiperが代表的なライブラリ。
具体例
ショッピングサイトのメイン画像が自動で切り替わる部分
パララックス
ぱららっくす
スクロールすると背景と前景が異なる速度で動き、奥行き感を演出する効果。
具体例
スクロールすると背景画像がゆっくり動くサイト
ホバーエフェクト
ほばーえふぇくと
マウスカーソルを要素に重ねた時に起きる変化。色が変わる、拡大するなど。
具体例
ボタンにカーソルを乗せると色が濃くなる効果
トランジション
とらんじしょん
状態変化がスムーズに行われるアニメーション。色が「パッ」ではなく「ふわっ」と変わる。
具体例
メニューを開くときに「スッ」とスライドして出てくる動き
キーフレームアニメーション (Keyframe Animation)
きーふれーむ あにめーしょん
CSSアニメーションの動きの節目を定義する方法です。特定のアニメーションの開始、中間、終了の状態を指定することで、複雑な動きを作成できます。これにより、時間の経過とともに要素のプロパティ（位置、色、サイズなど）を細かく制御できます。
具体例
「要素を左から右へ動かし、同時に色を赤から青へ変化させる」といった一連の動きを、複数のキーフレームで段階的に定義し、スムーズなアニメーションを表現します。
イージング関数 (Easing Function)
いーじんぐ かんすう
アニメーションの速度変化のパターンを定義する関数です。要素がゆっくり開始して速く終わる、またはその逆など、動きに自然な加速や減速を与えます。`linear`、`ease-in`、`ease-out`、`ease-in-out`などが一般的です。
具体例
ボタンがクリックされたときに、`ease-out`を使ってスムーズに上へ移動し、その後ゆっくりと停止するようにアニメーションさせることで、より自然なユーザー体験を提供します。
CSSトランスフォーム (CSS Transform)
しーえすえす とらんすふぉーむ
要素の形状や位置を変更するためのCSSプロパティです。要素を移動 (translate)、拡大縮小 (scale)、回転 (rotate)、傾斜 (skew) させることができ、これらを使って様々なアニメーションの基礎を築きます。2Dおよび3D空間で要素を操作できます。
具体例
アイコンを`rotate(45deg)`で45度回転させたり、画像に`scale(1.2)`を適用して1.2倍に拡大表示したりすることで、インタラクティブな効果を生み出します。
アニメーションライブラリ (Animation Library)
あにめーしょんらいぶらり
アニメーションを簡単に実装できるようにするコードの集まりです。自分で一からアニメーションを作る代わりに、あらかじめ用意された機能を使うことで、時間を節約し、より複雑な動きを実現できます。GSAPやAnime.jsなどが代表的なライブラリです。
具体例
ウェブサイトのローディング画面に、アニメーションライブラリを使ってスムーズな回転アニメーションを追加しました。
スクロールトリガーアニメーション (Scroll Trigger Animation)
すくろーるとりがーあにめーしょん
ユーザーがページをスクロールしたときに、特定の位置でアニメーションを開始する仕組みです。例えば、要素が画面の中央に来たときにフェードインしたり、回転したりします。これにより、スクロールに合わせて動きのあるインタラクティブな体験を作れます。
具体例
ポートフォリオサイトで、プロジェクトの画像がスクロールに合わせてスライドインするスクロールトリガーアニメーションを設定しました。
SVGアニメーション (SVG Animation)
えすぶいじーあにめーしょん
SVG（Scalable Vector Graphics）形式の画像や図形に動きをつける技術です。線を描くようなアニメーションや、図形の変形、色の変化など、ベクターグラフィックスの特性を活かした滑らかな動きが特徴です。ロゴやアイコン、イラストのアニメーションに適しています。
具体例
会社のロゴがページ読み込み時に線が描かれるように、SVGアニメーションを実装しました。
パーティクルアニメーション (Particle Animation)
ぱーてぃくるあにめーしょん
多数の小さな要素（パーティクル）が、雪や火花、泡のように動くアニメーションです。一つ一つのパーティクルは単純な動きをしますが、大量に集まることで複雑で魅力的な視覚効果を生み出します。背景や特別な演出によく使われます。
具体例
ウェブサイトのヒーローセクションの背景に、星空のようにキラキラと動くパーティクルアニメーションを追加しました。
ロッティアニメーション (Lottie Animation)
ろってぃあにめーしょん
Adobe After Effectsで作成したベクターアニメーションを、ウェブやモバイルアプリで軽量かつ高品質に表示するための技術です。JSON形式のファイルを読み込むだけで、複雑なアニメーションを簡単に実装できます。
具体例
ウェブサイトで可愛いキャラクターが動いたり、アプリでボタンを押したときに派手なエフェクトが表示されたりする際に使われます。
WebアニメーションAPI (WAAPI)
うぇぶあにめーしょんえーぴーあい
ブラウザに組み込まれた、JavaScriptを使ってウェブ要素をアニメーションさせるための標準的なAPIです。CSSアニメーションでは難しい複雑なシーケンスや、動的な制御をJavaScriptで直接行えます。
具体例
ユーザーのアクションに応じて複数の要素を同時にアニメーションさせたり、アニメーションの再生速度や方向をプログラムで変更したりする場合に利用されます。
スプリングアニメーション (Spring Animation)
すぷりんぐあにめーしょん
物理的なバネの動きを模倣したアニメーションです。要素が目的地に到達する際に、少し行き過ぎてから戻ってくるような、より自然で滑らかな動きを表現できます。
具体例
ボタンが押されたときに少し縮んでから弾むように元のサイズに戻ったり、リストアイテムが表示されるときに軽く跳ねるような動きをさせたりする際に使われます。
モーションパスアニメーション (Motion Path Animation)
もーしょんぱすあにめーしょん
要素があらかじめ定義された経路（パス）に沿って移動するアニメーションです。直線だけでなく、曲線や複雑な図形に沿って動かすことで、表現豊かな動きを実現できます。
具体例
地図上でアイコンが特定のルートをたどって動いたり、ウェブサイトのロゴが波打つような曲線を描いて登場したりする際に活用されます。
技術用語
API (エーピーアイ)
えーぴーあい
ソフトウェア同士が情報をやり取りする窓口。「このURLにアクセスしたらデータをくれる」仕組み。
具体例
AIGPがWordPressからブログデータを取得するのにREST APIを使っている
CSS (スタイルシート)
しーえすえす
Webページの見た目（色、大きさ、配置、アニメーション）を指定する言語。
具体例
文字を赤くする、ボタンを角丸にする、余白を調整する
JavaScript (JS)
じゃばすくりぷと
Webページに動きや対話性を加えるプログラミング言語。クリックしたら何か起きる、を実現する。
具体例
ボタンをクリックしたらメニューが開く動作
CDN
しーでぃーえぬ
ファイルを世界中のサーバーに配置し、ユーザーに最も近いサーバーから配信する仕組み。
具体例
Swiperのコードを自分のサーバーに置かず、CDNから読み込む
npm / パッケージ
えぬぴーえむ
他の人が作ったプログラム（ライブラリ）をダウンロードして自分のプロジェクトで使う仕組み。
具体例
npm install swiper でスライダー機能を追加
HTTP/HTTPS
エイチティーティーピー / エイチティーティーピーエス
ウェブブラウザとウェブサーバーが情報をやり取りするための通信規約です。HTTPSはHTTPにセキュリティ機能が追加されたもので、データの暗号化により安全な通信を保証します。ウェブサイトのアドレスが`https://`で始まる場合、それは安全な接続を使用していることを意味します。
具体例
オンラインショッピングでクレジットカード情報を入力する際、アドレスバーが`https://`で始まっていることを確認することで、情報が安全に送信されていることがわかります。
フロントエンド (Frontend)
フロントエンド
ユーザーがウェブサイトやアプリケーションと直接やり取りする部分を指します。ウェブサイトの見た目、ボタン、フォームなど、画面に表示されるすべての要素が含まれます。HTML、CSS、JavaScriptなどの技術を使って開発されます。
具体例
あなたがウェブサイトを閲覧しているときに見るテキスト、画像、レイアウト、そしてクリックするすべてのボタンやメニューは、そのウェブサイトのフロントエンドの一部です。
バックエンド (Backend)
バックエンド
ウェブサイトやアプリケーションの裏側で動作し、ユーザーには直接見えない部分を指します。データ処理、データベースとの連携、サーバーロジックの実行などを担当します。Python、PHP、Node.jsなどのプログラミング言語が使われます。
具体例
オンラインショップで商品をカートに追加したり、ログインしたりする際、商品の在庫確認やユーザー認証などの処理はバックエンドで行われています。
データベース (Database)
データベース
整理された形で情報を保存・管理するためのシステムです。ウェブサイトのユーザー情報、商品リスト、ブログ記事など、動的なコンテンツのほとんどはデータベースに格納されています。これにより、必要な情報を素早く検索したり、更新したりすることができます。
具体例
オンラインショップで様々な商品を検索したり、自分の注文履歴を確認したりする際、それらの情報はすべてショップのデータベースから取得されています。
DOM (ドム)
どむ
DOM（Document Object Model）は、HTML文書の構造をプログラムから操作できるようにした仕組みです。ブラウザがHTMLを読み込むと、DOMというツリー構造が生成され、JavaScriptを使って要素の追加や変更ができます。
具体例
JavaScriptで「document.getElementById('title')」と書くと、DOMを通じてidが「title」の要素を取得できます。
JSON (ジェイソン)
じぇいそん
JSON（JavaScript Object Notation）は、データを軽量にやり取りするためのテキスト形式です。人間にも読みやすく、多くのプログラミング言語で簡単に扱えます。
具体例
APIから返ってくるデータはよく`{"name": "太郎", "age": 20}`のようなJSON形式です。
Ajax (エイジャックス)
えいじゃっくす
Ajax（Asynchronous JavaScript and XML）は、ページを再読み込みせずにサーバーとデータをやり取りする技術です。これにより、Webアプリケーションがより速く、滑らかに動くようになります。
具体例
Googleマップで地図をドラッグするたびに新しいタイルが読み込まれるのは、Ajaxの仕組みです。
Git (ギット)
ぎっと
Gitは、ファイルの変更履歴を管理する「バージョン管理システム」です。複数人でコードを共同編集する際に、誰がいつ何を変更したかを追跡できます。
具体例
Gitを使えば、誤ってコードを壊しても「git checkout」で前の状態に戻すことができます。
URL (ユーアールエル)
ゆーあーるえる
URL（Uniform Resource Locator）は、インターネット上のリソース（Webページや画像など）の住所です。ブラウザのアドレスバーに表示される文字列です。
具体例
「https://www.example.com/about」というURLには、プロトコル（https）、ドメイン（example.com）、パス（/about）が含まれます。
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のおかげ
アフィリエイト
あふぃりえいと
自分のサイトで商品やサービスを紹介し、そこから購入・登録があると報酬がもらえる仕組み。
具体例
「このツールおすすめ」のリンクから登録すると、紹介者に報酬が入る
キーワードリサーチ (Keyword Research)
きーわーどりさーち
ユーザーが検索エンジンで入力する可能性のある単語やフレーズを見つけるプロセスです。これにより、ウェブサイトのコンテンツを最適化し、関連性の高い検索トラフィックを引き寄せることができます。
具体例
例えば、コーヒー豆を売るウェブサイトなら、「美味しいコーヒー豆」「自宅でコーヒーを淹れる方法」といったキーワードを調査します。
被リンク (Backlink)
ひりんく
他のウェブサイトから自分のウェブサイトへのリンクのことです。検索エンジンはこれを「票」とみなし、数と質が高いほどウェブサイトの信頼性と権威が増し、検索ランキングに良い影響を与えます。
具体例
例えば、ある有名ニュースサイトがあなたのブログ記事を引用してリンクを張った場合、それは価値の高い被リンクとなります。
メタディスクリプション (Meta Description)
めたりすくりぷしょん
検索結果ページで、ページのタイトル（リンク）の下に表示される短い要約文のことです。ユーザーがクリックするかどうかを判断する重要な要素であり、簡潔で魅力的な内容にすることでクリック率を高めることができます。
具体例
Google検索で表示される、ウェブサイトのタイトル直下にある2〜3行の説明文がこれにあたります。
SERP (検索エンジン結果ページ)
さーぷ
ユーザーが検索エンジンにキーワードを入力した後に表示されるページのことです。ウェブサイトの検索ランキング、広告、スニペットなど、様々な形式の結果が含まれており、SEOの目標はこのSERPで上位表示されることです。
具体例
Googleで何かを検索したときに、青いリンクのタイトルと説明文が並んで表示される画面全体がSERPです。
CRO (コンバージョン率最適化)
シーアールオー (こんばーじょんりつさいてきか)
ウェブサイト訪問者のうち、製品購入や資料請求、会員登録などの目標達成行動（コンバージョン）に至る割合を高めるための取り組みです。ユーザー体験の改善やA/Bテストを通じて実施されます。
具体例
オンラインストアで、商品ページのデザインや購入ボタンの配置を変更し、より多くの訪問者が実際に商品を買うように改善する活動がCROです。
プログラミング言語
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歳以上のユーザー一覧を取得
JavaScript (ジャバスクリプト)
じゃばすくりぷと
ウェブページに動きやインタラクティブな機能を追加するために使われるプログラミング言語です。ブラウザ上で直接実行でき、フロントエンド開発の中心的な役割を果たします。最近ではサーバーサイドやモバイルアプリ開発にも使われるようになりました。
具体例
ボタンをクリックするとメニューが開閉する、フォームの入力チェックを行う、ページの内容を動的に更新するなどの機能を実装するときに使われます。
Go (ゴー)
ごー
Googleが開発した、シンプルで高速なプログラミング言語です。並行処理（複数の処理を同時に実行すること）に優れており、Webサーバーやクラウドサービスなどのバックエンド開発でよく使われます。コンパイル言語なので実行速度が速く、依存関係の管理も簡単です。
具体例
大量のユーザーリクエストを同時に処理する必要があるWeb APIサーバーや、マイクロサービスアーキテクチャのシステム開発に適しています。
Rust (ラスト)
らすと
安全性と速度を両立させたシステムプログラミング言語です。メモリ安全性を保証しながら、C++並みの高速な実行が可能です。ブラウザのレンダリングエンジンやOS、組み込みシステムなど、信頼性が求められる場面で使われています。
具体例
ウェブブラウザのFirefoxの主要コンポーネントや、ブロックチェーン技術、高性能なWebアセンブリの開発などに採用されています。
Kotlin (コトリン)
ことりん
Androidアプリ開発の公式推奨言語として知られる、モダンで簡潔なプログラミング言語です。Javaと完全な互換性がありながら、より安全で書きやすい構文を提供します。サーバーサイド開発やWebフロントエンドにも対応しています。
具体例
Androidスマートフォンアプリの開発で広く使われており、GoogleやUber、Netflixなどの大企業のアプリでも採用されています。
CSS (シーエスエス)
シーエスエス
ウェブページの見た目（色、フォント、レイアウトなど）を定義するためのスタイルシート言語です。HTMLコンテンツにスタイルを適用し、デザインと構造を分離します。これにより、ウェブサイトのデザインを効率的に管理・変更できます。
具体例
ウェブサイトのヘッダーの背景色を青にしたり、テキストのフォントサイズを大きくしたりする際にCSSを使用します。
Java (ジャバ)
ジャバ
汎用的なオブジェクト指向プログラミング言語で、「一度書けばどこでも動く」という理念に基づいています。ウェブのバックエンド、Androidアプリ、デスクトップアプリケーション、大規模なエンタープライズシステムなど、幅広い用途で利用されています。
具体例
オンラインバンキングシステムや、Twitterのような大規模サービスのサーバーサイドロジック、またはAndroidスマートフォンのアプリ開発にJavaが使われています。
Ruby (ルビー)
ルビー
純粋なオブジェクト指向の動的プログラミング言語で、開発者の生産性と楽しさに焦点を当てています。特にウェブ開発フレームワークのRuby on Railsと組み合わせて、迅速なアプリケーション開発に広く利用されています。
具体例
ブログ、Eコマースサイト、ソーシャルネットワークなどのウェブアプリケーションを、Ruby on Railsを使って素早く開発することができます。
C# (シーシャープ)
シーシャープ
Microsoftによって開発された、オブジェクト指向のモダンなプログラミング言語です。Windowsアプリケーション、ゲーム開発（Unity）、そしてウェブのバックエンド（ASP.NET Core）など、多様なプラットフォームで利用されています。
具体例
Windowsデスクトップアプリケーションや、人気のゲームエンジンUnityを使ったゲーム、またASP.NET CoreフレームワークでウェブAPIやウェブサイトを構築する際にC#を使用します。
フレームワーク・ライブラリ
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で動いている
Angular (アンギュラー)
あんぎゅらー
AngularはGoogleが開発したフロントエンドフレームワークで、大規模なWebアプリケーションの構築に適しています。TypeScriptをベースにしており、双方向データバインディングや依存性注入などの機能を提供します。
具体例
企業向けの管理画面や複雑なSPA（シングルページアプリケーション）を開発する際にAngularがよく使われます。
Lodash (ローダッシュ)
ろーだっしゅ
LodashはJavaScriptのユーティリティライブラリで、配列、オブジェクト、文字列などの操作を簡潔に行うための便利な関数を提供します。コードの可読性を向上させ、繰り返しの処理を減らすのに役立ちます。
具体例
配列から重複を削除したり、オブジェクトを深くコピーしたりする際にLodashの関数を使うと簡単に実装できます。
Express (エクスプレス)
えくすぷれす
ExpressはNode.js上で動作する軽量なWebアプリケーションフレームワークで、サーバーサイドの開発を簡素化します。ルーティングやミドルウェアの仕組みを提供し、REST APIの構築に広く使われています。
具体例
ユーザー登録や商品情報を管理するAPIをExpressを使って構築することができます。
Svelte (スベルト)
すべると
Svelteはコンパイル時に仮想DOMを使わずに効率的なコードを生成する新しいアプローチのフロントエンドフレームワークです。開発者は宣言的なコードを書くだけで、実行時のオーバーヘッドが少ないアプリケーションを作成できます。
具体例
インタラクティブなフォームやアニメーションを含む軽量なWebアプリをSvelteで開発すると、パフォーマンスが向上します。
コンポーネント (Component)
こんぽーねんと
UIの部品を独立したブロックとして扱う考え方。再利用可能で、それぞれが独自の見た目と振る舞いを持ちます。
具体例
ボタンやカード、ヘッダーなどがコンポーネントの例です。
シングルページアプリケーション (SPA)
しんぐるぺーじあぷりけーしょん
一つのHTMLページで動作するWebアプリケーション。ページ遷移が不要で、画面の一部だけを動的に更新できます。
具体例
GmailやGoogleマップのように、リンクをクリックしてもページがリロードされないアプリ。
状態管理 (State Management)
じょうたいかんり
アプリケーションのデータやUIの状態を一元管理する仕組み。複雑なアプリでデータの流れを整理するのに役立ちます。
具体例
ReduxやVuex、Zustandなどのライブラリで状態を管理する。
MVC (Model-View-Controller)
えむぶいしー
アプリケーションをモデル（データ）、ビュー（表示）、コントローラー（制御）の3つに分ける設計パターン。役割を分けてコードを整理します。
具体例
Ruby on RailsやAngularはMVCパターンを採用しています。
サーバーサイドレンダリング (SSR)
さーばーさいどれんだりんぐ
WebページのHTMLをサーバー側で生成してからクライアントに送る手法。初回表示が速く、SEOにも有利です。
具体例
Next.jsやNuxt.jsはSSRを簡単に実現できます。
サーバー・インフラ
レンタルサーバー
れんたるさーばー
月額数百円〜で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処理とキャッシュを担当させる
CDN (コンテンツデリバリーネットワーク)
シーディーエヌ (コンテンツデリバリーネットワーク)
ウェブサイトのコンテンツ（画像、動画、CSSファイルなど）をユーザーに高速に配信するための分散型サーバーネットワークです。ユーザーに最も近いサーバーからコンテンツを配信することで、ページの読み込み速度を向上させ、サーバーの負荷を軽減します。
具体例
世界中のユーザーに高品質な動画コンテンツを素早く届けるために、動画配信サービスがCDNを利用して、ユーザーの地理的な距離に関わらずスムーズな再生を実現しています。
DNS (ドメインネームシステム)
ディーエヌエス (ドメインネームシステム)
ウェブサイトのドメイン名（例: example.com）を、コンピューターが理解できるIPアドレス（例: 192.0.2.1）に変換するシステムです。これにより、ユーザーは覚えやすいドメイン名でウェブサイトにアクセスできます。インターネット上の「電話帳」のような役割を果たします。
具体例
ウェブブラウザで「google.com」と入力すると、DNSがそのドメイン名をGoogleのサーバーのIPアドレスに変換し、ブラウザが正しいサーバーに接続してウェブページを表示します。
ロードバランサー (Load Balancer)
ロードバランサー (ロードバランサー)
複数のサーバーにウェブトラフィックやネットワーク要求を均等に分散させるデバイスまたはソフトウェアです。これにより、単一のサーバーへの過負荷を防ぎ、ウェブアプリケーションの可用性と応答性を向上させます。
具体例
大規模なオンラインショップがセール期間中にアクセスが集中した場合、ロードバランサーがその膨大なリクエストを複数のウェブサーバーに適切に振り分け、どのサーバーもダウンすることなく、ユーザーがスムーズに買い物を続けられるようにします。
Kubernetes (クバネティス / K8s)
クバネティス (ケーエイツ)
コンテナ化されたアプリケーションのデプロイ、スケーリング、管理を自動化するためのオープンソースシステムです。複数のサーバー（ノード）にわたってコンテナを効率的にオーケストレーションし、高可用性と弾力性を提供します。
具体例
複数のマイクロサービスで構成される大規模なウェブアプリケーションを開発する際、Kubernetesを使用することで、それぞれのサービスをコンテナとして管理し、トラフィックの増減に応じて自動的にスケールアップ・ダウンさせることができます。
データベース (Database)
データベース
データベースは、情報を整理して保存するためのシステムです。ウェブサイトやアプリケーションがユーザーデータ、商品情報、設定などを永続的に保持するために使われます。必要なデータを素早く検索・取得できるように設計されています。
具体例
オンラインショップで、顧客アカウント情報や注文履歴、商品の在庫状況などがすべてデータベースに保存されています。
サーバーレス・コンピューティング (Serverless Computing)
サーバーレス・コンピューティング
サーバーレス・コンピューティングは、開発者がサーバーの管理（プロビジョニング、スケーリングなど）を意識せずにコードをデプロイ・実行できるクラウド実行モデルです。コードはイベントに応じて実行され、使用したリソース分だけ料金を支払います。これにより、運用コストを削減し、開発速度を向上させることができます。
具体例
ユーザーがファイルをアップロードしたときに、そのファイルを処理する小さなコードを実行するクラウド関数（例: AWS Lambda）は、サーバーレス・コンピューティングの典型的な例です。
API (アプリケーションプログラミングインターフェース)
エーピーアイ
APIは、異なるソフトウェア同士が安全にやり取りするための「窓口」や「ルール」です。あるプログラムが別のプログラムに特定のリクエストを送り、その結果を受け取るための手順を定めます。これにより、様々なサービスやアプリケーションが連携して機能できるようになります。
具体例
天気予報アプリが、気象庁のAPIを使って最新の天気データを取得し、画面に表示する。
ファイアウォール (Firewall)
ファイアウォール
ファイアウォールは、ネットワークのセキュリティシステムで、不正なアクセスからサーバーやネットワークを保護します。事前に設定されたルールに基づいて、外部からの通信や内部からの通信を監視し、許可されていない通信をブロックします。これにより、セキュリティ侵害のリスクを軽減します。
具体例
自宅のWi-Fiルーターには通常ファイアウォール機能があり、インターネットからの怪しい接続が直接パソコンに届くのを防いでいます。
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と激安
生成AI (Generative AI)
せいせいエーアイ
新しいコンテンツ（テキスト、画像、音声、動画など）を人間のように生成できる人工知能の一種です。既存のデータから学習し、そのパターンやスタイルを模倣してオリジナルの出力を生み出します。
具体例
テキストプロンプトからユニークな画像を生成したり、要約文や詩を作成したりするAIは生成AIの例です。
モデル (Model)
モデル
AIや機械学習の文脈では、学習済みのアルゴリズムやシステムそのものを指します。これは、データからパターンを学習し、新しいデータに対して予測や生成を行うための「脳」のようなものです。
具体例
特定の画像を猫か犬かを識別するように学習したAIシステム全体や、テキストから画像を生成するAIシステムそのものがモデルです。
学習データ (Training Data)
がくしゅうデータ
AIモデルがパターンやルールを学習するために使用される情報のことです。このデータが多ければ多いほど、また質が高ければ高いほど、モデルの性能は向上します。
具体例
AIが猫を識別できるようになるには、数千枚の猫の画像と「これは猫である」というラベル付けされたデータが学習データとして必要です。
推論 (Inference)
すいろん
訓練済みのAIモデルが新しい未知のデータを受け取り、それに基づいて予測や判断、またはコンテンツの生成を行うプロセスのことです。これはモデルが「考える」または「行動する」段階と言えます。
具体例
チャットボットに質問を入力して返答を得たり、顔認識システムが写真から人物を特定したりする時、AIモデルは推論を行っています。
幻覚 (Hallucination)
げんかく
生成AIが、事実に基づかない、または存在しない情報を生成してしまう現象です。自信満々に誤った情報を提示することがあり、注意が必要です。
具体例
AIに「東京タワーを建設した年」を尋ねたら、「1889年にエッフェル塔を設計したギュスターヴ・エッフェルによって建設されました」と答えてしまうケース。
埋め込み (Embeddings)
うめこみ
単語や文章などの情報を、AIが理解しやすい数字の並び（ベクトル）に変換したものです。これにより、AIは似た意味の言葉や概念を認識し、関連性を計算できるようになります。
具体例
「犬」と「子犬」という単語が、数値空間上で非常に近い位置に埋め込まれ、AIはこれらが関連性の高い概念だと認識します。
温度 (Temperature)
おんど
生成AIが次に生成する単語を選ぶ際の「ランダム性」や「創造性」を制御する設定値です。値が高いほど出力が多様で予測不能になり、低いほどより一貫性のある保守的な出力になります。
具体例
詩の生成で「温度」を高く設定すると、より独創的で意外性のある表現が生まれる可能性があります。一方、情報検索では低く設定し、事実に基づいた直接的な回答を得るようにします。
ガードレール (Guardrails)
がーどれーる
生成AIが不適切、不正確、または危険なコンテンツを生成しないようにするために設けられる安全対策やルールのことです。これにより、AIの出力が倫理的かつ意図された範囲内に収まるように制御されます。
具体例
医療用AIアシスタントが、診断や投薬に関する誤ったアドバイスをしないように、特定のキーワードや質問に対して警告を出す「ガードレール」が設定されます。
CMS・サイト作成ツール
WordPress (ワードプレス)
わーどぷれす
世界シェア約43%を誇るオープンソースCMS。Automattic社が中心に開発。プラグインとテーマで機能を自由に拡張でき、ブログから企業サイト、ECまで対応。
具体例
ホワイトハウス、SONYミュージック、BBCニュースなどが使用
Wix (ウィックス)
うぃっくす
イスラエル発のノーコードWebサイトビルダー。Wix社（NASDAQ上場）が運営。ドラッグ＆ドロップで直感的にデザインでき、ホスティングも込み。無料プランあり。
具体例
個人ポートフォリオ、小規模ビジネスサイトに人気
Jimdo (ジンドゥー)
じんどぅー
ドイツ発のWebサイト作成サービス。日本ではKDDIウェブコミュニケーションズが代理運営。AIが自動でサイトを生成する「AIビルダー」が特徴。
具体例
日本語対応が良く、小規模な個人サイトや店舗に利用される
Studio (スタジオ)
すたじお
日本発のノーコードWeb制作ツール。STUDIO社が運営。デザインの自由度が高く、日本語フォント対応が充実。共同編集やCMS機能も内蔵。
具体例
日本のスタートアップやデザイナーのポートフォリオに多い
Shopify (ショッピファイ)
しょっぴふぁい
カナダ発の世界最大級のEC（ネットショップ）プラットフォーム。決済・在庫・配送管理を統合。月額制でネットショップを簡単に開設できる。
具体例
ナイキ、シュプリーム、日本でも多くのD2Cブランドが利用
Squarespace (スクエアスペース)
すくえあすぺーす
米国発の美しいテンプレートが特徴のWebサイトビルダー。Squarespace社（NYSE上場）が運営。写真家やクリエイター向けのデザインが豊富。
具体例
ポートフォリオ、レストラン、ウェディングサイトに人気
Webflow (ウェブフロー)
うぇぶふろー
デザイナー向けのビジュアルWeb開発ツール。コードを書かずに本格的なレスポンシブサイトを構築可能。CSSの細かい制御もGUIで操作できる。
具体例
デザイナーが「コード不要でプロ品質のサイト」を作りたい時に選ぶ
ペライチ
ぺらいち
日本発のLP（ランディングページ）作成ツール。ペライチ社が運営。テンプレートを選んで文章と画像を入れるだけで1ページのサイトが完成する。
具体例
イベント告知、キャンペーンLP、名刺代わりのWebページに利用
ヘッドレスCMS (Headless CMS)
へっどれすしーえむえす
コンテンツの管理と表示が分離されたCMSです。コンテンツを一度作成すれば、ウェブサイト、モバイルアプリ、スマートウォッチなど様々な場所で再利用できます。開発者はフロントエンドの技術を自由に選べるため、柔軟な開発が可能です。
具体例
スマートフォンのアプリとWebサイトで同じブログ記事を表示したい場合、ヘッドレスCMSを使えば、コンテンツを一つだけ管理して両方に配信できます。
ノーコード開発 (No-Code Development)
のーこーどかいはつ
プログラミングコードを書かずに、視覚的なインターフェースやドラッグ＆ドロップ操作でアプリケーションやウェブサイトを作成する手法です。これにより、技術的な知識が少ない人でもアイデアを形にすることができます。開発期間の短縮やコスト削減にも繋がります。
具体例
ペライチやWixなどのサイト作成ツールを使って、コードを一切書かずに自分のオンラインショップやポートフォリオサイトを作るのは、ノーコード開発の一例です。
テンプレート (Template)
てんぷれーと
ウェブサイトや文書の基本的なデザインと構造があらかじめ用意されたひな形のことです。これを使うことで、ゼロからデザインを始める手間なく、効率的にサイトやページを作成できます。見た目や機能に合わせて多くの種類があります。
具体例
新しいブログを始める際、WordPressで「ビジネス向け」や「ポートフォリオ向け」といったテンプレートを選んで、自分のコンテンツに合わせて色や画像を調整する、といった使い方をします。
Drupal (ドルーパル)
どるーぱる
オープンソースの強力なコンテンツ管理システム（CMS）の一つです。非常に柔軟性が高く、複雑な機能を持つ大規模なウェブサイトやWebアプリケーションの構築によく利用されます。セキュリティと拡張性に優れています。
具体例
大規模な政府機関のサイト、大学のポータル、メディアサイトなどでDrupalが使われることがあります。モジュールを追加することで、必要な機能を柔軟に拡張できます。
Adobe・クリエイティブツール
Adobe (アドビ)
あどび
米Adobe社（NASDAQ: ADBE）が提供するクリエイティブソフト群。写真・動画・デザイン・Web制作の業界標準。月額制のCreative Cloudで提供。
具体例
デザイン会社や映像制作のほぼ全員がAdobeを使っている
Photoshop (フォトショップ)
ふぉとしょっぷ
写真編集・画像加工の業界標準ソフト。レタッチ、合成、色調補正などプロの写真家からWeb制作まで幅広く使用。AI機能「生成塗りつぶし」も搭載。
具体例
商品写真の背景を消す、肌を綺麗に補正する、バナー画像を作る
Illustrator (イラストレーター)
いらすとれーたー
ベクターグラフィック作成の業界標準。ロゴ、アイコン、イラスト、チラシなど拡大しても劣化しないデータを作成。印刷物デザインの必須ツール。
具体例
会社のロゴ、名刺、ポスター、パッケージデザインの制作
XD / Figma連携
えっくすでぃー
Adobe XDはUI/UXデザインツールだったが2023年に新規販売終了。現在はFigmaとの連携に移行中（AdobeがFigma買収を試みたが断念）。
具体例
Web・アプリのワイヤーフレームやプロトタイプ作成に使われていた
Premiere Pro (プレミアプロ)
ぷれみあぷろ
プロ用動画編集ソフト。映画、テレビ番組、YouTube動画の編集に使われる。After Effectsとの連携で高度な映像表現が可能。
具体例
YouTubeのハイクオリティ動画、企業PV、映画予告編の編集
After Effects (アフターエフェクト)
あふたーえふぇくと
モーショングラフィックス・VFXの定番ソフト。文字アニメーション、エフェクト合成、映像の特殊効果を作成。
具体例
タイトルアニメーション、爆発エフェクト、インフォグラフィック動画
Lightroom (ライトルーム)
らいとるーむ
大量の写真の管理と一括編集に特化したソフト。RAW現像・色調補正・プリセット適用が得意。スマホ版は無料で使える。
具体例
旅行写真100枚の色味を統一して一括補正する
InDesign (インデザイン)
いんでざいん
書籍、雑誌、カタログなどの複数ページの印刷物レイアウトに特化したDTPソフト。出版・印刷業界の標準ツール。
具体例
100ページの製品カタログや雑誌のレイアウト作成
クリエイティブクラウド (Creative Cloud)
くりえいてぃぶくらうど
Adobeのクリエイティブアプリケーションへのサブスクリプションサービスです。Photoshop、Illustrator、Premiere Proなどのソフトウェアに加え、クラウドストレージや各種サービスへのアクセスを提供します。クリエイターが異なるデバイス間でプロジェクトやアセットを管理するのに役立ちます。
具体例
Adobe Creative Cloudを購読することで、PhotoshopやIllustratorをPCにダウンロードして使用したり、デザインファイルをオンラインで保存したりできます。
レイヤー (Layer)
れいやー
レイヤーとは、デザインプログラム内で透明なシートが何枚も積み重なっているようなものです。各レイヤーにはテキスト、画像、図形などの異なる要素を含めることができ、他の部分に影響を与えることなく独立して編集できます。これにより、複雑なデザインの管理や修正が格段に容易になります。
具体例
Photoshopでは、背景画像を一つのレイヤーに、人物写真をその上のレイヤーに、テキストを最上部のレイヤーに配置することで、写真や背景を変えずにテキストを移動したり変更したりできます。
ベクターグラフィックス (Vector Graphics)
べくたーぐらふぃっくす
ベクターグラフィックスは、個々のピクセルではなく、線、曲線、図形を数学的方程式で定義して作成される画像です。このため、品質を損なったりピクセル化したりすることなく、どんなサイズにも拡大縮小できるため、ロゴやイラストに最適です。
具体例
Illustratorで作成された会社のロゴはベクターグラフィックスであり、名刺に印刷しても巨大な看板に表示しても、シャープで鮮明に見えることが保証されます。
ワークスペース (Workspace)
わーくすぺーす
クリエイティブソフトウェアにおけるワークスペースとは、画面上のパネル、ツール、ウィンドウの配置のことです。写真編集、ビデオ編集、ウェブデザインなど、特定のタスクに合わせてワークスペースをカスタマイズすることで、作業効率を向上させることができます。
具体例
Premiere Proでは、タイムラインとプレビューを重視する「編集」ワークスペースから、カラー補正ツールを強調する「カラー」ワークスペースに切り替えることができます。
デザイン・画像編集ツール
Figma (フィグマ)
ふぃぐま
ブラウザで動くUI/UXデザインツール。Figma社が運営。リアルタイム共同編集が最大の強み。Webデザインの現場で急速にシェア拡大中。
具体例
チームで同時にWebサイトのデザインを作成・レビューする
Canva (キャンバ)
きゃんば
オーストラリアのCanva社が運営するオンラインデザインツール。テンプレートが豊富で、デザイン未経験者でもSNS画像やプレゼン資料を簡単に作成できる。
具体例
Instagram投稿画像、プレゼンスライド、名刺をテンプレートで作る
Affinity (アフィニティ)
あふぃにてぃ
英Serif社が開発、現在はCanva社が買収。買い切り型のクリエイティブソフト群。Photo（写真編集）、Designer（ベクター）、Publisher（DTP）の3本柱。Adobeの代替として注目。
具体例
Adobeのサブスク料金を避けたいプロが代替として使う
GIMP (ギンプ)
ぎんぷ
無料で使えるオープンソースの画像編集ソフト。Photoshopに近い機能を持つ。Windows/Mac/Linux対応。
具体例
お金をかけずに本格的な画像編集をしたい時の選択肢
Sketch (スケッチ)
すけっち
Mac専用のUIデザインツール。Sketch社（オランダ）が開発。Figma登場前はUI設計の標準だった。軽量で動作が速い。
具体例
macOSユーザーがアプリのUIデザインを作る時に使う
Inkscape (インクスケープ)
いんくすけーぷ
無料のオープンソースベクターグラフィックエディタ。Illustratorの代替として利用可能。SVG形式がネイティブ。
具体例
無料でロゴやアイコンのSVGデータを作りたい時に使う
Adobe Photoshop (アドビ フォトショップ)
あどび ふぉとしょっぷ
Adobe Photoshopは、写真編集やデジタルアート制作に広く使われるプロフェッショナル向けの画像編集ソフトです。レイヤー、フィルター、選択ツールなど豊富な機能を備えており、写真の修正から複雑なグラフィックデザインまで幅広く対応できます。
具体例
写真の不要な人物を消去したり、背景を変更したり、色調補正を行ったりする際にPhotoshopがよく使われます。
Adobe Illustrator (アドビ イラストレーター)
あどび いらすとれーたー
Adobe Illustratorは、ベクターグラフィックスを作成・編集するためのプロフェッショナルなデザインツールです。ロゴ、アイコン、イラスト、印刷物のデザインなど、拡大縮小しても画質が劣化しないグラフィックを作成するのに適しています。
具体例
企業のロゴデザインや、名刺・パンフレットなどの印刷物のレイアウトを作成する際にIllustratorがよく使われます。
Procreate (プロクリエイト)
ぷろくりえいと
Procreateは、iPad向けの強力なデジタル絵画・イラスト作成アプリです。直感的なインターフェースと豊富なブラシ、レイヤー機能を備えており、アーティストやデザイナーがモバイルデバイスで本格的な作品を制作するのに適しています。
具体例
iPadとApple Pencilを使って、電車の中やカフェで気軽にイラストを描いたり、デジタルスケッチを作成したりする際にProcreateが活用されます。
Figma Mirror (フィグマ ミラー)
ふぃぐま みらー
Figma Mirrorは、Figmaで作成したデザインをスマートフォンやタブレットでリアルタイムにプレビューできる公式アプリです。デザインの操作性や見た目を実際のデバイス上で確認でき、UI/UXデザインのテストやフィードバック収集に役立ちます。
具体例
スマートフォン向けアプリの画面デザインをFigmaで作成し、Figma Mirrorを使って自分のiPhoneでタップやスクロールの動作を確認しながら調整できます。
アドビ エックスディー (Adobe XD)
あどび えっくすでぃー
UI/UXデザインとプロトタイピングに特化した、アドビ社のベクターベースのデザインツールです。ワイヤーフレーム作成、デザインカンプ制作、インタラクティブなプロトタイプの作成が可能です。Webサイトやモバイルアプリのユーザー体験を視覚的に設計するのに役立ちます。
具体例
新しいモバイルアプリの画面フローを設計し、ボタンをタップしたときのアニメーションを含むプロトタイプを作成するためにAdobe XDを使用します。
Miro (ミロ)
みろ
チームで共同作業するためのオンラインホワイトボードツールです。アイデア出し、ブレインストーミング、ワイヤーフレーム作成、ユーザーフローの可視化など、様々なデザインプロセスで利用されます。リアルタイムでの共同編集が可能です。
具体例
チームメンバーと一緒にWebサイトの新しいセクションのアイデアを出し合い、付箋を使ってそれぞれの考えをMiroのボード上にまとめます。
Zeplin (ゼプリン)
ぜぷりん
デザイナーと開発者の間のデザインハンドオフを効率化するためのツールです。FigmaやSketchなどで作成したデザインを取り込み、開発に必要な仕様（CSSコード、アセット、サイズ情報など）を自動生成します。チーム間のコミュニケーションをスムーズにします。
具体例
デザイナーが完成したWebページのデザインをZeplinにアップロードすると、開発者は必要な画像アセットやCSSスニペットをすぐに確認できます。
Webflow (ウェブフロー)
うぇぶふろー
コードを書かずにWebサイトをデザイン、構築、公開できるノーコード・ローコードプラットフォームです。視覚的なインターフェースを使って、デザイナーが直接レスポンシブなWebサイトを作成し、インタラクションやアニメーションを追加できます。デザインと開発の境界を曖昧にします。
具体例
マーケティングチームが新しいランディングページを迅速に立ち上げるために、Webflowを使ってデザイナーが直接サイトを構築し、開発者の手を借りずに公開します。
ブラウザ・検索エンジン
ブラウザとは
ぶらうざ
Webサイトを表示するためのソフトウェア。HTMLを解釈して画面に描画する。検索エンジンとは別物（ブラウザ＝閲覧ソフト、検索エンジン＝検索サービス）。
具体例
Chrome、Safari、Edge、Firefoxがブラウザ。Google検索は検索エンジン
Google Chrome (クローム)
ぐーぐるくろーむ
Google社が開発する世界シェア約65%のブラウザ。V8エンジンで高速動作。拡張機能が豊富。デフォルトの検索エンジンはGoogle検索。
具体例
Windows/Mac/スマホの全てで使える。開発者ツールが強力
Safari (サファリ)
さふぁり
Apple社が開発するブラウザ。iPhone/iPad/MacにプリインストールされておりAppleユーザーのデフォルト。WebKit エンジンを使用。
具体例
iPhoneのデフォルトブラウザ。バッテリー消費が少ない
Microsoft Edge (エッジ)
まいくろそふとえっじ
Microsoft社がChromiumベースで開発。Windows 10/11にプリインストール。Bing AI（Copilot）統合が特徴。Internet Explorerの後継。
具体例
Windowsで最初から入っているブラウザ。Copilotボタンで即AI対話
Firefox (ファイアフォックス)
ふぁいあふぉっくす
Mozilla財団が開発するオープンソースブラウザ。プライバシー保護機能が強力。独自のGeckoエンジンを使用。
具体例
トラッキング防止を重視するユーザーや、Web開発者に人気
Google検索
ぐーぐるけんさく
Google社が運営する世界最大の検索エンジン（シェア約92%）。クローラーがWebを巡回してインデックスを構築。AIオーバービュー機能も追加。
具体例
google.comやChromeのアドレスバーから検索する
Bing (ビング)
びんぐ
Microsoft社が運営する検索エンジン。Copilot（旧Bing Chat）を統合しAI検索の先駆け。Edgeのデフォルト検索エンジン。
具体例
EdgeブラウザやCopilotで検索するとBingが使われる
Yahoo!検索
やふーけんさく
日本ではLINEヤフー社が運営。検索エンジン本体はGoogleの技術を利用。ニュースや知恵袋との連携が特徴で、日本では高いシェアを持つ。
具体例
Yahoo! JAPANトップページからの検索。中高年ユーザーに根強い人気
ブラウザと検索エンジンの違い
ぶらうざとけんさくえんじんのちがい
ブラウザ＝Webサイトを「見る」ためのアプリ。検索エンジン＝Webサイトを「探す」ためのサービス。Chromeはブラウザ、Google検索は検索エンジン。両者は別物だが混同されやすい。
具体例
Chromeブラウザ内でGoogle検索を使う、SafariブラウザでYahoo!検索を使う、のように組み合わせは自由
URLバー (アドレスバー)
ユーアールエル バー (アドレスバー)
ブラウザの画面上部にある長方形の入力欄で、Webサイトのアドレス（URL）を入力したり表示したりします。これを使って目的のページに直接移動できます。
具体例
「https://www.google.co.jp」と入力してEnterキーを押すと、Googleのトップページに移動します。
ブックマーク (お気に入り)
ブックマーク (おきにいり)
よく訪れるWebサイトのリンクを保存しておく機能です。後で簡単にそのサイトに戻ることができます。ブラウザによっては「お気に入り」とも呼ばれます。
具体例
お気に入りのニュースサイトをブックマークしておけば、毎回URLを入力しなくてもワンクリックでアクセスできます。
シークレットモード (プライベートブラウズ)
シークレットモード (プライベートブラウズ)
閲覧履歴やCookieなどをブラウザに保存しない特別なモードです。他人と共有するパソコンで使うと便利ですが、完全に匿名になるわけではありません。
具体例
公共の図書館でシークレットモードを使ってWeb検索すると、後から他の人が自分の検索履歴を見ることができません。
ホームページ (スタートページ)
ホームページ (スタートページ)
ブラウザを起動したときやホームボタンを押したときに最初に表示されるWebページのことです。よく使うサイトを設定しておくと便利です。
具体例
朝一番にニュースをチェックするなら、ホームページをニュースサイトに設定しておくとすぐに読めます。
オートコンプリート (予測変換)
オートコンプリート (よそくへんかん)
URLバーや検索ボックスに文字を入力し始めると、過去の履歴やよく使う語句に基づいて候補が自動的に表示される機能です。入力の手間を省きます。
具体例
「you」と打ち始めると、候補に「YouTube」や「Yahoo!」が表示されるので、選択するだけで素早くアクセスできます。