読者の悩み
- Webデザインか、Webプログラミングのどっちがいいか迷っている
- それぞれの特徴を知りたい
- 自分にはどっちが向いているのかを判断したい
こんな悩みに答える記事になっています。
私は実際にWebプログラミングをしつつ働いており、週の大半をリモートワークをしつつ過ごしています。
今回の記事では、
- Webデザインとプログラミングの違い
- それぞれのメリットデメリット
- どちらにすべきか悩んでいる方はまず何をすべきか
について解説していきます。
この記事を読めば、どっちにしようか悩んでいる方でも、どんな行動をすべきかがわかり、すぐに行動に移せるようになります。
1.WebデザイナーとWebプログラマの違い
そもそも何をしているのかが分からないことには説明できませんので、業務内容の違いなどについて紹介します。
Webデザイナーの役割は？
Webデザイナーは、Webサイトの作成を行います。
Webサイトの制作の流れとしては、次の通り。
- 要望を聞く
- それに従って大まかにサイト設計をする
- デザイン（Photoshop/Illustratorなどのツールを使用）
- コーディング（HTML/CSS/JavaScriptなどを使用）
- 公開 or プログラマへ渡すなど
デザインのみをしてプログラマへ全部渡すということもありますが、主にサイトのデザインを担当することになります。
デザインは、ユーザーから見られる部分。
デザイン次第で、そのサイトの使い勝手や分かりやすさが全然変わってくるので大事。
Webプログラマの役割
プログラマは主にシステム開発を行います。
Webサイトを例にすると、以下の通り。
- 要望を聞く
- 基本設計
- 詳細設計
- プログラミング
- テスト
- 納品
Webプログラマは、主に裏方のシステム設計をします。
例えば、ECサイトの場合は、会員登録や、購入された際の処理(在庫を減らしたり)などを実装します。
ユーザーからは見えない部分を担当することが多いのですが、管理者側のサポートをすることが多いです。
商品が購入された場合、速やかに出荷処理に移る必要がありますが、
購入方法やお届け希望日、お届け先によっていつ商品を作り始めるのか？
どんな方法で配送するのか？
などはできるだけ自動化できたら楽。こんな業務をシステム面で自動化していくのがプログラマの役割でもあります。
給料の違い
給料についても違いがあるので見てみましょう。
後述しますが、スキル習得が難しいのはプログラマです。
そんなこともあり、年収は
Webデザイナー：平均年収400万円
プログラマ：平均年収470万円
となっています(参考)。
プログラマの中でも、どの部分を専門とするかによっても大きく年収が違っては来るのですが、プログラマの方が年収が高い傾向にあります。
より専門的になる分、給料も高くなる感じですね。
といっても、どちらも人材不足ですので、食いっぱぐれることはないでしょう。
【WebデザインVSプログラミング】学習難易度の違い
両者ともにスキルが必要になってくる職業です。
それぞれのスキル習得難易度について解説していきます。
Webデザイナーの学習内容
- HTML、CSS、JavascriptなどのWebの画面を作っていくスキル
- イラストレーターやフォトショップなどのデザインツールの使い方
- デザイン全般について学習
一方で、プログラマは以下の通り。
プログラマの学習内容
- HTML、CSS、JavascriptなどのWebの画面を作っていくスキル
- PHPなどのプログラミング言語の習得(これで会員登録などの仕組みを作る)
- サーバーや通信など、ITの基礎知識
特にWebプログラマは、PHPなどのユーザーからは見えにくい裏方の仕事をするプログラミングスキルの習得が難しいです。
maipyon
Webデザイナーとプログラマのそれぞれの業務内容の違い
WebデザイナーもWebプログラマも、基本的にクライアントに対して作成して、それを納品。
という流れになりますが、Webデザイナーの方がクライアントとのコミュニケーションの機会は多いです。
あなたがどれだけいいと思ったデザインでも、クライアント先が(デザインに関して素人なのに)NGを出せば別案を出す必要があり、そういった部分でストレスはたまりやすいかもしれません。
一方でWebプログラマは、NGでバッサリ切られることはほぼ無く、「ここもうちょっとこうして」みたいな改修要望ですみますし、相談の機会もWebデザイナーに比べると少なめです。
そのため、対人でのストレスはデザイナーの方がたまりがちかもしれません。
ここまでを表にまとめてみました。
| Webデザイナー | Webプログラマ | |
|---|---|---|
| 主な業務 | 画面作り | 裏側のシステム作り |
| 給料 | 〇 | ◎ |
| 学習難易度 | 〇 | △ |
| ストレスのなさ | 〇 | ◎ |
これでWebデザイナーとWebプログラマの違いがざっと分かったと思います。
2.あなたが勉強すべきなのはWebデザイン？プログラミング？
細かい比較をしてきましたが、具体的にあなたがどっちに向いているのか？
が分かりやすいようにしてみます。
こんなあなたはデザイナー向け
- デザインに触れたい人
- 使いにくいサイトにイライラした覚えがある人
- 物事をイメージで捉える人
- 人のことを考えられる人(使用者の使い勝手を考えた設計ができるか)
- 普段見ている様々なサイトにも、デザインの優劣が付けられる人(つけられるのなら、センスありかも)
一方でプログラマには以下のような人が向いています。
こんなあなたはプログラマ向け
- 論理的思考が得意な人
- 効率を重視する人
- 物事の仕組みを考えるのが得意な人
- 根気強く悩んでも苦にならない人
- 数学が得意とはいわずとも、普通にできた人
数学が苦手な人でも努力次第でなれますが、プログラミングでの考え方と数学での考え方で共通している部分があるということもあり、項目に含めました。
この辺りはぶっちゃけ好みで決めちゃっていいと思います。
maipyon
3.それでもWebデザインかプログラミング、どっちにすべきか分からない人に
自分がどっちに向いていそうか結局分からなかった。
自分がWebプログラマに向いていそうではあったけど、より惹かれるのはWebデザイナーです。
というような人がいると思います。
学びつつWebデザインとプログラミングのどっちにするか考えよう
どっちにすべきか分からないなぁという人は、まずはWebの画面設計のスキル(フロントエンドスキル)を身につけつつ考えましょう。
そもそも、WebデザイナーかWebプログラマで迷っている方は、どちらにも興味があって悩んでいるのだと思います。
どちらになろうとも、フロントエンドスキルは必須になってきます。
そこで、スキルを身につけつつ(つまり両者の側面に触れつつ)自分に向いている方はどっちかというのを体感すればOK。
体感するために大金をかけるわけにもいかないでしょうから、TechAcademyの無料体験がオススメです。
実際に1週間でWebアプリケーションを作りつつ学べるため、画面作りはもちろん、自分の思い通りの動きにするにはどうすればいいか？を学ぶことができます。
体験を通して、自分に向いているのがどちらか？というのも多少分かってくるかと思います。
- 画面作りが特に面白いと思ったら、Webデザイン
- ここをクリックしたらこうなる、みたいな動作関係や条件分岐での考え方が面白いと思えたら、プログラミング
上記のように、迷っている人は実際にちょっとでも体験して自分自身に聞いてみるのが一番正確です。
単純に、「楽しい」と思えた部分の方向に決めればOK。
ここで実際のエンジニアの方に相談も可能。
「どちらを学ぼうか迷い中ですが、講師の方はどう決めたのか？逆になぜ他の選択肢を選ばなかったのか？」
現実的な回答を聞くこともできますので、迷ったら聞いてみるのが一番解決に近づきますよ。
maipyon
4.Webデザインかプログラミング、どっちもオススメです
リモートワークが可能だったり、好きな働き方ができる可能性も高かったりと、デザイナーもプログラマもどちらもおすすめできます。
それでもどっちがオススメ？と聞かれたら、「面白いと思えた方がオススメ」という回答になります。
面白いと思えた方向に進むのが上達も速いですし、ストレスも少ないです。
今回紹介したポイントは以下の通りです。
どっちにする？ポイントはこちら
- 使い勝手を考えるのが好き。安定的に働きたい→デザイナー
- スキル習得はしんどいけれど、食いっぱぐれないスキルで働きたい方→プログラマ
- 未だに迷ってしまう→とりあえずTechAcademyの無料体験
でどっちが向いているか探る
記事中に紹介した以下の表も参考にしつつ、考えてみてください。
| Webデザイナー | Webプログラマ | |
|---|---|---|
| 主な業務 | 画面作り | 裏側のシステム作り |
| 給料 | 〇 | ◎ |
| 学習難易度 | 〇 | △ |
| ストレスのなさ | 〇 | ◎ |
やはり、言葉だけでは伝わらない部分がかなり多いので、体験してみるのが一番わかりやすいのではないかと思います。
自分の好きを突き詰めて決めるのが将来的にも一番。
1週間ちょっとの体験で分かることもあるので、悩むくらいだったらTechAcademyの無料体験などで今すぐ行動するのがオススメですよ。
なお、プログラミング学習の始め方については『【現役エンジニアが解説】初心者向けプログラミングの始めかた【0から1へ】』の記事で紹介してますので、合わせて読んでみてください。
