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