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