Webデザイナー・Webエンジニアの違いを整理しよう【予備知識】
こんばんは、Webエンジニアの氷犬です。
こんな疑問に答えます。
WebデザイナーもWebエンジニアも業務が被ることがあるので、違いを意識するのは難しいところがあります。
ただ、就職する時には入り口が違ってくるため、ざっくりと違いを意識しておくと就職活動がしやすくなるはずです。
この記事では、WebデザイナーとWebエンジニアの違いをわかりやすくまとめてみました。
- WebデザイナーとWebエンジニアの違いは仕事の種類
- WebデザイナーとWebエンジニアの違いを意識するのは就職する時
- デザイナーとエンジニアの仕事は両方わかっておいた方がいい
WebデザイナーとWebエンジニアの違いは仕事の種類
WebデザイナーとWebエンジニアの一番大きな違いは、扱う仕事です。
デザイナーがWebデザインをメインに担当するのに対し、エンジニアはコーディングやサーバー側の処理を担当します。
ただ、場合によってはデザイナーがコーディングを担当することもあるので、ざっくりと理解しておけばOKです。
使うツールや言語の違いにも触れつつ、デザイナーとエンジニアの違いを解説していきます。
デザイナーはデザインがメイン
デザイナーが主に使うツール・言語は以下のとおり。
ツール：Photoshop,Illustrator
言語：HTML/CSS/jQuery(JavaScript)
デザイナーは主にWebページの見た目をデザインするので、使うツールや言語も見た目を作るものがメインです。
デザイナーの中には、Webページのデザインだけを担当する人もいれば、コーディングも手掛ける人もいます。
場合によっては、HTMLで作ったページのWordpress化（CMS導入）や、カスタマイズをすることも。
就職サイトなどを見た限り、未経験だとデザインのみの求人は少なく、ある程度のコーディング能力も求められることが多いですね。
エンジニアはコードを書くのがメイン
デザイナーがデザインしたものを作ったり、機能を追加したりするのがエンジニアの仕事です。
使うツールや言語は以下のとおり↓
ツール：GitHub,各種フレームワーク・ライブラリなど
言語：HTML/CSS/JavaScript(jQuery)/PHP/MySQL
デザイナーとの違いは、PHPやMySQLなど、サーバーサイドの言語を扱うことです。
JavaScriptやPHPは、HTML/CSSとは勝手が違うので、別の技術力を求められます。
見た目には表れないこともあり、デザイナーと比べると仕事がイメージしにくいかもしれません。
デザイナーとエンジニアは仕事が被る部分もあります
ざっくりとWebデザイナーとWebエンジニアの違いを説明しましたが、仕事が被る部分もあります。
中にはコードを書くデザイナーもいるし、デザインをするエンジニアも。
特に規模の小さい会社だと、Web制作の企画からコーディングまで、すべての工程に関わる可能性が高いです。
関わる案件の規模にもよりますし、担当する業務の幅はケースバイケースと捉えておくのがいいかなと思います。
なお、給与については、WebデザイナーよりWebエンジニアの方が高いことが多いです。
WebデザイナーとWebエンジニアの違いを意識するのは就職する時
プログラミングを始めたばかりだと、デザイナーとエンジニアの違いを意識することは少ないです。
たぶん、プログラミング学習中は「エンジニアになるための勉強をしている」という気持ちの人が多いでしょう。
しかし、よくおすすめされているHTML/CSS/jQueryを学習した程度だと、エンジニアというよりもデザイナーに近いスキルを持っている状態です。
Webエンジニアになるには、JavaScript/PHP/MySQLの知識が必要になります。
「プログラミングを学習している＝エンジニアになれる」ではないので、注意が必要です。
僕自身の就職活動の経験を通じて、Webデザイナー/エンジニアになるために準備しておくべきことをまとめました↓
Webデザイナー：自分で企画・デザインしたWebサイトを作っておく
Webエンジニア：自分でゼロからサービス・システムを作っておく
WebデザイナーはWebサイトを作っておくこと【準備】
Webデザイナーとして就職・活動するためには、自分で作ったWebサイトのポートフォリオが必要です。
１，２ぐらいサイトを作り、スクリーンショットをGoogleドライブにあげておくといいですね。
コーディングなしのデザインだけでもいいのですが、できれば自分でコーディングできた方がいいかなと思います。
jQueryを使えば多少の動きは簡単に実装できるので、とりあえず作ってみましょう。
いずれコーディングも担当することになるはずので、早めに手を打っておくのがベターですね。
参考までに僕のプロフィールサイト兼ポートフォリオを貼っておきます。
Googleドライブは使ってませんが、ざっくりとした参考にはなるはずです。
【氷犬のプロフィール】
税務署で５年間勤務した後、プログラミングを独学してWeb系エンジニアに。
1994年生まれの23歳です。詳しいプロフィールやポートフォリオをまとめたページを作りましたので、Web製作のエンジニアが足りない企業様など、お気軽にご連絡ください。https://t.co/utOuvJOar0
— 氷犬????Webエンジニアになる (@icedog_410) 2018年8月16日
Webエンジニアはアプリ・サービスのポートフォリオが必要【準備】
Webエンジニアになるためには、WebサイトというよりJavaScript/PHPの知識を活かしたアプリ・サービスを作るといいかなと思います。
画像だとデザインまでしかわからないので、実際に自分でサーバーを借りてアップロードしておきましょう。
そこまでガツガツ作り込んだサービスでなくてもOKです。
僕はサービスを作ったことがないので、PHPエンジニアのNobuさんのサイトを貼らせていただきますm(_ _)m
自分のプロフィールサイトを作成しました！https://t.co/elofd560OO
僕の経歴やスキル、ポートフォリオを掲載しています。
仕事募集中です！！ pic.twitter.com/1W3gOhrLGS
— Nobu????Webエンジニア (@nobubump0) 2018年5月12日
Nobuさんは未経験から４か月でPHPエンジニアになった、とてもストイックな方なのでぜひフォローしておきましょう！⇒ @nobubump0
デザイナーとエンジニアの仕事は両方わかっておいた方がいい
デザイナーとエンジニアの仕事、最初はイマイチ違いがよくわからないのですが、それぞれの仕事を理解しておいた方がいいでしょう。
というのも、就職やフリーで活動する時に、仕事の違いがわからないと「どこまで自分でやればいいのか」もわからないからです。
デザインが得意な人もいれば、プログラムを書くのが得意な人もいます。
全部しようとして中途半端になるのが一番まずいので、ざっくりと違いを理解しておくことは大事です。
自分の進む道がわかっていれば、学習の効率もあがりますよね。
学習中はデザイナーといってもエンジニアといってもOK
プログラミング学習中は学習自体に意識が取られて、なかなか業種の区別が付きにくいかと思います。
SNSでたまに「HTML/CSS/jQueryが扱えるだけではエンジニアとは言わない」という厳しい意見も聞きますが、学習中はあまり意識しなくてもいいのかなと。
右も左もわからないうちは、とにかく前に進むことが重要です。
しかし、基礎学習がひととおり終わり、いざ就職・活動という段階になった時には、自分の中で区別しておいた方がいいですね。
たとえば、「エンジニアだと思って勉強していたけど、実際はデザイナーよりの知識が多かった」となると、頭が混乱してしまうので。
※まさに僕がこのケースで、企業の方の話を聞きながら、やりたいことがよくわからなくなった経験があります(-_-;)
プログラミングは手段なので、「プログラミングが実務でどう使われているのか」を意識することはとても大事です。
HTML/CSS/JavaScript/PHPなど、広くいえば全てがプログラミング言語なのですが、それぞれ用途が違います。
「自分はこの先何をしたいのか」を意識しつつ、学習していくと迷いが生まれにくいですね。
わかりやすいところから勉強していくのがおすすめです
WebデザイナーとWebエンジニアの仕事は違うとはいえ、基礎知識は共通するところがあります。
「Webエンジニアになりたいから、HTML/CSSよりもPHP/MySQLをやろう」という考えはイマイチで、やはり最初はHTML/CSSの知識を身に着けるのがいいですね。
HTML/CSSをひととおり学習した後に、デザインを学ぶのか、プログラミングを深く学ぶのかを決めるのがおすすめです。
HTML/CSSがわかれば、なんとなく自分のやりたいことが見えてくるので、まずは基礎をしっかり固めましょう。
「まだプログラミングを始めて間もないんだよね」という方は、ぜひこちらの記事を参考にしてみてください↓
【未経験から】プログラミングの独学方法の手順まとめ【実践済み】
WebデザイナーとWebエンジニアの違いを知りたい。
種類が違うとは聞くけど、デザイナーもコードを書いたり、エンジニアもデザインしたりするらしくてよくわからない。
結局、何が違うのかがわかりにくいので、誰か簡単に教えてください。