概要

Webサイト(ウェブサイト)とは、共通するドメイン名のもとで公開され、リンクなどで相互につながったWebページや関連リソースの集合です。[1]

企業のコーポレートサイト、ECサイト、採用サイト、ニュースメディア、ブログなどもWebサイトの一種です。

Webサイトは、利用者がブラウザーからURLへアクセスし、WebサーバーからHTML、CSS、JavaScript、画像などのデータを受け取り、それをブラウザーが画面として表示することで閲覧できます。[2][3]

用語

読み方

分類

主な構成

閲覧方法

Webサイト

ウェブサイト

Web制作・サイト基礎

Webページ、画像、CSS、JavaScriptなど

WebブラウザーからURLへアクセス

Webサイトとは

複数のWebページや関連データをまとめたもの

MDNでは、Webサイトを、リンクでつながったWebページと関連するリソースの集合で、固有のドメイン名を共有するものと説明しています。[1]

例えば企業サイトであれば、次のようなページがひとつのWebサイトに含まれます。

  • トップページ
  • 会社概要
  • サービス紹介
  • 制作実績
  • お知らせ
  • 採用情報
  • お問い合わせ

それぞれは別のWebページですが、同じドメインやサイト構造のもとでつながり、ひとつのWebサイトを構成します。

WebページとWebサイトは同じではない

Webページは、ブラウザーで表示できる個々のページです。[1]

一方、WebサイトはWebページや関連するリソースをまとめた全体を指します。

例えば、

  • https://example.com/:トップページ
  • https://example.com/company/:会社概要ページ
  • https://example.com/contact/:お問い合わせページ

がある場合、それぞれはWebページであり、これらをまとめた example.com のサイト全体がWebサイトです。

なお、ページ数が少ないランディングページや、1つのHTMLで画面を切り替えるシングルページアプリケーション(SPA)のような構成もあります。Webサイトは「必ず複数のHTMLファイルで構成される」とは限りません。

日本語では「ホームページ」という言葉がWebサイト全体の意味で使われることもあります。一方、Webの用語としてのホームページは、サイトの入口となるページなどを指します。どちらの使い方も実際に存在するため、文脈に応じて使い分けると構造を理解しやすくなります。

Webサイトが表示される仕組み

URLをブラウザーで開く

Webサイトを見るとき、利用者はChrome、Safari、EdgeなどのWebブラウザーからURLへアクセスします。

URLは、Webページや画像など、インターネット上のリソースの場所を示すアドレスです。[4]

例えば、

https://www.example.com/company/

というURLには、通信方式を示す https、ドメイン名 www.example.com、ページの場所を表す /company/ などが含まれます。ドメイン名はURLの一部であり、URLとドメインは同じものではありません。[4]

DNSがアクセス先を調べる

ブラウザーがドメイン名へアクセスすると、DNS(Domain Name System)を利用して、接続すべきサーバーの情報を確認します。[2]

ドメイン名は人が扱いやすい文字列ですが、ネットワーク上ではサーバーへ接続するためにIPアドレスなどの情報が必要です。DNSは、その対応関係を解決する役割を持ちます。[2]

ブラウザーとWebサーバーがHTTPで通信する

ブラウザーはWebサーバーへリクエストを送り、Webサーバーは必要なデータをレスポンスとして返します。[2][5]

Webでこの通信に使われる基本的なプロトコルがHTTPです。[5] HTTPSでは、HTTPによる通信をTLSで保護し、通信内容を暗号化します。

ブラウザーがHTML・CSS・JavaScriptなどを表示する

Webページを表示するために、ブラウザーはHTML、CSS、JavaScript、画像など複数のファイルを受け取り、画面として組み立てます。[3]

主な役割は次のとおりです。

技術

主な役割

HTML

ページの内容や構造を定義する

CSS

色、文字、余白、レイアウトなど見た目を指定する

JavaScript

操作に応じた処理や動的な動作を実装する

画像・動画など

コンテンツとして表示する素材

HTMLはWebの最も基本的な構成要素であり、Webページのコンテンツを記述し、定義します。[6]

なお、すべてのWebサイトがこの3つをすべて使うとは限りません。HTMLだけで構成されたページもあり、JavaScriptを使わないサイトも存在します。

Webサイトを構成する主な要素

ドメイン

ドメインは、Webサイトへアクセスするための名前として使われます。

例えば example.com のような文字列です。

Webサイトのブランドや企業名と合わせて独自ドメインを取得し、Webサーバーやクラウドサービスへ接続して利用することがあります。

Webサーバー・ホスティング

Webサイトのファイルや、Webアプリケーションを動かす環境を配置し、ブラウザーからのリクエストに応答するのがWebサーバーです。[7]

実際のWebサイトでは、レンタルサーバー、クラウド、ホスティングサービス、CDNなど、複数の仕組みを組み合わせることがあります。

ノーコードWeb制作サービスやECプラットフォームのように、利用者がWebサーバーを直接管理しなくてもサイトを公開できるサービスもあります。

Webページ・コンテンツ

Webサイトの価値を決める中心は、ユーザーが見るWebページとそのコンテンツです。

文章、画像、動画、商品情報、会社情報、問い合わせフォームなど、目的に応じた情報をWebページとして設計します。

企業サイトであれば、会社情報やサービス内容を分かりやすく伝えることが重要です。ECサイトであれば、商品情報、購入導線、決済などが必要になります。

CMS

継続的にページや記事を更新するWebサイトでは、CMS(コンテンツ管理システム)を利用することがあります。

WordPress、Shopify、Studioなど、目的や構築方法の異なるさまざまなCMS・Web制作プラットフォームがあります。

CMSを使わず、HTMLファイルや静的サイトジェネレーターなどでWebサイトを制作することもできます。Webサイトを作るためにCMSが必須というわけではありません。

静的Webサイトと動的Webサイト

Webサイトは仕組みの違いから、静的・動的という言葉で説明されることがあります。

静的Webサイト

静的Webサイトでは、あらかじめ生成されたHTMLなどのファイルを、リクエストに応じて配信する構成が基本です。

会社案内、ランディングページ、更新頻度の低いサイトなどでは、静的な構成が使われることがあります。

ただし、静的サイトでもJavaScriptを利用して外部APIから情報を取得するなど、ブラウザー上で動的な処理を行うことはできます。

動的Webサイト

動的Webサイトでは、アクセス時の条件やデータベースの内容などに応じて、サーバー側やアプリケーション側で表示内容を生成する構成があります。

CMS、会員サイト、ECサイト、Webアプリケーションなどでは、動的な仕組みが多く利用されます。

現在のWebサイトは、事前生成、サーバーでの生成、ブラウザー上でのJavaScript実行、APIからのデータ取得などを組み合わせることが多く、「静的」「動的」のどちらかだけで単純に分類できない構成もあります。

Webサイトを制作するときに考えること

目的とユーザーを決める

Webサイトは、見た目を作るだけでは目的を達成できません。

例えば、

  • 会社の信頼性を伝える
  • 商品を販売する
  • 採用応募を増やす
  • 問い合わせを獲得する
  • 情報を継続的に発信する

など、サイトによって目的が異なります。

目的と利用者を整理したうえで、必要なページ、コンテンツ、導線、機能を決めます。

スマートフォンを含むさまざまな環境で使えるようにする

Webサイトは、PCだけでなく、スマートフォン、タブレットなどさまざまな端末から閲覧されます。

画面サイズに合わせてレイアウトを調整するレスポンシブWebデザインなどを利用し、複数の環境で情報を利用しやすい状態にすることが一般的です。

アクセシビリティを考える

Webアクセシビリティは、障害の有無などにかかわらず、できるだけ多くの人がWebサイトやWebサービスを利用できるように設計・開発する考え方です。[8]

W3CのWeb Accessibility Initiative(WAI)は、適切に設計・実装されたWebサイトやWebツールは、障害のある人も利用できると説明しています。[8]

見出し構造、代替テキスト、キーボード操作、色のコントラストなど、制作段階からアクセシビリティを考慮することが重要です。

公開後の運用・保守も必要

Webサイトは公開して終わりではありません。

サイトの種類に応じて、次のような運用が必要になります。

  • 情報の更新
  • CMSやシステムの更新
  • セキュリティ対応
  • バックアップ
  • アクセス解析
  • SEO改善
  • フォームやリンクの動作確認
  • サーバー・ドメイン・TLS証明書の管理

利用するサービスによって、サイト運営者が管理する範囲は異なります。

Webサイトと検索エンジンは別のもの

GoogleやBingなどの検索エンジンは、Web上に存在するWebサイトやWebページを探すためのサービスです。[1]

Webサイトそのものと検索エンジンは別の仕組みです。

Webサイトを公開しただけで、必ず検索結果の上位に表示されるわけではありません。検索エンジンがページを発見・理解できる状態にしたうえで、ユーザーに役立つコンテンツやサイト構造を継続的に改善する必要があります。

Contact us

『ホームページ制作の相談をしたい』『もっとたくさん商品を売りたい』等、ご要望をお伝えくださいませ。

疑問に思っていること、お困りごと、具体的な内容が未定でも、まずはお気軽にご相談くださいませ。