Contact us
『ホームページ制作の相談をしたい』『もっとたくさん商品を売りたい』等、ご要望をお伝えくださいませ。
疑問に思っていること、お困りごと、具体的な内容が未定でも、まずはお気軽にご相談くださいませ。
Webサイト(ウェブサイト)とは、共通するドメイン名のもとで公開され、リンクなどで相互につながったWebページや関連リソースの集合です。[1]
企業のコーポレートサイト、ECサイト、採用サイト、ニュースメディア、ブログなどもWebサイトの一種です。
Webサイトは、利用者がブラウザーからURLへアクセスし、WebサーバーからHTML、CSS、JavaScript、画像などのデータを受け取り、それをブラウザーが画面として表示することで閲覧できます。[2][3]
用語 | 読み方 | 分類 | 主な構成 | 閲覧方法 |
|---|---|---|---|---|
Webサイト | ウェブサイト | Web制作・サイト基礎 | Webページ、画像、CSS、JavaScriptなど | WebブラウザーからURLへアクセス |
MDNでは、Webサイトを、リンクでつながったWebページと関連するリソースの集合で、固有のドメイン名を共有するものと説明しています。[1]
例えば企業サイトであれば、次のようなページがひとつの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サイトを見るとき、利用者はChrome、Safari、EdgeなどのWebブラウザーからURLへアクセスします。
URLは、Webページや画像など、インターネット上のリソースの場所を示すアドレスです。[4]
例えば、
https://www.example.com/company/
というURLには、通信方式を示す https、ドメイン名 www.example.com、ページの場所を表す /company/ などが含まれます。ドメイン名はURLの一部であり、URLとドメインは同じものではありません。[4]
ブラウザーがドメイン名へアクセスすると、DNS(Domain Name System)を利用して、接続すべきサーバーの情報を確認します。[2]
ドメイン名は人が扱いやすい文字列ですが、ネットワーク上ではサーバーへ接続するためにIPアドレスなどの情報が必要です。DNSは、その対応関係を解決する役割を持ちます。[2]
ブラウザーはWebサーバーへリクエストを送り、Webサーバーは必要なデータをレスポンスとして返します。[2][5]
Webでこの通信に使われる基本的なプロトコルがHTTPです。[5] HTTPSでは、HTTPによる通信をTLSで保護し、通信内容を暗号化します。
Webページを表示するために、ブラウザーはHTML、CSS、JavaScript、画像など複数のファイルを受け取り、画面として組み立てます。[3]
主な役割は次のとおりです。
技術 | 主な役割 |
|---|---|
HTML | ページの内容や構造を定義する |
CSS | 色、文字、余白、レイアウトなど見た目を指定する |
JavaScript | 操作に応じた処理や動的な動作を実装する |
画像・動画など | コンテンツとして表示する素材 |
HTMLはWebの最も基本的な構成要素であり、Webページのコンテンツを記述し、定義します。[6]
なお、すべてのWebサイトがこの3つをすべて使うとは限りません。HTMLだけで構成されたページもあり、JavaScriptを使わないサイトも存在します。
ドメインは、Webサイトへアクセスするための名前として使われます。
例えば example.com のような文字列です。
Webサイトのブランドや企業名と合わせて独自ドメインを取得し、Webサーバーやクラウドサービスへ接続して利用することがあります。
Webサイトのファイルや、Webアプリケーションを動かす環境を配置し、ブラウザーからのリクエストに応答するのがWebサーバーです。[7]
実際のWebサイトでは、レンタルサーバー、クラウド、ホスティングサービス、CDNなど、複数の仕組みを組み合わせることがあります。
ノーコードWeb制作サービスやECプラットフォームのように、利用者がWebサーバーを直接管理しなくてもサイトを公開できるサービスもあります。
Webサイトの価値を決める中心は、ユーザーが見るWebページとそのコンテンツです。
文章、画像、動画、商品情報、会社情報、問い合わせフォームなど、目的に応じた情報をWebページとして設計します。
企業サイトであれば、会社情報やサービス内容を分かりやすく伝えることが重要です。ECサイトであれば、商品情報、購入導線、決済などが必要になります。
継続的にページや記事を更新するWebサイトでは、CMS(コンテンツ管理システム)を利用することがあります。
WordPress、Shopify、Studioなど、目的や構築方法の異なるさまざまなCMS・Web制作プラットフォームがあります。
CMSを使わず、HTMLファイルや静的サイトジェネレーターなどでWebサイトを制作することもできます。Webサイトを作るためにCMSが必須というわけではありません。
Webサイトは仕組みの違いから、静的・動的という言葉で説明されることがあります。
静的Webサイトでは、あらかじめ生成されたHTMLなどのファイルを、リクエストに応じて配信する構成が基本です。
会社案内、ランディングページ、更新頻度の低いサイトなどでは、静的な構成が使われることがあります。
ただし、静的サイトでもJavaScriptを利用して外部APIから情報を取得するなど、ブラウザー上で動的な処理を行うことはできます。
動的Webサイトでは、アクセス時の条件やデータベースの内容などに応じて、サーバー側やアプリケーション側で表示内容を生成する構成があります。
CMS、会員サイト、ECサイト、Webアプリケーションなどでは、動的な仕組みが多く利用されます。
現在のWebサイトは、事前生成、サーバーでの生成、ブラウザー上でのJavaScript実行、APIからのデータ取得などを組み合わせることが多く、「静的」「動的」のどちらかだけで単純に分類できない構成もあります。
Webサイトは、見た目を作るだけでは目的を達成できません。
例えば、
など、サイトによって目的が異なります。
目的と利用者を整理したうえで、必要なページ、コンテンツ、導線、機能を決めます。
Webサイトは、PCだけでなく、スマートフォン、タブレットなどさまざまな端末から閲覧されます。
画面サイズに合わせてレイアウトを調整するレスポンシブWebデザインなどを利用し、複数の環境で情報を利用しやすい状態にすることが一般的です。
Webアクセシビリティは、障害の有無などにかかわらず、できるだけ多くの人がWebサイトやWebサービスを利用できるように設計・開発する考え方です。[8]
W3CのWeb Accessibility Initiative(WAI)は、適切に設計・実装されたWebサイトやWebツールは、障害のある人も利用できると説明しています。[8]
見出し構造、代替テキスト、キーボード操作、色のコントラストなど、制作段階からアクセシビリティを考慮することが重要です。
Webサイトは公開して終わりではありません。
サイトの種類に応じて、次のような運用が必要になります。
利用するサービスによって、サイト運営者が管理する範囲は異なります。
GoogleやBingなどの検索エンジンは、Web上に存在するWebサイトやWebページを探すためのサービスです。[1]
Webサイトそのものと検索エンジンは別の仕組みです。
Webサイトを公開しただけで、必ず検索結果の上位に表示されるわけではありません。検索エンジンがページを発見・理解できる状態にしたうえで、ユーザーに役立つコンテンツやサイト構造を継続的に改善する必要があります。
『ホームページ制作の相談をしたい』『もっとたくさん商品を売りたい』等、ご要望をお伝えくださいませ。
疑問に思っていること、お困りごと、具体的な内容が未定でも、まずはお気軽にご相談くださいませ。