市場価値診断ならミイダス!

Webディレクターの基礎知識!最低限知っておきたいWebの仕組み

これからWebディレクターを目指している人、Webディレクターになって間もない人向け。

Webディレクターの仕事は市場調査・企画・提案・制作進行・検品・納品・スケジュール管理・予算管理…などなど、非常に仕事の幅が広く、何から覚えたら良いか分からないですよね、、。。

僕も31歳のときに未経験からWebディレクターになったのでその気持がよくわかります。

Webディレクター初心者の方は、まずはWebサイトがどのような仕組みでできているのか?をおさえておくと仕事の理解が早くなります。

今回は、Webディレクターとして最低限知っておきたいWebの基礎知識を紹介します。

Webディレクターの基礎知識!最低限知っておきたいWebの仕組み

【Webディレクターの基礎知識1】Webサイトとは

Webサイトとは、一つのドメイン内にあるWebページの集まりです。

企業のコーポレートサイト、ECサイト、個人ブログなどはすべてWebサイトです。

※Webとは、世界中のWeb文書(Webページ)をハイパーリンクで相互に結びつける仕組みです。蜘蛛の巣(spiderweb)に由来します。Webサイトのアドレスの「www」はWorld Wide Web(世界規模の蜘蛛の巣)という意味です。

Webサイトとホームページの違い

Webサイトもホームページもほとんど同じ意味で使われます。

ホームページは次の意味で使われます。

  1. 企業、または、個人のWebサイト
  2. Webサイトのトップページのこと
  3. ブラウザを立ち上げたときに最初に表示されるWebページのこと

「ホームページ」といった場合にどれを指しているのか、認識合わせをしっかりしましょう。

【Webディレクターの基礎知識2】Webサイトの基本

WebページはHTMLでできている

普段見ているWebページのほとんどはHTML言語で作られています。

HTMLはHyperText Markup Languageの略で、ハイパーなテキストという意味です。

そして、ハイパーなテキストとはハイパーリンクを埋め込んで複数のHTML文書を結びつけることができる単なるテキストを超えたテキストという意味になります。

HTMLはタグを使ってWebページの骨組みを作る言語です。

また、CSSでWebページのレイアウトやデザインなどの装飾を、JavaScriptで画像の切り替え、タップすると反応するボタンなどのWebページに動きをつけることができます。

  • HTML …ページの骨組みを作る
  • CSS …レイアウトやデザインなどの装飾をする
  • JavaScript …ページに動きをつける

Google ChromeやSafariなどのブラウザは、サーバーに保管されたHTMLファイルを読み込むことで、書かれたコードを人が読めるように変換します。

こうしてユーザーはWebページを見ているのです。

※ブラウザで右クリックして「ページのソースを表示」を選択すると、今見ているWebページのHTMLコードを確認できます。

フロントエンドとバックエンド

Webサイトを作るときはフロントエンドとバックエンドで専門分野が分かれます。

  • フロントエンド …Webページの見える部分に関する技術
  • バックエンド …Webページの見えないサーバーやデータベースに関する技術

フロントエンドはWebページのユーザーが目に見える部分に関する技術です。
HTMLでページの骨組みを作り、CSSでデザインを調整し、JavaScriptで動きをつけます。
フロントエンドエンジニアの専門分野です。

バックエンドは、Webページのユーザーが目に見えないサーバーやデータベースに関する技術です。
検索機能、会員サイトのログイン機能など、サーバーやデータベースを連携してWebページの表示を切り替えます。
バックエンドエンジニアの専門分野です。

サーバーとドメイン

Webサイトを公開するにはサーバーとドメインが必要です。

サーバーは土地、ドメインは住所にあたるものです。

  • サーバー …Webサイトやシステムを保管する場所
  • ドメイン …Webサイトがある場所を表す文字列

サーバーは、Webサイトやシステムを保管する場所です。
自社サーバー、レンタルサーバー、クラウドサーバー(AWSなど)などを利用します。

ドメインは、Webサイトが置かれているサーバーの住所(IPアドレス)を、人が分かりやすいように文字列で表したものです。

  • IPアドレス(12.345.678.912) → ドメイン(sample.com)

実務では、Webサイトを新規で立ち上げる際に、サーバー要件やドメイン名などの要件を決めて、サーバー契約、ドメイン取得、サーバーとドメインの紐付けを行います。
この辺の設定はインフラエンジニアの専門領域になります。

CMS

CMSはブラウザでWebサイトを簡単に更新できるシステムです。

CMSを利用することで、ブログ記事や、ニュース記事、簡単な文字修正、画像の差し替えなどを、専門の技術者に依頼せずに自分で更新できます。
運用が簡単で、外注コストも減らせるメリットがあります。

通常、Webサイトは、Webページに表示したい内容のHTMLファイル一式をサーバーにアップロードしておきます(これを「静的サイト」と呼びます)。
ただし、変更があれば、その都度ソースコードを書き換えてサーバーにアップロードする必要があります。
更新が面倒なのが欠点です。

そこでCMSの登場です。

CMSでは、管理画面でコンテンツを更新すると、更新部分が自動的にWebサイトに反映されます(これを動的サイトと呼びます)。
CMSの代表的なものはWordPressやMovable Typeなどがあります。

CMSは使うシステムごとに構築の仕方が異なるため、専門知識のあるエンジニアに依頼することが一般的です。

まとめ

Webの基本についてイメージは掴めましたか?

今回紹介した内容は、Webの仕事の土台となる基本知識なのでしっかりおさえておいてくださいね。

さいごに、このページのまとめです。

  • Webサイトとは、一つのドメイン内にあるWebページの集まり
  • Webサイトもホームページもほとんど同じ意味で使われる
  • WebページはHTMLでできている
  • HTMLはページの骨組みを作る
  • CSSはページのレイアウトやデザインなどの装飾をする
  • JavaScriptはページに動きをつける
  • フロントエンドはWebページの見える部分に関する技術
  • バックエンドはWebページの見えないサーバーやデータベースに関する技術
  • サーバーはWebサイトやシステムを保管する場所
  • ドメインはWebサイトがある場所を表す文字列
  • CMSはブラウザでWebサイトを簡単に更新できるシステム

Webディレクターになるための勉強方法についてはこちらにまとめています。
»Webディレクターになるための勉強法