Webサイト作成入門：目的に合わせた作り方ガイド

2026年10月8日にMDNのWebの仕組み、WordPress機能、Wixのエクスポート制約、W3C preliminary checks、Google技術要件、WordPressバックアップ、Next.js static exportを再確認した。ブラウザ・配信先・DNS・HTML/CSS/JavaScript・HTTPSの役割を分け、CMSの下書き・予約・履歴・役割、Wix基盤依存、DBとファイルを含む復元、静的出力と要求時機能の違いを記録する。クロール可能・200・索引可能本文は技術要件で、登録・順位・安全・復元・移行成功を保証しない。

Webサイトを初めて作るとき、最初に選ぶのはツールの名前ではありません。誰に何を伝え、読んだ後にどんな行動をしてほしいか。そして公開後、誰が文章や画像を直せるかです。

会社紹介を数ページ置くサイトと、毎週記事を増やすサイト、決済を受け付けるサイトでは、必要な仕組みも運用も異なります。ここではWebの基本から、制作方法の比較、公開前後の確認までをつなげます。具体的にHTMLを書き始めたい方は初心者向け作成ガイド、制作全体の進め方はWeb制作完全ガイドも参照してください。

30秒で要点

• Webサイトは、内容と画面だけでなく、配信先・ドメイン・更新する人まで含めて準備します。
• ノーコード、CMS、個別開発は重なる部分があります。制作費だけでなく、必要な操作・更新・保守・移行の条件で比べます。
• 最初は本物の文章と画像を使った1ページを作り、更新と問い合わせの流れを試します。ページ数を増やす前に、内容が伝わるか確認します。
• 公開前にはスマートフォン、キーボード、リンク、フォーム、検索設定を確認し、公開後の担当者と戻し方を決めます。

Webサイトを支える5つの要素

ブラウザは、配信元から受け取ったHTML・CSS・JavaScriptや画像を使ってページを表示します。HTMLは見出しや文章などの構造、CSSは見た目、JavaScriptは必要な操作や処理を担います。JavaScriptを使わない情報ページも作れます。MDNのWebの仕組み

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

ドメインはサイトの名前に使うもので、取得しただけでは本文は表示されません。DNSの設定で適切な配信先へつなぎます。ホスティングとドメインを同じ会社で契約する場合も、何が契約に含まれるかは確認してください。

HTTPSは通信を暗号化する仕組みです。ただし、鍵のマークだけで、掲載内容の正しさ・管理者アカウント・フォームの保存先まで安全になるわけではありません。管理者の認証、必要最小限の権限、更新と復旧は別に扱います。

「作りたい種類」を、必要な操作へ翻訳する

「企業サイト」「ブログ」という名前だけでは方式は決まりません。同じ企業サイトでも、年に数回の修正で済む場合と、複数部署が毎日更新する場合では条件が違います。

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

例えば作品を見せるだけなら、会員登録やデータベースは必須ではありません。一方、コミュニティは投稿画面ができても、迷惑投稿や退会への対応を決めないと運営が始められません。最初の公開で必要な操作と、後から追加するものを分けます。

制作の3方式を、残る仕事で比べる

「ノーコード」は主に画面上で組み立てる作り方、「CMS」は内容を管理する仕組みです。ノーコードのサービスにCMSが含まれることも、CMSの画面を個別に開発することもあります。分類は排他的ではありません。

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

ビルダーは、できる操作と移行条件を試す

Wixなどのサービスでは、配信基盤を自分で構築する仕事を減らせます。ただし、必要な機能が選ぶプランで利用できるか、問い合わせデータを取得できるか、解約や移行時に何を持ち出せるかは確認が必要です。

例えばWixの公式説明では、Wixで作ったサイトは同社の基盤で動くため、そのまま他社ホストへ移して稼働させることはできません。これはすべてのビルダーに同じ制限があるという意味ではなく、サービスごとの出口を先に読むための例です。Wixの外部ホスティングに関する説明

CMSは、更新画面とシステム保守を分ける

WordPressには下書き、予約公開、変更履歴、ユーザーの役割などの機能があります。しかし、文章を更新できることと、システムを保守できることは別です。WordPressの機能

自分で設置するWordPressと、管理を含むホスティング契約では責任範囲が変わります。更新、障害対応、拡張機能の確認、復元を誰が担当するかを見積書に含めます。典型的なWordPressでは復元にデータベースとファイルの両方が必要です。記事の書き出しだけをサイト全体のバックアップと考えないでください。WordPressのバックアップ

選択肢を細かく比べる場合はCMS選定ガイド、公開後の保守はWordPress保守ガイドへ進めます。

個別開発は、自由に決める範囲と保守する範囲が広い

個別開発なら業務に合わせて設計できますが、あらゆる機能が安く速く作れるわけではありません。認証、決済、検索などを追加するほど、確認すべき失敗や運用も増えます。

配信方式も分けて考えます。公開前に作ったファイルを配信する静的サイトと、アクセス時に処理するアプリでは、必要な実行環境が異なります。Next.jsなどは静的出力にも対応しますが、静的出力では使えないサーバー機能があります。名称だけで契約先を選ばず、使う機能に必要な条件を確認してください。Next.jsの静的出力と制約

いずれの方式も、使っただけで高速・安全・検索上位になるとは言えません。実際の内容、画像、拡張機能、運用条件で確かめます。ここでの製品仕様は2026年10月4日の公式資料に基づき、実サービスの契約・管理画面・移行を試したものではありません。

1ページを作り、更新まで試してから広げる

最初の試作は空のテンプレートではなく、公開を想定した長さの文章と画像を使います。短い仮見出しだけでは、スマートフォンの折り返しや内容の優先順位が分かりにくいためです。

1. 目的を書く：「誰が、何を知り、何をできればよいか」を1文にします。
2. 内容を揃える：見出し、本文、画像、出典、掲載許可、連絡先を準備します。
3. 配置を作る：結論、条件、具体例、次の操作の順に置きます。色や動きより、探しやすさを先に確認します。
4. 更新を試す：公開後の担当者が文章と画像を修正し、下書き確認から反映まで進められるか試します。
5. 操作を試す：スマートフォンやキーボードで読めるか、フォームは受信先まで届くか確認します。
6. 公開を判断する：残件・担当・契約・復元方法を確認し、公開後にも主要操作を確かめます。

設計時にはレスポンシブデザインやUI/UXの基礎も役立ちます。見た目の好みだけでなく、読む順序や迷う操作について意見を集めると修正につながります。

制作費は、同じ期間と作業範囲で比べる

「初期費用が安い」だけでは判断できません。公開後の利用料、更新する時間、改修、引き継ぎも含めて比べます。次は価格相場ではなく、比較方法を示す仮想の12か月予算です。税・追加機能・移行費は含めず、内部作業の換算単価を1時間3,000円に揃えます。

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

案Aの初期費用は低いものの、仮定した更新時間を加えると比較額は26,000円高くなります。内部作業の換算額は、この例では追加で支払う現金とは限りません。外部支出と分け、同じ作業を保守費と内部時間で二重計上しないようにします。

実際の見積もりでは、原稿作成、フォーム、画像の権利処理、更新回数、バックアップ、障害対応、解約時の受け渡しを揃えてください。担当者が不在になった場合に、誰が引き継げるかも費用と同じくらい重要です。

公開前の確認を、見た目以外へ広げる

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

W3Cの簡易アクセシビリティ確認はこの入口に使えますが、簡易項目が通っただけで全体のアクセシビリティ適合を証明できるわけではありません。実際の利用者や支援技術を含む確認も、対象と必要な水準に応じて計画します。

検索向けには、Googlebotがアクセスでき、正常な応答とインデックス可能な内容があることが技術上の前提です。条件を満たしても検索登録や順位は保証されません。Googleの技術要件

公開後はGA4入門を参考に、必要な計測だけを目的と同意の条件に合わせて設計します。問い合わせ数だけでなく、届かなかった連絡や更新しづらい箇所も改善対象です。最初の1ページで「伝わる・操作できる・直せる」を確かめることが、次のページを増やす判断材料になります。