自作ホームページを公開する前に｜初心者が見落としやすい注意点
ホームページを自分で作り上げた人は、形になった画面を見て、やっと公開できるところまで来たとうれしくなります。
ただ、作った本人はページの内容も操作の順番も分かっているため、初めて見る人がどこで迷うかには気づきにくいものです。
テンプレートに元から入っていた見本の文章や、使っていないボタンが残っていても、毎日見ているうちに見慣れてしまい、自分では読み飛ばします。
とはいえ、確認の水準を専門家と同じところまで上げなくても、見落としの多くは見つかります。
この記事では、自作ホームページで見落としやすいポイントを、公開前に確認しやすい順番で見ていきます。
取り上げるのは、初めて見る人の目線、載せておきたい情報、テンプレートの残り、スマホでの表示と操作、確認結果の記録です。
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で共有したときの表示、検索公開設定、契約プランの制限も、同じ表へ入れます。
そのまま使える分野別の項目は、「ホームページ公開前チェックリスト」にまとめています。
まとめ
自作ホームページの公開前に見たいポイントは、次の7つです。
- 初めて見る人が、誰向けのサイトか、何ができるか、次にどこを押せばいいかを理解できるか
- サービス、料金、対応範囲、運営者、連絡方法がそろっているか
- テンプレートの仮文章、見本画像、いらないページが残っていないか
- 公開用URL、独自ドメイン、HTTPS、サイト名、favicon、SNSで共有したときの表示が予定どおりか
- 検索公開設定、下書きページ、契約プランの制限を確認したか
- スマホとパソコンの両方で表示し、問い合わせの送信まで操作できるか
- 確認済み・要修正・未確認の区別を一覧へ残したか
一度にすべてを完璧にしなくても、公開はできます。
一つだけ選ぶなら、編集画面を閉じて、スマートフォンでトップページを開いたときの見え方です。
「誰向けで、何ができ、次にどこを押すか」が分かれば、最初の確認は完了です。
