デザイナー目線で整理するWeb用語 ― SSR、API、OAuth

知らない言葉だらけだった

WordPress から Astro にサイトを移行するとき、Claude Code との会話に聞き慣れない用語が出てきました。「SSRモードに切り替えましょう」「APIルートに変換します」「OAuth認証を設定します」——何を言われているのかわからない。

でも、作業を進める中で少しずつ意味がわかってきました。ここでは、自分が実際に出会った用語をデザイナー目線で説明します。

サイトの仕組み系

SSR（Server Side Rendering）

ページにアクセスがあるたびに、サーバー側でHTMLを作って返す方式。WordPress はこれに近い動きをしています。

MARI LAB のサイトでも、一部のページにパスワード認証をかけるために SSR モードを使っています。アクセスのたびに「パスワードは合ってる？」とサーバーが判断する必要があるからです。

SSG（Static Site Generation）

あらかじめ全ページのHTMLを作っておいて、アクセス時はそれを返すだけの方式。表示がとにかく速い。

MARI LAB のブログや会社概要はこの方式です。内容が変わらないページは、事前に作っておくのが効率的。

prerender

Astro の設定で、「このページは SSG で事前生成してね」と指定すること。SSR モードのサイトでも、ページごとに SSG を選べます。

CDN（Content Delivery Network）

世界中にあるサーバーのネットワーク。サイトのデータを各地のサーバーにコピーしておいて、ユーザーの近くから配信する仕組み。Cloudflare Pages を使うと自動的に CDN 配信になります。

API 系

API（Application Programming Interface）

ソフトウェア同士が情報をやりとりするための窓口。たとえば、Figma API は「Figma のファイル情報をください」というリクエストを送ると、データを返してくれる仕組みです。

自分が使った API：

• Figma API — ファイル情報やスクリーンショットの取得
• Resend API — お問い合わせフォームからのメール送信
• GitHub API — CMS のログイン認証

REST API

API の一つの形式。URLにアクセスするとデータが返ってくる、Webの仕組みに沿った設計。WordPress にも REST API があり、外部から記事データを取得できます。

エンドポイント

API の「住所」のようなもの。「このURLにリクエストを送ると、このデータが返ってくる」という窓口のこと。

レート制限

API に短時間で大量のリクエストを送ると制限がかかること。Figma API で数百件のファイル情報を取得しようとしたとき、これに引っかかりました。

認証系

OAuth（オーオース）

他のサービスのアカウント（GitHub、Google など）を使ってログインする仕組み。Decap CMS で「GitHub でログイン」するときに使っています。

自分でパスワードを管理する必要がないので、セキュリティ的にも楽。

Basic 認証

ユーザー名とパスワードでアクセスを制限するシンプルな認証方式。ブラウザにポップアップが出て、ID/PW を入力するやつ。/works/ ページの保護に使っています。

環境変数

パスワードや API キーなど、コードに直接書きたくない秘密の情報を外部に保存する仕組み。.env ファイルに書いたり、Cloudflare のダッシュボードで設定したりします。

開発ツール系

npm

JavaScript のパッケージ（ライブラリやツール）を管理するツール。npm install でプロジェクトに必要なツールを一括インストール、npm run dev で開発サーバーを起動。

Git

ファイルの変更履歴を管理するツール。「いつ」「何を」「どう変えたか」が全部記録される。間違えても前の状態に戻せる。

GitHub

Git で管理しているファイルをインターネット上に保存する場所。Cloudflare Pages と連携して、GitHub にコードを push すると自動的にサイトが更新されます。

デプロイ

開発したものを本番環境（実際にユーザーが見る場所）に配置すること。「デプロイする」＝「サイトを公開する」くらいの意味。

知らなくても作れるけど、知ると楽しい

これらの用語を最初から知っていた必要はありませんでした。Claude Code に「わからない」と言えば、噛み砕いて説明してくれます。

でも、言葉を知っていると、次に同じ話が出てきたときに「ああ、あれね」と理解できる。Claude Code との対話のスピードも上がります。

全部を覚える必要はないけれど、出会ったときに「聞いたことある」状態にしておくと、開発がぐっと楽になりそうです。