毎日、通勤や散歩の途中で、僕らは当たり前のように信号機を見ていますよね。
赤になったら止まり、青になったら進む。子どもの頃から知っている、説明するまでもないルールです。
でも、ある日ぼーっと交差点を眺めていて、ふと思ったんですよね。
「この信号機の仕組みで考えたら、Web技術ってかなり分かりやすくなるんじゃないか？」
歩行者と車、右折車と直進車。それぞれが勝手に動けば事故になります。それをルールと仕組みで整理して、安全に目的地まで流しているのが信号機です。
WebサイトやWebサービスも、実はよく似ています。
ユーザーから届く要求を受け取り、必要な情報を処理し、正しい形で画面へ返す。これがWebの基本的な流れです。
HTML、CSS、JavaScript、サーバー、データベース、API、HTTPS、クラウド。単語だけ見ると難しそうですが、それぞれが「交差点のどこを担当しているか」で考えると、ずいぶん景色が変わってきます。
Web技術は「巨大な交差点」だと考えると分かりやすい
まず覚えておきたいのは、Webサイトが一つの技術だけで動いているわけではない、ということです。
僕らが見ている画面。その裏側で動く処理。情報を保存する場所。外部サービスとの連携。そして、通信するときのルール。
交差点でいえば、信号ランプだけでは交通整理はできません。制御装置も道路も交通ルールも必要です。
Web技術を理解するコツは「用語を暗記すること」ではなく、「その技術は何を担当しているのか」をつかむこと。
IT用語そのものに苦手意識があるなら、先に非エンジニア向けのIT基礎知識を身近な家電で理解する方法を読んでおくと、今回の話も入りやすいはずです。
フロントエンドは「目に見える信号機」
赤・黄・青のランプや矢印など、僕らが直接目にする部分。Webでいえば、画面に表示される文字、画像、ボタン、メニューなどです。
こうしたユーザーが直接触れる側を、大きくフロントエンドと呼びます。
バックエンドは「裏側の制御装置」
信号機の裏では、「次はどの方向を通すか」「センサーから情報が来たか」といった処理が行われています。
Webでも、ログイン情報を確認したり、商品を検索したり、データベースから情報を取り出したりする処理があります。
ユーザーには直接見えないこの領域が、いわゆるバックエンドです。
Webでは「リクエスト」と「レスポンス」が行き交っている
一台の車が交差点へやって来たとします。
Webなら、これはユーザーがブラウザでページを開いた場面に近いです。
ブラウザはサーバーに対して「このページの情報をください」と要求します。これがリクエスト。
サーバーは要求を受け取り、必要な処理をしたうえでデータを返します。これがレスポンスです。
Webページを一つ開くだけでも、実際にはHTML、CSS、JavaScript、画像など複数のファイルについて、複数の通信が行われることがあります。
つまりWeb技術のかなりの部分は、この情報の流れを「正しく」「速く」「安全に」するための仕組みだと考えると見通しがよくなるんですな。
Web技術の理解が深まる「信号機アナロジー」7選
ではここから、非エンジニアがよく耳にする7つの技術を、交差点の風景に置き換えてみます。
1．HTMLは「道路標識や信号の意味」
HTMLは、Webページの内容と構造を表すためのものです。
「ここは大見出し」「ここは段落」「これは画像」「これはリンク」と、それぞれの要素に役割を与えます。
信号機でいえば、「これは車両用の信号」「こちらは歩行者用」「この標識は右折禁止」といった意味や構造を決める部分に近いです。
HTMLを理解すると、Webページが単なる文字と画像の寄せ集めではなく、意味を持った構造物だと見えてきます。
2．CSSは「交差点の見た目や配置」
CSSは、HTMLで作られた要素の色、サイズ、余白、配置などを指定します。
交差点なら、信号機の大きさや配置、標識のデザイン、道路上のラインなど「どう見せるか」を担当するイメージです。
ここで重要なのは、HTMLが構造、CSSが見た目という役割分担があること。
会議で「デザインだけ変えたいのか」「ページの構造そのものを変えたいのか」を分けて考えられるだけでも、エンジニアとの会話はかなりラクになります。
3．JavaScriptは「状況に応じて動く制御」
JavaScriptは、Webページに動きや対話性を加える代表的なプログラミング言語です。
ボタンを押したらメニューが開く。入力した内容に応じて表示が変わる。ページを移動しなくても情報が更新される。
信号機なら、押しボタンやセンサーなどをきっかけに、状況に応じて表示や動作を変える仕組みを想像すると分かりやすいでしょう。
「ユーザーが○○したら、画面を△△させたい」という要望が出てきたら、フロントエンドのプログラムが関係しそうだ、と考えられます。
4．サーバーとバックエンドは「交通管制の頭脳」
ログインしたユーザーによって表示を変える。注文内容を処理する。条件に合う商品を探す。
こうした裏側の処理は、サーバー側のプログラムが担当することがあります。
交差点でいえば、目の前のランプではなく、さまざまな情報をもとに「どう制御するか」を決める頭脳側の仕事です。
だから「画面上では小さな変更」に見えても、裏側のロジックまで変われば作業が大きくなることがあります。
5．データベースは「整理された記録台帳」
会員情報、商品情報、注文履歴、ブログ記事など、Webサービスでは大量のデータを扱います。
それらを整理して保存し、必要なときに検索・追加・更新・削除できるようにするのがデータベースです。
交通の世界なら、道路や車両、交通量などに関する情報が整理された記録台帳のようなイメージですな。
新しいサービスを企画するときは、「画面をどうするか」だけではなく、何のデータを持ち、いつ使うのかを考える必要があります。
6．APIは「別の交差点や施設とつながる窓口」
APIは、あるサービスの機能やデータを、別のソフトウェアから利用するための接点です。
天気情報を取得する、決済サービスとつなぐ、地図情報を利用する。こうした外部サービスとの連携でAPIが使われることがあります。
交差点でいえば、一つの信号機だけで完結するのではなく、周辺の設備や別のシステムと決められた方法で情報交換するための窓口、と考えると分かりやすい。
新しい機能を考えるときも、「全部を自社で作る」の一択ではありません。既存サービスとうまく連携したほうが早い場合もあります。
これはWebサービス選びでも同じです。何でも高機能なものを選ぶのではなく、目的から道具を選ぶ考え方についてはWebツールを職人の道具選びになぞらえて考える方法でも詳しく紹介しています。
7．HTTP・HTTPSは「情報をやり取りするための交通ルール」
Webブラウザとサーバーが情報をやり取りするときには、共通のルールが必要です。
その代表がHTTPです。
ブラウザから要求を送り、サーバーから応答を返す。誰もがバラバラの方法で通信したらWebは成り立ちませんから、一定の約束事に従って通信しているわけです。
HTTPSでは、HTTPによる通信をTLSという仕組みで保護します。通信内容を暗号化し、相手のサーバーを確認し、途中で内容を書き換えられるリスクを減らします。
HTTPSだからといって、そのWebサイトの内容や運営者まで無条件に信用できるわけではありません。「通信経路が保護されていること」と「サイトそのものが安全であること」は別の話です。
では「クラウド」はどこに当たるのか？
AWSやGoogle Cloudなどの話が出てくると、また急に難しく感じますよね。
クラウドは、サーバー、ストレージ、データベースなどのIT資源を、自社で物理機器として全部所有する代わりに、必要に応じてネット経由で利用する考え方です。
交差点の比喩でいえば、各交差点ですべての設備を抱え込むのではなく、巨大な交通管制センターの設備や機能を必要に応じて利用するような感覚です。
必要な計算能力や保存容量を増減しやすいことも、クラウドの大きな特徴の一つ。
ただし、「クラウドなら何もしなくても自動的にアクセス100倍へ対応できる」わけではありません。負荷に耐えられる設計や設定は別途必要です。
非エンジニアがWeb開発の会議で見るべき4つのポイント
ここまでの技術を全部暗記する必要はありません。
会議で専門用語が出てきたら、次の4つに分類するだけでも十分です。
これだけで、「今みんなは交差点のどの部分について話しているんだ？」と整理できます。
AIやDXの話でも同じで、技術名より「何を改善するための道具なのか」を見ることが重要です。業務改善という視点から整理したい場合は、AI・DX導入を町工場の改善活動から考える方法も参考になります。
信号機の例えにも限界はある
ここまで盛大に信号機へ例えておいてなんですが、一つだけ注意点があります。
例え話は「全体像をつかむための地図」であって、技術仕様そのものではありません。
実際のWebシステムは、もっとたくさんの技術が複雑に組み合わさっています。同じ機能でも、サービスによって構成は違います。
なので、「APIは絶対にこれ」「クラウドは必ずこう動く」と例えをそのまま技術仕様へ置き換えるのはNG。
専門用語を例えだけで覚えて、実際の仕様を確認せず判断する。
まず例えで役割をつかみ、必要になった部分だけ正確な仕様を確認する。
この順番なら、非エンジニアでも無理なく技術理解を深められるはずです。
よくある質問
まとめ｜Web技術は「何を担当しているか」で考えれば怖くない
HTML、CSS、JavaScript、バックエンド、データベース、API、HTTP、クラウド。
単語を一気に並べられると、何やら巨大な壁に見えます。
でも信号機の世界に置き換えてみれば、それぞれが別々の仕事を担当しているだけなんですよね。
- HTMLは構造や意味
- CSSは見た目
- JavaScriptは画面上の動きや処理
- バックエンドは裏側の処理
- データベースは情報の保管と管理
- APIは他のシステムとの接点
- HTTP・HTTPSは通信のルールと保護
- クラウドはIT資源を必要に応じて利用する仕組み
非エンジニアに必要なのは、エンジニアと同じコードを書けることではありません。
「その技術は何の問題を解決するためにあるのか」を理解し、同じ地図を見ながら話せること。
次に開発会議で聞き慣れない言葉が出てきたら、少しだけ交差点を思い浮かべてみてください。
「これはランプの話なのか。制御装置なのか。記録台帳なのか。それとも交通ルールなのか」
そう考えるだけで、今まで呪文にしか聞こえなかった会話が、意外と普通の話に聞こえてくるはずですな。
