第2回：WEBサイトのしくみを知ろう｜初心者向け解説

WEBデザインや開発を学ぶ上で、まず押さえておきたいのが「WEBサイトの基本構造と仕組み」です。
見た目を作る前に、その裏側でどのように情報が届き、どんな技術が使われているのかを理解することで、
より効率的に学習を進められます。

WEBとは？インターネットとの違い

まず混同されやすい「インターネット」と「WEB」の違いを整理しましょう。

• インターネット
  世界中のコンピュータが接続されたネットワークそのもの。
  道路や橋のように、情報を運ぶための基盤です。
• WEB（ワールドワイドウェブ）
  インターネット上で動くソフトウェアやサービスの総称。
  HTML・CSS・JavaScriptで構成され、ユーザーがブラウザを通じて閲覧できる情報です。

例えるなら…
インターネットは「道路」、WEBは「道路を走る車や沿道の建物」にあたります。

WEBサイトの基本構造を作る3つの技術

HTML（構造を作る）

HTML（HyperText Markup Language）は、WEBページの骨組みを作る言語です。
見出し（<h1>）、段落（<p>）、画像（<img>）などをタグで記述し、情報の階層構造を明確にします。

ポイント

• 適切なタグの使用はSEO（検索エンジン評価）にも影響
• ページの意味づけをする役割がある

CSS（見た目を整える）

CSS（Cascading Style Sheets）は、HTMLで作った骨組みにデザインを適用します。
色、文字サイズ、レイアウトなどをコントロールし、統一感のあるビジュアルを実現します。

ポイント

• 「セレクタ」を使って特定の要素にスタイルを適用
• サイト全体のデザイン変更を一括で行える
• 見た目はユーザーの第一印象と滞在時間に直結

JavaScript（動きをつける）

JavaScriptはWEBページに動的な機能を追加するプログラミング言語です。
画像スライドショーや入力フォームのリアルタイムチェックなど、インタラクティブな操作を可能にします。

ポイント

• ユーザーの行動に応じてページを変化させられる
• 動的コンテンツで使いやすさや面白さを向上

サーバーとドメインの関係

WEBサイトが表示される裏側には、サーバーとドメインという2つの重要な要素があります。

• サーバー
  WEBサイトのデータを保存し、ユーザーからのアクセス要求に応えてデータを送る役割。
• ドメイン
  WEBサイトの住所のようなもので、www.example.com のような形で指定します。
  DNS（ドメインネームシステム）によってIPアドレスと紐付けられ、適切なサーバーに接続されます。

WEBサイトができるまでの流れ

1. 計画と設計
   ターゲットユーザーと目的を明確化し、サイトマップやワイヤーフレームを作成。
2. 開発
   HTML・CSS・JavaScriptを用いてページを制作。
3. テスト
   表示崩れや機能の不具合を確認し、修正。
4. 公開
   サーバーにアップロードし、ドメイン設定を行って一般公開。
5. 運用と改善
   定期的なメンテナンスやコンテンツ更新、ユーザーの行動分析を通じて改善を続ける。

覚えておきたい基本用語10選

• HTTP / HTTPS：ブラウザとサーバー間の通信規格
• ブラウザ：WEBページを表示するアプリ（Chrome、Safariなど）
• レスポンシブデザイン：PC・スマホなどデバイスに応じてレイアウトを変える手法
• CMS：WordPressなど、コンテンツ管理システム
• SEO：検索エンジン最適化

まとめ

WEBサイトは、インターネットという土台の上で、
HTML・CSS・JavaScriptという技術を組み合わせて作られます。
さらに、サーバーとドメインが連携することで、
世界中どこからでもアクセスできる仕組みが成り立っています。

この基本構造を理解しておくことで、これから学ぶデザインや開発のスキルもスムーズに習得できます。
次回は「WEBサイトを構築しよう」をテーマに、実際の制作プロセスに入っていきます。

お気に入り