Webデザインの仕事をしていると、ときどき「サーバー」や「クラウド」という言葉が出てきます。
「サーバーのスペックは？」「このサイト、どんな環境で動いているんだろう？」
そんな話を聞くたびに、私はデザイン業務を行う私に取っては、「……サーバーって、結局何なんだ？」と思っていました。
インフラの話は、どうしてもエンジニアの専門分野というイメージがあります。でも、Webサイトをつくっている以上、デザインだけでサイトが完成するわけではありません。
そこで今回は、インフラ初心者のデザイナー目線で、インフラをもっと理解しやすく身近なもので理解しやすくなるように「クラウドやサーバーって、デザイナーの仕事に例えると何なんだろう？」と考えてみました。
そもそも「クラウド」って何？
初めて「クラウド」と聞いたのはおそらくicloudだったかと思います。かれこれ10年以上前のことだと思います。なんとなくインターネット上にある何か……というイメージはありますが、私は最初、かなりふわっとした理解でした。
調べてみると、クラウドは、サーバーやストレージなどのコンピューター資源を、ネットワーク経由で必要なときに利用する仕組みのこと。
つまり、「クラウド」という1台のコンピューターがあるわけではないということです。
今となっては当たり前と思えるけれど…そう考えると、クラウドを理解するには、まず「サーバーって何？」「ストレージって何？」というところから見ていくとよさそうです。ということで、ここからはデザイナーの仕事に置き換えてみます。
01｜CPU・メモリ・ストレージをデザイン作業に例えてみる
まずは、普段使っているパソコンを思い浮かべてみます。
デザイン作業をしていると、
「あら、figma再起動しないと表示がおかしい」「Photoshopが重い……」
なんてことがありますよね。実は、コンピューターの中でも、それぞれ役割が違います。
CPUは「処理能力」
CPUは、コンピューターのさまざまな処理を担当しています。デザイナーでいうと、**「仕事を処理する力」**と考えるとわかりやすそうです。
複雑な作業をするときには、それだけコンピューターにも処理する力が必要になります。
メモリは「作業机」
個人的に一番わかりやすいと思ったのが、メモリです。メモリは、コンピューターが作業するときに使う一時的な作業スペース。
これをデザイン作業に例えるなら、メモリ＝作業机です。figma、Photoshop、Illustrator、ブラウザ、資料……。
机の上にいろいろ広げて作業するのと同じように、メモリにも作業するためのスペースがあります。
机が広いほうが、いろいろなものを広げて作業しやすい。そう考えると、メモリの役割がかなりイメージしやすくなります。
ストレージは「データ保管庫」
ストレージは、データを保存しておく場所。
デザイナーなら、
- Figmaデータ
- PSDデータ
- 画像素材
などを保存している場所、と考えるとわかりやすいです。
つまり、
CPU＝処理する
メモリ＝作業する
ストレージ＝保存する
という感じ。こうして考えると、コンピューターの仕組みも少し身近に感じませんか？
02｜サーバーは「Webサイトの仕事場」
では、Webサイトの場合はどうでしょう。Webサイトを見るとき、私たちはブラウザに表示された画面しか見ていません。でも、その裏側ではWebサイトのデータを提供する「サーバー」が動いています。
サーバーについて調べてみると、少し難しく感じますが、ここでは、
「Webサイトを動かしているコンピューター」くらいに考えてみます。
デザイナーに例えるなら、
サーバー＝Webサイトを動かすための仕事場です。
デザイナーにも、仕事をするためのPCやソフト、データなどが必要ですよね。Webサイトにも、サイトを動かすための環境が必要。そう考えると、サーバーが少し身近に見えてきます。
03｜データベースは「案件管理表」
Webサイトには、実はたくさんの情報が入っています。
例えば、
- 記事
- タイトル
- カテゴリー
- ユーザー情報
- 各種設定
など。
こうした情報を整理して管理しているのが「データベース」です。
これもデザイナーの仕事に例えるなら、
データベース＝案件管理表と考えるとわかりやすいかもしれません。
「この案件は誰が担当？」「納期はいつ？」「今どこまで進んでいる？」
といった情報をまとめて管理するように、Webサイトの情報も整理して保存されています。
WordPressを使っている人なら、記事を投稿すると、その情報がデータベースに保存される、と考えるとイメージしやすいです。
04｜ネットワークは「データを届ける物流網」
ここは最初、「ネットワーク＝道路」と考えていました。でも、それだけだとちょっとわかりにくい。
そこで今回は、ネットワーク＝データを届ける物流網と考えてみます。
例えば、デザインデータをクライアントに送るとします。
デザインデータが「荷物」なら、それを相手に届けるための仕組みが「物流網」。Webサイトも似ています。ユーザーが、「このページを見たい！」とリクエストすると、サーバーから必要なデータが返ってきます。
そのデータがユーザーのブラウザまで届くことで、私たちはWebページを見ることができます。
つまりネットワークは、
データをコンピューター同士でやり取りするための仕組みと考えるとよさそうです。
05｜ロードバランサーは「仕事を振り分ける人」
Webサイトにたくさんの人がアクセスすると、1台のサーバーに処理が集中することがあります。
そんなときに登場するのが「ロードバランサー」です。
これは、ロードバランサー＝仕事を振り分けるディレクターと考えるとわかりやすいです。
例えば、デザイン案件が一気に10件来たとします。
全部を1人でやるのではなく、
「この案件はAさん」「これはBさん」「こっちはCさん」と振り分けますよね。
ロードバランサーも、アクセスを複数のサーバーなどに振り分けることで、負荷を分散します。「1人に仕事を集中させない」という考え方は、デザイナーの仕事にもありますね。
06｜バックアップは「デザインデータの予備」
これはデザイナーなら、かなり身近かと思います。
「間違えて上書きした！」「昨日のデータに戻したい！」そんな経験、ありませんか？
だからこそ、「念のためコピーを残しておく」ことがあります。
これがバックアップです。
Webサイトでも同じで、何か問題が起きたときに戻せるように、データを別に保存しておきます。WordPressの場合は、サイトのファイルだけでなく、データベースもバックアップする必要があります。
つまり、バックアップ＝Webサイトの「もしものための予備」です。
07｜まとめ。インフラって、意外と身近だった
今回、いろいろ調べてみて感じたのは、インフラって、思っていたよりデザイナーの仕事に近いのかもしれないということでした。
| インフラ | デザイナーに例えると |
|---|---|
| CPU | 処理能力 |
| メモリ | 作業机 |
| ストレージ | データ保管庫 |
| サーバー | Webサイトの仕事場 |
| データベース | 案件管理表 |
| ネットワーク | データを届ける物流網 |
| ロードバランサー | 仕事を振り分ける人 |
| バックアップ | データの予備 |
もちろん、実際のインフラはもっと複雑です。今回紹介した例えだけで、すべてを理解できるわけではありません。
しかし、「CPUは処理するもの」「メモリは作業する場所」「ストレージは保存する場所」「サーバーはWebサイトを動かす場所」と考えてみるだけでも、少し見え方が変わります。
「どう見せるか」を考えるのがデザインなら、「どう動かすか」を支えているのがインフラ。
Webサイトをつくる仕事のすぐ隣には、実はたくさんのインフラがあります。
私自身、まだまだ勉強中ですが、これから少しずつ「デザインのとなり」にあるインフラを覗いていきたいと思います。次回は、**「Webサイトをブラウザで開いたとき、裏側では何が起きている？」**を、デザイナー目線で考えてみます。ご清聴いただきありがとうございました。
この記事を書いた人
