こんにちは。hide77です。今回はWebサイトの表と裏がテーマです。Webサイトのデザインをしていると、普段目にするのは、写真や文章、ボタン、レイアウトなど、画面に表示される部分です。でも、ふと考えてみました。
このWebサイトって、どうやって表示されているんだろう？
ブラウザにURLを入力して、Enterキーを押す。すると、Webサイトが表示されます。
当たり前のように使っているけれど、その裏側では、Webサイトの表示のためには、サーバーやデータベース、画像ファイルなど、画面からは見えない仕組みが働いています。
前回の記事では、CPUやメモリ、サーバーなどをデザイナーの仕事に例えながら、クラウドやインフラの基本を学びました。そして今回はその続きとして、普段見ているWebサイトの裏側をのぞいてみたいと思います。
インフラ初心者のWebデザイナー目線で、一緒に見ていきましょう！
デザインのとなりにインフラ＃1【デザイナーの業務に例えてみたら、クラウドの仕組みがわかった】
01｜デザイナーが作っているのは「見た目」だけ？
結論からお伝えすれば、見た目だけではありません。特にWebサイトを制作するとき、私たちはまず、どんなデザインにするかを考えます。
- どういう構造・設計にするか。
- わかりやすさ、伝わりやすさ、コンバージョンをどう解決するか。
- どんな写真を使うか、どんな色にするか。文章をどこに配置するか。
- SEOやLLMO / AIOの最適化
こうした工夫によって、ユーザーに情報をわかりやすく伝えるのがデザインの仕事です。しかし、表面上のWebデザインを作っても、ユーザーの画面に表示されなければ意味がありません。Webサイトのデータを置いておく場所や、アクセスに応じてデータを届ける仕組みも必要です。
Webサイトは、大きく「表側」と「裏側」に分けて考えることができます。
表側：ユーザーが目にする部分
- レイアウトや配色
- 文字や写真
- ボタンやナビゲーション
裏側：Webサイトを動かす仕組み
- Webサイトのデータを保管する場所
- リクエストに応じてデータを処理する仕組み
- データをブラウザへ届ける仕組み
デザインが「何を、どう見せるか」を考える仕事だとしたら、インフラは「Webサイトを安定して動かし、届けるための土台」といえます。
02｜URLを入力すると何が起きている？
ブラウザのアドレス欄にURLを入力すると、Webサイトが表示されます。普段は一瞬で終わるこの動作も、裏側ではいくつかの処理が行われています。
図解1：Webサイトが表示されるまで
※実際の処理はサイトの構成によって異なります。キャッシュなどを利用する場合は、一部の処理を省略できることもあります。
この流れを、デザイン制作に置き換えて考えてみましょう。ブラウザは、届いたHTMLやCSSなどをもとに、文字やレイアウトデザインのように組み立てます。画像などの素材も読み込み、最終的にユーザーが見る画面を表示します。
つまり、ブラウザは完成した画面をただ映すだけではなく、受け取ったデータをもとに画面を組み立てているのです。では、ブラウザがWebサイトのデータを受け取るまでに、どのような仕組みが働いているのでしょうか？それでは、それぞれの仕組みをもう少し詳しく見ていきましょう。
03｜DNSって何をしている？
DNSは「ドメイン名」と「IPアドレス」を対応づける仕組みです。
ドメイン名は、相手の名前 example.com のような文字列です。一方、IPアドレスは、ネットワーク上で接続先を識別するための情報で電話番号のようなものです。ブラウザがWebサイトへ接続する際には、接続先を特定するためにDNSの仕組みが使われます。
デザインの仕事で例えるなら、ドメイン名は「相手の名前」、IPアドレスは「電話番号」に近いイメージです。
名前だけでは通信先を特定できないため、対応する情報を調べるわけです。
ただし、Webサイトを開くたびに、必ずDNSへ問い合わせているわけではありません。 以前に調べた情報がキャッシュに保存されていれば、それを利用できる場合があります。
DNSはWebサイトそのものを保存したり、画面をデザインしたりする仕組みではありません。接続先を特定するための重要な役割を担っています。
04｜サーバーは何をしている？
接続先にたどり着いたら、次はWebサイトのデータを受け取る段階です。
ここで登場するのが、サーバーです。
サーバーとは、ネットワークを通じて、ほかのコンピューターやソフトウェアからのリクエストに応じて処理やデータの提供を行う仕組みです。
Webサイトの場合、サーバー側ではリクエストに応じてHTMLや画像などを返します。WordPressのような仕組みを使っている場合は、必要なデータを取得してページを生成することもあります。
サーバーは、単にデータを置いておく場所というだけではありません。構成によっては、リクエストを受け付けたり、プログラムを動かしたり、必要なデータを取り出したりします。
また、Webサイトのデータをすべて1台のサーバーだけで処理するとは限りません。アクセスを効率よく処理するために、複数のサーバーやキャッシュなどを組み合わせる構成もあります。
では、WordPressで作られたWebサイトでは、どのようにデータを扱っているのでしょうか？
05｜WordPressの場合はどうなる？
WordPressは、記事や固定ページなどのコンテンツを管理し、Webサイトとして表示するためのCMS（コンテンツ管理システム）です。
管理画面で記事を書いたり、画像をアップロードしたりすると、その内容はWordPressの仕組みに沿って保存されます。そして、ユーザーがページを開くと、WordPressは必要な情報を使ってページを表示するための処理を行います。
これは基本的な構成を理解するための模式図です。実際には、サーバーがWordPressを動かし、WordPressが必要に応じてデータベースやファイルを参照します。キャッシュや外部ストレージなどを利用する構成もあります。ここで大切なのは、WordPress・データベース・ファイルは、それぞれ役割が異なるということです。
- WordPress： 記事などを管理し、ページを表示するための処理を行う
- データベース： 記事の本文やタイトルなどの情報を保存する
- ファイル： アップロードした画像などの実体を保存する
この3つが連携することで、管理画面で更新した内容をWebサイトに表示できます。では、記事と画像は、それぞれどこに保存されているのでしょうか？
06｜画像や記事データはどこにある？
WordPressの仕組みを理解するうえで、特に知っておきたいのが「記事の情報」と「画像ファイル本体」の違いです。管理画面では、記事の本文と画像を同じ画面で扱うことがあります。そのため、どちらも同じ場所に保存されているように感じるかもしれません。
しかし、一般的なWordPressの構成では、保存先や管理方法が異なります。
記事の本文はデータベースへ
WordPressでは、記事のタイトルや本文、公開日時などの情報が、通常はデータベースに保存されます。データベースは、情報を整理して保存し、必要なときに取り出せるようにする仕組みです。
デザイン制作で例えるなら、案件名や原稿、公開日などをまとめた「案件管理表」に近い存在です。必要な情報を探し、整理して扱うための場所と考えるとイメージしやすくなります。
画像ファイル本体はファイルとして保存
一方、WordPressにアップロードした画像は、一般的な構成ではファイルとして保存されます。標準的な設定では、wp-content/uploads というフォルダの中に年月ごとのフォルダなどを使って保存されます。データベースには、画像に関する情報や記事との関連付けなども保存されます。
つまり、画像を記事に掲載するときは、画像ファイル本体だけでなく、WordPressがその画像を管理し、記事と結びつけるための情報も関係しているのです。
なぜ、この違いを知っておくといいの？
例えば、Webサイトのバックアップや移行を行うとき。
データベースだけを保存しても、画像ファイル本体などが別に保存されていれば、画像まで完全に復元できるとは限りません。反対に、画像ファイルだけがあっても、記事本文などのデータがなければ、元のWebサイトをそのまま再現できない場合があります。
そのため、WordPressのバックアップでは、一般的にデータベースとファイルの両方を確保することが重要です。実際に必要な対象は、サイトの構成や外部サービスの利用状況によって異なります。
普段は意識しない保存先の違いも、サイトの移行やトラブル対応を考えるときに役立つ知識です。
07｜Webサイトを「表」と「裏」から見てみる
ここまで、Webサイトが表示されるまでの流れと、WordPressの裏側を見てきました。普段、デザイナーが目にしているのは、写真や文章、ボタンなどが並ぶWebサイトの表側です。でも、その裏側では、さまざまな仕組みが連携しています。
- ドメイン： Webサイトの接続先を指定するための名前
- DNS： ドメイン名に対応するIPアドレスなどを調べる仕組み
- ネットワーク： コンピューター同士がデータをやり取りするための仕組み
- Webサーバー： リクエストに応じてデータを提供する
- WordPress： 記事や設定などを扱い、ページを生成する
- データベース： 記事や設定などの情報を保存する
- ファイル： 画像やテーマなど、Webサイトを構成するデータを保存する
こうして並べてみると、Webサイトはデザインだけで完結するものではないことがわかります。もちろん、デザイナーがインフラのすべてを理解したり、管理したりする必要があるわけではありません。ただ、Webサイトがどのような仕組みで動いているのかを知っておくと、制作中の疑問や公開後のトラブルについても、原因を考える手がかりになります。
例えば、画像が表示されないとき。
デザインの問題だけではなく、画像ファイルの保存場所や参照先、サーバーの設定などが関係しているかもしれません。サイトの表示が遅いときも、画像の容量やコードだけでなく、サーバーやネットワークなど、さまざまな要因が考えられます。
「どう見せるか」を考えるデザインと、「どう動かすか」を支えるインフラ。
その両方を少しずつ知ることで、Webサイトの見え方も変わってくるのかもしれません。私自身、まだまだ勉強中ですが、普段見ているWebサイトの裏側を知ることで、デザインの仕事とインフラのつながりを少し実感できました。
これからも、デザイナーの目線で「デザインのとなり」にあるインフラを、ひとつずつ学んでいきたいと思います。
次回も、Webサイトを支える仕組みについて、もう少し掘り下げてみたいと思います。
参考資料
※本記事は、一般的なWebサイトおよびWordPressの仕組みを初心者向けに整理したものです。実際の処理や保存先は、サイトの構成や設定によって異なります。
この記事を書いた人
