Webデザイナーのための5分でわかるWebサーバーの仕組み【第1回】

初めまして。AIビジネス部の森山砂葵と申します。

このコラムでは、WebデザインはできるけどコーディングやWordPressなどのCMSには触れたことがないデザイナーや、これからWebデザイナーを目指す方、DTPデザイナーからWebデザイナーへの転職を考えている方向けに、知っておくと役立つ知識をピックアップして、わかりやすく解説していきたいと思います。

私は前職ではWeb制作会社で約8年間、ディレクターとしてWebサイト制作に携わっていました。その中で経験者も初心者デザイナーも多く見てきましたが、やはりHTMLの知識があるデザイナーとDTPから転職してきたデザイナーなどHTMLの知識のないデザイナーでは、Webデザインの完成度が違うと感じています。

HTMLの特性を知らないと、たとえば横幅1920pxで綺麗に見えるデザインは作れても、横幅を変えると見づらく崩れてしまうことが多々あります。

一方で、WebサイトやWordPressの特性を理解しているデザイナーは、モバイルフレンドリーなレスポンシブデザインを作ることができます。

デザインには直接関係がないように見えることでも、Webに関する知識を幅広く持っている方が、他のデザイナーより一歩先のWebデザインを生み出せるはずです。

そんなわけで第１回目の今回は、「Webサーバーってそもそも何？」というテーマで解説したいと思います。

Webサーバーって何をしているの？Webサイトの仕組み

Webサーバーとは、簡単に言うとWebページのファイルなどのデータを保管していて、見たい人がアクセスできるコンピューターのことです。

例えば、「会社のホームページを見たい」と思ったら、Google ChromeやSafariなどのブラウザを開いて、URLを入力してアクセスするとWebサイトが見られますが、実はこの間にブラウザとサーバー間ではやり取りが行われています。

まず、パソコンやスマートフォンの中にあるブラウザが、 Webサーバーに向かって「〇〇のページを見せてください」とリクエストを送ります。

そのリクエストを受け取ったサーバーは、該当するページのデータをブラウザに返します。
ブラウザはそのデータを読み取り、パソコンやスマートフォンの画面にWebページとして表示してくれます。

このとき、ブラウザとサーバーの間でやり取りするための“決まりごと”が HTTPアクセス（通信のルール）です。

つまり、HTTPという共通のルールに従って、サーバーとブラウザが“会話”をしている状態です。

補足：最近では、URLの最初が「https://」で始まるサイトがほとんどですが、この「s」はSSLという仕組みを使って通信を暗号化している、という意味です。

これは、ブラウザとサーバーの間でやり取りするデータを安全に守る仕組みのことです。

本屋さんに例えると分かりやすい！

いきなりWebの仕組みを学ぶのは少し抵抗がある、難しいと感じる方も多いと思いますので、「本屋さん」に例えて考えてみるとわかりやすいと思います。

Webサーバー = 本屋
本屋さんにはたくさんの本が棚に並んでいます。
読者（＝ユーザー）は欲しい本を探して手に取ります。
Webサーバーも同じで、世界中のユーザーが「見たいWebページ」を取りに来る場所（本屋）というイメージです。
Webサイト = 本
本（Webサイト）は、本屋の棚に並べられ、誰でも読むことができます。
ただし、Webサーバーという「本屋」に置かない限り、その本は倉庫に眠ったままで誰の目にも触れないままになってしまいます。Webサイト制作の現場ではよく「ローカル」という言い方をしますが、それは倉庫にある状態の自分しか見れない場所というイメージです。

つまり、Webサーバーがあるからこそ、Webページを世界中の人に見てもらえるのです。