ホームページ公開前チェックリスト｜スマホ・文章・導線・設定をまとめて確認
ホームページの公開前チェックは、確認する項目が多くて迷いますよね。
思い出した順に見ていくと、スマホ表示は確認したのに、問い合わせ通知や検索設定をうっかり忘れてしまうこともあります。
そこで、この記事では公開前に使える項目を、5つの分野へ分けました。
チェックできなかった項目は、無理に「問題なし」にしなくても大丈夫です！
「確認済み」「要修正」「未確認」を分けると、1つずつ進めやすくなります。
確認する分野 | 主な内容 |
|---|---|
文章・画像 | 情報、表記、画像、代替テキスト、利用条件 |
表示 | スマホ、パソコン、文字、ボタン、はみ出し |
導線・操作 | メニュー、リンク、問い合わせ、通知 |
信頼性・表示 | 運営者、連絡先、個人情報、取引条件 |
検索・公開設定 | タイトル、URL、検索除外、HTTPS、計測 |
ここから、上から順に確認できるチェックリストが続きます。
自分では判断できない項目には「未確認」と付け、あとで確認する担当者だけ決めておきましょう。
1. 文章・画像のチェック
最初に見るのは、専門知識がなくても確認しやすい文章と画像です。
ページを編集した順番ではなく、利用者がよく見るトップページ、サービスページ、問い合わせページから始めると進めやすいです。
文章のチェック
- 会社名、屋号、サービス名の表記がそろっている
- サービスや商品の内容が現在の情報になっている
- 料金、税込・税別、追加料金の条件に誤りがない
- 営業時間、定休日、対応地域、納期が現在の内容になっている
- 住所、電話番号、メールアドレスに誤りがない
- 日付、年度、キャンペーン期間に古い情報が残っていない
- 誤字や変換ミスがない
- 「仮テキスト」「準備中」などの制作メモが残っていない
- 見出しだけ読んでも、ページの内容が大まかに分かる
- 問い合わせ後の流れや返信時期が分かる
料金や営業時間は、本文だけでなく、ヘッダー、フッター、画像内の文字まで確認しておくと安心です。
一部だけ古い情報が残ると、どれが正しいのか利用者が判断しにくくなります。
画像のチェック
- 見本画像や仮のロゴが残っていない
- 画像がぼやけたり、不自然に切れたりしていない
- 公開に必要な利用許可や利用条件を確認できる
- 作者名や配布元など、必要な表記を入れている
- 情報を伝える画像に、内容に合う代替テキストがある
- 装飾だけの画像は、空の代替テキスト（
alt=""）にするか、CSS（ページの見た目を指定する仕組み）の背景画像として扱い、読み上げ対象から外している - 画像の中だけに重要な説明を閉じ込めていない
W3Cの画像に関するチュートリアルでは、情報を伝える画像、装飾画像、リンクやボタンとして使う画像など、役割に応じた代替テキストの考え方が整理されています。
代替テキストは画像の見た目を長く説明するものではなく、その場所で画像が伝える情報や機能に合わせて書きましょう。
画像の権利や利用条件で判断が必要な場合は、配布元の規約や該当分野の専門家へ確認してください。
2. スマホ・パソコン表示のチェック
管理画面のプレビューだけでなく、実際のスマートフォンとパソコンでも開いて確認してみましょう。
まずはトップページ、情報量の多いページ、料金表、問い合わせページから優先してみてください。
共通の表示チェック
- ページがエラーにならず表示される
- 見出し、本文、ボタンを見分けやすい
- 文字が小さすぎず、行が詰まりすぎていない
- 文字と背景を無理なく読み分けられる
- 文章や画像が途中で切れていない
- 画像の縦横比が不自然に変わっていない
- メニューや固定表示が本文を隠していない
- 読み込み中の表示が残っていない
スマートフォンのチェック
- ページ全体に不要な横スクロールが出ていない
- 表や長いURLだけが画面外へ大きくはみ出していない
- メニューを開閉できる
- ボタンを指で押しやすい
- 隣り合うボタンを押し間違えにくい
- 入力欄へ文字を入力しやすい
- 縦向きと横向きの両方で主要な内容を確認できる
横スクロールの項目を確認するときは、W3Cのリフローに関する解説が参考になります。
ここでは、画面の幅が狭くても内容や機能を保つ考え方が説明されています。
表など横方向の表示が必要な部分は、その部分だけを横へ動かせるかどうかも見ておきましょう。
押しやすさの目安は、W3Cの操作対象の大きさに関する解説で、操作部分の大きさや間隔、例外まで確認できます。
難しい数値を最初から測らなくても、まずは実機で押せば、操作しにくい場所に気づけます。
「押しにくい」「隣を押してしまう」と感じた場所は、ページのURLとスクリーンショットを残しておきましょう。
3. 導線・リンク・フォームのチェック
次は、初めて訪れた人になったつもりで、主要な流れを最初からたどってみましょう。
リンク先が開くだけでなく、目的の内容までたどり着けるかも確認しましょう。
導線とリンクのチェック
- ロゴからトップページへ戻れる
- ヘッダーとフッターのメニューが正しいページへ移動する
- ページ内リンクが意図した位置へ移動する
- 主要なボタンの言葉と移動先が合っている
- 本文中のリンクが古い情報や終了したサービスへ移動しない
- 外部サイトへのリンクが現在も開く
- 電話番号を押すと、意図した番号で発信操作へ進む
- メールアドレスを押すと、意図した宛先でメール作成へ進む
- 使用している場合はSNSリンクが正しいアカウントへ移動する
フォームのチェック
- 必須項目と任意項目を見分けられる
- 各入力欄の目的と入力例が分かる
- 未入力や形式違いのとき、直し方が文章で分かる
- テスト用の内容を入力して送信できる
- 送信後に完了画面や完了メッセージが表示される
- 自動返信を設定している場合は利用者側へ届く
- 運営者側の正しい宛先へ通知が届く
- 返信時期や次の流れが案内されている
W3Cのフォームに関するチュートリアルも、項目名、入力の説明、エラー、送信結果をチェックする材料になります。
完了メッセージが表示されても、運営者側の受信まで成功したとは限りません。
表示と受信は、分けて確認する必要があります。
テストには本物の顧客情報や決済情報を使わず、終わったら不要なテストデータを適切に削除してください。
操作を順番に試す方法は、「Webサイトのリリース前テスト入門」で詳しく説明しています。
4. 信頼性・法的表示のチェック
サービス内容だけでなく、「誰が運営し、困ったときにどう連絡できるか」も利用者の判断材料です。
ここは、サイトの事業内容や販売方法に合わせて確認しましょう。
運営者と連絡方法のチェック
- 会社名、屋号、運営者情報が現在の内容になっている
- 住所や対応地域に誤りがない
- 電話、メール、フォームなどの連絡方法が見つかる
- 問い合わせ先と、営業・サポートの窓口を区別できる
- 受付時間や返信時期の案内が実際の運用と合っている
個人情報と取引条件のチェック
- フォームで受け取る情報と、プライバシー関連の表示が合っている
- プライバシーポリシーへ主要ページから移動できる
- Cookieや外部サービスの利用について、必要な案内を確認した
- 通信販売を行う場合、必要な取引条件と事業者情報を確認した
- 料金、送料、支払方法、提供時期、解約・返品条件などが現在の運用と合っている
- 法的な判断が必要な項目を、該当する公的情報や専門家へ確認した
個人情報の取扱いに関する法令やガイドラインは、個人情報保護委員会の公式案内で確認できます。
通信販売に該当する場合は、消費者庁の特定商取引法ガイドに、広告で表示する事項や表示方法の案内があります。
必要な表示は事業、取引方法、取得する情報によって異なります。
「ほかのサイトに書いてあったから同じで大丈夫」とは決めず、自社に当てはまる条件を確認してください。
法律に関わる項目は、自分で判断できないときに「未確認」と残し、確認する公的窓口や専門家まで決めておきましょう。
5. 検索・公開設定のチェック
検索や公開の設定は、画面を読んだだけでは気づきにくいですよね。
分からない設定は自己判断で変えず、担当者と確認しながら進めましょう。
ページとURLのチェック
- 各ページに内容が分かるページタイトルがある
- 「ホーム」「ページ1」などの仮タイトルが残っていない
- 全ページが同じタイトルになっていない
- 正式なURLが
https://で開く - ブラウザに安全性の警告が表示されない
wwwの有無など、予定外のURLへ分かれていない- URLを変更した主要ページに、対応する転送がある
ページタイトルの考え方は、Googleのタイトルリンクに関する公式資料で確認できます。
検索と計測のチェック
- 公開したいページに、意図しない
noindexが残っていない - 完了ページや管理用ページなど、検索へ出さないページを区別している
- 公開したいページがサイトマップに含まれている
- Search Consoleを予定した自社アカウントで確認できる
- アクセス解析が予定したアカウントへ記録される
- 公開直後にフォームと主要な計測を本番URLで再確認する
noindexは、そのページを検索結果へ登録しないようGoogleへ伝えるための設定です。
ただし、Googleがこの指定を読み取るには、そのページをクロールできる状態でなければなりません。
条件と確認方法はGoogleのnoindexに関する公式資料を参考にしてください。
Search Consoleをまだ使っていない場合は、Google Search Consoleを開き、サイトのプロパティを追加して所有権の確認まで済ませておきましょう。
登録できたら、画面上部の検査用の検索バーへページのURLを貼り付けると、URL検査ツールでそのページの状態を確認できます。
サイトマップは、重要なURLを検索エンジンへ伝えるためのファイルです。
ただし、送信すればすべてのURLが必ずクロール・登録されるわけではありません。
Googleのサイトマップに関する公式資料にも、役割と必要になりやすいサイトが整理されています。
まとめ
最後に、公開前チェックの要点を5つの分野で振り返りましょう。
- 文章、料金、連絡先、画像が現在の内容になっている
- スマホとパソコンで読んで操作できる
- 主要リンクとフォームを最後まで試した
- 運営者情報、個人情報、必要な取引条件を確認した
- ページタイトル、URL、検索除外、サイトマップ、計測を確認した
チェックが付かない項目があっても、すぐ公開を諦める必要はありません。
公開前に直すもの、担当者へ聞くもの、公開後に改善するものへ分けると、公開までの対応を整理できます。
最初の一歩として、「文章・画像のチェック」から、会社名、料金、連絡先の3項目に印を付けてみましょう！
結果を「確認済み」「要修正」「未確認」に分ければ、次に見る場所も分かりやすくなります。
関連記事
- ホームページ公開前チェック完全ガイド｜公開してから困らないための確認項目
- このホームページ、本当に公開して大丈夫？初心者が最後に確認したい7つのこと
- Webサイトのリリース前テスト入門｜表示・リンク・フォームを確認する手順
ひととおり確認しても、自分では判断しにくい項目が残ることもありますよね。
なのはAIラボでも、ホームページの状態を確認できるAI簡易サイト仕上がり診断を提供しています。
「未確認」のまま残った項目を整理するときの、選択肢の一つとして参考にしてください。
