2026年10月8日にW3C WAIの計画・管理、Easy Checks、フォーム検証、Googleの技術要件、MDNの最初のWebサイト・Webの仕組みを再確認した。アクセシビリティは予算・責任者・早期評価・継続監視を制作過程で扱い、代替テキスト、見出し、キーボード焦点、拡大、入力条件・サーバー検証を初期チェックへ置く。Googlebot到達・正常応答・索引可能本文は最低条件で登録や順位を保証せず、本文実読・HTTP未測定資料をGET200と混同しない。
サイトを作ることは決まったのに、デザイン、集客、費用、運用のどれから考えるか決められない。そんな担当者に必要なのは、流行の作り方よりも、選択肢を比べる共通の条件です。
30秒で要点
- 最初に「誰が何を確かめ、何を終えられるサイトか」を一つ書く。
- 構築方法と担当分担を分け、原稿・確認・公開後の仕事も見積もりに含める。
- 小さな試作で迷う箇所を確かめ、公開の可否は表示、操作、情報、復旧の条件で決める。
どこから読むか — 自分の状況から選ぶ
この記事はWeb制作の全体像を扱います。用語・技術・速度・運用はそれぞれ別の記事にあります。
用語の段階から知りたい。 作る流れはWebサイト作成入門とWebサイト制作の基礎知識、土台の用語はサーバーとは？・ドメインとは？・ホスティングとは？、連携の仕組みはAPIとは？。
表示が遅いと言われた。 全体像はWebパフォーマンス完全ガイド、指標の意味はLCP・INP・CLS、最初の一手は画像最適化完全ガイド、サーバー側の応答はTTFB完全ガイド、測り続ける仕組みはWebパフォーマンス測定とモニタリング。
技術の選定で迷っている。 言語の選び方はプログラミング言語入門、フロントの比較はJavaScriptフレームワーク比較、構成の考え方はJamstack入門、データの持ち方はデータベース入門、配信はCDN入門。
Gitの操作でつまずく。 用語はGitとは？、記録の単位はコミットとは？、分岐はブランチとは？とブランチ戦略の超入門、統合はマージとは？、取り消しはどれを使うか。
仕様の思い込みを外したい。 CORSの役割は「攻撃を防ぐ壁」ではない、キャッシュ指定はno-cacheは「キャッシュするな」ではない、JWTは暗号化ではない、重なり順はz-indexを上げても前に来ない理由、結合はLEFT JOINしたのに行が消える。
設計の一貫性を保ちたい。 部品とルールはデザインシステム入門とデザインシステム構築ガイド、画面幅の対応はレスポンシブデザイン実践ガイド、検証の早回しはプロトタイピング完全ガイド、領域をまたぐ設計はWebサイトの統合設計ガイド。
目的を「訪問者の用事」に置き換える
売上、認知、問い合わせ、採用は事業側の目的です。そのままでは、どの情報を先に見せるべきか決まりません。「問い合わせを増やす」なら、訪問者が問い合わせ前に確かめたい対象地域、対応できる仕事、費用の決まり方を具体化します。
サイトの役割は、情報を届ける、印象を伝える、行動を支える、信頼の根拠を示すことに分けられます。一つに絞り切れなくても構いません。ただし、同じ画面ですべてを同じ強さで見せると、読む順序が曖昧になります。
例えば、初めて会社を知る人には「自分の困りごとを扱う会社か」が先です。候補を比較している人には対応範囲や制約が、既存の利用者には変更情報や窓口が必要です。年齢や職業だけで架空の人物像を細かく作るより、直前にどこから来て、何が分からず止まるかを記録すると、ページの役割を決めやすくなります。
表現の好みと利用条件を分ける
写真や映像で世界観を伝えることが主目的のサイトもあります。展示作品を見たい人には、大きな作品画像が情報そのものになるからです。一方、料金や納期を比較したい人に、説明のない映像だけを見せても疑問は解消しません。
「有名ブランドだから文章を減らす」「競合が多いから情報を増やす」と機械的に決めず、利用者が必要な判断をできるかで確かめます。画面の美しさ、読みやすさ、操作のしやすさは競合することもあります。完成後にどれかを足す前提ではなく、試作の段階で一緒に扱います。
五つの視点を、一つの制作計画につなぐ
目的、状況、見る人、表現、運用を別々の担当者が考えると、「きれいだが更新できない」「情報はあるが探せない」といった食い違いが起きます。次の図は、架空の施設見学サイトを例に、判断をつなぐ方法を示しています。
表が収まらない場合は、横にスクロールできます
| 視点 | 制作前に残す内容 | 未定のまま進むと起きること |
|---|---|---|
| 目的 | 訪問者が終えたい用事と事業側の狙い | ボタンの数が増え、優先順位が消える |
| 状況 | 既存流入、掲載情報、使える予算と人 | 新しい機能を運用する人がいない |
| 見る人 | 初回・比較中・利用中の疑問 | 社内には分かる説明しか残らない |
| 表現 | 文章、写真、図、操作の役割 | 装飾と情報の関係が不明になる |
| 運用 | 更新、確認、障害対応、終了の担当 | 公開後に古い情報や契約が放置される |
これは編集部の計画用の整理です。全案件で同じ順番を強制するものではありません。W3Cのアクセシビリティ計画も、責任・予算・早期評価・継続的な見直しを制作過程に組み込む考え方を示しています。W3Cの計画ガイド
デザインを固める前に、九つの論点を仮置きする
準備によって成功の何割が決まる、という一律の割合は置けません。情報の見せ方を試した結果、前提が変わることもあるためです。次の九つを「確定事項」と「未確認の仮説」に分けて書き、変更できる状態で試作へ進みます。
- 目的と指標：何ができたら役に立ったと判断するか。
- 訪問者の状況：来訪のきっかけと、まだ知らないこと。
- ページの役割：どの疑問をどこで扱い、重複をどう減らすか。
- 行動の順序：説明、比較、申込、確認、完了のつながり。
- 内容と素材：原稿・写真の用意、事実確認、使用権の担当。
- 検索との接点：どの情報を検索対象にし、どれを非公開にするか。
- 運用体制：更新者、承認者、問い合わせを受ける人。
- 検証方法：試す用事、対象の人、判断を保留する条件。
- 技術と契約：必要機能、連携、データの持ち出し、終了時の扱い。
これらはページ数だけでは表せません。「お問い合わせページ一式」と見積もられていても、送信エラーから戻れるか、担当者が受信したことを確かめるか、保存データをいつ削除するかまで同じ範囲とは限らないからです。
短い原稿でも先に用意する
「サービスの強み」という空欄のまま枠を設計すると、後から入る文章の長さや必要な注意事項で構成が変わります。完成原稿を待つ必要はありませんが、実際に伝える内容を仮の文章にして、事実が未確認の箇所を明示します。
写真も、雰囲気を作る画像と、商品や作業を説明する画像を分けます。前者の代わりにAI生成画像を使う場合でも、実際の設備や実績と誤認される配置は避けます。説明の根拠になる写真を、装飾用の画像で代用しないことが大切です。
作り方と、誰が担当するかは別の選択
手書きのHTML、CMS、サービス型のサイト作成ツールは構築方法です。CMSは、記事などの内容を管理画面で更新する仕組みです。一方、自社制作・制作会社・フリーランスは担当の分け方です。制作会社にCMSを組んでもらい、日常更新は社内で行う組み合わせもあります。
表が収まらない場合は、横にスクロールできます
| 主な条件 | 比較したい構築方法 | 先に確かめる制約 |
|---|---|---|
| 案内中心で更新が少ない | 小さな静的サイト、サービス型ツール | 更新手段、公開設定、問い合わせの別経路 |
| 複数人が記事を更新する | CMS、サービス型ツール | 編集権限、承認、履歴、引き継ぎ |
| 会員・予約・外部業務との連携がある | 対応サービス、CMS拡張、個別開発 | データ連携、障害時の業務、検証範囲 |
どれも「簡単」「自由」「安い」だけでは選べません。独自機能を減らせば確認対象を絞れますが、既製サービスの制約が業務に合わなければ、手作業が増える場合もあります。逆に、個別開発で自由度を得ても、その仕組みを理解して直せる人を継続して確保する必要があります。
短期のキャンペーンサイトでも、公開中の問い合わせ、外部サービスの契約、終了後の案内やデータの扱いは残ります。「更新が少ない」と「保守が要らない」を同じ意味にしないでください。
見積もりは、同じ期間と範囲にそろえて読む
制作費だけを比べると、安い案に原稿作成や移行が含まれていなかったり、保守費に復旧作業が含まれていなかったりします。依頼時に、対象ページ、機能、素材、移行量、検証する端末、修正回数、引き渡すデータを共有します。
次は比較方法を示す架空の税抜例です。両案の制作・運用範囲が同じと仮定し、初期費用と毎月の契約費だけを24か月で比べます。相場や実際の見積もりではありません。
表が収まらない場合は、横にスクロールできます
| 項目 | 案A | 案B |
|---|---|---|
| 初期費用 | 48万円 | 72万円 |
| 月額費用 | 2万円 | 0.8万円 |
| 24か月合計 | 96万円 | 91.2万円 |
計算は「初期費用＋月額費用×24」です。案Bの初期差額24万円を月額差1.2万円で割ると、合計が並ぶのは20か月です。24か月では案Bが4.8万円低くなりますが、その差だけで優劣は決まりません。
この表は、社内で原稿を作る時間、追加改修、契約更新、解約時の移行、税や従量課金を含みません。実際には必要な項目を追加し、社内工数の金額換算と外部への支出を区別します。契約範囲が異なるなら、まず差分をそろえないと計算自体が比較になりません。
制作会社には「判断の過程」を聞く
実績の画像だけでなく、目的に対して何を省き、何を確認したかを説明してもらいます。原稿が遅れた場合の進め方、変更見積もりの条件、公開判断の担当、更新の引き継ぎまで会話できる相手かを見ます。
ドメイン、ホスティング、管理画面、解析の所有者と利用権限も確認してください。契約終了後にデータを取り出せるか、別の会社へ移せるか、移行できない部分は何かまで分かると、初期費用だけに偏らずに選べます。
公開できる条件を、画面の完成とは別に置く
完成画像が承認されても、実際の画面で読める、入力できる、情報が届くことは別の確認です。公開対象のページと、申込などの重要な操作を一覧にし、担当者と確認結果を残します。
- 内容：会社情報、対象、料金条件、日付、権利関係が正しい。仮文や非公開情報が残っていない。
- 表示と操作：小さい画面や拡大で読める。キーボードで操作でき、現在の焦点が分かる。画像には役割に合う代替テキストがある。
- 機能：入力、エラーからの修正、送信、受け付け、担当者側の確認を、管理されたテスト情報で通す。決済は提供元のテスト手段を使う。
- 公開設定：検索対象の公開ページと、認証で守る管理・検証環境を分ける。意図しない非公開設定が残っていない。
- 運用：管理権限、問い合わせの窓口、監視、バックアップ、問題時の連絡と戻し方が決まっている。
W3Cの簡易確認は最初の点検に役立ちますが、それだけでアクセシビリティ全体の適合を宣言できません。フォームも画面側の入力チェックだけでは不十分で、受信側の検証が必要です。W3CのEasy Checks、入力検証の説明
検索については、Googlebotがアクセスでき、正常な応答とインデックス可能な本文があることが最低条件です。これを満たしても掲載や順位は保証されません。「公開できた」「検索に登録された」「必要な人が来た」を分けて確認します。Googleの技術要件
発注前に、一つの用事を試す
全部を作る前に、重要な1ページと、その先の到着先だけを文章や簡単な試作で用意します。例えば施設見学なら、「対象条件を確かめて、参加できる日を見つける」という用事です。答えを教えずに試してもらい、迷った言葉、戻った場所、足りない情報を記録します。
架空の確認例として、同じ用事を8人が1回ずつ試し、6人が補助なしで終えたとします。この試行内の完了割合は6÷8＝75%です。これは訪問者全体の申込率ではなく、2人が止まった箇所を調べる手掛かりです。人数が少なく選び方も限定されるので、一般の利用者を代表する値や改善効果とは扱えません。
公開後の重要指標、いわゆるKPIも、分母と完了条件を先に定めます。訪問、申込開始、受け付け完了、実際の対応完了を混ぜず、社内テストや重複の除外条件もそろえます。変更前後で広告や来訪者が変われば、数字の差をデザインだけの効果とは言えません。
AIは案出しや整理に、心理学の知識は迷いの仮説づくりに、統計は不確かさの扱いに役立てられます。ただし、どれも実際の利用状況を確かめる代わりにはなりません。二つの案を比較するA/Bテストも、対象、期間、必要なデータ量、判断基準を先に決める必要があります。少ない観察で問題の場所を探す作業と、効果量を測る作業を分けます。
今の判断に必要な記事へ進む
ここはWeb制作カテゴリの入口です。全技術を先に学ぶ必要はありません。現在決めたいことに合わせて、次の説明を使ってください。
- 初めて準備する：制作の基礎知識、Webサイト作成入門
- 作り方を比較する：CMS選定、Next.jsの判断基準、Headless CMSの比較
- 外注と引き渡しを考える：Wix制作会社の選び方、Wixの納品
- 読める画面を設計する：レスポンシブ設計、UI/UX、デザインシステム
- 試作と実装を進める：プロトタイピング、モダンWeb開発、統合的なサイト設計
- 公開後を計画する：WordPress保守、表示性能、SEOの基礎
- AI利用を考える：AI時代のサイト制作、AIによるWeb運用、継続改善の考え方
用語で止まったら、プログラミング、サーバー、デプロイの基礎へ戻れます。投資や判断の組み立ては、メソッドの説明と中小企業の投資設計で扱っています。
最初に埋めるのは、見積もり依頼のページ数よりも「訪問者が終えたい一つの用事」「その確認方法」「公開後の担当者」です。未定の項目が見えれば、次に誰と何を決めるかを具体化できます。