Web系の職業はたくさんある。Webディレクター、Webデザイナー、Webマーケターなどなど...。だがそれぞれがどんなお仕事をしているのかは大変わかりにくい。

その中でも最もつかみどころがないのがWebエンジニアと呼ばれる職種だ。みなさんもご覧になったことがあるのではないだろうか。女性がコピー機を指差しながら「エンジニアなんだから直せるでしょ」と無茶振りをする広告。この揶揄に代表されるように、エンジニアという人間は特に何をしているのかわかりにくく、一般人からは魔法使いのように見られている。

この記事ではそんなWeb技術者のお仕事について、例え話で解説してみようと思う。ふわっとでも伝われば嬉しい。

【Web系職種の種類】

まずWebサービスの従事者にはどのような種類があるだろうか。
以下に、これだけ押さえておけば大丈夫というものを並べてみた。

・Webプロデューサー
・Webディレクター
・UXデザイナー（Webデザイナー）
・ビジュアルデザイナー（Webデザイナー）
・コーダー／マークアップエンジニア
・フロントエンドエンジニア
・バックエンドエンジニア（サーバーサイドエンジニア）
・インフラエンジニア

いかがだろうか。「Webエンジニアって職業がないじゃん！」と気付いた方はとても勘が良い。実はWebエンジニアというのは「エンジニア」の名が付く職種の総称なのである。例えるなら「野球選手」みたいなもので、ピッチャーもホームランバッターもひとくくりにした呼び方なのだ。

きっとこの記事を読み終えた時には「私、○○くんがなんであのとき嫌な顔したのかわかった」と思えるはずだ。

Webサービスを『自動車』に例えてみよう！

Web系の仕事のわかりにくさは、その開発工程が目に見えないことにある。ならば目に見えるものに置き換えてみよう。ここではWebサービスを「自動車」に見立てて、その生産工程に例えて解説してみる。

まず前半では、エンジニアに仕事が渡るまで（いわゆる「上流工程」）を確認していこう。

エンジニアに仕事が渡るまで

STEP1-1：どんな自動車を作るかを決める人

あなたがもし自動車の商品企画を任されたとしたら、まず最初に考えるのは「どんな自動車を作るか」ということだろう。ファミリー向けのものなのか、はたまた悠然と風を切って疾走するスポーツカーなのか。この判断を任されるのがWebプロデューサーである。リサーチチームや経営陣とすり合わせをしながら、プロジェクトの大きな一歩を決定づける役割である。

STEP1-2：自動車のコンセプトを決める人

プロデューサーが仮に「都心の4人家族が毎週末お出かけしたくなるようなハイブリッドカー」という決定をしたとしよう。次に登場するのがWebディレクターと呼ばれる人物だ。彼はUXデザイナー（Webデザイナー）のデスクにおもむき、いくつかの設計案を出してもらうように依頼する。

補足：ちなみにWebディレクターはプロジェクトの進行管理をする人物で、今後のすべてのフェーズで必要な人々と連携し、プロジェクトを最初から最後まで走りきる役割を担う

UXデザイナー（Webデザイナー）は「都心」というキーワードから「小回りのきく形」を、「家族が毎週末お出かけしたくなる」というキーワードから「子供が車内で遊べる」などといったコンセプトをそれぞれ出していく。そしてこの自動車が使われるシーンを考え、どんな装備が必要かを洗い出していく。そしてこれらは仕様書やワイヤーフレームという設計図に落とし込まれる。これはちょうど家の図面のようなもので、以降の人々はこの設計図をもとに動くことになる。

STEP1-3：自動車のデザインを決める人

設計図ができたら、次に「見た目」を作っていく。これを任されるのがビジュアルデザイナー（Webデザイナー）である。自動車の流線型の外観、ヘッドライトや窓の形などを決めるのはもちろん、内装の素材（革or布）や燃料メーターの形などもイラストに起こしていく。（きっとカラーバリエーションや塗料の種類も指定するだろう。）こうして私たちが実際に目にする自動車のデザインが出来上がっていく。

補足：Webデザイナーが2名登場してしまった。実はこの2つの職種は全く異なるスキルが求められるにもかかわらず、Web業界ではなぜか同じ人物が担うことが多いのだ。もっとも最近は分離されつつあるので、このように記述させていただいた。

エンジニアのお仕事

さて。ここまでがいわゆる「上流工程」と呼ばれるものだ。
ここからいよいよエンジニアたちのお仕事に迫っていく。

STEP2-1：自動車の車体を作る人

細かな寸法を記した設計図と、外観や内装のデザインが完成した。だがまだ現実世界には自動車の「じ」の字も存在していない。ここから舞台は自動車工場に移る。まず着手するのは車体だ。

この生産を担うのがコーダー／マークアップエンジニアと呼ばれる人物だ。彼らはHTML/CSSというプログラミング言語を使って車体を作り、そこにシートやハンドルなどを取り付けていく。Webデザイナーが指定した素材や色を使って、内装を施したり塗装したりするのも彼らの仕事だ。いわばプラモデルを作る仕事だ。

この職種はWebデザイナーとWebエンジニアのちょうど中間にあたるものである。テニスのダブルス選手がどちらもセンターのボールを取りに行っても良いように、Webデザイナー出身かエンジニア出身かを問わない仕事内容になっている。異なる名前がついているのは、どちら側の出身かによって微妙に仕事の流儀が異なるためだ。

補足：コーダーとは「プログラムをコーディングする（書く）人」の総称なのでWebエンジニアはみな「コーダー」なのだが、現場ではそのように呼ばれることはまずない。一般的にコーダーは「Webデザイナーなのにコーディングできるのすごい」という意味を込めて区別されるのだ。逆にマークアップエンジニアは、エンジニアでありながら「HTML/CSSという珍しいプログラミング言語を得意とする人」と区別されたのが始まりだと思われる。

STEP2-2：自動車のエンジンをつくる人

さて車体や内装ができたが、これだけでは自動車とは言えない（まだ大きなプラモデルにすぎない）。自動車が自動車たるためには駆動系、つまりエンジンが必要となる。

これを作るのがバックエンドエンジニアの仕事だ。バックエンドは直訳すると「一番後ろ」という意味であるが、利用者に見えない部分の装置を開発するためこのように呼ばれる。自動車のボンネット下に隠されているあの複雑な機械群はまさにバックエンドエンジニアが作っているのだ。noteで記事が保存されたり、Amazonで注文したものが正しく倉庫に伝わったりするのは彼らのおかげだ。

なおWebサービスの「エンジン」は必ずサーバー（インターネット上のコンピューター）の中で動くため、サーバーサイドエンジニアと呼ばれることも多い。一般的なエンジニアのイメージはこの職種が最も近いだろう。

STEP2-3：自動車のさまざまな装置をつくる人

これで自動車は完成・・・と思いきや、まだまだ足りないものがある。例えばヘッドライトやワイパーを動かすレバー、エンジンをふかした時にメーターがぐいんと跳ねたりする仕組み、窓を上げ下げするためのスイッチも必要だろう。こういった小さいが重要な装置を作るのがフロントエンドエンジニアの仕事だ。

バックエンドエンジニアと何が違うかというと、それは目に見える装置を扱う点にある。ハートマークを押すとカウントが増えたり、フォームの間違いを指摘してくれる優しさ、ページをどんどんスクロールしたらふわっと次の記事が読み込まれたりするフィードバックも、すべてフロントエンドエンジニアの仕事である。こだわりの強いフロントエンドエンジニアであれば、スイッチの感触や、窓が上下するスピードなどにも気を配る。バックエンドエンジニアが「燃費がよく安全に動作する」ことを信条としているとすれば、フロントエンドエンジニアは「気持ちよく動く」ことを追求する傾向にある。

STEP2-4：道路をつくる人

以上で自動車が完成した。だがもう1つインフラエンジニアという職業が残っている。彼らは何をしているのだろうか？

実は彼らは自動車が走るための道路を作っているのである。（駐車場や信号機も作る。）Webサービスがみんなの手元に届くための、文字どおりインフラを作っているのだ。

同じエンジニアとして括られることが多いが、インフラエンジニアは他のエンジニアのようにプログラミングをメインとしているわけではない。サーバやネットワークの知識を活用して、交通事故が起こらないように監視したり、より多くのトラフィックに耐えうるように車線を増やしたりしているのだ。

以上が、Webエンジニアと彼らを取り巻くお仕事の概要である。エンジニアとひとくくりに言っても、みな違った仕事をしていると伝われば幸いである。

エンジニアに言っちゃいけない！？クイズ

ではおさらいを兼ねて2つほど問題を出してみよう。

＜問題1＞バックエンドエンジニアのAさんに新規サービスのWeb制作を任せたいと思う。あなたはどのように伝えれば良いだろうか？

＜答え＞
任せてはいけない。バックエンドエンジニアはエンジンを作る仕事だ。車体を造形したりはしない。任せるならコーダー（フロントエンドエンジニア）に頼もう。見た目にこだわるならもちろんビジュアルデザイナーが不可欠だ。

＜問題2＞
突然、自分のWebサービスがヤフーニュースに取り上げられた。大量のアクセスが来ているのか、サイトがつながりにくくなってきた。どのエンジニアに頼めばいいだろうか？

＜答え＞
インフラエンジニアに頼もう。見つからない場合は、バックエンドエンジニアに声をかけるのもアリだ。優秀なバックエンドエンジニアはサーバーまわりに精通していることも少なくない。
間違ってもマークアップエンジニアには頼んではいけない。彼らはエンジニアの名前を冠してはいるが、Webの彫刻家（アーティスト）だ。サーバの知識に関しては、あなたとそれほど変わらないだろう。

最後に

最近は便利なもので、エンジニアを助けるいろいろなWebサービスやオープンソースが登場している。例えば、AWSによってインフラの高度な知識がなくてもサーバを構築できるようになったし、BootstrapによってHTML/CSSの知識がなくてもすっきりしたデザインのWebサイトを作ることができるようになった。そのためWebエンジニア同士、Webデザイナー同士の垣根がなくなってきている。

それに技術者と呼ばれる人種は元来、より広いスキルを身につけようとする生き物である。優秀な人物であればあるほど隣り合った領域を網羅していくようになる。デザインからサービス開発、リリースまでできてしまう希少な人物はフルスタックエンジニアと呼ばれ、尊敬を集める存在となっている。いわば現代のレオナルド・ダ・ヴィンチである。

各Webエンジニアの違いが少しでも伝わっただろうか。私たちが普段何気なく使っているWebサービスも、いろいろな種類のWebエンジニア・Webデザイナーが連携して作っているのである。

ここまで読んでくれたあなたが、彼らと適切なコミュニケーションができるようになることを願ってやまない。また漠然とWebエンジニアになりたかった人が「このエンジニアが向いてるかも！」と思っていただくきっかけになれば幸いである。

それではあなたの職場の〇〇くんに感謝をしつつ。

今日もお仕事頑張りましょう。

＜了＞