Webサイトが表示されるまで
このページで学ぶこと
Section titled “このページで学ぶこと”- ブラウザ、ネットワーク、サーバーの役割
- HTML・CSS・JavaScript・画像が別々に取得されること
- 表示不具合がどこで起きる可能性があるか
- PMが構成を理解する意味
Webサイトは、サーバーに保存された完成画像をブラウザがそのまま表示しているわけではありません。ブラウザは複数のファイルやデータを取得し、それらを組み合わせて画面を作ります。
sequenceDiagram
participant U as 利用者
participant B as ブラウザ
participant D as DNS
participant S as 配信サーバー
participant A as API・CMS
U->>B: URLを入力
B->>D: 接続先を問い合わせる
D-->>B: 接続先を返す
B->>S: HTMLを要求
S-->>B: HTMLを返す
B->>S: CSS・JavaScript・画像を要求
S-->>B: 各ファイルを返す
B->>A: 必要なデータを要求
A-->>B: データを返す
B-->>U: 画面を描画
すべてのサイトがこの通りではありません。しかし、Webサイト表示を考える基本形として有効です。
注：APIとは
あるシステムの機能やデータを、別のシステムから決められた方法で利用するための窓口です。上の図では、ブラウザが記事や在庫などのデータをCMS・外部サービスから受け取る入口として登場します。ここでは「画面とは別に、データだけをやり取りする接続口がある」と捉えられれば十分です。詳しくは第4部「APIとは何か」で説明します。
ブラウザは画面を組み立てるソフトウェア
Section titled “ブラウザは画面を組み立てるソフトウェア”Chrome、Safari、Edge、Firefoxなどがブラウザです。ブラウザはURLを受け取り、サーバーと通信し、HTML、CSS、JavaScript、画像、フォント、APIデータなどを組み合わせて画面を作ります。
同じソースコードでもブラウザによって表示差が起きる場合があります。ブラウザごとに実装や更新時期が完全には同じでないためです。そのため、対応ブラウザを事前に決め、公開前に確認します。
Webページは複数の要素からできている
Section titled “Webページは複数の要素からできている”| 要素 | 主な役割 | 制作実務で起きること |
|---|---|---|
| HTML | 見出し、文章、画像などの構造 | 情報設計、SEO、アクセシビリティへ影響する |
| CSS | 色、文字、余白、レイアウト | ブラウザ・画面幅による表示差が起きる |
| JavaScript | 操作、アニメーション、データ取得 | 読み込み量やエラーが表示速度・動作へ影響する |
| 画像・動画 | 視覚表現 | 容量が大きいと表示が遅くなる |
| Webフォント | 書体 | 読み込み遅延やライセンス確認が必要になる |
| APIデータ | CMSや外部システムの情報 | 外部障害や通信失敗で表示できない場合がある |
デザインカンプ上では一枚の画面に見えます。しかし実装と配信では、多数の要素が組み合わされています。
「表示されない」の原因は一つではない
Section titled “「表示されない」の原因は一つではない”flowchart TD
A[サイトが表示されない] --> B{全員に起きているか}
B -->|一部の人だけ| C[ブラウザ・端末・ネットワーク・キャッシュ]
B -->|全員| D{接続自体ができるか}
D -->|できない| E[DNS・証明書・CDN・サーバー]
D -->|接続できる| F{HTMLは返っているか}
F -->|返っていない| G[配信設定・アプリ・障害]
F -->|返っている| H[CSS・JavaScript・API・画像]
「何も表示されない」「デザインだけ崩れている」「記事だけ古い」「フォームだけ送れない」では、疑う場所が異なります。ディレクター・PMが直接修正する必要はありませんが、状況を整理して適切な担当へ伝える必要があります。
静的なページと動的なページ
Section titled “静的なページと動的なページ”静的なページは、あらかじめ生成したHTMLを配信します。高速・安価・堅牢にしやすい一方、内容を変えるにはファイル更新や再ビルドが必要です。
動的なページは、アクセス時にプログラムやデータベースを使って内容を作ります。利用者ごとに内容を変えやすい一方、処理する仕組み、監視、セキュリティ、障害対応が必要です。
現在は、ページ本体は静的に配信し、一部だけAPIから動的に取得する構成も一般的です。
実案件ではどう考えるか
Section titled “実案件ではどう考えるか”構成図を一枚作る
Section titled “構成図を一枚作る”中規模以上の案件では、少なくとも次を図にします。
- 利用者のブラウザ
- ドメインとDNS
- CDNやWAF
- Webサイトの配信先
- CMS
- API
- フォームや検索などの外部サービス
- データの保存先
サービス名だけでなく、誰が契約し、誰が管理するかも記載すると実務的です。
画面を機能単位に分ける
Section titled “画面を機能単位に分ける”たとえば店舗検索ページなら、ページ本体、CMS、地図API、来店予約フォーム、会員システム、アクセス解析が別々に存在する場合があります。どれか一つが止まってもページ全体を止めず、該当部分だけ代替表示する設計もできます。
PMチェックリスト
Section titled “PMチェックリスト”- 対応ブラウザと端末が決まっている
- ファイルやデータの配信元を把握している
- CMSやAPIなど外部依存先を一覧化している
- JavaScriptが失敗した場合の影響を把握している
- 外部APIが停止した場合の表示を決めている
- 表示速度の確認条件を決めている
- 構成図と担当者・契約者の一覧がある
よくある誤解・失敗
Section titled “よくある誤解・失敗”「ブラウザで見えれば本番でも問題ない」
Section titled “「ブラウザで見えれば本番でも問題ない」”制作担当者のブラウザだけで見えていても、キャッシュ、ログイン状態、社内ネットワークなどの影響を受けている場合があります。
「デザインの再現度だけがフロントエンド品質」
Section titled “「デザインの再現度だけがフロントエンド品質」”見た目が同じでも、読み込み速度、キーボード操作、検索エンジンへの伝わり方、保守性が異なることがあります。
「外部サービスは制作範囲外なので考えなくてよい」
Section titled “「外部サービスは制作範囲外なので考えなくてよい」”実装担当が別でも、Webサイトから利用する以上、接続条件、障害時表示、連絡先、費用、責任分界の確認が必要です。
理解度チェック
Section titled “理解度チェック”Q1. CSSだけ取得できなかった場合、どのような状態になりやすいでしょうか。
Section titled “Q1. CSSだけ取得できなかった場合、どのような状態になりやすいでしょうか。”回答と解説
文章や画像は表示されても、色、余白、レイアウトなどが崩れた状態になりやすいです。Q2. 一部の利用者だけ古い内容が表示される場合、何を疑いますか。
Section titled “Q2. 一部の利用者だけ古い内容が表示される場合、何を疑いますか。”回答と解説
ブラウザキャッシュ、CDNキャッシュ、DNS切替直後の接続先の違いなどを疑います。Q3. APIが停止しても、Webサイト全体を表示し続けることは可能でしょうか。
Section titled “Q3. APIが停止しても、Webサイト全体を表示し続けることは可能でしょうか。”回答と解説
設計次第で可能です。APIを使用する部分だけ代替表示し、ページ本体や他のコンテンツを表示できます。- リクルート「Browser 2025」
https://speakerdeck.com/recruitengineers/browser-2025 - リブセンス「ビジネス職新卒向け Web基礎研修」
https://www.slideshare.net/slideshow/web-142121350/142121350