Studio Attrait

BLOG

ブログ

ホームページ公開前チェックの全体像|公開判断を6分野で整理

ホームページが完成すると、見た目が整っているだけで「もう公開できそう」と感じます。

ただ、公開前に見ておきたいのはデザインだけではありません。

料金や連絡先が正しいかと、スマートフォンで操作できるかは、別の確認です。

問い合わせが本当に届くか、公開後に自社で管理できるかも、また別です。

検索へ出したいページが検索対象になっているかは、画面を見ただけでは分かりません。

公開前チェックは、細かなミスをゼロにする作業ではなく、公開すると利用者や事業に大きな影響が出る問題を先に見つけて、公開していい状態か判断するための作業です。

この記事では、公開前の確認を内容、表示、導線・フォーム、検索・計測、権限・運用、公開手順の6分野に分けて、全体像をつかめるようにします。

自作したサイトでも、AIで作ったサイトでも、制作会社から納品されたサイトでも、同じ考え方で確かめられます。

各項目を実際に一つずつ確かめるときは「ホームページ公開前チェックリスト|スマホ・文章・導線・設定をまとめて確認」へ進んでください。

1. 最初に「公開を止める問題」を決める

制作中は同じ画面や文章を何度も見るので、だんだん目が慣れてきます。

見慣れてくると、初めて訪れる人には分かりにくい表現や、仮の画像、動かないリンクが残っていても、意外と気づけません。

公開前だけは、作る側の目線をいったん離れます。

確認項目を増やす前に、「何が起きていたら公開を止めるか」を決めます。

すべての問題を同じ重さで扱うと、細かな余白調整と、問い合わせを送れない不具合が同じ一覧に並んで、公開していいかどうかを判断しにくくなるためです。

扱い

例

判断

公開前に直す

誤った料金・連絡先、主要な導線(目的のページまでの進み方)のリンク切れ、フォームを送れない、読めないほどの表示崩れ、公開してはいけない情報の掲載

原則として公開を止める

公開前に方針を決める

補助ページの軽微な崩れ、意味は通じるものの分かりにくい表現、優先度の低いリンク不備

修正日・担当者を決めて公開可否を判断

公開後の改善

細かな装飾、追加したい事例、余白調整、将来の機能追加

公開後の改善候補として記録

見つけた問題は、次の情報をセットで残しておくと、あとで直す人が「どのページのどこが問題なのか」で迷わずに済みます。

  • 問題が起きたページのURL
  • 確認した端末とブラウザ
  • 問題が起きるまでの操作
  • 本来どうなってほしいか
  • 状況が分かるスクリーンショット

公開前の確認用の環境と、実際に公開する本番環境では、URLやフォーム、計測の動きが変わることがあります。

そのため、公開前に確かめた項目も、公開直後に本番のURLでもう一度見ることになります。

「全部完璧になるまで公開しない」ではなく、「公開してはいけない問題が残っていないか」を先に判断すると、公開前チェックの目的がぶれにくくなります。

2. 公開前チェックを6分野に分ける

ホームページ全体は、次の6分野に分けると確認漏れを見つけやすくなります。

分野

主に確認すること

詳しい確認先

内容

会社名、サービス、料金、連絡先、日付、仮テキスト、画像の権利

ホームページ公開前チェックリスト|スマホ・文章・導線・設定をまとめて確認

表示

PC・スマホ、文字、画像、表、メニュー、押しやすさ

Webサイトのリリース前テスト入門|表示・リンク・フォームを確認する手順

導線・フォーム

主要リンク、電話・メール、入力エラー、送信、完了画面、通知

Webサイトのリリース前テスト入門|表示・リンク・フォームを確認する手順

検索・計測

タイトル、noindex、正式URL、リダイレクト、サイトマップ、Search Console、アクセス解析

Google Search Consoleの始め方|初心者が最初に見る3つの画面

権限・運用

管理画面、ドメイン、サーバー、解析、バックアップ、更新担当

制作会社から納品されたホームページはどこを見る?公開前の受け取りチェック

公開手順

担当者、承認、公開時刻、切り戻し、公開直後確認、連絡先

Webサイト公開前に確認すること一覧|担当者向け最終チェック

分野を分けるのと合わせて、見るページも先に書き出しておくと、確認の抜けが減ります。

小さなホームページなら、トップページ、サービス・商品ページ、会社・運営者情報、よくある質問、問い合わせページと送信完了ページ、プライバシーポリシーのような案内ページまでが範囲に入ります。

メニューに出ていないページも要注意です。

管理画面やサイトマップ(検索エンジンへ重要なURLを伝えるファイル)にだけ残っている仮ページが、そのまま公開されていることがあります。

反対に、公開したいページが非公開のまま残っていることもあります。

自作サイト、AIで作ったサイト、制作会社へ頼んだサイトでも、この6分野は変わりません。

作り方によって変わるのは、特に見落としやすい場所と、誰が確かめられるかの2点です。

3. 内容は「正しい原資料」と照らして確認する

文章が自然かどうかより先に、事実が正しいかを見ます。

突き合わせる相手は、料金表、会社概要、サービス資料、営業時間表のような、正しい情報が書かれた原資料です。

  • 会社名・屋号・サービス名
  • 料金、税込・税別、追加料金の条件
  • 営業時間、対応地域、納期、受付条件
  • 住所、電話番号、メールアドレス
  • 問い合わせ後の流れ
  • 実績、資格、事例など事実確認が必要な表現
  • 公開期間があるキャンペーンや日付

同じ情報をヘッダー、フッター、本文、画像、PDFに載せている場合は、一部だけ古いまま残っていることがあります。

とくに料金や営業時間は「変えたはずなのに一部のページだけ古いまま」が起こりやすく、画像の中に書き込んだ文字は直し忘れが目立ちます。

「仮テキスト」「準備中」「画像が入ります」といった制作メモや、見本用の人物名や住所、使わなくなったボタンも、うっかり残りがちです。

公開しないつもりのページが、URLを知っていれば誰でも見られる状態になっていないかも、内容の確認に入ります。

写真、イラスト、文章、ロゴには、公開していい権利や許可があるかという確認も要ります。

無料素材でも、作者名や配布元のクレジット表記が要るかどうかは素材ごとに違います。

配布ページの利用条件に書いてあります。

自作サイトで特に残りやすいテンプレートの見本文章や初期画像は「自作ホームページを公開する前に|初心者が見落としやすい注意点」で詳しく扱っています。

AIが作った事実・文章・画像の確かめ方は「AIで作ったホームページ、そのまま公開して大丈夫?人が確認したいポイント」に分けています。

4. 表示・リンク・フォームは実際に操作して確認する

管理画面のプレビューだけでは、公開後の操作までは分かりません。

少なくとも手元のPCとスマートフォンで、トップページから問い合わせ完了まで、初めて訪れた人になりきって一度通して操作すると、利用者がつまずく場所が見えます。

  • 文章・画像・表が画面外へ不自然にはみ出さない
  • メニューと主要ボタンを押せる
  • ボタンの言葉と移動先が合っている
  • 電話・メール・外部リンクが正しい
  • フォームの必須項目と入力方法が分かる
  • 入力を間違えたときに直す場所が分かる
  • テスト送信できる
  • 送信後の完了表示が出る
  • 利用者側の自動返信と運営者側の通知が、設定している場合は届く

PCでは、ブラウザの窓を少しずつ狭めると、横スクロールが出る、文字や画像が重なる、文章が途中で切れるといった崩れに気づけます。

電話・メールのリンクは、スマートフォンで押して、意図した電話アプリやメールアプリが開けば動いています。

外部サイトへのリンクは、ページが開いただけでは終わりません。

開いた先が古い料金表や、終了したサービスの案内に変わっていることがあります。

フォームは画面に出ていれば動いていると思いがちですが、名前や本文に「テスト送信」と入れて実際に送ってみて、完了画面、自動返信、運営者側の通知まで届いて初めて動いていると言えます。

入力欄の見出し(ラベル)は、画面に表示するだけでなく、コード上でも入力欄と関連付けておくものです。

ここはコードを見る話なので、制作者へ「フォームのラベルが入力欄と正しく関連付けられているか」と聞けば足ります。

問い合わせの通知先を複数登録している場合、一部の担当者にしか届いていないことがあります。

迷惑メールフォルダへの振り分けや、送信元アドレスの設定ミスは、通知を見落とす原因になりがちです。

テストが終わったあと、管理画面やメールに残ったテスト送信のデータを消すところまでが、フォームの確認です。

読みやすさと押しやすさには、専門的な基準もあります。

表示は、W3Cのリフローに関する解説で、文章などを読むために縦横2方向のスクロールが必要にならないことが重視されています。

ただし、リフローの例外は、表や地図など、縦横2方向の表示がどうしても必要な内容です。

操作は、W3Cの操作対象の大きさに関する解説で、ボタンなどの操作対象を原則24×24 CSSピクセル以上にするか、それより小さい場合は隣の操作対象と十分な間隔を空けることが基準です。

こうした基準を測る前に、手元のスマートフォンで押してみて「小さくて押しにくい」「隣を押してしまう」と感じた場所を記録すると、直す順番が決まります。

端末、リンク、フォーム、公開直後確認をテスト表にして進める方法は「Webサイトのリリース前テスト入門|表示・リンク・フォームを確認する手順」で詳しく扱っています。

初めて来た人に、誰向けで何を頼めるかが伝わるか

リンクやフォームが動いていても、初めて来た人に伝わらなければ、問い合わせまで進めません。

作った本人には当たり前のことでも、トップページを開いた人に「誰向けのサイトなのか」が伝わっていないことがあります。

トップページを開いて最初に見える範囲だけで、次の3つが読み取れれば、誰向けかを一文で言える状態です。

  • 個人向けか、事業者向けか
  • どんな悩みや目的を持つ人向けか
  • 対応する地域や業種に条件があるか

「地域の小規模事業者向け」「初めてネットショップを作る方向け」のような短い一文があるだけでも、訪れた人は自分向けのサイトかどうかを判断しやすくなります。

次に見るのは、「結局、何を頼めるのか」に答えられているかです。

会社名やきれいな画像が並んでいるだけでは、どんなサービスや商品を扱っていて、何をしてもらえて、どこまでが対応範囲かは伝わりません。

長い説明を全部読まなくても、最初の画面と主な見出しだけで大まかな内容が分かる状態が理想です。

家族や知人にトップページだけ見せて「何のサイトだと思った?」と聞くと、自分では気づけないずれが出てきます。

内容が伝わっても、次に押す場所が分からなければ、利用者はそのページで止まってしまいます。

問い合わせ、予約、購入、料金の確認など、そのページでしてほしい行動のボタンが、説明を読み終えたところで自然に目に入るかまで見ると、止まりやすい場所が分かります。

ボタンの言葉が「詳しくはこちら」だけだと、押す前に行き先が分かりません。

「料金を見る」「問い合わせる」のように書いてあれば、押した先を想像できます。

5. 検索・計測は「公開後に見つけてもらうページ」を中心に確認する

検索設定は、画面がきれいに表示されていても、間違いに気づきにくい部分です。

公開前に見るのは2点です。

検索エンジンが公開ページを見に来られる状態になっているか、検索結果への表示を妨げる設定が残っていないかです。

検索へ出したい重要ページを数件選んで見れば足ります。

選んだページごとに見る項目は、次のとおりです。

  • 正式なHTTPSのURLで開け、警告が出ない
  • ページ内容に合うtitleが設定されていて、「ホーム」「ページ1」のままや全ページ同じタイトルになっていない
  • 意図しないnoindexが残っていない
  • リニューアルでURLを変えた場合、旧URLから適切な新URLへ恒久リダイレクト(古いURLから新しいURLへ自動転送する設定)をしている
  • 重要ページがサイトマップや内部リンクから見つけられる
  • Search Consoleを自社で確認できる
  • アクセス解析を使う場合、予定したアカウントで計測される

ページタイトルは、ブラウザのタブや検索結果のタイトル候補に使われる情報です。

Googleも、Google検索におけるタイトルリンクの公式資料で、各ページに内容が分かる簡潔なタイトルを付けるよう案内しています。

制作中のサイトでは、検索結果に載せないよう検索エンジンへ伝えるnoindexが付いたままのことがあり、検索で見つけてほしいページに残っていると、公開後も検索結果への掲載を妨げます。

ただし、すべてのページをまとめて公開設定に変えるのは行き過ぎで、会員向けページ、送信完了ページ、管理用ページのように、検索結果へ出さない方がいいページもあります。

robots.txtはクロール(検索エンジンがページを見に来ること)を制御するための仕組みで、検索結果から確実に消すための代わりにはなりません。

検索結果から除外したいページと、クロールさせたくないURLは、別の設定です。

サイトマップを送信しても、クロールやインデックス登録(検索結果の候補としてページ情報を保存すること)が必ず行われるわけではありません。

公開後は、Google Search ConsoleのURL検査で、Googleがそのページへアクセスできるか、検出できる範囲でインデックス登録を妨げる問題がないかを見られます。

インデックス登録のリクエストもできますが、リクエストしても検索結果への掲載が保証されるわけではないので、まずトップページや主なサービスページなど、大事な1ページから試します。

公開後にSearch Consoleで何を見るかは「Google Search Consoleの始め方|初心者が最初に見る3つの画面」で確認できます。

6. 制作方法によって追加で見る場所を変える

共通の6分野を見たあとは、サイトをどう作ったかに応じて追加の確認へ進みます。

状況

特に確認すること

詳しい記事

自分で作った

テンプレートの初期情報、不要ページ、初期ドメイン・OGP・公開設定

自作ホームページを公開する前に

AIで作った

AIが補った事実、表現、画像・コード、最終判断

AIで作ったホームページの人による確認

制作会社から納品された

見積・仕様との一致、検収、管理権限、納品データ

制作会社から納品されたホームページの受け取りチェック

他社制作サイトを自分で見直す

契約・要件との一致、利用者操作、修正依頼の材料

他社に作ってもらったホームページの確認方法

第三者の意見がほしい

相談目的、確認範囲、第三者の指摘をどう判断材料にするか

ホームページのセカンドオピニオン

誰が作ったかによって、同じ公開前チェックでも見落としやすい場所が変わります。

自作サイトならテンプレートの初期情報、納品されたサイトなら管理権限のように、確認の重心が動きます。

7. チームで公開するなら、確認項目より担当と承認を先に決める

複数人で公開する場合、いちばん起こりやすいのが「誰かが確認したはず」です。

内容確認、表示・動作、技術設定、公開作業、最終承認の担当を決めて、未確認の項目を一か所へ集めると、この抜けを防げます。

公開時刻、切り戻し方法、公開後に問題が起きたときの連絡先も、公開前に決めておく項目です。

この部分は個人向けのチェック項目とは目的が違うので、「Webサイト公開前に確認すること一覧|担当者向け最終チェック」へ分けています。

8. 実作業ではチェックリストへ落とす

全体像がつかめたら、実際の作業は一覧で管理した方が速く進みます。

各項目を「確認済み」「要修正」「未確認」に分けて、要修正には担当と期限を付けます。

未確認の項目の確認先は、誰が見ると気づきやすいかで決まります。

確認する内容

気づきやすい人

会社情報、サービス内容、料金、問い合わせ先

運営者

読みやすさ、画像、スマートフォン表示、主要な操作

運営者と第三者

フォームの送信先、公開設定、URL、リダイレクト、計測

制作者・管理担当者

読者の迷い、説明不足、問い合わせまでの分かりやすさ

初めて見る第三者

法務、決済、安全性など専門判断が必要な内容

該当分野の専門家

画面を見ただけでは判断できない項目を無理に「問題なし」にせず、「未確認」のまま確認先を付けておく方が、あとで困りません。

実際のチェック項目は「ホームページ公開前チェックリスト|スマホ・文章・導線・設定をまとめて確認」にまとめています。動作テストの手順は「Webサイトのリリース前テスト入門|表示・リンク・フォームを確認する手順」に分けています。

まとめ:公開前チェックは「公開可否を判断できる状態」を作る

ホームページの公開前チェックで作るのは、公開していいかを判断できる状態です。

内容、表示、導線・フォーム、検索・計測、権限・運用、公開手順の6分野を見て、公開すると影響が大きい問題が残っていないかを判断します。

公開直後には、正式URL、フォーム、計測、検索の公開設定を本番環境でもう一度見ます。

自分で判断できない項目は「問題なし」にせず、「未確認」として担当者を決めておけば、それも公開の判断材料になります。

公開していい理由と、公開後に残す改善課題を分けて説明できる状態になれば、公開前チェックは目的を果たしています。

公開日を決める前に、「これが残っていたら公開を止める」と言える問題を紙に書き出しておくと、判断の基準が公開当日までぶれません。

関連記事

CONTACT

「こんなこと、できるかな?」
から、お気軽に。

まだ具体的に決まっていなくても大丈夫です。
お話を伺いながら、必要なことを一緒に整理していきます。