自作ホームページを公開する前に｜初心者が見落としやすい注意点
自分で作ったホームページが形になると、「やっと公開できる！」とうれしくなりますよね！
ただ、作った本人はページの内容も操作の順番も分かっているため、初めて見る人がどこで迷うかには気づきにくいものです。
テンプレートに元から入っていた見本の文章や、使っていないボタンが残っていても、毎日見ているうちに見慣れてしまい、自分では読み飛ばしてしまいます。
とはいえ、専門家と同じレベルですべてを確認する必要はありません。
この記事では、自作ホームページで見落としやすいポイントを、公開前に確認しやすい順番で見ていきます。
取り上げるのは、初めて見る人の目線、載せておきたい情報、テンプレートの残り、スマホでの表示と操作、確認結果の記録です。
1. 作った本人ほど見落としやすい
自作サイトの確認で最初に変えたいのは、どの立場でページを見るかです。
作っている本人は、「このボタンの先には料金ページがある」「この言葉は自社の商品名だ」と知っています。
初めて訪れる人は、ボタンの先に何があるかも、その言葉が商品名であることも知りません。
まずは編集画面を閉じ、公開時と同じ見え方のプレビューや確認用URLを開いてみましょう。
開いたら、次の3つにすぐ答えられるか確かめてください。
- 誰に向けたホームページか
- 何を相談・購入・依頼できるか
- 次にどのボタンやリンクを使えばよいか
答えがページのどこかに書いてあっても、見つけるまでに迷うようなら、見出しやボタンの言葉を見直しましょう。
家族や知人など、事業の内容を詳しく知らない人にトップページを見てもらう方法もおすすめです。
そのときはサイトの説明を先にせず、ひととおり触ってもらったあとで「何をするサイトに見えたか」「次はどこを押したくなったか」を聞いてみましょう。
説明しなくても伝わるかどうかが大切です。見てもらう前にサイトの目的を話してしまうと、初めての人がどこで迷うのかを見つけられなくなります。まずは何も言わず、一度触ってもらうだけで十分です。
気になる点が見つかったら、そのページのURLと、引っかかった言葉をセットでメモに残しておきましょう。
あとから直すときに、どのページの話だったかを探し直さずに済みます。
2. 必要な情報が足りているか
見た目が整っていても、依頼するかどうかを判断する材料が足りなければ、訪れた人は問い合わせや購入まで進めません。
次の項目がページのどこかに書かれているか、まず確認しましょう。
- サービスや商品の内容
- そのサービスの対象になる人
- 料金、見積もりの考え方、追加費用がかかる条件
- 対応できる地域、受付の条件、納期の目安
- 会社名や屋号、運営者の情報
- 電話、メール、問い合わせフォームなどの連絡方法
- 問い合わせたあとの流れと、返信までの目安
料金が一律で決まらないサービスなら、無理に金額を載せる必要はありません。
ただし、「個別見積もり」の一言で終わらせるのはもったいないところです。
何によって料金が変わるのか、見積もりを頼む前に何を伝えればよいのかを書いておくと、読んだ人が相談しやすくなります。
同じ情報をトップページ、サービスページ、フッター、画像の中に載せている場合は、それぞれの内容が食い違っていないかも確認しておきましょう。
文字や図で情報を伝えている画像には、代替テキスト（画像の内容を文字で説明する設定）を入れましょう。
画像が表示されないときや、読み上げソフトを使う人にも、内容と目的が伝わるようにするためです。
代替テキストの書き分け方は、W3Cの画像に関するチュートリアルで整理されています。
情報を伝える画像、装飾だけの画像、リンクやボタンとして使う画像など、役割ごとの考え方が確認できます。
装飾だけの画像は、代替テキストを空にして、読み上げの対象から外しましょう。
リンクやボタンとして使う画像には、見た目の説明ではなく、押すとどこへ移動するか、何ができるかを書いてください。
すべての画像に同じ説明を入れるのではなく、そのページで画像が果たす役割に合わせて書き分けるのがポイントです。
写真、イラスト、文章、ロゴは、自分で作ったものか、公開してよいという許可や利用条件を確認できるものだけを使いましょう。
無料素材でも利用条件は配布元ごとに異なるため、「無料だから自由に使える」とは決めず、公開前に配布元を確認してください。
配布元の説明を読んでも使ってよいか分からないときは、自分だけで決めないでください。
公的機関が出している情報を調べるか、その分野の専門家へ相談すると安心です。
3. テンプレートの初期状態が残っていないか
ホームページ作成サービスのテンプレートは便利ですが、最初から入っている見本の文章や画像が、そのまま残りやすいところです。
「自分が変更した場所」ではなく、「まだ変更していない場所」を探すつもりで確認しましょう。
テンプレートに元から入っていて、残りやすいものはこちらです⇩
- 「ここに文章が入ります」「準備中」などの仮文章
- 見本の人物名、会社名、住所、電話番号
- サンプル画像や仮のロゴ
- 使っていないボタンやSNSアイコン
- 押しても何も起きない、移動先が設定されていないリンク
- 公開する予定のない見本ページや投稿
- 日本語へ直していない、テンプレートのままの英語見出し
- ページタイトルやサイト名の初期表記
- ホームページ作成サービスの初期アイコン
- OGP用の見本のタイトル、説明、画像（SNSやチャットで共有したときに表示される情報）
- 無料プランや初期設定で表示されるサービス提供元の表記
ヘッダーとフッターは、すべてのページに共通で表示されることが多い部分です。
ここに仮の情報が残っていると、どのページを開いても表示されてしまうため、最初に見ておくと効率的です。
次に、メニューに表示されていないページも、管理画面のページ一覧から開いて確認しましょう。
いらないページを消すか迷うときは、すぐ削除しないでください。
非公開や下書きへ変更できるかを先に確認すると安心です。
ページの複製やバックアップを残せるサービスなら、元に戻せる状態にしてから整理しましょう。
編集画面だけで確認を終えないことが大切です。管理画面では消えたように見えても、公開用のページやメニューに古い内容が残ることがあります。最後は、お客様が実際に開くURLでも確認してみましょう。
スマートフォン用とパソコン用で別々に表示を設定できるサービスでは、どちらの画面にも仮の文章や画像が残っていないか見ておきましょう。
画面に出にくい初期設定も確認する
ホームページ作成サービスでは、本文を直しても、サイト全体にかかわる設定だけが初期状態のまま残ることがあります。
管理画面の「サイト設定」「公開設定」「SEO設定」などを開き、次の項目を確認しましょう。
- サイト名とページごとのタイトル
- favicon（ブラウザのタブなどに表示される小さなアイコン）
- OGP用のタイトル、説明、画像
- 検索結果にサイトを表示させない設定が、意図せず残っていないか
- ページごとに、公開中・下書き・非公開のどれになっているか
- サービス提供元の初期サブドメインやブランド表記
設定の名前や使える機能は、利用するサービスと契約プランによって異なります。
意味が分からない項目を、推測で切り替えないでください。
利用中のサービスの公式ヘルプで、その設定が公開後にどう働くかを確認しましょう。
4. スマホと操作を実際に試したか
パソコンのプレビューできれいに見えても、実際のスマートフォンで同じように表示され、同じように動くとは限りません。
まずは、お客様が開く正式なURLを確認しましょう。
編集画面のプレビューURLや確認用URLは、公開後に案内するURLと違うことがあります。
公開用URL・独自ドメイン・HTTPSを確認する
独自ドメイン（自分で取得した「◯◯.com」のようなアドレス）を使う場合は、予定していたURLでサイトが開くかを確かめましょう。
あわせて、wwwを付けるか付けないかまで含めて、お客様へ案内する正式なURLを決めておきます。
その正式なURLがhttps://で開き、証明書の警告が表示されないことも確認してください。
ドメインの接続やHTTPSの準備が終わるまでに、時間がかかるサービスもあります。
公開予定日の直前になって慌てないよう、余裕を持って設定しておきましょう。
無料プランや一部のプランでは、独自ドメインの利用、サービス提供元の表記を消す機能、フォーム、アクセス解析、保存容量などに制限がかかることがあります。
公開したあとで「必要な機能が使えない」と気づかずに済むよう、契約中プランの機能一覧と料金条件を、公式サイトで先に確認しておきましょう！
ドメインやDNS（ドメインとサーバーを結び付ける設定）が分からない場合は、値を推測で変更しないでください。サービスの案内を読むか、詳しい人へ確認しましょう。
URLとプランを確認したら、スマートフォンとパソコンの両方で、お客様と同じ順番でサイトを触ってみましょう。
確認する流れは次のとおりです。
- トップページを開く
- メニューからサービスページへ移動する
- 料金や対応範囲を読む
- 問い合わせボタンを押す
- テスト用と分かる内容を入力して送信する
- 完了表示、自動返信、運営者側の通知を確認する
表示では、文章や画像が画面からはみ出していないか、文字が小さすぎないか、ボタンが重なっていないか、表が途中で切れていないかを見ましょう。
画面の幅が狭くなっても、情報や機能を失わずに内容を読めるようにする考え方は、W3Cのリフローに関する解説で説明されています。
まずは手元のスマートフォンで、横方向へスクロールしないと読めない場所がないかを見てみましょう。
そこから始めると、表示の確認に取りかかりやすくなります。
続けて、文字が無理なく読めるか、ボタンを指で押せるか、フォームへ入力できるかも確認しましょう。
フォームは、画面に表示されているだけでは確認したことになりません。
W3Cのフォームに関するチュートリアルも参考にしながら、項目名が分かりやすいか、入力方法が伝わるかを確認しましょう。
入力を間違えたときに直し方が分かるか、送信できたかどうかが画面で分かるかも見てください。
テスト送信では、本物の個人情報を使わないでください。
確認が終わったら、送信したテストデータを削除しておきましょう。
もう少し詳しいテストの進め方は、「Webサイトのリリース前テスト入門」で順番に紹介しています。
5. 最後は一覧で抜け漏れをなくす
頭の中だけで確認を進めると、実際には見ていないのに「見たつもり」になる項目が増えていきます。
最後はチェックリストを使い、確認した結果を残しておきましょう。
項目ごとの結果は、次の3つに分けると管理しやすくなります。
- 確認済み：予定どおり表示・動作した
- 要修正：公開前に直す内容がある
- 未確認：自分では判断できず、詳しい人に見てもらう必要がある
「未確認」の項目を、無理に自分だけで解決する必要はありません。
検索設定、フォームの内部設定、法律や安全性など、自分では判断しにくい項目は、誰に確認するか、いつまでに確認するかを決めておきましょう。
直した項目は、チェックを付けて終わりにせず、同じ端末で同じ操作をもう一度試しましょう。
ページ名、URL、確認した端末、結果、修正する担当者の5列で表を作っておくと、あとから見返しやすくなりますよ。
自作サイトの場合は、ページの表示確認だけでは足りません。
公開用URL、独自ドメイン、HTTPS、サイト名、favicon、SNSで共有したときの表示、検索公開設定、契約プランの制限も、同じ表へ入れておきましょう。
そのまま使える分野別の項目は、「ホームページ公開前チェックリスト」にまとめています。
まとめ
自作ホームページの公開前に見たいポイントを、最後に振り返ります。
- 初めて見る人が、誰向けのサイトか、何ができるか、次にどこを押せばよいかを理解できるか
- サービス、料金、対応範囲、運営者、連絡方法がそろっているか
- テンプレートの仮文章、見本画像、いらないページが残っていないか
- 公開用URL、独自ドメイン、HTTPS、サイト名、favicon、SNSで共有したときの表示が予定どおりか
- 検索公開設定、下書きページ、契約プランの制限を確認したか
- スマホとパソコンの両方で表示し、問い合わせの送信まで操作できるか
- 確認済み・要修正・未確認の区別を一覧へ残したか
すべてを一度に完璧にする必要はありません。
まず一つやるなら、編集画面を閉じて、スマートフォンでトップページを開いてみましょう。
「誰向けで、何ができ、次にどこを押すか」が分かれば、最初の確認は完了です。
関連記事
