webデザイナーとフロントエンジニアの違いってなんですか? わかる方がいましたら教えていただけないでしょうか！

Question

webデザイナーとフロントエンジニアの違いってなんですか?
わかる方がいましたら教えていただけないでしょうか！

Answer 1

基本的な分担として

Webデザイナー＞デザインカンプ（スクショみたいな状態）まで作る。
コーダー＞デザインカンプをHTML/CSSにする。レスポンシブ対応などもする。
フロントエンドエンジニア＞JavaScriptを使ってより高度な機能をつける。フォームの内容チェックなど。

こんな感じです。小さい案件なら（出来る人なら）全部一人でやることもあります。

Answer 2

フロントエンジニアが出現した時系列で説明しますね。

まずWebデザイナーの仕事は2つのスキルが必要です。
・デザイン
・コーディング

コーディングというのは、HTML、CSSを使ってデザインを実装するプログラミングに似た作業です。(実際にはjavascriptを使うことも多く、これは本当のプログラミング作業です。

会社によってはデザインとコーディングをそれぞれ専門職として分離する所があります。職名は以下の通り。
・デザイナー
・コーダー

最初の頃のWebサイトは情報を見せるだけの単純なものでした。ところが最近はどんどん「機能」が増えて来て、サイトによってはアプリケーションと言ってもおかしくない程になっています。これがWebアプリケーション。

最初の頃の「機能」は「インターネット掲示板」とか「お問合せフォーム」みたいなボタンを押したらページが切替わってバックエンド(裏側のシステム)に情報が送信されるタイプでした。ここまではWebデザイナーやコーダーが対応してました。

ところが最近は、リアルタイムにバックエンドと双方向通信を行なって画面を随時更新します。例えばWeb版Youtubeでいいねやコメントを送信しても画面は再読み込みしないですよね。この様に、バックエンドと通信してフロントエンド(ユーザー側に表示されるWeb画面)の表示を制御したり、同一画面内での複雑な表示制御(動画を途切れずにストリーミング読み込みしたり、ブラウザゲームを動かしたり)を行うのはWebデザイナーやコーダーのレベルでは対応が難しくなります。そこでフロントエンド専門のエンジニア(プログラマー)が必要となり、フロントエンドエンジニアと呼ばれています。

まとめ

Webデザイナー
デザイン、コーディング、簡単なJavaScriptが仕事の範囲

フロントエンドエンジニア
複雑なフロントエンドのコーディングとプログラミングが仕事の範囲