WEBデザイナーとエンジニアの違い、フロントエンドエンジニアはどっち?

パソコン プログラマーになる準備

牛山くんと猫田さんは、今日も雑談ばかりしています。

牛山くん
牛山くん

そういえば、最近僕の周りでもWEBデザイナーを目指す人が増えてきたんですよ

猫田さん
猫田さん

WEBデザイナー? エンジニアではなくて?

牛山くん
牛山くん

WEBデザイナーって言ってましたね

猫田さん
猫田さん

WEBデザイナーとWEBエンジニアってそもそも何が違うの?

牛山くん
牛山くん

うーん……なんでしょうねぇ。よくわかりませんねぇ

そんな話をしているとキャニット先生がやってきました。

CANIT先生
CANIT先生

おやおや、WEBデザイナーとWEBエンジニアの違いですか。たしかにわかりにくいかもしれませんね

猫田さん
猫田さん

もしかしたら、まったく違うのかしら

CANIT先生
CANIT先生

いい機会なので、今回の講義はWEBデザイナーとWEBエンジニアの違いを解説しましょうか

簡単にわかる『Webデザイナー』の仕事内容

パソコン
CANIT先生
CANIT先生

まずは、WEBデザイナーのほうから仕事内容を解説しますね

簡単にいうと……Webデザイナーは、利用者から“見える部分”を作成します。たとえば、サイトの画面や、Webアプリケーションの入力画面などです。主にチームで作業を進めることがほとんどですね。

CANIT先生
CANIT先生

なんとなくWEBデザイナーの仕事内容がわかってきたかと思います。続いて、どのような流れで仕事をするのかも見てみましょう。大きく分けるとWEBデザイナーの仕事は3つの流れで考えられます

  1. サイトの構成とレイアウトの検討
  2. サイトのデザイン作成
  3. サイトのコーディング

WEBデザイナーの仕事の流れ①:構成とレイアウトの検討

クライアントからWeb制作を依頼されると、Webサイトの大まかなレイアウト決定からスタートします。基本的な構成や全体のボリュームやWebサイト全体のイメージを決定します。見た目の美しさを考慮することも大切ですが、Webデザインの場合は、操作性も重要になってきます。

ユーザの操作性を考慮して設計する必要があるので、UI(ユーザーインターフェース)に関する知識も求められます。

牛山くん
牛山くん

UI(ユーザーインターフェース)ってなんですか?

CANIT先生
CANIT先生

WEBサイトの画面のことですね

WEBデザイナーの仕事の流れ②:サイトデザインの作成

サイトの構成やレイアウトの概要が決まれば、次はWebサイトの色合いや装飾決めを行います。”Illustrator”や“Photoshop”などのソフトを用いて、Webサイトの配色やロゴ・アイコンの配置などを決めます。最終的には、デザインカンプと呼ばれるWebページのデザインデータを作成します。

WEBデザイナーの仕事の流れ③:コーディング

クライアントからレイアウトの合意が得られた後は、Webサイトの構築を始めていきます。HTML、CSS、JavaScriptなどの構成言語を使用してコーディングです。ユーザーの使いやすさや見た目の美しさも意識しつつ、事前に決めた大まかなレイアウトに沿ってロゴやアイコンなどのデザインを行います。

簡単にわかる『Webエンジニア』の仕事内容

学習
CANIT先生
CANIT先生

続いて、WEBエンジニアの仕事内容を紹介しますね

Webエンジニアの仕事は、WEBデザイナーと違って主に利用者からは“見えない部分”です。を担当します。プログラムの開発からWebサーバー、データベースといった環境整備まで幅広く担当します。会社によってはシステム開発だけではなく、運営や管理までをトータルで行う場合もあるでしょう。

WEBエンジニアは見えないところで大きな仕事をしている

ECサイトのソフトウェアなども、普段私たちが目にする部分のフロントサイド部分を作るだけでは動作しないため、バックサイドのエンジニアは、サービス提供を支えるうえで重要な役割を担っています。

顧客からの要望や希望をもとに、どういったハードウェア、OS、そしてサーバーの機能を展開するのが必要なのか選択して実装していきます。通常、そのサーバーはDBと繋がっていることが多いので、ストレージ装置の選定も含めてDBの構築を行っていきます。WEBサイトのカットオーバー後は、リソース管理を行い、必要に応じてメモリやストレージといった資源の追加を行ったりもします。

猫田さん
猫田さん

つまり、いろいろなことをやっているってことですか?

CANIT先生
CANIT先生

そうですね。WEBエンジニアの業務は非常に幅広く、企業によっても大きく変わりますよ

Webデザイナー、Webエンジニアに必要なスキル

パソコン

Webデザイナーに必要なスキル

牛山くん
牛山くん

”Illustrator”や“Photoshop”だけでなく、HTML、CSS、JavaScriptなどの理解も必要ぽいですね

CANIT先生
CANIT先生

牛山くんのいうとおりですが……それ以上に必要なのは、コミュニケーション能力かもしれません。クライアントの要望をしっかりと理解しないと、何も始まりませんから。また、完成後に何度も修正しなければならないケースもあるので、根気や集中力も大切です

デザインのトレンドは日々入れ替わってきます。そのため日頃からさまざまなWebサイトを観察し、自分なりの研究成果として知識を蓄えておくようにするとよいでしょう。トレンドに詳しくなっておけば、クライアントからの要望にも適切に応えられるようになります。

Webエンジニアに必要なスキル

牛山くん
牛山くん

WEBエンジニアに求められるスキルは、もっと多そうです

CANIT先生
CANIT先生

そうですね。Webエンジニアは幅広いスキルが必要です。サーバサイドを担当するなら、PHPやJava、Ruby、Pythonなどのスキルが求められるでしょう。また、フロントエンドを担当するならHTML・CSS・JavaScriptのスキルが必須です

昨今ではオンプレミスからクラウドへ移行する企業も多いため、AWSやGCPのスキル・経験があるとより歓迎される機会が多いでしょう。

WEBデザインとWEBエンジニアの違い:まとめ

パソコン 女性
CANIT先生
CANIT先生

というわけで、今回はWEBデザイナーとWEBエンジニアの違いを紹介しました

猫田さん
猫田さん

かぶっている部分もあるから、わかりにくいんだね

牛山くん
牛山くん

エンジニアのほうが大変そうですね。でも、その分需要も高そうです

CANIT先生
CANIT先生

結局、どちらを目指すにしてもHTMLやCSSは必須ですよ。それらを学びながら、どちらを目指すのか考えても良いかも知れませんね

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
プログラマーになる準備悩み・心構え
【この記事を書いた人】
CANIT 先生

あらゆるプログラミング言語をあやつるフリーの凄腕講師。温和な性格で「わかるまで教えます」がモットー。たまに時間ができると動物の仲間達に、プログラミングを教えることもある。現在の生徒は牛山くんと猫田さん。

CANIT
タイトルとURLをコピーしました