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

Posted on by

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サイトを構築しよう」をテーマに、実際の制作プロセスに入っていきます。

pdf02ダウンロード