「WEB系の職業」というとどんな職種が頭に浮かびますか？
WEBデザイナー・WEBエンジニア・WEBディレクター・WEBプロデューサー・WEBマーケターなど、「WEB」と頭に付く職業がいくつもあって、正直違いがよく分からない！と感じている人も多いのではないでしょうか。
特にWEBデザイナーとWEBエンジニアは、分野が隣接しているため境界線が見えにくいところがあります。
「それぞれの仕事内容や必要なスキルを知りたい」
「自分に向いているのはどちらか比較してみたい」
などと、WEBデザイナーWEBエンジニア迷っていませんか？この記事では2つの特性や違いを多方面から解説していきます。
仕事内容や収入、将来性や難易度、プロになるまでのスピードなどを参考に、WEBデザイナーとWEBエンジニアをいちど天秤にかけてみましょう。
きっと進みたい方向が見えてくるはずですよ。
＼ 14364人にセミナーをして分かった！／
【お知らせ】
2000名以上の人生を変えるキッカケになった「好きなことで生きていく！WEBデザイナーという働き方セミナー」では、
などをお伝えしています。今だけ無料で開催しているので「WEBデザインの学び方がわからない」「WEBデザイン業界について知りたい」という方はぜひご参加ください。
＞＞詳しくはこちら
WEBサイト制作におけるWEBデザイナーとWEBエンジニア
WEBサイト制作はチームワーク。
ゴールに向かう過程で、各工程のプロフェッショナルが分業して制作にあたります。
WEBサイトの完成・公開までの工程は大きく分けて以下の3つです。
企画・設計 → デザイン制作 → 開発（コーディング）
WEBデザイナーとWEBエンジニアはこれらの工程にどのように関わっていくのでしょうか？具体的に見ていきましょう。
WEBデザイナーの役割
クライアントへのヒアリングや企画の提案（コンセプトワーク）はWEB制作全体を統括するWEBディレクターがおこないます。
WEBデザイナーは、WEBディレクターから引き継がれたサイトマップやワイヤーフレーム（WEBページの設計図）をもとに「デザイン制作」をするのが主な業務です。
案件の規模やWEB制作会社の仕組みによっては、企画の段階からWEBデザイナーが担当を任されることも珍しくありません。
なお、以下の記事では歴15年の現役デザイナーが、WEBデザイナーの魅力や楽しさにいついて解説しているので、WEBデザイナーについて詳しく知りたい方は、ぜひ読んでみてくださいね。
WEBエンジニアの役割
WEBエンジニアはWEBデザイナーが完成させたデザインデータを引き継ぎ、コーディングをおこないます。
コーディングとは、デザインデータをWEBブラウザ上で閲覧できるように、プログラミング言語を使ってソースコードを記述する作業です。
主にコーディングは「フロントエンドエンジニア」、「マークアップエンジニア」、「コーダー」と呼ばれるエンジニアが担当します。
また、WEBサイト構築はコーディングだけでなく、ユーザーの目に触れない部分（サーバーサイドやデータベースのシステムなど）の開発・構築もしなければなりません。
この分野は「バックエンドエンジニア」の担当領域です。
WEBデザイナーとWEBエンジニア、2つが重なる領域
専門分野によって役割分担が決まっているWEB制作ですが、境界線は曖昧で、どのように線引きするかは案件や共同で作業にあたるチーム編成、所属している企業などによって異なります。
WEBデザイナーとWEBエンジニアは担当領域に重なる部分があり、コーディングのできるWEBデザイナーも珍しくありません。
企画・設計の段階から携わり、デザインに関与するWEBエンジニアもいます。
もちろん、WEBデザイン・コーディングそれぞれに特化した技術者も多くいますが、分業するにあたっても、隣り合う分野について「全くの無知」というわけにはいかないでしょう。
なお、当メディアの運営元である日本デザインスクールでは、これからWEBデザイナーに興味がある方向けに無料のオンラインセミナーを開催しています。
セミナーではWEBデザイナーのリアルなお仕事内容、WEBデザイン業界の裏側、勉強に失敗してしまった先輩の事例など、WEBデザイナーになるに前に知っておきたいことをお伝えしています。
参加者の中にはWEBデザインの勉強に挫折してしまった方も多く、「勉強を始める前に知りたかった」という感想が多いので、WEBデザイナーに興味がある方はぜひご参加くださいね。（※無理な営業などは一切ございません。）
▼セミナーの詳しい内容を見てみる
WEBデザイナーとWEBエンジニア、徹底比較！
WEBサイト制作において担当領域が重なると知って、WEBデザイナーとWEBエンジニアのどちらを選ぶべきか、ますます迷いが生じているかもしれませんね。
ここでは、2つの職種を多方面から比較していきます。
進むべき道を見つけるヒントにしてください。
需要
2019年に経済産業省が公表した「IT人材需給に関する調査」によると、IT人材の需給は年々増え続けています。
需要の伸び率は「低位・中位・上位」の3段階で予測されており、間をとって中位を見ても、2030年には約45万人の人材が不足するとされています。
WEBデザイナー、WEBエンジニアともに、需要が供給を上回る状況がしばらくは続きそうです。
昨今の求人数を比較してみましょう。
求人情報専門の検索エンジンIndeedでWEBデザイナーの求人を検索したところ14,132件、WEBエンジニアは130,929件のヒット（2022年9月時点）。
求人ボックスで検索すると、「WEBデザイナー」85,378件、「WEBエンジニア」248,776 件という結果になりました。
クラウドソーシングサイトの大手、クラウドワークスで案件数を見てみましょう。
「WEBデザイン」3,009件、「WEB開発」9,205件、「サイト構築・WEB開発」3258件、「ホームページ制作・WEBデザイン」12,172件がヒットしました。
WEBエンジニアの需要が極めて高いのは明らかです。
ただ、WEBデザイナーも一定の需要があります。たとえば、「印刷物・DTPデザイン 」の案件をクラウドワークスで検索すると4,192件。
一方「ロゴやバナー制作」の案件は15,999件と数字の桁がひとつ違ってくるほど。
デザイン業界もWEB系の勢いが増している証拠です。
今回はWEBエンジニアの需要がWEBデザイナーの需要を上回る結果になりましたが、今後もWEB系スキルは総じて需要が高まっていくと予想されます。
収入
WEBデザイナーとWEBエンジニアの平均年収を比較してみましょう。
求人サイトのdodaの「平均年収ランキング」(2021年12月公開）を見ると、WEBデザイナーは356万円、WEB系のエンジニアは413万円という結果でした。
引用：doda「平均年収ランキング（165職種別の平均年収／生涯賃金）」
同じく求人サイト、マイナビの「2022年版 職種別モデル年収平均ランキング」ではWEBデザイナーは475万円で、WEBサイト・インターネットサービス系プログラマーは493万円という結果になりました。
引用：マイナビ転職「2022年版 職種別モデル年収平均ランキング」
WEBデザイナー・WEBエンジニアともに実力が物を言う世界なので、スキルや経験によって年収は大きく異なりますが、平均年収を比べてみると、WEBエンジニアの方が高いという結果となりました。
ただ、個人差があることを忘れてはいけません。
マルチに活躍するフリーランサーも多い業界です。
会社員以上に大きく稼ぐWEBデザイナー・WEBエンジニアも存在します。
一方、会社員ほど稼げない人がたくさんいるのも事実です。
同じ職種でも平均年収では測ることのできない収入差があることを心得ておきましょう。
将来性
人工知能の発達により、「AIに仕事を奪われる」というセンセーショナルな言葉がささやかれはじめたのは数年前。
まだ記憶に新しいのではないでしょうか。
2015年には野村総合研究所とオックスフォード大学の博士との共同研究により、「日本の労働人口の 49％が人工知能で代替可能になる」と発表されました。
AIが得意とするのは、膨大なデータに基づく学習や高速処理。
プログラミングも例外ではありません。将来的にコーディングはAIで代替可能だという見方もあります。
事実、簡単なWebサイトであれば、一部コーディングの自動化はすでに可能です。
WEBデザインも自動化の波を受け、無料のWEBデザイン作成ソフトを使えば素人でもそこそこの品質で作れるようになってきました。
生き残っていくためには、AIが代替できない部分で成果を出すしかありません。
AIが不得意なのはクリエイティブなこと、抽象的・感覚的な部分です。
デザインにしろプログラミングにしろ、クライアントの希望を正しく汲み取り、期待を超える工夫やきめ細かいサポート・サービスが提供できると重宝されます。
こういった面での独自性があれば、AIがライバルになることはなく、今後も引く手あまたの人材でいられるでしょう。
参考：野村総合研究所 「日本の労働人口の 49％が人工知能やロボット等で代替可能に」
仕事内容
Webデザイナーは、画面のレイアウトやボタンの配置など、ユーザーの目に映る部分のビジュアルデザインを担当します。
一方フロントエンドを担当するWEBエンジニアは、プログラミング言語を扱い、ユーザーが操作する箇所の設計・構築・カスタマイズをおこないます。
それぞれもう少し掘り下げて見ていくために、再度WEBサイト制作の工程を思い出しておきましょう。
WEBデザイナーの仕事内容
WEBデザイナーの主な業務は「デザイン制作」です。
デザイン制作に入る前の「企画・設計」を任される場合もあります。
企画・設計ですべきことは、情報整理とサイトマップ・ワイヤーフレームの作成。
ヒアリングで得た情報をもとに、WEBサイト制作の目的を整理し、WEBサイトの全体像をサイトマップにします。
WEBページのどこに何を配置するのか、具体的なレイアウトを記したものがワイヤーフレームです。
ここからがWEBデザイナーの本業、デザイン制作。
ワイヤーフレームをもとにデザインカンプ（デザインの完成見本）を作成していきます。
実際に写真やイラストを配置し、配色や文字サイズ・フォントを整えながら完成イメージに近づける作業です。
トップページと下層ページのトーンも統一していきます（トーン＆マナー）。
確認と修正を経て、デザインデータ提出の準備は完了です。
WEBデザインの流れについてさらに詳しく知りたい方はこちらの記事をご覧ください。
WEBエンジニアの仕事内容
WEBエンジニアは役割によって2つに分類されます。
◆フロントエンドエンジニア
◆バックエンドエンジニア
WEBサイトのフロント面（ユーザーの目に触れる部分）の設計や開発をおこなうのが「フロントエンドエンジニア」。
サーバーサイド（ユーザーの目に触れない裏側）の設計や開発をおこなうのが「バックエンドエンジニア」です。
フロントエンジニアは、WEBデザイナーから引き継いだデザインデータをもとにプログラミングをおこない、WEBブラウザ上での閲覧を可能にします。
UI/UXの設計や端末に応じたレスポンシブな実装、WEBサイト公開後の保守（メンテナンス）も担当領域です。
フロントエンジニアの役割をさらに分業することもあります。
ここで活躍するのが、コーディングに特化した「コーダー」や「マークアップエンジニア」と呼ばれるエンジニア。
コーダーはHTMLを使用してコードを作成するエンジニアで、「HTMLコーダー」と呼ばれることもあります。
マークアップエンジニアはコーダーの上位職で、HTMLのプロフェッショナルであり、CSSやJavaScriptなどにも見識を持ちます。
WEBエンジニアはマークアップエンジニアのさらに上位職で、HTML、CSS、JavaScript、PHPなど扱える言語も多く、Webサイト制作全般の知識とスキルが豊富です。
バックエンドエンジニアへの情報伝達もおこないます。
バックエンドエンジニアは、フロントエンドエンジニアよりもさらに幅広い専門知識を持ったスペシャリストです。
データベースの管理やサーバーの構築に関与しWEBサイトを成り立たせています。
フロントエンド・バックエンドの開発を両方おこなえる「フルスタックエンジニア」というマルチなエンジニアの存在も覚えておきましょう。
習得までの難易度
WEBデザイナー、WEBエンジニアが扱う主な言語を比較してみましょう。
◆WEBデザイナー：マークアップ言語（HTML、CSS）の基礎知識
◆WEBエンジニア：プログラミング言語（Java、JavaScript、PHP、Python、Ruby）など
WEBデザイナーは必ずしもコーディングができる必要がありません。
デザインはデザイナーが、コーディングはコーダーがおこなうからです。コーディングができないWEBデザイナーでも稼ぐのは十分にできます。
その代わり、WEBデザイナーに最低限必要なのはコーディング（HTML、CSS）の基礎知識は持っておきましょう。
コーディングの基礎持っておかないとコーディングしにくいデザインを作ってしまうのもちろんのこと、コーダーとのコミュニケーションが取れなくなり、信頼を失ってしまいます。
WEBエンジニアが扱うのはプログラミング言語です。
プログラミング言語は現存するもので「200種類以上ある」とも言われているのをご存知ですか？WEBエンジニアに必要なのはWEB開発用の言語。
Java、JavaScript、PHP、Python、Rubyなど用途によって使用する言語が異なります。
また、HTMLやCSSについても基礎知識として必須です。
プログラミング言語は数学的・論理的思考が必要とされるため難易度はやや高め。
習得までに時間を要するため、挫折率が高いとも言われています。
ただ、WEB開発系の言語は記述がそこまで複雑ではないため汎用性も高く、学習を継続できれば未経験でも十分習得が可能です。
言語習得の面では、WEBエンジニアの方がややハードルが高いことが分かりましたが、WEBデザイナーのメイン業務は「デザイン」ですので、デザインスキルの習得のほうに重きをおかなければなりません。
業務内容がデザインとプログラミングでは目指す方向が異なるので、単純に難易度を比較することはできません。
「向き・不向き」の問題でもあるので、後述する「適性の見極め方」をぜひ参考にしてください。
プロになるまでのスピード
WEBデザイナーもWEBエンジニアも、未経験からのスタートなら独学もしくはスクールで知識とスキルを習得してから、企業に就職またはフリーランスでプロデビューすることになります。
いずれも未経験者の求人は多くはありませんが、学歴や資格はそれほど重要視されません。
実力主義の世界なので、スキルを証明できれば未経験者でも道は開けます。
そのためにポートフォリオを充実させておくといいでしょう。
ポートフォリオはWEBデザイナーが作成するものというイメージがあるかもしれませんが、最近ではWEBエンジニアもポートフォリオを活用する人が増えてきました。
オリジナリティのあるポートフォリオサイトを制作・運用できると効果的です。
ポートフォリオができるレベルに達する時間を比較してみましょう。
どんなこともスキルを習得するのに1,000時間、一流になるまでには10,000時間を要するという説がありますが、ポイントを絞って効率的に学ぶことでかなりの時間短縮が可能です。
プロになるまでの最短ルートを選ぶなら、独学ではなくスクールで習う方が現実的です。
WEBデザイナーになるまでに最短で約2〜3ヶ月、WEBエンジニアになるまでに約3〜6ヵ月の学習が目安ですが、一日にどれくらい学習時間を持てるか、どこまで学ぶかによって大きく変わってきます。
まずはプロになるための最低限のスキルを習得し、そこから実務経験を積みながらスキルアップしていくのがおすすめです。
もともとの予備知識がどれくらいかにもよりますが、プロデビューのスピードはWEBデザイナーのほうが速いと言えそうです。
【お知らせ】
まずは無料でWEBデザインを学びませんか？
デザインに少しだけ興味がある方に向けて、豪華な無料プレゼントを用意しました。
✔️ WEBデザイン20レッスン
✔️ WEBデザイナータイプ診断
✔️ 60分でバナーが作れるレッスン動画
✔️ 月収3万円が叶う！副業ロードマップ
✔️月100万稼いだデザイナーによる特別動画講座
決め手は適性！どちらに向いているか比較検討してみる
WEBデザイナーとWEBエンジニアの違いが明らかになってきたところで、進みたい方向が見えてきたでしょうか。
WEBデザイナーとWEBエンジニアは、マークアップ言語を扱う部分など領域が重なることはありますが、あくまでもメインとなる業務はデザインとプログラミング。
仕事内容が異なるので、「向き・不向き」が気になるところです。
それぞれの適性を見ていきましょう。
WEBデザイナーに求められる適性
WEBデザイナーに向いているのは以下のような人です。
- デザインが好き
- トレンドに関心が高い
- 向上心があり努力を継続できる
- パソコン操作に苦手意識がない
- コミュニケーション力が高い
WEBデザイナーに求められる適性は、まず「デザインを仕事にしたい」という強い思い。
「できるようになりたい」、「学ぶことが楽しい」という気持ちがないと続けられません。
WEBデザインはトレンドの移り変わりも早く、常に知識とスキルのアップデートが必要。
デザインツールを使いこなす必要があるので、スムーズなスキル習得にはパソコン操作に苦手意識がないことも条件です。
コミュニケーション力も高くなければ務まりません。
クライアントと打ち合わせをする際は、相手の要望を正しく汲み取り、こちらの提案を分かりやすく伝えるスキルが必要です。
また、分業してWEB制作をおこなうことが常ですので、業務の引き継ぎや情報共有を正確におこない、WEBディレクター、WEBライター、WEBエンジニアなど各工程の担当者と円滑なコミュニケーションがとれる人が求められます。
▼WEBデザイナーに必要なコミュニケーション能力を解説した動画はこちら
WEBエンジニアに求められる適性
WEBエンジニアに向いているのは以下のような人です。
- コードを書くことが好き
- ITの分野に強い
- 数字や英語に強い
- 根気強く地道な作業を継続できる
- コミュニケーション力が高い
WEBエンジニアを目指すなら、ITの分野に明るく「コードを書くことが好き」という気持ちがあることが大前提。
技術の進歩が目覚ましい業界だからこそ、新しいことを取り入れる積極的な姿勢も大切です。
数学的な処理が必要な場面もあるので数字に強いことはもちろん、プログラミングのコードに英語が用いられているので、英語に苦手意識がない方が望ましいでしょう。
根気強さも必要です。
エラーと修正を何度も繰り返す地道な作業が求められるので、問題解決に向けて論理的な道筋を立てられる人でなければなりません。WEBエンジニアもコミュニケーション能力が求められます。
一人で黙々と作業をする印象のあるエンジニアですが、プロジェクトチームのメンバーや、クライアントとの情報共有も大切な業務です。
WEBデザイナー・WEBエンジニアになるために必要なスキル
WEBデザイナーとWEBエンジニアでは必要なスキルが異なります。
進みたい方向が定まり、学ぶべきスキルが具体的になったら、それぞれに専門知識を深めていきましょう。
「WEBデザイナーの道に進む」と決めたら習得すべきスキル
WEBデザイナーになると決めたら、以下を学びましょう。
- デザインの知識
- デザインツールを扱うスキル
- マークアップ言語の知識
WEBデザイナーが手掛けるのは、芸術作品ではなく商業用のデザインだということを認識しておかなければなりません。
配色ひとつにも意味があります。
レイアウトやフォント選びなど、効果的なデザインの知識をつけましょう。
WEBデザイナーの仕事道具であるデザインツール。
一般的に使われているのはAdobe社のPhotoshopとIllustratorです。
Photoshopを使って全体をデザインし、Illustratorで細部のデザインを施します。
この2つのツールを扱えなければWEBデザイナーとしてスタートが切れません。
また、先ほどもお伝えしたようにコーディングのスキルは必須ではありませんが、マークアップ言語であるHTMLとCSSの知識も身につけておきましょう。
「WEBエンジニアの道に進む」と決めたら習得すべきスキル
WEBエンジニアになると決めたら、以下を学びましょう。
- コーディングスキル
- プログラミング言語の知識
- IT全般の知識
フロントエンドエンジニアに必須のコーディングスキル。
HTML、CSSに加えJavaScriptも扱えるといいでしょう。
デザインパーツに動きをつけることができます。
バックエンド(サーバーサイド）のプログラミングもおこなえるようになるにはJava、Ruby、PHP、Pythonの知識も必要です。
担当領域によって必要な言語は異なりますが、得意言語を2つ以上持っておくと転職するにも有利だと言われています。
プログラミングスキルのみならず、IT全般の知識もつけておきましょう。
ネットワークの知識を網羅するために「ITパスポート」や「基本情報技術者試験」（どちらも国家資格）にチャレンジするのもおすすめです。
「WEBデザイナー・WEBエンジニア」キャリアアップの仕方
WEBデザイナー・WEBエンジニア、どちらの道を選んだとしても、これからのキャリアパスを考え、将来的に領域を広げていくことを視野に入れておきましょう。
もちろんキャリアをスタートして間もない頃は、WEBデザイナー・WEBエンジニアそれぞれに必須のスキルを極めていくべきです。
ただ、その先があることを意識すると未来が開けてきます。
慣れてきたら少しずつ隣接する分野も勉強し、前後の工程を手伝えるくらいの知識とスキルを身に付けられたら理想的です。
さらなるステップアップとして、以下のようなキャリアアップも考えられます。
WEBデザイナー
- UI/UXデザイナー、アートディレクター、WEBディレクターへのキャリアアップ
- コーディングやライティング、マーケティングなどプラスαのスキルでアップグレード
WEBエンジニア
- コーダーからフロントエンドエンジニア、フルスタックエンジニア、テクニカルディレクターへのキャリアアップ
- 扱える言語の数を増やし、WEBアプリケーションの開発や他のエンジニア職にキャリアチェンジ
領域を広げてハイスペックなWEBデザイナー・WEBエンジニアへと階段をのぼっていきましょう。
新しい自分に出会うためにまずやってみる
WEBサイト制作におけるWEBデザイナーとWEBエンジニア、似ているようで異なる2つを比較してきました。
どちらの道を歩む未来をイメージしたでしょうか？
WEBデザイナーとWEBエンジニアの違いをおさらいしてみましょう。
◆WEBデザイナー：「デザイン」が仕事
◆WEBエンジニア：「WEBサイトの開発・保守・運用」が仕事
「コーディング」は両者の担当領域が重なる部分で、どちらが担当するかは案件や企業の方針などによって異なります。
必須ではないもののWEBデザイナーもコーディングの知識を備えるとスキルアップになるでしょう。
スキル習得にはWEBエンジニアの方が時間を要する傾向にあり、難易度が高い分収入も高めです。
どちらを選ぶかは適性をヒントにしましょう。
【向いている人】
| WEBデザイナー | WEBエンジニア |
| デザインが好き | コードを書くことが好き |
| トレンドに関心が高い | ITの分野に強い |
| 向上心があり努力を継続できる | 数字や英語に強い |
| パソコン操作に苦手意識がない | 根気強く地道な作業を継続できる |
【必要なスキル】
| WEBデザイナー | WEBエンジニア |
| デザインの知識 | コーディングスキル |
| デザインツールを扱うスキル | プログラミング言語の知識 |
| マークアップ言語の知識 | IT全般の知識 |
迷ったら、まずはピンときたほうからスタートしてみましょう。
体験して初めて興味が湧くこともあります。
あとから方向転換することも可能です。
実際にWEBデザイナーからWEBエンジニアへ、WEBエンジニアからWEBデザイナーにキャリアチェンジすることは珍しくありません。
最初の選択に囚われすぎず、学びを深める中で柔軟に考えていけば大丈夫です。
隣接する分野なので、学んだことが無駄になることもありません。
デザイナーとエンジニア、WEBという繋がりがなければ疎遠だったかもしれない2つの仕事。
そんな職種が隣り合っているのもWEB制作の面白さです。
新しい自分に出会うため、「まずやってみる！」という心がけでいきましょう。
自分でも思いがけない適性に気付けるかもしれませんね。
質問や感想があればご記入ください