「HTML」を学ぶ前にWebサイトについて知る

WebサイトはHTMLファイルを元にブラウザで表示されています。と言っても何だかよくわかりませんよね。サーバーやネットワークと聞くとさらに混乱してしまいます。

まずは、普段何気なく見ているWebサイトがどんな風に作られているのかを知っていきましょう。何となくイメージができるようになればOKです。

 

Webサイトとは何か

Webサイトの構造

好きなWebサイトをブラウザで開いてみてください。Yahoo! JAPANAmazon何でも大丈夫です。

この記事では、ブラウザはGoogle Chromeを使っています。

※テストサイトです

サイトが表示されたら、どこでもいいので右クリックします。するとメニューが表示されるので「ページのソースを表示」を選択します。

新しい画面が開き、文字や記号がたくさん並んでいるのがわかると思います。これが「HTML」です。

Webサイトは「HTML」という言語で書かれています。「HTML」とは何かを解説する前に、まずは「Webサイト」がどうやって作られていくのかを順番に紹介していきます。

Webサイトの構成を考える

1番最初はどんな内容の「Wwbサイト」を作るかを考えてみます。例えば、あなたは小さいカフェのオーナーだとします。お店の宣伝をしてお客さんにたくさん来てもらいたいと思っています。

そこで、

A子

Webサイトを作ってお店を宣伝しよう!

さて、Webサイトを作るには中身がないといけません。まずは1枚の紙の上にあなたがお客さんに伝えたいことを書き出してみましょう。

どんなお店か写真で見てもらいたいなぁ

A子

お店の見た目、外観をわかりやすく写真で紹介しましょう。紙の1番上にお店の写真を大きく載せて一緒にお店の名前も書きます。

次に、あなたのお店はカフェなので「飲み物」や「食べ物」が紹介したい商品になります。例としてA子さんのお店にはどんなメニューがあるでしょうか?

  • 飲み物:カフェラテ・モカ・エスプレッソetc.
  • 軽食:クロワッサン・サンドイッチetc.
  • スイーツ:ショートケーキ・パンケーキetc.

スイーツメニューだけでも↑の画像のようにたくさんあって全部書いたらかなりの場所がメニューで埋まってしまいます。

そこで「別の紙」にメニューを書けばいくら長くても大丈夫です。1枚目の紙に、2枚目の「メニュー」にジャンプできるように「リンク」と書いておきます。

そもそも、A子さんはどうしてカフェを開こうと思ったのでしょうか?

A子

森の中でくつろいでいるようなカフェを作るのが夢だったの

どうやらカフェを作ったコンセプトが色々あるようです。これも1枚目の紙では足りそうにありません。

「3枚目」の紙にA子さんの作りたかったカフェのお話しを書いてもらいましょう。

そういえばA子さんのお店はどこにあるのでしょうか?

お店の場所がわかりにくいかも・・・

A子

お店に行く方法を地図でわかりやく説明したいですね。これは「4枚目」の紙に書きましょう。

こんな感じで地図を載せて、それぞれの交通機関からのアクセス方法も追加しましょう。

これでWebサイトの全体像ができました。「1枚目」の紙には、お店の中の様子を写真で紹介して空白部分を埋めます。

完成したWebサイトの設計図を「ワイヤーフレーム」と言います。これをもとに「HTML」という言語を使ってWebサイトを作っていきます。

実際のサイトを見てみよう

今回参考にさせてもらったCafe de AURAさんのサイトを見てみましょう。


1枚目の紙に書いた「トップページ」です。


2枚目に書いた「メニューページ」


3枚目に書いた「コンセプトページ」


4枚目に書いた「アクセスページ」(店舗情報)

Webサイトがこうやって表示されるのは「HTML」がブラウザに「文章や画像を表示してください」と言ってくれたからです。

次の記事では「HTML」がどうやってWebサイトを表示させているのか解説していきます。

最後に

Webサイトの構造を、作る側に立って考えることは大切です。どうしたら見やすいか、使いやすいかユーザー(Webサイトを見ている人)目線でサイトをを作ることはプロもやっています。

「PHP」などのサーバーサイド言語でWEBサービスを作る場合でも同じです。詳しくは別の記事で紹介します。


使用したイラスト素材:無料イラスト【イラストAC】
初心者がPHPを学んでみた①|PHPで何ができるのか
HTMLの本を探す