Webサイト制作の基礎知識：初心者が知っておくべきこと

2026年10月8日にMDNの最初のWebサイト・Webの仕組み・HTML内容作成、WordPress公式紹介、W3C Easy Checks・フォーム検証、Googleの技術要件を再確認した。小さく始め、HTML構造・CSS表示・JavaScript操作と公開工程を分ける。代替テキスト、見出し、キーボード焦点、拡大、入力条件、サーバー側検証を初期確認へ置くが、簡易チェック・Googlebot到達・正常応答・ドメイン契約だけでWCAG全適合、公開、順位、事業成果は保証されない。

「サイトを作りたいけれど、何を用意して誰に頼めばよいか分からない」。最初からプログラミングやツールの名前を覚えるより、公開する内容と、公開後に誰が更新するかを一緒に考えると始めやすくなります。

30秒で要点

• サイトには、内容を作る仕事、インターネットへ公開する仕事、維持する仕事がある。
• 自作・CMS・外注は組み合わせられる。費用と担当する作業を同じ条件で比べる。
• 最初は一つの案内を作り、読み手が対象・条件・次の行動を理解できるか確かめる。

Webサイトとページはどう違うのか

Webページは、ブラウザーで開く一つの文書や画面です。Webサイトは、関連するページや機能をまとめたものです。会社紹介、商品案内、オンラインショップ、ブログなどがあり、一つのページで構成するサイトもあります。

サイトを持てば自動的に人が集まるわけではありません。会社名を聞いた人が事業を確かめる、商品の条件を比較する、手続きの方法を知るなど、訪れる理由が必要です。今あるSNSや案内資料で足りる用事と、サイトで分かるようにしたい用事を分けてみてください。

同じ会社のサイトでも、初めて知る人にはサービスの対象、比較している人には費用や対応範囲、すでに利用する人には窓口や変更情報が役立ちます。「集客する」という目的を、訪問者が何を調べるかまで具体化するのが最初の作業です。

ページが届くまでに必要なもの

ブラウザーは、ChromeやSafariなど、Webページを読むためのソフトウェアです。URLを指定すると、配信する側へページを要求し、受け取った内容を画面に組み立てます。配信する場所を用意するサービスを、ホスティングと呼びます。

表が収まらない場合は、横にスクロールできます

この表のexample.comは説明用です。独自ドメイン、ホスティング、制作ツールが一つの契約に含まれることもありますが、それぞれ誰が管理するかは確認します。仕組みの詳しい説明はMDNのWebの動作にあります。

HTML・CSS・JavaScriptの役割

HTMLは、見出し、段落、リスト、リンクなど、内容の構造を表すマークアップ言語です。CSSは、文字の大きさ、色、余白、配置などを指定するスタイルシート言語です。JavaScriptは、入力に応じた処理や画面の変化などを実装するプログラミング言語です。

例えば、施設見学の案内なら、HTMLで「対象」「日程」「持ち物」を整理し、CSSで読みやすい行間や幅を整えます。日付を選ぶと空き状況を更新する、といった処理が必要ならJavaScriptやサーバー側の仕組みを検討します。単純な案内ページには、JavaScriptを追加しなくても実現できる部分があります。MDNの最初のサイト制作

レスポンシブデザインは、画面幅などに応じて配置を調整する設計です。「スマートフォンに対応」と書かれたテンプレートを選んでも、長いタイトルや画像、表を入れた後に読めるかは確認が必要です。大きな画面を単純に縮小するだけとは異なります。

作り方と担当する人を組み合わせる

自分でコードを書く、CMSやサービスを使う、業者に依頼する、という三つの選択肢は、互いに排他的ではありません。CMSを制作会社に設定してもらい、文章や写真の更新を自社で行うこともできます。

表が収まらない場合は、横にスクロールできます

CMSは「コンテンツ管理システム」の略で、記事などを管理画面から編集する仕組みです。WordPressのようなオープンソースのソフトウェアと、配信環境まで運営者が用意するサービスでは、契約と保守の範囲が異なります。WordPressの公式説明

無料のソフトウェアを選んでも、サイト全体が無料になるとは限りません。ホスティング、ドメイン、有料機能、原稿や写真、確認・修正の時間を分けて考えます。自作なら学習と維持の時間が必要です。外注なら「プロだから高品質」と決めず、要件と確認範囲を合意します。

比較するときは、必要な機能を一つ選び、実際の管理画面で「自分が更新できるか」「変更を確認して戻せるか」を試します。機能一覧に名前があるだけでは、日々の仕事に合うかは分かりません。詳しい比較はCMS選定ガイドで扱っています。

最初の一ページを、五つの段階で作る

1. 誰が何を知りたいかを書く

「会社を知ってほしい」から一歩進め、「施設見学を考える人が、対象と参加条件を確かめる」と書きます。申込まで扱うのか、既存窓口を案内するのかも分けてください。

2. 必要な情報と順序を決める

対象、内容、日程、場所、準備、次の行動を短い文章にします。掲載する写真の使用権や、文章の事実確認をする人も決めます。見出しだけの空欄を並べるより、実際に読ませる内容で考えるほうが不足を見つけやすくなります。

3. 読める形に整える

見出しの階層をそろえ、一つの段落に複数の話を詰め込みすぎないようにします。色だけで条件を示さず、文字でも説明します。画像が情報を伝えるなら、見えないときにも役割が分かる代替テキストを用意します。

4. 小さなページを作る

以下は架空の見学案内です。テキストエディターでUTF-8のindex.htmlとして保存すれば、ブラウザーで開いて内容を確認できます。外部ファイルは不要で、申込・送信・予約の機能は含みません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>施設見学の案内（練習用）</title>
  <style>
    body { font-family: sans-serif; line-height: 1.7;
      max-width: 42rem; margin-inline: auto; padding: 1rem; }
    a:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
  </style>
</head>
<body>
  <header><p>練習用の架空ページです。</p></header>
  <main>
    <h1>施設見学の案内</h1>
    <p>初めて施設を利用する方向けの見学です。</p>
    <p><a href="#preparation">参加前に確認することへ</a></p>
    <section aria-labelledby="preparation">
      <h2 id="preparation">参加前に確認すること</h2>
      <ul>
        <li>対象：施設の利用を検討している方</li>
        <li>持ち物：筆記用具</li>
        <li>日程：この練習ページでは予約を受け付けません</li>
      </ul>
    </section>
  </main>
</body>
</html>

HTMLの役割や最小文書の要素はMDNのHTML入門で確認できます。この例では、本文中のリンクを同じページの見出しへつないでいます。「申込む」と書いて何も起こらないボタンを置くより、できることを正しく示すためです。

5. 公開前と公開後の仕事を決める

自分の端末でファイルを開く段階では、他の人がインターネットから見られるとは限りません。公開するには配信先を用意し、ドメインやHTTPSなどを設定します。CMSやサイト作成サービスを使う場合も、プレビューと一般公開の状態を区別します。

本番へ公開する前に、仮の内容を実際の情報へ置き換え、権利関係と連絡先を確かめます。問い合わせを受けるなら、画面だけでなく、受信処理、担当者への通知、保存や削除の扱いが必要です。ブラウザー側の入力チェックは、受信側の検証を代替しません。W3Cのフォーム入力検証

最低限、読む・動かす・届くを確かめる

確認は「表示された」で終わらせず、読者の用事に沿って行います。例えば、見学の対象を読み、条件へ移動し、必要なら申込や問い合わせを終えるところまでを対象にします。

• 読む：タイトルと見出しで内容を理解できるか。小さい画面や拡大でも文字や画像が欠けないか。
• 動かす：リンク先は正しいか。マウス以外でも操作でき、選択中の場所が見えるか。
• 届く：実際に送信機能を用意した場合、エラー修正と受信側まで確認できるか。
• 続ける：営業時間や料金を誰が直すか。契約更新の通知は誰へ届くか。担当者が変わっても管理できるか。

W3Cは、見出し、代替テキスト、キーボードの焦点、拡大などを初期確認の対象にしています。ただし、簡易確認はすべての利用上の障壁を調べるものではありません。W3CのEasy Checks

公開と検索掲載も別です。Googleの最低技術要件を満たしていても登録は保証されません。公開後に見つからないときは、推測で文章を大量に増やす前に、公開状態や検索側の確認結果を調べます。Googleの技術要件

最初の確認結果を一枚に残す

作った一ページを、内容をまだ知らない人に見てもらい、「誰向けか」「何ができるか」「次に何をするか」を説明してもらいます。迷った言葉や情報の不足を書き留め、一箇所を直して再度確かめます。協力者が少ない確認は、一般の利用者の成果率を測るものではなく、問題の手掛かりを探す作業です。

作成方法、必要な機能、担当者、公開前に未確認の項目を残せば、外注する場合の説明にも使えます。すべてを学んでから動く必要はありませんが、分からない部分を「できたこと」に置き換えないことが大切です。

全体の予算や進め方はWeb制作の全体像、具体的な流れはWebサイト作成入門、画面の調整はレスポンシブデザインで詳しく扱っています。