TRAINING
Webサービスが動く仕組み
サーバー・ドメイン・DNS・Hostingの役割をざっくり理解する
宛先
全社員
提出者
吉田
提出日
2026年4月23日
1
Chapter 1
全体像
4つの技術が何をしてくれているのか、
お店を開くたとえを使って把握しましょう
SECTION 1-1
全体マップ — 4つの技術の役割
サーバー
24時間営業のレストラン
いつでも注文に応じて
料理を出してくれる「お店」
ドメイン
お店の住所・看板
「覚えやすい名前」で
場所を示す「住所」
D
DNS
インターネットの電話帳
名前をサーバーの場所に
変換する「電話帳」
H
Firebase Hosting
管理人付き貸しギャラリー
Webサイトを世界に
公開する「展示場」
「お店を開く」にたとえると

レストラン(サーバー)を用意して、住所(ドメイン)を決め、電話帳(DNS)に住所を登録する。
その店舗運営を貸しギャラリー(Firebase Hosting)に任せると、管理の手間なく誰でも来られるお店が完成します。

SECTION 1-2
Webサイトが表示されるまでの流れ
URLを入力
例:gonmura.jp
DNS が調べる
名前 → 場所(数字の住所)に変換
サーバーに接続
ファイルを取りに行く
ブラウザが表示
画面が組み立てられる
たとえ:電話をかける流れ

「山田さんに電話したい」→ 電話帳(DNS)で電話番号(IPアドレス)を調べる →
番号に電話する(サーバーに接続する)→ 山田さんが出る(サーバーがデータを返す)→ 会話成立(ブラウザが表示)

ブラウザでURLを入力してから画面が出るまで、この4ステップが1秒以内に完了しています
2
Chapter 2
サーバー
24時間365日、誰かが来るのを待っている
「いつでも開いているレストラン」の正体
SECTION 2-1
サーバーとは — 24時間営業のレストラン
自分のPC

使いたい時だけ電源を入れる。
シャットダウンしたらアクセス不可。
自分だけの「自炊キッチン」。

特徴内容
稼働時間使う時だけ
アクセス自分だけ
目的個人の作業
サーバー

中身は皆さんが使っているPCと同じ。
違いは24時間つけっぱなしで、
誰からのアクセスにも応答できること。

特徴内容
稼働時間24時間365日
アクセス世界中の誰でも
目的データを「サーブ(提供)」する
サーバーの正体はただのPC。違いは「24時間つけっぱなしで、みんなのリクエストに応え続ける」こと。レストランのように注文を受けてデータを届けます
SECTION 2-2
クラウドサーバー — ネット上のPCを借りるだけ

自前サーバー(昔の方法)

自社でPCを買って管理する

会社にサーバー用のPCを置いて、電気・空調・セキュリティを全部自分で管理。壊れたら自分で修理。

課題
高価な機器を自社で購入・保有
専任の管理者が必要
壊れたら自分で修理
急なアクセス増に対応しにくい

クラウドサーバー(今の主流)

ネット上のPCを借りるだけ

Xserverやさくらサーバーなどの会社が管理しているPCを「必要な分だけ借りる」仕組み。自分でPCを用意する必要なし。

メリット
初期費用なし、使った分だけ支払い
管理はサーバー会社にお任せ
壊れても自動で代替機に切り替え
アクセス増に合わせて簡単に拡張
Xserver・さくらサーバー・AWS・Google Cloud など、ネット上のPCを「借りる」だけでサーバーが持てる時代です
3
Chapter 3
ドメインとDNS
住所と電話帳 — 人間が覚えやすい名前と
コンピュータが使う番号をつなぐ仕組み
SECTION 3-1
ドメインとは — インターネット上の住所
ドメインがない世界

サーバーの本当の場所は数字の羅列(IPアドレス)で表されます。
例:203.0.113.42

これを覚えてアクセスするのは現実的ではありません。

数字の住所を「覚えやすい名前」に置き換えるのがドメイン
ドメインがある世界

数字の代わりに意味のある名前でアクセスできます。
例:gonmura.jp

たとえ:建物の住所・看板

日常インターネット
東京都渋谷区○○1-2-3IPアドレス(数字)
「渋谷スクランブル交差点」ドメイン名(覚えやすい名前)
お店の看板ドメインのブランド価値
SECTION 3-2
DNS とは — インターネットの電話帳
DNSとは

「gonmura.jp」という名前を「203.0.113.42」という数字(IPアドレス)に変換してくれる仕組みです。
電話帳が「山田さん」→「090-xxxx-xxxx」に変換するのと同じ役割です。

名前を場所に変換する流れ

URLを入力
gonmura.jp
DNSサーバーに問い合わせ
「gonmura.jpの場所は?」
IPアドレスが返ってくる
「203.0.113.42ですよ」
サーバーに接続
サイトが表示される
DNSはインターネット上に分散配置された巨大な電話帳。毎日何十億回もの「名前変換」をこなしています
4
Chapter 4
サーバーの役割
サイトやDBは具体的にどう動いているのか
レストランのたとえで中身を覗いてみましょう
SECTION 4-1
Webサイトが動く仕組み
ユーザーがURLにアクセス
「この料理をください」
サーバーがリクエストを受け取る
ホールが注文を聞く
ページのデータを返す
料理をテーブルに運ぶ
ブラウザが画面を組み立てる
お客さんが食べる
たとえ:レストランのホールスタッフ

サーバーはレストランのようなもの。「この料理(ページ)をください」という注文に応じて、キッチンで準備して提供してくれます。

静的サイト — 作り置きメニューをそのまま出す

あらかじめ作っておいたページをそのまま返す。このポータルサイトもこの形式。高速で安価。

動的サイト — 注文に応じてその場で調理する

アクセスのたびにサーバーが内容を組み立てて返す。ログイン状況や個人情報に合わせた表示が可能。

お客様から「サイトが表示されない」と問い合わせがあったとき、この流れのどこで止まっているかイメージできるようになります
SECTION 4-2
データベースが動く仕組み
たとえ:レストランの食材庫

データベースはレストランの食材庫のようなもの。ユーザー情報・注文履歴・商品情報などを、棚ごとにきちんと分類して保管しています。
「サーバーがレストランなら、データベースは食材庫」

データの保存

アプリが「保存して」と依頼
サーバーがDBに書き込む
食材庫の棚に収納される

データの取得

アプリが「〇〇を出して」と依頼
サーバーがDBを検索
食材庫から取り出して返す
保存されているデータの例食材庫での場所
ユーザー情報(名前・メール・パスワード)「ユーザー」棚
注文履歴(日時・商品・金額)「注文」棚
商品情報(名前・価格・在庫数)「商品」棚
営業日報や顧客リストなど、皆さんが入力しているデータもデータベースに保管されています
SECTION 4-3
サーバーの中で何が連携しているか
たとえ:レストランの構造

サーバーの中は「ホール・キッチン・食材庫」の3つが連携して動いています。
注文を受け → 料理を作り → 材料を取り出す、この流れがWebサービスの基本構造です。

Webサーバー
=ホール(お客様対応)
ユーザーのリクエストを受け取り、適切な場所に渡す。お客様の注文をキッチンに伝えるホールスタッフ。
アプリケーション
=キッチン(料理担当)
実際の処理・計算・判断を行う。「ログイン確認」「注文処理」などのロジックを実行するキッチンスタッフ。
データベース
=食材庫(材料保管)
必要なデータを保管・提供する。キッチンから「〇〇を出して」と依頼されたら材料を渡す食材庫。
ユーザーが注文
ブラウザからリクエスト
ホールが受け取る
Webサーバーが処理
キッチンが料理
アプリがロジック実行
食材庫から取り出す
DBからデータ取得
料理を提供
ブラウザに返す
「サーバーが落ちた」と聞いたとき、ホール・キッチン・食材庫のどこが止まったかイメージできると、エンジニアとの会話がスムーズに
5
Chapter 5
Firebase Hosting
ここまで学んだこと、全部自分でやるのは大変…
Firebase Hostingを使うとなぜ楽なのか
SECTION 5-1
全部自分でやるとこんなに大変
ここまでの流れを振り返ると…

Webサービスを公開するには、サーバー(PC)を用意して、ドメイン(住所)を取得して、DNS(電話帳)に登録して、通信の安全対策もして…。
これを全部自分でやるのは、レストランの物件探し・内装・看板・電話帳登録・防犯カメラ設置を全部1人でやるようなものです。

やること自分でやる場合
サーバー(PC)の用意レンタルサーバーを契約して設定
ドメイン取得ドメイン会社で購入・設定
DNS設定ドメインとサーバーを紐づける
通信の安全対策証明書を取得して設定
サーバーの管理障害対応・アップデートを自分で
エンジニアでも手間がかかる作業。これをまるっと引き受けてくれるのが Firebase Hosting です
SECTION 5-2
Firebase Hosting なら全部おまかせ
レストランのたとえでいうと

物件探し・内装・看板・電話帳登録・防犯カメラ…全部やってくれる「フランチャイズ本部」のようなもの。
あなたは「料理(Webサイト)を作る」ことだけに集中すればOKです。

やること自分でやる場合Firebase Hosting
サーバーの用意レンタルサーバー契約・設定自動で用意される
ドメイン設定ドメイン会社で購入・設定URLが自動発行される
DNS設定手動で紐づけ作業自動で設定される
通信の安全対策証明書を取得・設定自動で鍵マーク付きに
障害対応・管理24時間自分で監視Googleが24時間管理

この研修サイトも同じ仕組み(Cloudflare Pages)で公開されています。 もっと詳しく知りたい方は バックエンド基礎研修 ��参照してください。

あなたは「Webサイトを作ってアップロードする」だけ。あとは全部おまかせ!
SUMMARY
まとめ — 4つの技術の連携
ドメイン
覚えやすい住所
DNS
住所を番号に変換
サーバー
データを提供
Firebase Hosting
ファイルを管理・公開
ブラウザに表示
あなたの画面
サーバー
ただのPC。24時間つけっぱなしで注文に応え続ける「レストラン」
ドメイン
数字の住所を覚えやすい名前に置き換える「住所・看板」
DNS
ドメイン名を数字の住所に変換する「インターネットの電話帳」
Firebase Hosting
サーバー・ドメイン・DNS・安全対策を全部おまかせできる「フランチャイズ本部」
普段使っているサービスの裏では、この4つが連携して動いています。難しい管理はクラウドにお任せ!
PDF を生成しています...

PC でご覧ください

このスライドはPC画面(横向き)での閲覧を推奨しています。