インターネットを使い、パソコンやスマホでニュースや調べ物をする時に見ているページの殆どがHTMLファイルと呼ばれるタグの集まりで記載されています。内部的にはPHPやJavaなどのプログラム言語で作られていたりしますが、最終的にはHTMLで書き出された文字情報や画像がブラウザに表示された結果を僕らは見ています。ブラウザで見るページだけでなく、昨今はアプリでHTML（5）が使用されているものもあります。アプリの場合はまた特殊なので本サイトでは扱いません。

HTMLを覚えることで自分独自のオリジナルWebサイトを作成することができますが、実はそう難しいものではありません。覚えなければならない細かな事は沢山あるのですが技術的な難易度は低く、言ってしまえばただの文字の集まりです。プログラムのように変数/関数などの概念もなく、ただただ『文字を綺麗に見せる』だけの作業です。

このサイトでは最終的に自分でWebサイトを作れるようになるためのノウハウを記載しています。基礎的なものから、最終的にWordpressを使用したCMSの構築までを記載予定です。

まず初めにWebとはどのような仕組みなのか、HTMLはどういう役割なのかを超簡単に記載したいと思います。基本的にWebデザイナーには不要な知識なため、かなり簡素化しています。更に詳しく知りたい方は専門書を探してみてください。

WebページはどこかのPC（サーバー）に置いてあるデータを読み込んでいる

基本的にインターネットの仕組みは『通信』と『サーバー』で構成されているので自宅のPCをサーバーとして公開することも可能です。ただしその場合は高速な通信回線と結構な電気代を必要とするので特殊な場合（社内ネットワークや趣味）を除いてサーバーを月額でレンタルする事になります。

厳密に言えばPC（色々できるコンピュータ）ではなくサーバーと呼ばれる機械のHDD（またはSSD）に保存されたデータを読み込んでいます。色々な人がインターネットでアクセスするための専用のコンピュータでPCとは違うOSが内蔵されていますが基本的には同じようなものです。

Webページはサーバーと呼ばれるHTMLファイルを設置する場所が必要になるので、インターネットで見ているWebページは必ず誰かのサーバーに接続してデータを見ていることになります。サーバーはHTML専用なわけではなく、あらゆるデータを保存し、外部からアクセスするものです。PHPなどで作られたプログラムファイルを実行する機能もサーバーに含まれます。

このようにWebサイトを作る場合は『サーバーにファイルをアップする』という事を覚える必要があります。今は便利なアプリがあるので、普段PCでテキストファイルや画像ファイルを扱うのと同じように直感的に操作が可能です。

自宅のPCをサーバーにすることもできる

基本的にインターネットの仕組みは『通信』と『サーバー』で構成されているので自宅のPCをサーバーとして公開することも可能です。ただしその場合は高速な通信回線と結構な電気代を必要とするので特殊な場合（社内ネットワークや趣味）を除いてサーバーを月額でレンタルする事になります。

仮想サーバーと呼ばれるテスト環境を作れる

Win・Mac共に仮想サーバーと呼ばれる環境を自分のPC内に構築できます。これは通常のサーバーと全く同じ環境をPC内に作ることができ、http://localhost:8888/などちょっと特殊なドメイン（URL）になってしまいますが本番と同様にプレビューができます。Web制作では必ずと言っていいほどテスト環境で開発を行うので仮想サーバーのことはぜひ覚えておいて下さい。 なお、特に何も設定しない場合は仮想サーバーへアクセスできるのは本人だけになります。

ドメインと呼ばれるURL（住所）でサーバーのファイルにアクセス

ドメインとは◯◯◯.comなどインターネットで調べ物をしている時にブラウザの上部バーに表示されるアルファベットの羅列です。これは住所のようなもので◯◯◯の箇所を好きな文字で作成することができます。独自に作る方法もあるのですが普通はお名前ドットコムやムームードメインといったドメイン取得代行サービスお金を払って管理の代行をしてもらいます。

サーバーは初期状態では何のドメインも持っていません。『◯◯◯.comへアクセスしたら僕のサーバーのファイルにアクセスしてね！』と全世界に対して告知します。ドメインを取得したら自分のサーバーの場所を設定する必要が出てくることを覚えておいてください。SEOとしても重要な要素になってくるのでドメインというワードを覚えることは必須要素です。

ドメイン名の簡単な説明

まずドメインの簡単な説明を。「◯◯◯.com」や「◯◯◯.jp」を良く見かけると思います。◯◯◯.△△の全てをドメイン名と呼びます。◯◯◯はセカンドレベルドメイン、△△はトップレベルドメインと呼ばれますが別に覚えなくても良いです。重要なのは◯◯◯は自分で好きな文字を付けられて、△△は世界のお偉いさんが決めた文字になります。△△の部分は変えられないということです。

ドメインは世界に1つだけしか存在できない

◯◯◯.comの◯◯◯の部分は好きにつけることが出来るのですが『世界中で速いもの勝ち』なのです。企業名のドメインを取得しようと思っても数年前にどこかの誰かが取得してしまっている事が多々あります。 昔流行ったのですが企業のドメイン名を先に入手して、後に大金で売買するという方々が多くいました。

.comや.jpなどトップレベルドメインの意味

その殆どは「国を示した名称」です。.comのように商用を表すcommercialの意味のトップレベルドメインもあり、考え方としては『国名、または用途』のどちらかと思えば良いと思います。

ドメインを作る際にトップレベルドメインをまず選ぶことになりますが、特にこだわりがないのであれば.com、または.jpでよろしいと思います。年間費がかかるので安く済ませたいのであれば.netや.infoなどもオススメです。中には『.co.jp』がありますが、これは法人用になるので個人の場合は取得できません。

ドメイン選びでひとつ注意することがあります。それは「廃止されるトップレベルドメイン」があるということ。実際に廃止された事があるのですが稀ではあります。メジャーなものであればまず廃止されることは無いのですが、日本では誰も使っていないような他国のトップレベルドメインは避けたほうが良いでしょう。

Webサイトは家造りに似ている

家を作りたい人がいるとします。その家を作りたい人がクライアントで、家を実際に作るのがエンジニアである貴方です。

新たな家を作る場合にはざっと下記のような必要なものがあります。

• 土地
• 水道や電気
• 骨組み
• 内装
• 外装
• 住所登録
• 家主の表札

これをWebサイト制作の項目に置き換えてみます。

記載順は家を作る手順はこんな感じかな？と適当です。だいたい上記のような感じでWebサイトは構成されています。
家造りと違うのはいくつかの項目を一人で担当することでしょうか。全てを一人で行うスーパーエンジニアもいますが、多くの場合はディレクター/SE/プログラマー/コーダー/デザイナー（写真も）/ライターに分かれて作業します。

ちなみにWeb制作で重要なポジションは？

主観も入っていますが下記のポジションが特に重要です。
①ディレクター
②ライター（文章）

基本的にこの2つの立場の人が凄腕ならばサイトは成功します。このサイトでは『コーダー』と呼ばれるポジションの知識を記載していくので話が脱線してしまうのですが、Webサイトはぶっちゃけディレクターとライターだけで完結できる時代になっています。そこに独自の機能が必要になった場合にプログラマーやSEの出番があり、コーダーとデザイナーは正直いらないパターンが増えています。

Webサイトは『伝えたいこと』があるから作ります。企業であれば商品を一般の人に知ってもらって買ってもらうため、個人であれば知識や情報を伝えるため。ディレクターがコンバージョン率の高いサイト構成を考え、ライターが視聴者に情報をより良く見せます。スマホ最適化の進んだ昨今ではまとめニュースのような縦型のシンプルなものを求められ、ド派手さや独自性のある見た目は二の次になっています。もちろんブランド力の高い企業のプロモーションサイトなどでは動的で凄そうなページの需要はありますが、一般的な多くの企業はWebサイトに何百万もの余計な予算を出しません。無料テンプレートの増えた今、コーダー/デザイナーの縮小化が進んでいるのでマルチスキルを持っていないエンジニアは焦る必要があるでしょう。
他業種で活用できるデザイナーは別として、HTML/CSSしかできないコーダーは危険です。なぜならやる気があれば3日で習得できるからです…。

最後に

色々と長くなりましたが、このサイトではHTMLをメインとしたWebサイト制作の方法を連載していきます。完成時期はわかりませんが時間をじっくりかけて完結させたいと思います。
記事内容としてはだいたい下記の予定。

• サイト構成を考える（ディレクション）
• デザインを作成（デザイナー）
• HTML（コーダー）
• CSS（コーダー）
• JavaScript（コーダー）
• WordPress（PG/コーダー）
  ※今はコーダーが兼任していることが多いですね

Webサイトを作るのは簡単です。気合を入れればHTMLとCSSを3日で覚えられるので1週間もあれば公開までいけます。
難しいのは『コンテンツの内容を考える事』です。HTMLを覚えようと思って挫折する人の多くは、このコンテンツを考えずに適当に作っているからだと思います。作りたいものを考え、図面に起こし、コーディングする…この一連の流れを踏まえれば覚えることは容易いと思います。
このサイトでは『野菜』を題材にして課題を考えていきますので、別のものに置き換えて勉強できるような形にしていきたいと思います。