こんにちは、森山です。
前回のコラムでは、“店を開く仕組み”=Webサーバーについてお話ししました。
前回のコラムはこちら⇒Webデザイナーのための5分でわかるWebサーバーの仕組み
「クラウドは更地」「レンタルサーバーはテナント」「Webサイトは本」と例えましたね。
今回はその続きとして、“中で働く仕組み”=Webアプリケーションサーバーについて解説します。
WebサイトやWebシステムはメールサーバー、Webサーバー、Webアプリケーションサーバー、データベースサーバーなど様々な役割を分担する仕組みで構成されています。
Webアプリケーションサーバーとは、Webサーバーから届いた依頼に応じて動的な処理を行い、その結果として表示すべきページの情報などをWebサーバーに渡す“裏側のスタッフ”のような存在です。
聞きなれない内は難しい言葉に聞こえますが、本屋さんの「バックヤード(裏側)」を思い浮かべると簡単に理解することができます。
開いたお店の中で働く仕組み

書店の例えで考えてみましょう。
本屋さんで「○○という本ありますか?」と店員さんに聞きました。
棚に並んでいる本なら、店員さんはすぐに手渡してくれます。
これは「静的なページ」を出すWebサーバーの動きのイメージに近いです。
でももし、探していた本が棚に並んでいなかったら?
店員さんはバックヤードに確認をしますよね。
バックヤードで在庫を管理しているスタッフが、倉庫(=データベース)を調べて「別の店舗に1冊あります」とか、
「取り寄せ手配します」といった処理をしてくれます。
この裏で調べたり作ったりするスタッフこそが、Webの世界でいう「Webアプリケーションサーバー」なのです。
WebアプリケーションサーバーとWebサーバーの違い
ここで整理しておきたいのが、「Webアプリケーションサーバー」と「Webサーバー」の違いです。
●Webサーバー(店頭の店員)
棚に並んだ本(=用意されているページ)なら、そのままお客様に渡す役割。
会社概要などの“固定のページ”ならそのまま渡します。
●Webアプリケーションサーバー(バックヤードのスタッフ)
お知らせ・商品一覧・絞り込み検索、あるいはログイン後の会員情報に基づいた表示など、その場で情報を集めて“ページを作って”渡します。 必要があれば倉庫(データベース)へ問い合わせも行います。
つまりWebアプリケーションサーバーは、お客様の要望に応じて“その場でページを作るスタッフ”というイメージです。
この2つが分業し静的なページと動的なページが組み合わされることで、私たちが普段目にしている動きのあるWebサイトが成り立っています。
実際のWebではどうなっている?
例えば、WordPressのようなWebサイトを見てみましょう。
- ユーザーが「ブログ記事を見たい」とアクセスする
- Webサーバー(Apacheなど)がリクエストを受け取る(=店員さんが注文を聞く)
- Webアプリケーションサーバー(PHPなど)が動く
- データベース(MySQL)から必要な情報を取り出す(=倉庫から本を探す)
- Webサーバーにページ(=商品)の情報を渡し、Webサーバーがお客様に届ける
この流れで、画面に記事ページが表示されます。
また、データベースに問い合わせた結果、該当する情報が見つからなかったり、アクセスしようとしたページが存在しなかったりする場合には、『404 Not Found』のようなエラーコードを渡すこともあります。
Webアプリケーションサーバーの仕組み(3層構成)
多くのWebサイトは 「3層構成」 という仕組みで作られています。
これは本屋に置き換えると、とても理解しやすくなります。
① Webサーバー(店頭)
お客様と直接やり取りする窓口。
② Webアプリケーションサーバー(バックヤード)
店頭では処理できない依頼を受け取り、裏で作業して結果を返す担当。
③ データベース(倉庫)
商品(データ)が保存されている棚。
スタッフがここから必要なものを取り出します。
この“店頭 → バックヤード → 倉庫”という流れが、Webでもそのまま動いています。
昔の方式:2層構成
以前は、店頭スタッフだけで何でも処理していた時代(=2層構成)がありました。
Webサーバーが
- ページを返す
- ロジックを実行する
- データの問い合わせを行う
など、全部をワンオペでこなしていた状態です。
しかし規模が大きくなるほど負担が増えるため、現在のようにバックヤード(アプリケーションサーバー)が独立した3層構成が主流になりました。
LAMP環境というチームワーク
こうした仕組みを支える基本セットが「LAMP環境」です。
※ Apacheの代わりにNginxが使われたり、PHPの代わりにRubyやPythonが使われることもあります。
この4つがチームとなり、お客様(=ブラウザ)のリクエストに応じてページを作り出します。
※ブラウザのことを「クライアント」と呼びます。
※Apache の代わりにNginxを使うなど別構成もありますが、代表的なのがこのLAMP構成です。
デザイナーが知っておくと得する理由
この仕組みを少し知っておくだけで、デザイン時の考え方が変わります。
- この部分はデータベースから自動で表示されるため、画像サイズが一定でない場合にデザインが崩れないよう配慮が必要
- ここは固定ページだからレイアウトを細かく整えられる
といった判断ができ、レイアウトの精度が大きく変わります。
エンジニアへの伝え方や質問も変わり、 結果としてより実用的で、崩れにくいWebデザインが作れるようになります。
まとめ
今回のコラムでは、Webサイトの「裏側で働く仕組み」であるWebアプリケーションサーバーについて、本屋さんの例えで見てきました。
Webサイトは、大きく分けて2種類のページで成り立っています。
静的なページ:いつでも同じ内容を表示する、棚に並んだ本のようなページ(会社概要など)
動的なページ:ユーザーの操作や状況に応じて内容が変わる、その場で組み立てられるページ(お知らせ、商品一覧、検索結果、会員専用ページなど)
Webサーバーは静的なページをスムーズに提供し、Webアプリケーションサーバーはデータベースと連携しながら、お客様の要望に応じて動的なページを「その場で作り出す」役割を担っています。
Webサーバー:「店頭で本を渡す店員」
Webアプリケーションサーバー:「裏で在庫を探して組み立てるスタッフ」
データベース:「倉庫の棚」
LAMP環境:「お店を支えるチーム」
この裏側の仕組み、特に「静的」と「動的」というWebサイトの二面性を理解しておくと、デザインがどのように画面に反映されるのか、どんな機能がどのように動いているのかが鮮明に見えてきます。
デザインは見た目だけでなく、「仕組みを理解して描く時代」です。ぜひ“お店の裏側”にも興味を持ってみてください。
ここまで読んでいただきありがとうございます。
また次回のコラムでお会いしましょう!
執筆者/森山砂葵(プライム・ストラテジー株式会社)
「プライム・ストラテジー株式会社」AIビジネス部所属
医療事務、Webディレクターを経て、現在はPythonを勉強中。趣味は画像生成や旅行を兼ねた聖地巡礼です。

