そもそもWEBサイト/ホームページ/WEBシステムを「作成/利用する」とは?

目次

「WEBサイト」と「ホームページ」

WEBサイト/ホームページとは、簡単に言えば
サーバーに置かれた「HTML・CSS・画像・プログラムなどのデータの集合体のことです。

ユーザーは、それをブラウザ(Chrome/Safari)で読み込み、表示されたものを閲覧しています。

「WEBサイト」と「ホームページ」は、よく混同されますが、本来の意味には明確な違いがあります。
ただし、日本と英語圏での使われ方にもズレがあるため、そのズレも理解しておくとスムーズです。

本来の定義(技術的・英語圏基準)

WEBサイト

複数のページで構成される
情報の集合体(=サイト全体)

ホームページ

WEBサイトのトップページのこと。
入り口ページ

例えるなら…

  • WEBサイト:建物全体
  • ホームページ:そのビルのエントランス or 受付ロビー

トップページを閲覧するなら、ナビゲーションからHOMEを無意識に探すんでは?

日本での使われ方の違い(誤用を含む一般認識)

実際、多くの日本人は「ホームページ=WEBサイト」と理解しています。

「ホームページ」が日本でWEBサイト全体を指す言葉として普及したのは、90年代のインターネット黎明期に、大手企業やプロバイダによる広告戦略・初心者向け表現が大きく影響しています。

現在でも、検索エンジンの検索ボリュームを見ると「ホームページ 作成」や「ホームページ 制作」といったキーワードの方が多く検索されておます。

実質的には「ホームページ」と「WEBサイト」は同義語として使われているのが日本語としての一般的な現状ではないでしょうか。

基本構造(仕組み)

STEP
サーバーにデータを置く

サーバーとは、24時間365日起動してネットに繋がってる外付けのストレージ兼PC

STEP
ドメインと接続させる

ドメインとは、サーバーという格納庫に割り当てる住所

◯◯.com◯◯.jp 、などの事。

STEP
検索エンジンにインデックスされる

インデックスとは、GoogleやYahooで探せるようにする

※基本は「拒否しない限り自動的にインデックスされる」

STEP
ブラウザで発見・表示される

ChromeやSafariなどのブラウザでドメインを入力すると、そのサーバーにあるデータが表示される。

サーバーに置かれたデータとは何か?

「サーバーに置かれたデータって何?」と疑問に思う人もいるかもしれません。
実際に置かれているのは、HTMLやCSSと呼ばれるテキストファイル、そして画像やプログラムなどのデータです。

HTMLCSSによって、文字やレイアウトが整い、Webページとしての中身・見た目が構成されます。

以下に、HTML/CSSがどんなものかをほんの少しだけ紹介しておきます。
「こんなものがあるのか」程度で構いません。読み飛ばしても問題ありません。

このサイトでは、こうした技術的な組み方自体を深く解説していくわけではありません。

HTMLとは?

HTMLとは、Webページの構造や内容(見出し・文章・画像など)を記述するための言語です。
ブラウザがHTMLを読み取り、ページの表示や配置を決めています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>こんにちは!</h1>
    <p>これはHTMLのサンプルです。</p>
    <a href="https://example.com">リンクはこちら</a>
  </body>
</html>
  • <!DOCTYPE html> … これは「HTMLですよ」と宣言する
  • <html> … 全体のスタート
  • <head> … 情報(タイトル、文字コードなど)
  • <body> … 実際に表示される部分(見出し・本文・リンクなど)
  • <h1> … 見出し(タイトル)
  • <p> … 段落(文章のかたまり)
  • <a href=""> … リンク

CSSとは?

CSSとは、Webページの見た目やデザイン(色・文字サイズ・余白など)を指定する言語です。
HTMLで作った構造にスタイル(装飾)を加える役割を持っています。

body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
  padding: 40px;
}

h1 {
  color: #222;
  font-size: 32px;
  margin-bottom: 20px;
}

p {
  color: #555;
  font-size: 18px;
  line-height: 1.6;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
  • body … 全体の背景色や文字の種類、余白
  • h1 … 見出しの色・サイズ・余白
  • p … 本文の色・文字サイズ・行間
  • a… リンクの色と装飾
  • a:hover… マウスが乗ったときの動作(装飾を変える)

そこに「プログラム」を組み込むと?

  • お問い合わせフォーム
  • 商品の注文・カートシステム
  • クレジットカード決済(Stripe、PayPalなど)
  • 会員登録/ログイン管理
  • 動画投稿・閲覧・コメント(YouTubeのようなシステムも可能)

といった「双方向の仕組み」が追加され、
WEBサイトは“閲覧されるだけの情報”から“ユーザーが操作できる機能”へと進化します。

資本さえあれば何でも構築できる

YouTubeやAmazonのようなWEBシステムも、
構造的には「データ+プログラム」がサーバー上にあるだけです。

  • 動画投稿/閲覧機能
  • 商品の在庫管理/レコメンド機能
  • SNSの投稿/いいね/シェア機能

…これらすべて、「どのようなプログラムをどう動かすか」で構成されています。

WEBサイト/ホームページの種類

よく見かける以下のような分類は、制作会社が営業や提案を円滑に進めるために使う分類名です。

個人が制作する際には、「使用用途/目的/利用方法」に応じた必要ページがあると考えればいいだけです。

テンプレートを探したり、外注時にイメージ共有するためには役立つ言葉です。

「用語 → 意味」が一目でわかるように下記にまとめておきます。

用語意味
コーポレートサイト会社全体を紹介するサイト(会社概要・事業内容・実績など)
ブランドサイトブランドの世界観・イメージ・ストーリーを伝えるサイト
サービスサイト商品・サービスの説明や導入メリットを詳しく伝えるサイト
ECサイト商品を販売する通販サイト(カート・決済機能あり)
LP
(ランディングページ)
1ページで完結し、申込み・購入などを狙う広告用ページ
ブログ時系列で記事を蓄積・表示するためのページ構造のサイト
キャンペーンサイト期間限定のプロモーションやイベントの特設サイト
プロジェクトサイト単発または期間限定の企画・プロジェクト専用の紹介サイト
採用サイト
リクルートサイト
企業の採用情報をまとめ、応募者に向けた情報を提供するサイト
オウンドメディア企業や個人が運営するブログ・コラム中心の情報発信サイト
ポートフォリオサイト作品・実績・スキルをまとめた個人や制作チームの紹介サイト

下記リンクから、サイト制作時にまとめるべき「ページ構成/掲載内容」の一覧を見て頂ければ。
これらがパッケージとしての名称だと理解出来ると思います。


どう作るのか?

結論から言えば、実際に作ってみるのが一番早いです。

いまは無料で試せる環境が整っており、実験的にサイトを作ることも可能です。

たとえば下記の「WIX」というサービスでは、
サーバーやドメインの仕組みをいったん気にせず、
あらかじめ用意されたテンプレートを使って、誰でも簡単にサイトを構築できます。

  • URLをコピーしました!

著者情報

目次