駆け出しWebディレクターが覚えておくと仕事がしやすい基礎知識

更新日: 2018年08月10日

CMS・サイト制作

マイページにお気に入り

Webディレクターになりたての方が躓きやすいのが「Webサイトがどのような仕組みになっているか」という全体像を理解するのが難しい点です。

また規模の小さな組織であれば、急にWeb担当を兼任業務として任せられる場合もあるかもしれません。

「制作会社とのやり取りの窓口になったけれど、右も左もわからない」と、苦労している方もいるでしょう。

今回は、Web制作のディレクション業務において最低限知っておきたい基礎知識を紹介します。制作にあたって、Webサイトがどのように成り立っているかを理解しておきましょう。

全部理解できていますか？Webディレクター向け制作の基礎知識

1.HTMLとCSSでどのように構成されているか

みなさんが普段見ているWebページのほとんどはHTML（HyperText Markup Language）という言語で作られています。

Webページを閲覧するにはブラウザ(Chrome、Internet Exploreなど)が必要です。ブラウザは、HTMLという言語で書かれたコードを、画像やロゴ、レイアウトなどをWebサイトとして変換してくれるアプリケーションです。

ブラウザ上で右クリックをし「ページのソースを表示」という項目をクリックすると、閲覧中のページを構成するHTMLを確認できます。

HTMLでマークアップ（タグを使って構造や装飾などの要素を記すこと）していくことで、サイトの骨組みを作っていきます。また、HTMLと合わせてCSSという言語もWebサイトには重要な要素です。CSSでは見た目（デザイン）を調整していきます。

HTMLでWebページ骨組みを作り、CSSや文字サイズ色を指定したりレイアウトを組み立てたりします。Webサイト制作の基本は、HTMLとCSSをコーディングしていくことになります。

2.静的サイトと動的サイトの違い

Webサイトは静的と動的の2つに分類できます。

静的ページは何度アクセスしても同じ内容を表示します。HTMLで書かれている情報をそのまま表示するものです。一般的な企業のホームページなどは、いつ誰が見ても同じ情報が表示される静的ページであることが多いです。

動的ページは、状況に応じて表示が異なるページのことを指します。同じURLにアクセスしてもログイン済かどうかで表示内容が変わったり、フォームなどに入力した内容次第で表示される内容が変わると言った構造のページは動的ページと言われます。

検索キーワードを入力するとそれに応じたWebページの一覧を表示してくれるGoogleや、フォローしたアカウントの投稿を取得して一覧表示してくれるSNSなども動的なサイトです。

制作したいサイトに必要な機能を考え、単純な静的サイトなのか、複雑なプログラミングが必要な動的サイトなのか、しっかりと把握しておきましょう。

3.フロントエンドとバックエンドの違い

Webサイトを開発するのはエンジニアにお仕事をお願いすることになりますが、Webサイトに関わるエンジニアの業務はフロントエンドとバックエンドに分けることが可能です。

HTML、CSSは主にWebサイトのユーザーの目に触れる部分を担います。またJavascriptなどの言語を使うことで、どこかをクリックする際に表示内容を変えたり、マウスを当てると色が変えるなど、アニメーションとして表現も可能です。見た目の部分を担うのがフロントエンドと言われます。

また、ログイン機能のあるサイトや検索機能などがあるサイトの場合、裏側のデータベースと連携して表示を切り替えます。動的な機能を持ったサイトを作りたい場合には、サーバーやデータベースの知識が必要です。また、データベースと連携してWebページへの表示の切り替えをしたい場合、プログラミングができるバックエンドのエンジニアにお願いする必要が出てきます。

フロントエンドエンジニアや、HTMLのコーディングができるデザイナーは必ずしもバックエンドのデータ連携ができるとは限りません。また、逆も然りです。多くの場合、それぞれ別の人が担当することになります。

コーディングを担当するエンジニアと一括りにするのではなく、大まかにでもそれぞれの役割を認識しておきましょう。