Webの世界へようこそ!

制作を始める前に知っておきたい「基本のキ」を、
見て、触って、楽しく理解しましょう。

その1:WebページとWebサイトって違うの?

「ページ」と「サイト」。言葉は似ていますが、指し示す範囲が違います。
分かりやすい例えで見てみましょう。下のタブをクリックして切り替えてね!

📚 本で例えると?
🏢 デパートで例えると?
📃

Webページ = 「本の1ページ」

ブラウザで表示される、1枚1枚の画面のことです。
(例:「会社概要のページ」「お問い合わせのページ」など)

📘

Webサイト = 「本そのもの(1冊)」

複数のWebページが集まった、ひとつのまとまり全体のことです。
(例:「Amazonというサイト全体」「Googleのサイト」)

🏪

Webページ = 「各テナント(売り場)」

デパートの中にある、靴売り場、レストラン、本屋さんなど、一つ一つの目的を持った場所です。

🏬

Webサイト = 「デパートの建物全体」

すべての売り場が入っている、建物丸ごとのことを指します。

🚪

💡 「ホームページ」って?

本来は**「正面玄関(最初に表示されるページ)」**のこと。日本では「デパート全体(サイト)」の意味で使われることが多いですが、プロの現場では使い分けるとスマートです!

その2:サイトの構造(サイトマップ)

Webサイトは、トップページを頂点とした**「木の形(ツリー構造)」**で作るのが基本です。
下の「架空のカフェサイト」のメニューをクリックして、構造を展開してみよう!

🏠 トップページ (Home)
☕ メニュー紹介
📰 お知らせ・ブログ
新作ケーキはじめました
年末年始の営業について
📍 店舗情報・アクセス
渋谷店の地図
新宿店の地図
✉️ お問い合わせ

↑ このように情報が整理されていると、ユーザーも迷わず、Googleの検索ロボットも理解しやすい良いサイトになります。

その3:ドメイン(Web上の住所)の話

Webサイトを公開するには「住所」が必要です。
「借り物の住所(無料)」と「自分の住所(有料)」の違いを、家の種類で比べてみましょう。
カードにマウスを乗せてみてね!

🏢

🅰️ 共有ドメイン (無料)

イメージ:「賃貸マンションの一室」

https://my-cafe.pages.dev
  • 無料で手軽に始められる(今の練習環境はこれ!)。
  • 住所の後半は大家さん(サービス会社)の持ち物。
  • 大家さんの都合で住所が変わる可能性も…。

👉 練習用・学習用ならこれで十分OK!

🏡

🅱️ 独自ドメイン (有料)

イメージ:「一戸建て(表札付き)」

https://my-cafe.com
  • 年間1,000円〜程度の維持費(土地代)がかかる。
  • 世界に一つだけの、あなただけの住所。
  • サーバー(家)を引っ越しても住所はずっと同じ!信頼感UP。

👉 ポートフォリオや仕事用におすすめ!