【初心者向け】アプリ開発会社の経営者によるWEB制作とWEB開発の違いを徹底説明

2021年7月16日 13:30

はじめに

TwitterでWEB制作とWEB開発は違うという話題があちこちで散見されるようになってきました。
私はWEB開発側の人間ですのでお客様やこれからこの業界に入る駆け出しエンジニアの人たちに間違った認識が伝わってしまうのを避けたいと思い、本記事を執筆するに至りました。

note_WEB制作 (1)

「WEB制作」についての説明

WEB制作はウェブサイト制作の略称として使われています。
ウェブサイトとはホームページ（HP制作）やイベント、キャンペーンなどのランディングページ（LP制作）など静的なコンテンツを制作する業務のことを指します。

このWEB制作は業務範囲や広義の意味だとフロントエンドなのですが、日本のエンジニア業界で主にWEB制作をしている人たちフロントエンドエンジニアと呼ぶことは非常に稀です。
HTML/CSS、jQueryなどのjavascriptをコーディングしてお仕事している人たちはマークアップエンジニア、WEBコーダーなどと呼ばれています。

WordPress、WebflowなどのCMS / コンテンツマネジメントシステムを使った仕事も数多く存在しますが、このシステムを開発してる人は非常に稀です。WordPressのプラグインを開発してたり、独自機能の実装をしている人たちのことをWordPressエンジニアと呼ぶこともあります。

仕事として1サイトいくらで金額の見積していることが多いです。
下限は現在、実装未経験者が実績作りのために価格破壊しているので1サイト1万円の値付けなども存在していますが、この価格でやってると商売にならず続けることはできません。
上限については納期やクオリティ、顧客の企業規模によっても違います。
弊社は1サイト30万前後で見積していますが、お客様の予算とやりたいことに応じて金額はプラスにもマイナスにも変動します。
私の知ってる情報ではLPサイト1本だけで500万くらいの値付けもありましたが、実績のあるデザイナーさんがいたり、色んな会社が絡んでいたりして金額が高くなっています。

制作期間については最低でも1日に8時間ほど作業して2週間。
要件が多かったり規模が大きかったりすると1ヶ月くらいかかることもあります。
仮に30万のサイトを運良く月に2本担当できたとしても月60万で、この仕事だけで年商1000万を超えることは難しいです。

我々プロが販売しているのは品質です。
実装はできたけど検証作業をしておらず、品質担保ができてないという状態は何回も見てきましたし、今でも年に何回かは顧客から相談を受けます。
検証作業は企業によっても違いますが、原則的に企業の中でノウハウとして蓄積されているものなので流出することはほとんどありません。
まず会社に就職して、会社員としてWEB制作を行って実績を作ってからノウハウがある状態で独立される方を何人も知っていますが、そういう方が一般的に市場に出回っている案件をやっています。
素人が素人同士でやっても、一向に企業品質に満たないのはこれが大きな理由です。

「WEB制作」に必要なスキルリスト

ここではWEB制作に必要なスキルの習得順を説明していきたいと思います。必ずしもこの順序でやる必要もないですが、個人的なオススメとして列挙していきます。

1. HTML / CSSのコーディングスキル
・レスポンシブ、相対パスでの実装は必須
・納品のことも考えるとGitでのソース管理はしておいた方がいい

2. Vue.js、Bootstrapを使ったjavascriptのコーディングスキル
・jQueryでも良いけど未来が辛いので非推奨
・誰かに相談するにあたってもGitでのソース管理はしておいた方がいい

3. HTTPサーバで作ったサイトを公開するスキル
・物理でもクラウドでもいいので、サーバの立ち上げができる
・作ったものをサーバにアップして公開することができる
・サーバ証明書を発行して、サーバに設定することができる
・独自ドメインを取得し、DNSの設定を行って公開することができる

4. WordPress、Webflowなどの構築で、他人が作ったHTML/CSS、javascriptテンプレートを意図通りにカスタマイズすることができる
・テンプレートに記述されているHTML/CSS、javascriptの内容を読んで理解することができる
・書き換える意図を把握して設計し、HTML/CSS、javascriptを使って実装≒実現することができる

5. WodPress、Webflowなどの構築で、動的なプログラムを意図通りにカスタマイズすることができる
・動的なプログラミングソースを読んで、内容を理解することができる
・書き換える意図を把握して設計し、PHP、javascriptを使ってコーディングして実装≒実現することができる

「WEB制作」のスキルレベル1〜7

レベル1. HTML/CSSのテンプレートを元にして、サイト構築をすることができる
この段階でゼロから構築して顧客に納品するのはほぼ無理なので、他人のソースを読むなり、自分で工夫して変更できるものは何なのか、実現の方法を知る。設計やデザインは他の人にやってもらう。駆け出しエンジニアの中でここまで辿り着ける人は少ない。サーバを立ち上げてネット公開は他人任せのレベル。

レベル2. 画面のデザインを実現するためにjavascriptのライブラリを導入し、カスタマイズして埋め込むことができる
この段階でもゼロから構築は無謀。誰かが作ってくれたライブラリの中身を見て、動きを理解して設定値を変えるなどで、想定されたデザインを実現することができる。動的なプログラミング学習が必要なため、ここら辺から駆け出しの脱落者が増えてくる。ここで詰まったらプログラマも名乗れない。サーバを立ち上げてネット公開は他人任せのレベル。

レベル3. 自分で制作したHTML/CSSテンプレートを使い回して、納期に合わせて実装することができる
自分でテンプレートを作成できるようになるとこのレベル。テンプレートはカスタムしていくのでGitでの管理は必須となる。このレベルではHTML/CSSのコーディングもできるし、簡単なプログラミングができると判断されるため、カスタマイズされたデザインを組むことができなくても、サイト制作の仕事の一部を任されることはある。
尚、この時点でWEBデザイナーを名乗るとデザイナー方面からマサカリは飛んでくる。サーバを立ち上げてネット公開については少しは手を出し始める準備ができたレベル。

レベル4. HTTPサーバを構築し、制作したソースコードをネットに公開することができる
WEB制作の入り口に立つことができたレベル。物理サーバでもクラウドサービス使ってても良いのでHTTPサーバを作ることができる。独自ドメイン、サーバ証明書の取得を行い、立ち上げたサーバに設定を反映することができる。
サーバのOSはLinux系OSだと好ましいがWindows系OSでも特に問題はない。作ったソースコードをSFTPツールなどでアップロードして、サイト公開までを任せてもらえるようなる。Linux系OSだと最低限のコマンドライン操作が必須となるレベル。
Google search consoleやGoogle アナリティクスなどサイトを運用・運営するのに必須級の外部サービス導入も覚えないと仕事にならないので、ここら辺でHTMLのmetaタグの意味が嫌というほどわかるようになる。
普通の一般人がこれができると思えないので、ここら辺からWEB制作のコーダーと名乗ることが認められる（はず）。今まで私が個人的に教えてきた駆け出しの人の中でも、このレベルに到達できるのはほぼ稀。

レベル5. WordPressやWebflowなどのCMSを制作する技術に手を出し始め、実装することができる
WordPressはPHP、Webflowならjavascriptという言語を使うが、プログラミング初心者が手を出すような領域でもない。黙って公式マニュアルか、善意で公開してくれてるブログ記事などを頼りに手順通りに設定を行い、手元のPCで開発環境を構築してテンプレートの記述を変更し、見た目を変えるくらいのレベル感。このレベルでプログラマー名乗るといろんな方面からマサカリ飛んできて痛い目を見るのでやめておく方が吉。
HTTPサーバがApacheだったらデフォルトでPHPが動くが、NginxだったらPHPの設定は必要になる。少しずつドライバ/ミドルウェア周りの知識も入れてサーバ操作に慣れていく。

レベル6. 他人が作ったHTML/CSSやjavascriptファイルを解析して、追加や修正をすることができる
WEB制作でメインになる仕事がこれ。他人が作ったソースなので理解できないことも多いし、ソースを自分のPCで動かそうとしたら「全く動かない！」ってなることもある。専門用語などでわからないことも多いが、開発環境の構築なども必要になってくるようなレベルで成長はしている。
サーバ周りの作業としてもメンテナンスを頼まれることも出てくる。証明書の更新や、ドメイン変更からのリダイレクト処理。テスト環境のベーシック認証設定など、雑事を行う機会が増えるのでより成長するチャンス。
ここら辺からWEBコーダーを名乗っても良いレベル。サーバ操作できないコーダーいっぱいいるけどね。

レベル7. 他人が作ったWordPressやWebflowなどのCMSを解析して、顧客の要望通りに修正・変更することができる
WEB制作で地獄門の1つがこれ。他人が作ったものほど「ほんのちょっとの修正なのに…」と顧客のコメントと共に現実を思い知らされる。自分が１から作ってればこんなに大変じゃないのになという感情との戦いが続く。
ソースコードを解き明かさないとライブラリを変更したくらいじゃ対応しきれないことの連続で心が鍛えられる。
作った人がサーバの設定ミスってましたみたいなことで作業時間が果てしなく溶けていくことも少なくないので、サーバ周りの知識や経験は必須。
これを乗り越える経験の最中であちこちに戦友が出来始める。間違いなくWEB制作のコーダーレベルは突破しているため、自称じゃなく他称としても立派なWEB制作マンの誕生である（おめでとうございます）

レベル8以降については実装で使える便利スニペッドを自前で用意するようになったり、javascriptでアニメーションライブラリの開発などを行ってGitHubなどで公開したりするので、一気にレベルが上がる感じはする。
ここから先の進化はどちらかと言えばフロントエンドエンジニアの領域に進んでいくので、本記事では割愛したいと思う。出来れば続きはWEB制作を本業にしている人たちにヒアリングしてくれることが望ましい。

「WEB開発」についての説明

WEB開発はWEBアプリケーションシステム開発の略称で、WEB開発、WEBアプリ開発、WEBシステム開発、アプリ開発などと呼ばれています。
アプリケーションとしての機能、サービスを運営するにあたって必要な業務のデジタル化などを目的として動的に動作するシステムを開発するお仕事です。

主に仕事をしている人はエンジニアです。
フロントエンドエンジニア、バックエンドエンジニア、インフラエンジニアなど職種は多岐にわたります。同じSEと表記されていてもシステムエンジニアとソフトウェアエンジニアでは違う仕事をしています。他にもデータベースエンジニアやテストエンジニアという職種もあります。
一部でJavaエンジニア、Laravelエンジニアなんていう募集要項も見かけますが、この人たちが言語やフレームワークの開発をしているわけではないので個人的には疑問に思っています。

自社でWEBサービスを運営している会社を自社開発会社、自社サービス会社などと呼んでおり、顧客の作りたいものを作る場合は開発会社、受託会社などと呼ばれています。
更に分類は進み、開発会社・受託会社の中で取引に合わせて成果物納品のある受託契約なのか、成果物納品のない業務の受託契約（SESという商品名）は使い分けられます。顧客の予算や要望に合わせて使い分けてるだけです。
このうちSESで取引することが多い会社のことをSES会社と呼んでいることもあります。

会社によって提供している製品やサービスが違うように、プロジェクトごと、作るものによって金額が違います。
弊社は自社開発会社ではないのですが、お手伝いさせていただいた自社開発のプロジェクトだと事前に予算を組んで開発を行っているケースが多いです。
お客様がいる受託開発に関しても予算がxxx万だからそれで作って欲しい！とか、リリース日がxx月xx日に予定しているので間に合う？とかで見積請求をいただきますので都度対応してますので様々ですが、1万円からとか10万円からとかはないです。
受注の金額単位は100万円以上の規模のものが多いですし、上限を見ればキリがなく億円単位の予算案件もそれなりに存在します。

要件定義ができなければ仕様定義ができず、仕様定義ができなければ作業や金額の見積を書くことができませんので実装作業にすら至りません。
このようにWEB開発が担当する範囲は広くなるようにできてます。
開発経験という言葉の中にはプログラミング言語やFWを使って実装した経験以外にも、設計書を書いたことがあるか、他人と認識をすり合わせた業務経験があるかなども含まれます。
モノ作りの仕事なので「作ったことがある」が1番強いのですが、ここら辺の入り組んだ経験の情報を明確にすることが企業側の課題だとは思ってます。

開発期間は3ヶ月〜6ヶ月くらいが最も多く、案件の数は多くありませんが1年以上開発することもあります。
チームを組んで開発することが多いので人数は2人以上で、私が経験した中で最も多いのは金融機関の大規模刷新プロジェクトで200名以上でした。
WEBアプリの開発案件だと5〜6人くらいで組んでいることが大半かもしれません。
チーム内ではフロントをやる人、サーバのデータ周りをやる人、サーバやネットワークそのものを作る人など役割を分担し、それぞれが作業を進めていきます。チームメンバーがそれぞれの作業の進行管理をするのにディレクターや、PM/プロジェクトマネージャーなどが存在します。

WEB制作と同じようにWEB開発でも「プロが仕事をする」という品質を販売しています。最低限求められているのは決められた契約や手順、ルール通りに作業することだったり、仕様書や設計書などの資料で定められた通りに実装することです。
次点で複雑な要件などを紐解いて、課題や問題を解消できる人です。
余程特殊なケースでもない限り特別な能力が求められることはありません。
この部分の説明だけ見れば一般的な会社と全く同じですが、プロとして仕事を続けるには当たり前を当たり前にできることが評価されます。

アプリケーションシステムは業務そのものを担当することが多いため、開発して終わりというケースは珍しいです。リリースをして運用する、更に開発したものを使う人がいて初めて価値を提供することができます。
価値提供の仕方は会社によって違い、新規開発に力を入れてるところや運用保守に力を入れてるところなど様々です。
自社開発会社は一環して全てに対応する必要がありますので、求められてる能力は応じて範囲が広くなります。

note_WEB制作とWEB開発

WEB制作とWEB開発の比較

それぞれの項で細かい説明をしてきましたので、勘の良い人ならわかるかもしれませんがWEB制作とWEB開発は全く別の仕事です。

前提として私がお話する元にしているエンジニアリングとは曖昧な情報を曖昧じゃない情報に変換することを目的とした一連の行動です。
この行動のために設計/デザイン、ドキュメンテーション、コミュニケーション、作業としてのプログラミング、テスト、仕事としての報告連絡相談が必要です。

WEB制作している人を「フロントエンドエンジニア」とは呼ばない
フロントエンドエンジニアに明確な資格や定義がないことが原因かもしれませんが、HTML/CSSやアニメーションをjavascriptで実装する人をフロントエンドエンジニアとは呼びません。
フロントエンドエンジニアはフロントシステムとしてデータの取り扱いをコントロールしたり、フロントエンドの責務を定義してアプリケーションの機能を実現する人たちのことを呼びます。
個人的には設計ができないのにエンジニアと名乗るのは無理があるかもしれないなと考えています。

WEB制作の方がゴールが明確なことが多い
WEB制作は静的コンテンツの制作をしますので、表示する画像や文章が決まっていなければ作れません。一方でWEB開発はこのコンテンツの表示を動的に変更することが機能として織り込まれることがほとんどなので、ゴール決め ≒ 仕様決めの工程が入ります。
WEB開発でもお客様が協力してくれて仕様の大半が決まっていることもありますが、実現する側が確認したいことが多いというのも現状です。
確認したい内容に応じてヒアリングと提案をしますが、これをエンジニアが担当したり、ディレクターやPMが窓口として担当することが一般的です。
WEB制作でもディレクターが窓口になることもあります。

WEB開発の方が範囲が広い
WEB制作のお仕事では大半は1つのサーバで1つのコンテンツを表示します。WEB開発となると原則的にアプリケーション機能、データベース機能を開発するため、最低でも2つ以上のサーバを作ることが大半です。
WEB制作はコンテンツを表示するコーディング技能があれば最低限作業することができますが、WEB開発となるとアルゴリズムやロジックを実現するプログラミング設計・実装能力や、データを取り扱う際のノウハウや知識が求められることが大半です。
品質保証のためのテストも、システムは動的に表示を切り替えますので1つの画面で何通りものテストケースで確認します。WEB制作側でもテストしないなんてことはありませんが、範囲と量はWEB開発の方が多くなります。
応対する範囲と量が多いのでWEB開発の方が金額が高いのです。
WEB制作で億単位の案件は見たことありませんが、WEBシステム開発でしたら投資金額が億を超えてしまったという話はよく聞きます。

始める方法と辞める方法
両者に大きな違いはありません。
WEB制作でも経験と実績を積まれてる方もたくさんいらっしゃいますし、WEB開発でも未経験者は未経験者です。
諦めずに続けることは仕事に必要な要素の1つですが、モノ作りの世界は漫画の主人公のようにモチベーションだけでどうにかなることは稀です。
もともと趣味で何かを作られていた方々であれば想像が容易かもしれませんが、地道で地味な検証と再現性の模索を諦めないことが求められます。
創意工夫というのもこの繰り返しの延長で生まれることが99%といっても過言ではありません。
こんな背景を端折って経験者の多くは「良いから手を動かせ」「ログを見ろ」という教え方をしているのかもしれません。

この記事が気に入ったらサポートをしてみませんか？