Webデザイン

フロントエンドとは？バックエンドとは？エンジニアの違いや必要なスキルを紹介

mockup

Webデザイナー、Webエンジニア、フロントエンドエンジニアと、Web周りは肩書が非常に多く存在します。

今回は、フロントエンド周辺の差を説明しつつ、それぞれに必要なスキルを説明していこうと思います。

フロントエンドとは？

まず、フロントエンドとはどういう意味かということを説明していきます。

WebサイトやWebサービスなどの設計に絞って説明をすると、「フロントエンド」はユーザーとの接点のある部分のことを指します。

逆に、ユーザーとの接点のない部分(後ろで行われている処理)などは、「バックエンド」と呼ばれます。frontend - フロントエンドとは？バックエンドとは？エンジニアの違いや必要なスキルを紹介

例えば、ログインフォームなどを用いて考えるとします。

ログインに使う、inputタグなどの設計をするのは、フロントエンド側の仕事になります。

一方でデータが送られてから、既存会員かどうかなどのチェックをする処理をするのはバックエンド側の仕事になります。

フロントエンドプログラミングの例

フロントエンドプログラミングとはその言葉の通りで、フロントエンドで使われるプログラミングです。

そのため、ユーザーとの接点がある部分のプログラミング言語を書くのが、フロントエンドプログラミングと言えます。

iOSアプリやAndroidアプリなどを含めると、非常に多岐に渡るため、web周りで有名な言語を解説しておくと

などがあります。これらは、Web開発に使う言語とも表現されたりしています。詳しくは下の記事を読んでみてください。

https://webcodezero.com/web-language/

フロントエンドエンジニアの例

では、「フロントエンドエンジニア」とは誰を指すのでしょうか。言葉の通り表現すれば、フロントエンドに携わるエンジニアを指します。

これは会社によっても表現が変わるので、一概には言えませんが、一般的には「Webデザイナー」と区別するために

Webデザイナー：フロントエンドのデザイン部分を担当

フロントエンドエンジニア：フロントエンドの処理部分を担当

のように分類して表現されることが多いみたいです。

先程のログインフォームの例で言うと、inputタグなどのレイアウトを決定・配置するだけならwebデザイナーでも可能です。

ただ、そこに細かな入力規制やバックエンドへのデータの受け渡しなどが必要となると、フロントエンドエンジニアの出番となります。

Webデザイナーとの違い

ほとんど説明してしまいましたが、これが一番良く聞かれるので細かく解説しておきます。

Webデザイナーとフロントエンドエンジニアの明確な違いは「デザイン」がメインか「プログラム」がメインかの違いになります。

ここで言う「プログラム」とは、JavaScriptやPHPなどで開発されたシステムのことを指しています。

仕事で使う割合が大きいものを説明すると比較的分かりやすいと思います。

Webデザイナー：HTML,CSS,JavaScript,Adobe関連

フロントエンドエンジニア：JavaScript,PHP,Ruby

※1例です。

似たような肩書の例

実際のところ、プログラムが書けるWebデザイナーは何の名称になるのかなど、曖昧なところが多いのがWeb周りの肩書の問題です。

似たような肩書が複数あるので、一つ一つ細かく分類してみます。

  • Webデザイナー：Webサイト・サービスのデザインを担当する
  • Webプログラマー：Webサイト・サービスのプログラミングを担当する
  • Webクリエイター：WebデザイナーとWebプログラマーを兼任する
  • Webエンジニア：フロントエンドエンジニアとバックエンドエンジニアを兼任
  • フロントエンドエンジニア：ユーザーとの接点部分を担当する
  • バックエンドエンジニア：サーバーサイドを担当する

バックエンドエンジニアは、サーバーサイドエンジニアとも言われます。

上の一覧を見ると、お互いに仕事内容が被っている肩書があります。事実、肩書は同じでも会社毎に仕事内容が違ったりします。

なので、大雑把なまとめとしては、これを覚えておきましょう。

  • Webサービスには、ユーザーとの接点になるフロント側とサーバー側がある
  • フロント側には、デザインを作る仕事とプログラムを作る仕事がある
  • それぞれ兼任してはいけないという決まりはない

エンジニア別に求められるスキル

それでは、それぞれの肩書に求められるスキルを説明していきます。参考程度に見てみてください。

フロントエンドエンジニア

などのサーバー側と連携するための言語。

バックエンドエンジニア

  • PHP
  • MySQL
  • (セキュリティ関連の知見)

個人的には、フロント側が多いので対応経験は少ないです。

Webデザイナー

プラスアルファでUX周りの知見があるとかなり良いですね。

Webプログラマー

フロントエンドエンジニアと被らせています。

フロントエンドプログラミングに関するまとめ

いかがでしたか？

要点をもう一度まとめておくと。

  • Webサービスには、ユーザーとの接点になるフロント側とサーバー側がある
  • フロント側には、デザインを作る仕事とプログラムを作る仕事がある
  • それぞれ兼任してはいけないという決まりはない

になります。

最後まで読んでいただき、ありがとうございました。

Adobe CSS HTML HTTP JavaScript webクリエイター webサイト webデザイナー サーバー バックエンド フロントエンド レイアウト
RELATED POST