前回は、「誰でもゼロからホームページを作成することができる」という概略を説明しました。
本来なら、すぐにウェブページを書き始めたいところですが、事前準備をしなければ、せっかくのホームページがめちゃくちゃな構造になり、訪れたユーザーが迷子になってしまいます。
これでは、多くの人に自分のホームページを見てもらうことができません。
ですので、最初にホームページの「設計図」を書いて全体の構造を把握します。
ホームページに必要なページを書き出してみる
キャンペーンサイトのようなLP（ランディングページ、単一ページのホームページ）ならともかく、ほとんどのホームページは複数のページで構成されていて、それぞれが互いにリンクしています。
「トップページに戻る」あるいは「Home」といった表示をご覧になったことがあるでしょう。その文字をクリックすると、閲覧していたページからホームページのトップへ移動することができます。
あるいは、ページ上部のメニューをクリックすれば、希望するページに移動することもできます。
このように、ユーザーが見たいページに自由に移動できるようにするには、事前にそのための「設計図」を用意して、それに沿ってページ作りをしていかなければなりません。
そこで、最初に作りたいホームページに必要なページを、メモ書きで良いですから書き出してみましょう。
企業やお店によって違いますが、最低限以下のページは必要かと思います。
- トップページ（会社またはお店の入り口や玄関、本で例えるなら表紙）
- 企業情報または会社概要
- 会社またはお店へのアクセス
- 個人情報保護方針（プライバシーポリシー）
- サイトマップ（ホームページ全体の目次のようなもの）
- お問い合わせ
これ以外に、会社やお店にあった商品紹介ページが必要です。規模によっては、商品のカテゴリーごとに紹介ページが必要になり、その数はけっこうな数になると思います。
必要なページが出尽くしたら、前回紹介したテキストエディタを使って、のちのちウェブページになる、ファイル名だけの空のファイルを作っておきます。
パソコンにローカルディレクトリ（フォルダ）を作ってファイルを管理
必要なウェブページのファイルを用意したら、それらの管理（保存）のしかたを、以下の図を例に説明します。ここでは、アパレルメーカーのホームページを想定して、ごくごく簡単にしてみました。
これを見て、「なんだか、パソコンのファイルマネージャー（Windowsならマイドキュメント）によく似ている」と思われるでしょう。
ホームページのファイル管理は、パソコン内でファイルを整理して管理することと同じようなものです。
なので、全てのページが出来上がり、サーバーにアップロードするまでは、パソコン内にホームページ用のフォルダを用意して、そこで管理するようにしましょう。
ホームページ作成では、フォルダのことを「ディレクトリ」と言います。そして、サーバーにアップロードしていない、パソコン内のディレクトリを「ローカルディレクトリ」と言います。
図の場合、左上「Home」ディレクトリが「ローカルディレクトリ」であり、サーバーにアップロードした際の「ルートディレクトリ」にあたります。
つまり、
パソコン内の「ローカルディレクトリ」＝サーバー上の「ルートディレクトリ」
ということです。
次に、各ファイルは、なんでも「Home」ディレクトリに放り込んでおけば良いというものではなく、整理してファイルを保存していきます。最低限、以下ルールに沿って管理しましょう。
- 画像ファイルやスタイルシートなど、HTML以外の特殊ファイルは、種類ごとにそれぞれひとつのディレクトリにまとめて保存します。
- 例の図で設定された「Shirts」「Jackets」「Pants」といったカテゴリーは、実際のホームページのカテゴリーになるので、わかりやすいディレクトリ名、かつなるべくなら小文字のアルファベット名にしておきます。
- 各ディレクトリ内に複数ファイルがある場合は、ディレクトリの目次となる「index.html」を作っておくと良いでしょう。
ディレクトリとURLの関係
では、ここで上記の図を、ホームページに置き換えて考えてみます。
ホームページには、URLというインターネット上の住所があります。例えば、図で想定したアパレルメーカーのURLを、
「https://www.myshop.com」
としましょう。
このうち、「https://」はプロトコルといい、インターネット上でのデータやり取りのための事前の取り決め・ルールのようなものです。httpsかhttpかの違いは、SSL化（暗号化通信）したホームページか否かの違いです。
次の「www.」はホスト名で、通信する際の特定の機器やサーバー（ホスト）を識別するための文字列で、World Wide Webを省略したものです。www.以外に自由に決められることができ、省略も可能です。
そして、「myshop.com」部分をドメインと言います。ドメインはまさにインターネット上の住所で、各ホームページの個別のアドレスになり、同じものは存在しません。
このドメインが、上記の図の「Home」、そしてサーバー上のルートディレクトリにあたります。
本来、ホームページのトップページのファイルは「index.html」ですので、URLは、
「https://www.myshop.com/index.html」
となるはずですが、最後の「/index.html」は省略できるように設定可能なため、社外向けにはここを省略して案内することができます。
各カテゴリーのトップページは第二階層（上図の右側）にあり、例として「shirts」カテゴリーのトップページを「index.html」とした場合、ドメインから以下のようなURLになります。
「https://www.myshop.com/shirts/index.html」
ルートディレクトリはドメイン名、第一階層はカテゴリー名（ディレクトリ名「shirts」）まで、その後が第二階層（カテゴリーのトップページ「index.html」）となります。ルートディレクトリから目的のページまでは、スラッシュで区切られています。
さらに、図では「Shirts」の右に「Mens」「Ladies」というファイルがありますが、それぞれで男性用シャツ、女性用シャツを紹介するページであれば、ここを「mens.html」「ladies.html」としておけば、ユーザーはこのページ内で目的の商品を探すことができるでしょう。
そして、「shirts」カテゴリーのトップページ「index.html」と同じディレクトリに保存します。この場合、「Mens」ページのURLは、
「https://www.myshop.com/shirts/mens.html」
になります。
ホームページのトップページも、カテゴリーのトップページも「index.html」なのでわかりにくいと思いますが、
ホームページのindex（第一階層） /カテゴリーのindex（第二階層） /各ページ
になっていると考えて下さい。それぞれの「index.html」は、URL上での表示を省略してしまうので、便宜的なものと考えてもらえれば良いでしょう。
上図のディレクトリがわかりにくいようであれば、以下のようにファイルをまとめていると理解すれば良いと思います。
ここまでのまとめ
誰でもホームページを作ることができると言いましたが、なんの準備もなく、いきなりウェブページを書いていくことなど誰もできません。今回の記事は、ホームページを作成するための準備段階です。
- ウェブサイトに必要なページを書き出してみる
- 書き出したページの構造を保管するディレクトリ（フォルダ）を用意してファイルを管理する
- ディレクトリとURLを照らし合わせてその構造を知る
このディレクトリとURLの関係をよく理解して、次に進みましょう。
コメント