こんにちは、ディレクターのシマダです。

WEBサイトの制作では、よく「フロントエンド」や「バックエンド」という言葉が出てきます。

デザイナーあがりの私は、なんとなくでしか理解していなかったのですが、それだとディレクター業務にも何かと不都合が現れてきます。ここで、しっかり理解するためにまとめてみました！

ディレクター業務に即した知識としてわかりやすくまとめたので、同じような状況のデザイナー＆ディレクターさんの助けになれれば「ワッショイ」です。

「フロントエンド」と「バックエンド」とは？

まずは、WEBサイト制作における「フロントエンド 」と「バックエンド」の役割について整理しましょう。

フロントエンドとは？

フロントエンドとは、WEBの「見た目（デザイン）」の部分のこと！

WEBサイトやWEBアプリケーションで、目に見えている部分のことです。

ざっくりというと、「見た目（デザイン）」と「動き（アニメーション）」の部分がそれにあたります。

ここまでは、以前の私でも理解していた部分です。

なので、ディレクターはさらに

「見た目（デザイン）」は、HTMLとCSSで作り、

「動き（アニメーション）」は、JavaScriptやJQueryなどで作っている、

ということまで把握しておきましょう。

 

バックエンドとは？

バックエンドは、WEBの見えない部分の機能面やデータなどに関すること！

サーバーサイド（WEBサーバー側）やデータベースのシステムなど、ユーザーの目に見えない部分で機能している部分のことです。

例えば、検索機能をつける場合、ユーザーが入力したキーワードに沿った検索情報の抽出や、支払いに関するクレジットカード情報の処理などが、バックエンドの分野となります。

バックエンドで使用する言語は、PHP、Ruby、Javaです。

ディレクターとしては、このバックエンドの工数の把握が結構むずかしい。

要件定義などの際に、クライアントの要望を実現するのにフロントエンドだけで、完結するのか、バックエンドの開発も必要になるのかを考えないと、

工数や見積もりに大きな差が出てきてしまうので、注意が必要です。

フロントエンドエンジニアがやっていることとは？

はてさて、意外と同じ社内でWEB制作をしていても、

ディレクター・デザイナー・エンジニア、それぞれが具体的にやっている細かい作業内容までは、把握していないかと思います。

ちなみにディレクターは、

「Webディレクターって何やってる人？」

＞５〜10人規模のWEB制作会社の場合

・営業（問合せ対応/ヒアリング/見積/請求など）
・プランナー（企画と立案、提案）
・ディレクション（進行管理、品質管理）

簡単に言うと、デザインとコーディング以外全部。

やるじゃん、ディレクター pic.twitter.com/7U4ATQlUik

— シマダヨシユキ / WEDディレクター (@force_shima) November 26, 2020

細かいところで言うと、

【表に出ないWEBディレクション業務】
提案前の要望をヒアリングした状態で、

・要望の取りまとめ
・それを実現させる機能のリストアップ
・費用感とスケジュール感
・想定されるリスクヘッジ

まだ見積もりも出していない段階で、ここをやるのは骨が折れるが、やっておかないと後々大変。

— シマダヨシユキ / WEDディレクター (@force_shima) December 1, 2020

こんなことも。

そんな感じで、フロントエンジニアがやっていることを具体的に分解してみました！

 

 

コーディング

まずは、コーディングと言われる作業。

デザイナーがつくりあげた「デザイン」をインターネット（WEBブラウザ）上で表現するために、HTMLとCSSで「再現する」作業です。

私は、コーディングのことを、よく「デザインをWEB化する作業」と言ってクライアントに説明することが多いです。

 

マークアップ

次に、マークアップという作業があります。

別々で行う作業というより、マークアップを意識しながらコーディングを行うと言った言い方が正しいかと思います。

つまりマークアップとは、「コンテンツの内容を理解して適切に構造化する」や「検索エンジン対策（SEO）を考慮したコーディングをおこなう」など、フロントエンドではありますが見た目には表れない部分の作業になります。

 

JavaScript実装

JavaScriptはHTMLを動的に書き換えたり、画面上に動きを出すなどの操作に利用します。

代表的なもので言うと、ブラウザ上でアニメーションをつけたり、画像などのスライドショーを表示したりします。

 

CMS構築

CMSとは、コンテンツ・マネジメント・システムの略です。

WEBサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。

そして、そのCMSで代表的なのがWordPressです。

CMSを導入することにより、WEBの知識がなくても、お知らせの情報更新や、商品情報の変更や追加など、運用管理が簡単になります。

弊社では、WordPressをベースとしたWEBサイト制作が基本です。

こちらCMSの構築もフロントエンドの作業領域となります。（※カスタマイズは、バックエンド領域が多いです。）

 

UI/UX設計

UIはユーザーインターフェイスの略です。

WEBサイトのデザインやフォント、パソコン自体の外観など、「ユーザーの視覚に触れる情報」がUIということができます。

それとは別にUXは、ユーザーエクスペリエンスの略で「体験」を意味します。

UIによる情報を元に、WEBサイトに対して抱く感想のような感覚がUXです。

例えば「デザインがきれい」「サイトが使いやすい」「文字が見やすい」といった体験のことです。

UIとUX設計自体は、デザイナーやディレクターの領域である部分も大きいのですが、ビジュアルデザインでは、定義しきれない細かい動きなどの実装は、エンジニアにお願いする部分も多いです。

バックエンドエンジニアがやっていることとは？

個人的には、バックエンドエンジニアのやってることが一番ボヤッとしてました。

弊社のような人数の少ないWEB制作会社だと、フロントもバックも同じエンジニアが担当するのが通常なので、切り分けの把握がよりむずかしいです（言い訳( ＾∀＾)）

さて、勉強しましょう。

 

サーバーの構築

まずは、サーバーの構築や準備です。

サーバーとは「情報を保存する箱」であり、WEBサイトなどでは、HTMLやCSSなどの画面のレイアウトに関する情報が保存される場所を用意します。

バックエンドのプログラムは、サーバー上で動作するので、クライアント所有のサーバーなどを使用する場合には、使用するプログラムに対応しているかなどの検証が必要です。

主なサーバーの種類は4種類で、

• レンタルサーバー
• クラウドサーバー
• VPS
• 専用サーバー

ここの中から、要件や規模などによってどのサーバーが最適なのかを選ぶのも、バックエンドエンジアが中心になって進めるのがいいでしょう。

 

データベースの構築

WEB上に指示通りのものを表示させるだけなら、WEBサーバーとプログラムさえあれば可能です。

ですが、データベースに情報を収納・保存し、いつでもアクセスして取り出すことができるようにしておけば、利用しやすいサイト構築の助けになります。

例えば、ECサイトなどで大量の商品がある場合の絞り込み検索機能などは、データベース連携で実装する機能です。

なので、データベースの構築もバックエンドの重要なお仕事です。

使用する主なプログラム言語：SQLなど

 

システムの開発と運用

バックエンドの一番の役割といえば、「システムの開発と運用」になります。

前途した「絞り込み検索機能」や「会員登録・ログイン機能」などWEBサイトに便利さを加えていく部分を担うのがバックエンドエンジアと言えるでしょう。

もちろん実装した機能の保守・メンテナンスなどの運用も担当します。

 

なので、ディレクターとしては、「機能」や「システム」に関わる部分では、バックエンドエンジニアと打ち合わせしながら進めないと、簡単だと思って安請け合いした機能の実装が大変で、工数オーバーなどの失敗をすることになりますので注意が必要です。

使用する主なプログラム言語：PHP、Java、Scalaなど

 

WEBディレクターも知っておくべき「フロントエンド ・バックエンド」まとめ

いかがでしたか？

ざっくりと構築作業とか言ってしまう内容も、

 

「フロントエンド」には、

• コーディング
• マークアップ
• JavaScript実装
• UI/UX設計

があり、

「バックエンド」には、

• サーバーの構築
• データベースの構築
• システムの開発と運用

があります。

 

そしてディレクターがこの知識を業務に活かすには、

社内のどのスタッフが、どの領域が得意で、どれくらいのスキルレベルか。

さらには、どの要件以上は社内で対応できないなどの、社内リソースの把握までしておく必要があります。

やっぱり、やること覚えることいっぱいでディレクターも大変ですけどね！

頑張っていきましょう！