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

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

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

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

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

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

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

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

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

Snip20180728_2.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.サーバーとドメインの仕組み

Webサイトを制作する上で最低限理解しておきたいことにサーバーとドメインの仕組みがあります。

基本的にWebサイトやシステムはサーバー上に置かれているため、制作したサイトを公開するにはサーバーを利用します。規模によりますが、サーバーをレンタルする場合や自社で運用するサーバーを利用する場合、最近ではAWSのようなクラウド型サービスもよく使われています。

また、ドメインWebサイトの住所です。制作したWebサイトが置かれているサーバーのIPアドレスを、人が識別しやすい文字列に変換してくれます。

ドメイン.png

サーバーの設定やドメインの取得と紐付け作業など、制作したサイトを公開する作業も単純ではありません。場合によってはサーバーのセキュリティ対策なども検討してなくてはなりません。

設定を担当するエンジニアと相談しながら、要件定義の段階でしっかりと決めておきましょう。

5.CMSの仕組み

CMSWebサイトを制作する上で理解しておきたいシステムです。CMSとはContent Management Systemの略であり、ブラウザなどからWebサイトの更新を可能にする仕組みを指します。

1番シンプルなWebサイトは、コーディングしたHTMLCSSなど一式をサーバーにアップロードしただけの静的なサイトです。しかし、この状態で情報を更新したい時には、コードを書き換えてファイルをサーバーにアップロードし直す手間が発生します。

ニュースや記事を日々更新していく必要があるサイトでは、一般的なブログサービスなどのようにブラウザ上で更新できると非常に便利です。CMSと呼ばれるシステムを導入することで、誰でも簡単にサイトの更新ができるようになります。

CMSは管理画面で登録したコンテンツ内容を自動的にサイトに反映させる動的なシステムとなり、システム自体を設計し組み込みをする必要があります。

代表的なCMSにWordpressやMovable Type 、Drupalなどがありますが、それぞれ機能などに違いがあり、エンジニアによっても扱えるシステムに限りがある可能性があります。CMSの導入を検討する際には、取り扱い可能なエンジニアがいるかについても考慮しながら進める必要があります。

参考:
ホームページ開設のハードルが一気に下がるcmsを導入しよう!あらかじめ知っておきたいメリット・デメリット|ferret [フェレット]

まとめ:まずは最低限の仕組みを覚えよう

現在では無料でホームページを作成できるサービスも増え、これらの作業をサービス上で設定できるため簡単なイメージもあります。

これらのサービスでは制作工程を簡略化し、知識がなくても誰でも扱えるよう設計されていますが、1から制作したり、リニューアルが必要だったりする場合、知識が必要です。

しっかりとしたサイトを制作したいという方は、最低限の仕組みを理解し実際に作っていく楽しみをぜひ知ってください。