Web開発とWeb制作の違いをわかりやすく解説!

プログラミングスクール

プログラミングを始めるにあたってまず決めておきたいのが、プログラミングで何をしたいのかです。

Webエンジニアには2種類の働き方があり、それが「Web開発」「Web制作」の2種類です。

Web開発とWeb制作はどう違うの?

こんな疑問にわかりやすくお答えします。

Webエンジニアを目指す場合に、まず「Web開発」「Web制作」どちらを目指すのかを選ばないといけませんよね。

今回は、エンジニアを目指す初心者の方向けに、Web開発」「Web制作」を、それぞれにおける職種、年収や給料、必要スキル、キャリアパスまで様々な視点で比較していきます。

あなたのこれからの進路やキャリア形成の参考になれば幸いです。

Web開発とWeb制作の違いを徹底解説

ここではまず、Web開発とWeb制作とはそれぞれどういったものなのかということを解説していきます。

Web開発とは?

Web開発とは、主にWebアプリケーション・Webサービスを作る業務を指します。

Web開発エンジニアとは、こういったアプリケーションやサービスで使用されるプログラムを設計・開発するエンジニアです。

アプリケーションをいうと、スマートフォン上のアプリを思い浮かべる人も多いと思いますが、それだけではなく、インターネット上から利用するすべてのソフトウェアは「アプリケーション」です。

  • Youtube
  • facebook
  • Twitter
  • Instagram
  • Skype
  • メルカリ

上記のような、私たちの身近にあるSNSやサービスも、Webアプリケーションというわけです。

Web開発における職種

Web開発エンジニアの中でも、さらに2種類に分かれます。

それは、

  • バックエンドエンジニア
  • フロントエンドエンジニア

一体何が違うの?

両者をわかりやすく比較すると、このようになります。

バックエンドエンジニアフロントエンドエンジニア
主な業務Webアプリケーションの目につかない裏側部分を開発するWebアプリケーションのユーザー側からの見た目側を制作する
必要スキル
(主なもの)
プログラミングスキル
データベースの知識
フレームワークの知識
ミドルウェアの知識
バージョン管理ツールの知識
HTML、CSS(マークアップ言語)
JavaScript(プログラミング言語)
デザインの知識

バックエンドエンジニアとは、ユーザー側から見えない、アプリケーションの裏側部分を制作するエンジニアを言います。アプリケーションの要件に応じて、サーバー側での動的な処理を開発します。

例えば、ユーザーが入力した内容のデータ処理、データベースへの保存、検索結果の出力などです。バックエンドで使用するプログラミング言語には、JavaやPHP、Python、Rubyといった言語があります。さらに、多くの現場では、開発効率を高めるため、各種フレームワークを利用して開発が行われます。

対してフロントエンドエンジニアとは、ユーザー側の目に触れる、アプリケーションの見た目の部分を制作するエンジニアです。Webサイトのデザインを元に、プログラミング言語を使用してユーザーが視覚的にWebサイトを閲覧できる状態まで制作します。

例えば、Webアプリケーションでユーザーが文字を入力したり、ボタンをクリックしたりする部分、ソフトウエアと直接やり取りをする部分などがフロントエンド 部分にあたります。これらは主にサーバー側ではなくWebブラウザ側で処理されます。

Web制作とは?

Web制作とは、主にWebサイト(ホームページやブログなど)の設計、デザイン、コーディングを行う業務を指します。
Web制作エンジニアとは、デザイナーやコーダーなど、Web制作に関わる一連の業務を担うエンジニアです。

Web制作における職種

Web制作の中でも、役割によって細かく職種が分かれています。主なものは以下の通りです。

  • Webプロデューサー
  • Webディレクター
  • Webデザイナー
  • フロントエンドエンジニア(コーダー)
  • バックエンドエンジニア(Webプログラマー)

一口にWeb制作といってもいろんな職種があるね。

それぞれをわかりやすくまとめると、以下のようになります。

職種WebプロデューサーWebディレクターWebデザイナーフロントエンドエンジニア
(コーダー)
バックエンドエンジニア
(Webプログラマー)
主な業務Webサイトのコンセプトや企画立案Webサイトの具体的ディレクションWebサイトの外観デザインデザインをマークアップしてレイアウトするデーターベースたサーバーサイドを開発

Webプロデューサー:Webサイトのコンセプト、企画全体を立案する、最上流の仕事です。

Webディレクター:Webサイトの具体的なディレクション業務を担い、各職種の案件進捗管理などを行います。

Wevデザイナー:「Photoshop」や「Illustrator」といったデザイナー専用のソフトを使用して、ディレクターが考えた設計を、実際にWebサイトとしての形にしていきます。

フロントエンドエンジニア(コーダー):デザイナーが整えたWebサイトのデザインを、マークアップ言語・プログラミング言語を使用し、Web上にレイアウトします。

バックエンドエンジニア(Webプログラマー):Webサイトによって様々ですが、主にはサーバーサイドの言語(PHPやRubyなど)を用いて、サーバーサイドの開発を行います。また、データベースや、JavaScriptを用いたクライアントサイドの開発を担うこともあります。

※制作現場によっては他にも「アートディレクター」「プランナー」「ライター」「フォトグラファー」などと呼ばれる職種がいるケースもあります。

Web開発とWeb制作の年収・給与面の違い

Web開発とWeb制作の年収・給与面の違いを見ていきましょう。

以下は、会社員として働く場合の年収水準です。

年代 / 職種Web開発エンジニアWebディレクターWebデザイナー / コーダー
20代450〜800万円450〜800万円300〜600万円
30代600〜1000万円600〜1000万円500〜850万円

もちろん、スキルや経験によって違いが生まれます。20代でも1000万を超える年収を稼いでいるエンジニアもたくさんいます。

総じて言うと、WebデザイナーやコーダーなどのWeb制作エンジニアよりも、Web開発エンジニアの方がやや平均年収は高いようです。また、ディレクターになれば、デザイナーやコーダーよりもやや年収が上がる傾向にあるようですね。

もちろん、フリーランスとして独立したり、起業したりすれば、年収は上記によらなくなり、成功すればもっと高年収が狙いやすくなります。

Web開発とWeb制作の必要スキルの違い

Web開発・Web制作それぞれに必要なスキルを見ていきましょう。

職種Web開発エンジニアWeb制作エンジニア
必要スキル
(主なもの)
HTML・CSS(マークアップ言語)
PHP・Ruby・Pythonなど
(サーバーサイド言語)
JavaScript(プログラミング言語)
Rails・Laravel・Djangoなど
(サーバーサイド言語フレームワーク)
React・Vue.js(JSフレームワーク)
Apatch、Nginx(サーバー知識)
Mysql・Postgresql(RDB知識)
Git・Github(バージョン管理ツール)
AWS・GCP(クラウド)
HTML、CSS(マークアップ言語)
PHP(プログラミング言語)
JavaScript(プログラミング言語)
Git・Github(バージョン管理ツール)
jQuery(JSライブラリ)
Bootatrap(CSSライブラリ)
Illustrator、Photoshop
WordPress(CMS)
SEOスキル
マーケティングスキル
営業スキル

Web開発エンジニアの必要スキル

Web開発エンジニアには、基本的なプログラミング言語の知識はもちろんのこと、各言語のフレームワーク、サーバーの知識や、データーベースの知識、クラウドの知識などが求められます。
Web制作よりも、覚えなければいけないスキルの幅は段違いに広いといっていいでしょう。

さらには、チーム開発が多くなるため、GitやGithubといったバージョン管理ツールも使いこなせるようにならなければなりません。

Web開発エンジニアとしてフリーランスになるためには、最低でも1年から2年は経験が必要と言われます。また、知識やスキルは日々アップデートしていくため、日々の学習も楽であありません。

Web制作エンジニアの必要スキル

Web制作エンジニアに必要なスキルは、技術的な部分はそこまで高くはありません。最低限のマークアップ言語であるHTML/CSSと、JavaScriptが扱える必要があります。

Web制作の特徴は、WordPressのスキルが求められる機会が多いという点です。
WordPressは、CMS(コンテンツ管理システム)と言われ、ユーザーがプログラムを触ることなく、内容の編集や更新が可能になるシステムのことです。

WordPressのシェアは、全ウェブサイトの41.2%、CMS全体の64.8%と、驚異的な数字を誇っています。それだけ、WordPressの機能が優れ、需要が高いことがわかると思います。ですので、Webサイトを制作する上でWordPressの知識は必須であるといっていいでしょう。

また、Webサイト制作を通じて、クライアントの売り上げや集客に繋げるマーケティングスキルも必要になってきます。
ただ制作・納品して終わりということではなく、マーケティング領域の仕事を巻き取っていくことで、大きく収入アップが狙えます。

Web開発とWeb制作のキャリアパスの違い

職種Web開発エンジニアWeb制作エンジニア
キャリアパス・技術者として技術を突き詰める
・プロジェクトマネージャーへ昇進
・Webサービス経営
・人脈から案件を継続受注
・ディレクション側に回る
・制作会社として独立

Web開発エンジニアのキャリア

Web開発エンジニアとしてのキャリアは、

  • 技術者として技術を突き詰める
  • プロジェクトマネージャーへ昇進
  • Webサービス経営

のいずれかになると考えています。

Web制作エンジニアとして、特定の言語や技術を突き詰めていき、技術の第一人者として活躍していく方向がある一方、プロジェクトマネージャーへ昇進していく方もいます。

マネージャーとなってプロジェクトを管理する、若手の育成・教育に携わる、Web開発会社の最高技術責任者(CTO)となるなど、様々なキャリアが考えられます。

さらには、Webサービスを個人開発し、独立して会社経営するといったキャリアもありです。

Web制作エンジニアのキャリア

Web制作エンジニアとしてのキャリアは、

  • 人脈から案件を継続受注
  • ディレクション側に回る
  • 制作会社として独立

といった流れが一般的です。

Web制作エンジニアは、Webサイト制作を受注し、制作・納品することが主な仕事になります。
なので、できる限り継続して安定的に発注が来るように、人脈形成をしておくことが大事です。

案件が安定してくるようになれば、自分はディレクション側に回って、周りのエンジニアやデザイナーに案件を振っていくというのが、よくあるネクストキャリアです。その際も、信頼できるエンジニアやデザイナーを見つけておく、チーム化をするなど、人脈形成が大事になってきますね。

さらに案件が増えてくれば、制作会社を立ち上げ、独立するといったことも視野に入ってきます。

Web開発エンジニア・Web制作エンジニアに向いている人

ここまででWeb開発エンジニア・Web制作エンジニアそれぞれの特徴やメリットをご紹介しました。

Web開発エンジニア・Web制作エンジニアに向いている人はこんな人だと思います。

Web開発に向いている人

  • 技術を突き詰めて新しい価値を生み出していきたい
  • コーディング自体が好き
  • 日々の学習が苦にならない

Web制作に向いている人

  • 営業や顧客折衝が好き
  • デザインのスキルを生かしたい
  • マーケティング業務を巻き取っていきたい

あなたの強みや、将来やりたいことに照らし合わせて、どちらに進むか考えてみてください。

当サイトエンジニア転職おすすめプログラミングスクール

ポテパンキャンプ
Webアプリケーションコース
Railsキャリアコース
卒業生の多くを自社開発企業へ多数輩出。現役エンジニア講師のレベル高く高評価!
超実践スパルタカリキュラムで即戦力人材を目指す。
30代以上も歓迎!

Webエンジニアコース
機械学習エンジニアコース
卒業生の多くを自社開発企業へ多数輩出。
国の給付金対象で最大56万円キャッシュバック。総学習時間750時間超えの濃厚カリキュラムで即戦力人材に。30代以上の転職実績も豊富。

RUNTEQ
Webマスターコース
Railsマスターコース
Railsエンジニアコース
卒業生の多くを自社開発企業へ多数輩出。
総学習時間850時間超えの濃厚カリキュラムで即戦力人材に。
30代以上の転職実績も豊富。

GEEKJOB

ITエンジニアスピード転職コース
無料で未経験からエンジニアに転職。
優良ホワイトSES企業のみを厳選。
社会人経験あり20代限定

DMM WEB CAMP COMMIT

転職保証付エンジニア転職特化スクール
国の給付金対象講座最大56万円キャッシュバック!
講師に質問し放題で
挫折しない環境。
選べる通学型/オンライン型

Code CampGATE 

PHPで自社開発企業への転職実績豊富!
講師全員現役エンジニアで評判高い。
完全オンラインマンツーマンレッスン

未経験からの副業・フリーランスおすすめスクール

テックアカデミー
Web制作副業コース
Webデザイン〜フロントエンド〜案件サポートまでを一気に駆け抜けて副業デビューできる!
初案件を講師のサポートを受けながら納品できるから安心して副業をスタートできる。

テックアカデミー
Webデザインフリーランスセット
未経験からWebデザイナーとしてフリーランススタートするためのカリキュラムセット!
案件リサーチ〜案件獲得〜納品までを講師と一緒に取り組めるから確実にフリーランスデビューできる。

.Proオンライン
Webデザイン✖️フロントエンド✖️WordPress
未経験からWeb制作に特化したオンラインスクール。Web制作会社だからWeb制作に必要な最先端スキルが学べる。WordPressまでセットである点がWeb制作で稼ぎたい人におすすめ!

CodeCamp
Webマスター✖️WordPress
PHPのバックエンドスキルとWordPressでWeb制作!マンツーマン型指導で確実に実力を身につける。筆者の受講スクールだからおすすめ理由に納得!