Studio Attrait

BLOG

ブログ

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

ホームページの公開前は、確かめる項目が多くなります。

思い出した順に見ていくと、どうしても抜けが出ます。

スマホでの見え方はしっかり見たのに、問い合わせの通知設定や検索まわりの設定を忘れたまま公開してしまう、ということも起こります。

抜けを減らす近道は、思い出した順に見るのをやめて、実際のサイトを開きながら上から順に見ていく一覧を使うことです。

各項目の結果は、次の3つに分けて残します。

  • 確認済み:問題なし、または必要な対応まで終わった
  • 要修正:公開前か公開後に直す
  • 未確認:自分では判断できない、またはまだ見ていない

判断できなかった項目は「未確認」のまま残し、誰がいつ確かめるかだけ決めておくと、あとから1つずつ片づけられます。

公開前チェック全体の考え方と、どこまで確かめれば公開できるかは「ホームページ公開前チェックの全体像|公開判断を6分野で整理」で整理しています。

1. 文章・画像を確認する

最初に見るのは、専門知識がなくても確かめやすい文章と画像です。

見る順番は、ページを作った順ではなく、利用者がよく見るページが先です。

トップページ、主力サービス、料金、問い合わせ、会社情報の順に見ていくと進めやすくなります。

文章

  • 会社名、屋号、サービス名の表記がそろっている
  • 料金、税込・税別、追加料金の条件が正しい
  • 営業時間、定休日、対応地域、納期が今の内容になっている
  • 住所、電話番号、メールアドレスが正しい
  • 日付、年度、キャンペーン期間が古いまま残っていない
  • 仮テキスト、制作メモ、見本の人物名・会社名が残っていない
  • 見出しだけ読んでもページの内容が分かる
  • 問い合わせ後の流れと返信目安が実際の運用と合っている

画像

  • 見本画像、仮ロゴ、生成途中の画像が残っていない
  • 画像がぼやけたり、不自然に切れたりしていない
  • 使っている画像について、公開に必要な利用条件や権利を確かめられる
  • 情報を伝える画像に、その内容に合う代替テキストがある
  • 装飾だけの画像は、空の代替テキスト(alt="")にするか、CSS(ページの見た目を指定する仕組み)の背景画像として扱い、読み上げの対象から外している
  • 料金や営業時間など大事な情報を、画像の中だけに閉じ込めていない

代替テキストは、画像の役割によって書き分けます。

情報を伝える画像、装飾だけの画像、リンクとして使う画像それぞれの考え方は、W3Cの画像に関するチュートリアルで整理されています。

2. スマートフォンとパソコンで表示を確認する

管理画面のプレビューは、実際の表示と違って見えることがあります。

見る先は、手元のスマートフォンとパソコンのブラウザで開いた実際のページです。

全ページを一度に見るのは大変なので、先に開くのはトップページ、文章量の多いページ、料金表、問い合わせページの4つです。

  • 主要ページがエラーにならず表示される
  • 文章、画像、表が画面の外へ不自然にはみ出していない
  • ページ全体に不要な横スクロールが出ていない
  • 文字が小さすぎず、行が詰まりすぎていない
  • 文字と背景の色に差があり、無理なく読める
  • 画面に固定されたメニュー、ボタン、バナーが本文を隠していない
  • メニューを指で開いたり閉じたりできる
  • ボタンやリンクを指で押しやすく、隣を押し間違えにくい
  • 入力欄をタップして文字を入力しやすい
  • スマートフォンを縦向き・横向きにしても主要な内容と機能を使える

画面の幅が狭くなっても内容と機能が失われないようにする考え方(リフロー)は、W3Cのリフローに関する解説で説明されています。

横スクロールの項目を見るときは、この解説が基準になります。

ボタンの押しやすさの目安は、W3Cの操作対象の大きさに関する解説にまとまっています。

難しい数値を最初から測らなくても、手元のスマートフォンで「読めない」「押し間違える」「横へ大きくはみ出す」と感じた場所があれば、そこが要修正です。

3. リンク・ボタン・フォームを最後まで試す

次は、サイトを初めて訪れた人になったつもりで、トップページから問い合わせまでの流れを最初からたどってみます。

見るのはリンクが開くかどうかだけではなく、探している内容や問い合わせ画面まで迷わずたどり着けるかです。

リンク・ボタン

  • ロゴからトップページへ戻れる
  • ヘッダー・フッターのメニューが正しいページへ移動する
  • 主要ボタンの文言と移動先が合っている
  • 本文中のリンクが、古い情報や終了したサービスのページへ移動しない
  • 外部リンクが今も開き、正しい情報へ移動する
  • 電話番号を押すと、意図した番号で発信画面へ進む
  • メールリンクを押すと、意図した宛先で作成画面へ進む
  • SNSリンクが正しいアカウントを指している

問い合わせフォーム

  • 必須項目と任意項目を見分けられる
  • 各入力欄に何を書くか分かる
  • 未入力や形式エラーのとき、どこをどう直すか分かる
  • テスト用の内容で最後まで送信できる
  • 送信後に完了画面か完了メッセージが出る
  • 自動返信を設定している場合、送信した人へ届く
  • 運営者側の正しい宛先へ通知が届く
  • いつごろ返信するか、次に何が起こるかを案内している

画面に出た完了メッセージと運営者側に届いたメールは別物なので、運営者側が受信できたところまで確かめて「確認済み」にします。

テスト送信に入れるのは、自分の名前と連絡先です。

本物の顧客情報や決済情報は、テストには使いません。

確認が終わったら、送信したテストデータを管理画面と受信メールから消してから公開します。

端末やブラウザを決めて、表示・リンク・フォームをテスト表で管理する方法は「Webサイトのリリース前テスト入門|表示・リンク・フォームを確認する手順」に分けています。

4. 運営者情報・取引条件・個人情報の扱いを確認する

利用者が問い合わせや申し込みを決めるとき、見ているのはサービス内容だけではありません。

「誰が運営しているのか」「困ったときにどこへ連絡すればいいのか」も、大きな判断材料です。

ただし、必要な表示は事業内容や販売方法によって変わるので、ここから挙げる項目のうち自社に当てはまるものを選んで見ます。

  • 運営会社・屋号・連絡方法をすぐ見つけられる
  • 新規の問い合わせ先と、既存のお客様向けサポート窓口を区別できる
  • 受付時間や返信目安が実際の運用と合っている
  • フォームで受け取る情報と、プライバシーポリシーに書いた内容が合っている
  • 主要ページからプライバシーポリシーへ移動できる
  • 通信販売を行う場合、事業者情報・価格・送料・支払方法・返品条件などの表示が今の運用と合っている
  • 自分では判断できない法律の項目について、確かめる先が決まっている

個人情報の取扱いに関する法令やガイドラインは、個人情報保護委員会の公式案内で確かめられます。

ネットショップのように通信販売に当たる場合は、広告に表示する事項や表示のしかたが決まっていて、その内容は消費者庁の特定商取引法ガイドにまとまっています。

どこまでの表示が必要かは、事業の内容、取引のしかた、受け取る情報の種類によって変わります。

ほかのサイトの表示をそのまま写すより、自社の事業と取引の条件に当てはめて決めるほうが確実です。

法律に関わる項目で自分では判断できないものは、「未確認」と残したうえで、確かめる公的窓口や専門家まで決めておきます。

5. 検索・URL・計測を確認する

検索や公開に関わる設定は、サイトの画面を見ただけでは気づきにくいところです。

意味の分からない設定を自分だけで変えると、公開中のページが検索から消えてしまうこともあります。

設定の意味が分からないときに頼るのは、制作会社や、その設定を担当した人です。

  • 各ページに内容が分かるページタイトル(title)が付いている
  • 「ホーム」「ページ1」などの仮タイトルが残っていない
  • 正式なURLが https:// で開き、ブラウザに安全性の警告が出ない
  • wwwの有無など、同じページが複数のURLで開く状態になっていない
  • 公開したいページに意図しないnoindexが残っていない
  • 送信完了ページや管理用ページなど、検索へ出さないページを分けている
  • URLを変更した重要ページに、新しいURLへの恒久リダイレクトがある
  • 重要な公開ページがサイトマップや内部リンクから見つけられる
  • Search Consoleを、予定していた自社のアカウントで確認できる
  • アクセス解析を使う場合、予定したプロパティで計測される
  • 公開した直後に、フォームと主要な計測を本番のURLでもう一度確かめる

noindexは、そのページを検索結果へ登録しないようGoogleへ伝えるための設定です。

ただし、Googleがこの指定を読み取れるのは、そのページをクロール(検索エンジンがページを読みに来ること)できる状態のときだけです。

robots.txtによるクロールの制御と、noindexによる検索結果からの除外は、別の仕組みです。

指定が働く条件と確かめ方は、Googleのnoindexに関する公式資料にまとまっています。

設定を一括で変えるのではなく、「検索へ出したいURLか」「クロールさせたいURLか」を分けて決めます。

Search Consoleをまだ使っていない場合の始め方は「Google Search Consoleの始め方|初心者が最初に見る3つの画面」にあります。

6. 最後に「公開前・公開後・未確認」へ仕分ける

すべての項目を見終えたら、残った問題を次の3つへ分けます。

分類

例

次の行動

公開前に修正

誤料金、フォーム送信不能、主要ページ404、重要情報の誤り

修正完了まで公開を止める

公開後の改善

追加説明、細かな装飾、優先度の低い改善

担当・期限を決めて公開後へ回す

未確認

自分では判断できない検索設定、法務、サーバー、セキュリティ等

確認する人・期限を決める

チームで公開作業をするなら、さらに公開担当、確認担当、最終承認者、切り戻し条件を決めます。

担当者ごとの公開作業や切替順は「Webサイト公開前に確認すること一覧|担当者向け最終チェック」へ分けています。

まとめ:チェックリストは「未確認」を見えるようにするために使う

文章・画像、表示、リンク・フォーム、運営者情報、検索・計測を実際のサイトで見て、確認済み・要修正・未確認へ分けます。

公開すると影響が大きい問題を先に直し、残りは担当と期限を決めます。

公開した直後に本番のURLでフォームと計測をもう一度確かめるところまでが、この一覧の範囲です。

いちばん小さい始め方は、スマートフォンで開いたトップページの会社名、料金、連絡先の3項目に「確認済み・要修正・未確認」の印を付けることです。

関連記事

CONTACT

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

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