ホームページの仕組みや構造がわかる! ざっくり知っておくと便利な WEBの基礎知識

ここではホームページの仕組みや構造についてざっくりわかっていただけるようにご説明いたします。ホームページの仕組みや構造がわかっていると、ホームぺージ作成の際に「いまどの段階を進んでいるのか」が明確になります。ウェブ制作会社との「認識の行き違い」や「作業内容の不透明感」から生じる「時間の無駄」や「思わぬトラブル」を防ぐことができます。

そもそも「ホームページ」とは何なのか?

このページを最後までご覧いただき、少しでも知識を深めていただいて、ホームページ発注の際にお役立てていただければと思います。情報技術の世界に関しては「カタカナ語ばっかりで覚えにくい」とか「複雑な感じがする」という先入観が働くかと思いますが、それぞれのコンピュータ、ネットワーク、システム、企業がどのような働きをしているのか身近なものに例えて結び付けてご説明いたします。

 

ホームページの基礎知識

1.世界規模のパソコン同士のつながり「インターネット」
2.「ワールドワイドウェブ(WWW)」というサービス
3.WWWに掲載するための統一規格「HTTP」とその書式「HTML」
4.ウェブサーバーとウェブブラウザ
5.ウェブサーバーとドメインの関係
6.サーバー代・ドメイン代がかかる理由
7.ウェブサイト制作会社の仕事の範囲

最後に

 

ホームページの基礎知識

皆さんがご覧になっていらっしゃる「情報のまとまり」は実は「ホームページ」ではなく正しくは「ウェブサイト」と言います。ご存知でしたか?ウェブサイトとホームページはよく間違えて使われますが、ホームページは検索をかけてウェブサイトを見つけたときに「1番最初に表示されるウェブページ」を意味します。「TOPページ」とも言います。

発注側と制作側のこうした言葉の小さなニュアンスの違いにより、ウェブサイト発注時に行き違いが生じてしまい、二の足を踏んでしまうということは、しばしば起こります。 

今回はこうした行き違いからのロスを防ぐために、大まかなウェブサイトの全容について説明していきます。ご説明する前に、まずはそれを取り込む一番大きな枠「インターネット」の部分からお話しをしていきます。

  1. 世界規模のパソコン同士のつながり「インターネット」

    昔のパソコンは、ネットワーク(つながり)というものとは無縁でした。ファイルを転送するにも、印刷機からプリントアウトするにも、人がデータをフロッピーディスクに入れて持ち運ぶ必要がありました。共有の印刷機を使ってみんなが「プリントアウトしたい」と思ったら、みんなで印刷機の前に列をなし・・・・待つ。すべてがそんな感じでした。

     

    そこでパソコン同士がケーブルでつながってデータをやり取りできるように改良されました。パソコンがネットワークをつくることで、人間が行っていた「データ移動」「機材の共有」「順番待ち」はとても効率よく行えるようになったのです。

     

    やがて、ケーブルだけではなく、電波(Wi-Fi・Bluetooth等)でもパソコン同士はつながり、それらはやがて地球規模でつながれるようになりました。これが現在のinternet「インターネット」(世界規模のネットワーク)です。

     

    インターネットには様々なサービスがあります。「メール」のような情報の送信・受信、「テレビ電話」のようなリアルタイムな情報のやり取り、「パソコンの時計」のような時刻情報の一致、…..などなど、私たちの要求に応じて何らかのデータ処理を行ってくれます。

     

    今や生活の上で、無くてはならないものとなりました。

  2. 「ワールドワイドウェブ(WWW)」というサービス

    インターネットという「世界規模のコンピュータ同士のつながり」を活かして、1つの文章データを作り上げれば、全世界のコンピュータでその文章を共有できるサービスが誕生しました。それが「ワールドワイドウェブ(Word Wide Web=WWW)」です

    図1


    Web=ウェブ
    とは蜘蛛の巣を意味し、文章同士が世界規模で張り巡らされた蜘蛛の巣のようにつながっている様子からその名前がつけられました。WWWは無数の「文章データのまとまり」から出来上がっていますが、ある1箇所のまとまり(正確にはそのまとまりを配信するシステムやコンピュータを含む一式)=site=サイトの事をウェブサイトといいます。ウェブサイトとは文章データのまとまりなので、その中の1つを指すときはウェブページと呼びます。

     

     

    今ご覧いただいているこのページ「ウィザップウェブサイト」の中にある「ウェブページの1つ」です。
    図1の通りホームページとはウェブサイトを見たときに「1番最初に表示されるウェブページ」を意味します。「TOPページ」とも言われます。今まで「ホームページ」と制作会社に伝えていらっしゃった方は、明日からこっそり「ウェブサイト」と切り替えてみてくださいね!^^

     

    ここからはそんなウェブサイトの「中身」に迫っていきたいと思います。

  3. WWWに掲載するための統一規格「HTTP」とその書式「HTML」

    1つの文章データを全世界で共有するには、大きな問題がありました。それは作られる文章の言語が「全部バラバラ」だということです。もしも文章を言語別に作成していたら、情報量が莫大になり、作成するのにも修正するのにも言語毎の文章を作成しなくてはならず、むちゃくちゃな時間と労力を費やします。

     

    そこで、全世界で共通の統一規格(プロトコル)ができました。その名も「HTTP=ハイパーテキスト トランスファー プロトコル」といいます。直訳すると「関連付けされた文章を転送するための統一基準」となります。hypertext=ハイパーテキストとはコンピュータの画面に表示する文章で、その中に別の文章や画像、音等のデータリンクが設定されている。そしてそのリンクをたどって別の情報(データ)を呼び出せるようにしてある文章です。(こんな風に別のページに飛ばすことができます。)

    この仕組み自体は、1969年頃(まだコンピュータがネットワーク化していない時代)には既に存在したのですが、これらをネットワークで転送するための規格が無かったので、WWWサービスではどんな言語でも、1つの規格に従ってネットワーク上で見られるようにしたということなのです。

    その規格、「HTML=ハイパーテキスト マークアップ ランゲージ」といいます。直訳すると「関連付けされた文章を組み指定する言語」となります。「言語」とは「ある法則にのっとった書式」という意味ですので、HTMLという名前で世界基準で統一された書式があるというわけですね。

    どんなものかというとこんなものです。

     

    図2 HTML表示と通常の表示では見た目がこんなに違います。

    マークアップとは印刷でも使う言葉で、組み指定の事を言います。組指定とは印刷物を作る際、1枚の紙の中に、各記事や写真等を、どこに・どういう配置で印刷するのか、使用する文字は、どういうフォントにするのか等を決定する作業です。

    HTML言語では、「タグ」と呼ばれる予約語を、文章ファイルの中に埋め込むことで、見栄えや表示する動画ファイル等を指定するようになっています。

    図3 こうしてみると、HTMLはパソコンの画面上に自由に文章を表現をするための、基礎部分であり「骨組みである」と言えます。

    ■HTMLの代表的なタグとしては

    <HTML> HTMLで書かれたページであることを表す
    <HEAD> ページのヘッダーであることを表す
    <TITLE> ページのタイトルを表す
    <BODY> ページの本文を表す
    <P>    段落を表す
    <IMG>  画像を表す
    <H1>    見出しを表す

    などがあります。

    ウェブサイト制作会社の技術者達はこのHTMLタグを熟知しており、通常の文章に加えてタグの部分も作成・修正します。印刷物とは違い、作成したデザイン全てを「HTML」という統一規格に落とし込まなければなりません。当然写真やイラストに関しても全て「HTML」化していきます。1つの写真を画面の右から左に移すにも、写真の座標がどこになるのかをHTMLで記述したり、他ページへのリンクもHTMLで記述したりと、何かとHTMLに縛られます。

    HTMLは一度作成すると、なかなか容易に変更するというわけにはいきません。HTMLを構築中に「デザインを変更したい」と制作会社に頼んだところ、追加の請求を求められてもめ事になる…ということはよくありますが、それはHTMLの構造を変えるところに手間がかかるためなのです。

    次はどうしてウェブサイトが画面に表示されるのかという「仕組み」について迫っていきます。

  4. ウェブサーバーとウェブブラウザ

    ウェブサイトは、大きく2つの物があり、初めてパソコン画面上に情報を表示することが出来ます。

     

    それが

    ・サーバー(送り手)と呼ばれる「ウェブサーバー」
    ・クライアント(受け手)と呼ばれる「ウェブブラウザ」

     

    この二つが「HTMLを高速で処理」することで成り立っています。

    図4 ウェブブラウザは忙しい。一方ウェブサーバーはファイルを渡すだけ

    ウェブサーバー(送り手)とは
    「HTML」で作成したウェブサイトデータを保管しておくコンピューターです。(コンピューターなので、物理的には『ものすごくでっかい冷蔵庫のような形』をしています。)インターネットに繋がっていて、基本的にはブラウザ(受け手)「下さい」と言われたHTMLファイルを取り出し、HTTP規格に沿って渡すだけという簡単なお仕事をしています。それ以上のこともそれ以下のこともできないので、このサーバーコンピュータの中でデータを修正したり、特別な処理を施したりすることはできません。

     

    ブラウザ(受け手)とは
    パソコンのソフトウェア(パソコンを動作させるためのプログラムを記述したデータのまとまり)で、インターネット上のウェブサーバーにHTMLファイルを「下さい」と要求し、受け取ったHTMLファイルをものすごい速さで処理してウェブサイトをパソコン画面に展開します。とても頑張り屋さんです。ブラウザには以下のような種類があります。

    図5 様々なブラウザ

    ■Microsoft Edge (マイクロソフトエッジ)
    ■Microsoft Internet Explorer(マイクロインターネットエクスプローラー)
    ■Google chrome(グーグルクロム)
    ■Safari(サファリ)
    ■Firefox(ファイアフォックス)
    ■Opera(オペラ)

     

    ご覧の中に「聞いたことがある・見たことがある」というブラウザがあるかもしれません。ブラウザは皆さんがお使いのパソコンの中に最初から搭載されている場合が多いです。提供している会社はいろいろありますが、ブラウザの役割自体はほとんど一緒です。しかし、微妙に表現が違ったりするので、「Google chrome」では見れたのに「Safari」では見れないとか「Firefox」ではきれいに表示されているのに「Microsoft Internet Explorer」では変なところで文章が改行されている・・・・という違いもあります。

    品質にこだわる制作会社では、しっかりと、各種ブラウザでの表示を検証してからウェブサイトを公開してくれるので、そのあたりは打ち合わせの際に是非確認してみましょう。

    ウェブサーバー・ウェブブラウザどちらが欠けてもウェブサイトは成り立たない
    ウェブサーバーが、「欲しい」といわれたHTMLファイルをウェブブラウザに渡し、ウェブブラウザが受け取ったHTMLファイルを高速処理してパソコン画面に表現 ということが、皆さんの「たった1回のクリック」の後に起こっています。そんな非常に単純な仕組みで出来ているからこそ、どちらかが欠けても成り立ちません。。

     

    単純がゆえ、ウェブサイトは、環境が整えば、無限に増やすことが出来ます。無限に増えると、当然どこに誰のなんというウェブサイトがあるのかわからなくなっていきますよね。次はウェブサイトを管理していく仕組みについてご紹介します。

  5. ウェブサーバーとドメインの関係

    みなさんがお使いのコンピュータにはそれぞれ1つ1つ異なる番号「IP(アイ・ピー)アドレス」というものが割り振られています(『123.45.67.890』みたいなもの)。いわばコンピュータの「個人の顔」ですね。ネットワーク上で個人の顔を特定するためには「住所」の代わりになるものが必要です。それを「ドメイン」といいます(sksp.co.jpみたいなもの)。

     

     

    図6 ドメインとはインターネット上の住所

    ドメインは「単体のコンピューター」や、「複数コンピューターのネットワーク」に対して割り振る事もできます。(つまり、個人の住所としても団体の住所としてもつかえるというわけです!)この、ドメイン情報がないと、インターネット上で迷子になってしまうために、インターネット環境につながることは出来ません。

     

    先程ウェブサーバーは「HTMLで作成したウェブサイトデータを保管しておくコンピュータ」と説明しました。そこにも「IPアドレス」が割り振られています。当然サーバーコンピューターにも住所となる「ドメイン」が必要になってきます。

    どうしたらドメインを取得出来るのでしょう? 

    インターネット上のサーバーは見た目は1つでも、内部でそれぞれ「ウェブ用」「メール(受信)用」「メール(送信)用」等とサーバーが用途ごとに分かれています。当然、それぞれにIPアドレスがあり、中には「各サーバーのIPアドレス情報を紹介(管理)している」という「DNSサーバー」というものもあります。(ちょっとややこしいですが)それをICANNという団体が管理するDNSサーバー紐づけてもらう(ドメインを付加してもらう)ことによって、ドメインが取得できます。

    図8 ドメインの紐づけ方

    ICANNのDNSサーバー郡では 〇〇.jp・〇〇.com・〇〇co.jp・〇〇.ac.jp・・・・・。と、ドメイン情報とコンピューター(または複数コンピュータのネットワーク)のIPアドレスがツリー状に紐付いて管理されています。ドメインとIPアドレスを管理する機関を「レジストリ(企業)」と言います。このレジストリが、ツリー状のDNSサーバー群を管理しています。そこにドメイン登録するのが「レジストラ(企業)」です。

    図7 ドメインの管理構造

    ドメイン登録作業は、ICANN認定されたレジストラ(企業)のみ、取り扱うことが出来ます。レジストラ(企業)の中にはただドメインを登録するだけでなく、自社サービス契約と一緒にドメイン登録を行う企業もあります。ドメインの登録サービスを行う会社には下記のような種類があります。

    「ドメイン取得会社」(ドメインを登録するだけの会社)(お名前.com様,ムームードメイン様 等)
    「プロバイダ」(光回線サービス提供とドメインの登録をする会社)(OCN様,So-net様 等)
    「サーバーレンタル会社」(ウェブサーバーサービスとドメインの登録をする会社)(X-SERVER様,ロリポップ様 等)

    取得したドメインがどのように機能するのかというと、以下のようになります。

    図9 ドメインをつかってウェブサーバーのIPアドレスを特定するまで(その間たった数秒)

    先程紹介したブラウザが、「www.sksp.co.jp(ウィザップ)さんのウェブサーバーってどれ?」とレジストラ(企業)の「※ローカル(ネットワークの外側にある)DNSサーバーに問い合わせると「123.45.67.890だよ~」と紹介してくれて、インターネット経由でウィザップウェブサーバーに接続することが出来ます。

    ※ローカルDNSサーバーとは、「レジストラ」企業がDNSサーバーネットワークの外側で保有しているもので、レジストリ(企業)の動かしているDNSのサーバー郡に対してドメインの検索をかけるためのサーバーです。なぜネットワークの外側にあるのかというと、検索と公開を同時に行ってしまうと、回線にとても負荷がかかるので、ネットワーク上では「データの管理」をローカルでは「検索」を機能させることで負荷を減らしています。

    レジストラの企業(ドメイン登録をしてくださる企業)さんはまるで「ネットの市役所」みたいな感じです。インターネット上での「住民登録」が完了し、ドメインを取得したら、いざインターネット社会で活動開始!ということになります。

  6. サーバー代・ドメイン代がかかる理由

    さて、よく聞く「サーバー代」や「ドメイン代」についてですが、ウェブサービスを利用する上では必ずかかる費用です。24時間ウェブサイトが表示出来なければ、あまりウェブサービスの意味はありませんよね。(世界には時差もありますし・・・・。)こうしたウェブサーバーやDNSサーバー(ローカルも含めて)は、サービスを保証するコンピューターなので絶対にダウンさせてはいけません!

     

    しかし、コンピューターというものは金属の塊であり、月日の経過とともに劣化してきます。当然部品を交換したり、新しくしたりする必要があります。精密機械ゆえに、機材費も高額で、データを新規で設定するにも人件費がかかります。ここに年間千~数千円程度のサーバー代やドメイン代(新規の場合は初期設定代も)が必要になってくるのです。サーバ費や・ドメイン費はいわば税金のようなものなのですね。

  7. ウェブサイト制作会社の仕事の範囲

    さて、ここまでが私たちの利用するウェブサイトの「基礎知識」になります。ウェブサイトがどのように私たちに提供されているのか、そしてどんなところに費用がかかっているのかということにつきましてなんとなーくご理解いただけましたか?

    ここまでを振り返って、ウェブサイトの制作会社の仕事の範囲を明確にしてみます。

    ■1.ウェブサイトの見積もり
    ■2.ウェブサイトの企画・提案
    ■3.ウェブサイトのデザイン
    ■4.ウェブサイトのデータ構築(HTML・システム構築)
    ■5.サーバー契約・運用代行(お客様がサーバーレンタル会社と直接契約しても大丈夫です。しかし、更新が滞るとウェブサイトはストップします)
    ■6.ドメイン契約・運用代行(お客様がレジストラと直接ドメインを契約しても大丈夫です。しかし、更新が滞るとウェブサイトはストップします)
    ■7.ウェブサイトの運用
    ■8.ウェブサイトの保守・点検
    ■9.ウェブサイトのアクセスデータ解析
    ■10.今後のウェブサイト運用に関するコンサルティング

    このような部分を仕事として行っています。基本的にはウェブサーバーに詰め込む内容物を用意するところまでがサービスですが、お客様がサーバーもドメインも持っていらっしゃらない場合は、お客様に代わって用意するということも行います。また、サーバーが古い場合は、適正な機能や価格のサーバーへ切り替えをオススメすることもあります。

     

    ウィザップでは 7. 9. 10.に関しては、お客様の強いご要望があれば承っておりますが、基本的には行っておりません。

  8. 最後に

    何となくウェブサイトがどんなものかお分かりいただけましたでしょうか? この記事を一読された方は、もう明日から「ホームページ」という言葉をむやみに使わなくなるでしょう!^^

    この記事の著者も、ウェブサイトについては最初全く知識ゼロから学び始めました。この記事は、そんな知識ゼロの時に「こんな風に解釈することができればもっと早くウェブサイトについて理解できたのに…」という過去の経験からまとめようと思いました。

    ウェブサイトは、「文章データのまとまり」・・・・であり皆様の持っている「魅力」「ノウハウ」「思考」といったものを、世界に発信していく道具です。ウェブサイト制作会社が「勝手に制作」して「勝手に発信」するだけでは、良いものにはなっていきません。少しでも理解を深めていただき、うまく活用して良いサイトづくりにお役立ていただけたらと思います。

    もちろん、ウェブサイト作成に関してわからないことがありましたら、いつでも弊社にお尋ねくださいね。
    最後までお読みいただきありがとうございました。