10. 実装確認・テスト・公開準備

この章では、実装後の確認、テスト、公開準備について学びます。

Webサイトは、デザイン通りに見えるだけでは不十分です。

リンク、フォーム、スマホ表示、画像、OGP、SSLなど、公開前に確認すべき項目があります。

実装確認とは

実装確認とは、制作したサイトが意図した通りに表示・動作しているかを確認する作業です。

デザインと見比べるだけでなく、実際にブラウザで操作して確認します。

制作者側の確認では、主に次のことを見ます。

• レイアウトが崩れていないか
• 文字や画像が正しく表示されているか
• リンク先が正しいか
• ボタンやメニューが動くか
• フォームが送信できるか
• スマホで見やすいか
• 表示速度に大きな問題がないか
• 不要なテスト文言が残っていないか

公開前チェックは、公開直前にまとめて行うよりも、実装中から少しずつ確認する方が安全です。

PCとスマホ表示

Webサイトは、PCとスマホの両方で確認します。

特に、スマホ表示は実務で重要です。

スマホでは画面幅が狭いため、PCでは問題ないレイアウトでも崩れることがあります。

確認したい項目は次の通りです。

• 文字が小さすぎないか
• ボタンが押しやすいか
• 横スクロールが出ていないか
• 画像が潰れていないか
• メニューが開閉できるか
• フォーム入力がしやすいか
• 余白が詰まりすぎていないか

実機で確認できる場合は、スマホ本体でも確認します。

ブラウザの開発者ツールだけでは気づきにくい操作感を確認できます。

ブラウザ確認

ブラウザによって、表示や動作に差が出ることがあります。

最低限、主要なブラウザで確認します。

• Chrome
• Safari
• Edge
• Firefox

すべての古い環境に完全対応する必要はありません。

ただし、対応ブラウザの前提は制作前に確認しておくと安心です。

特に、企業案件では社内で使っているブラウザが決まっていることがあります。

リンクとフォーム

リンク切れやフォーム不具合は、公開後の機会損失につながります。

公開前に必ず確認します。

リンク確認では、次の項目を見ます。

• ナビゲーション
• フッターリンク
• ボタンリンク
• SNSリンク
• 外部リンク
• PDFリンク
• 電話リンク
• メールリンク

フォーム確認では、次の項目を見ます。

• 必須項目の動作
• 入力エラー表示
• 送信完了画面
• 自動返信メール
• 管理者宛メール
• 送信先メールアドレス
• スパム対策

画像・OGP・favicon

画像やOGP、faviconも公開前に確認します。

OGPは、SNSやチャットでURLを共有した時に表示されるタイトル、説明、画像の情報です。

確認したい項目は次の通りです。

• 画像が正しく表示されているか
• 画像が重すぎないか
• alt属性が適切か
• faviconが表示されるか
• OGPタイトルが正しいか
• OGP説明文が正しいか
• OGP画像が意図したものになっているか

OGPは、公開後にキャッシュが残ることがあります。

変更が反映されない場合は、各サービスのデバッグツールやキャッシュの影響も確認します。

404とリダイレクト

リニューアル案件では、旧URLから新URLへのリダイレクトが必要になることがあります。

旧サイトのURLが検索結果やSNSに残っている場合、何も設定しないと404になります。

確認したい項目は次の通りです。

• 存在しないURLで404ページが表示されるか
• 旧URLから新URLへリダイレクトされるか
• httpからhttpsへリダイレクトされるか
• wwwありなしの扱いが統一されているか

リダイレクト設定は、サーバーやサービスによって方法が違います。

不明な場合は、ドメイン・サーバー担当者に確認します。

クライアント確認

制作者側の確認が終わったら、クライアントにも確認してもらいます。

クライアント確認では、技術的な細部よりも、掲載内容の正しさを中心に見てもらいます。

確認してもらう項目は次の通りです。

• 会社情報
• サービス内容
• 料金
• 営業時間
• 電話番号
• メールアドレス
• 実績情報
• 採用情報
• フォーム送信先

クライアントに確認依頼を出す時は、見る観点と期限を添えます。

公開前の最終確認として、以下をご確認ください。

- 掲載内容に誤りがないか
- 電話番号、住所、営業時間が正しいか
- フォーム送信内容に問題がないか
- 公開前に差し替えたい画像や文言がないか

〇月〇日までにご確認いただければ、予定通り〇月〇日に公開できます。

公開前チェックリスト

公開前チェックは、チェックリスト化しておくと漏れを減らせます。

表示:
- PC表示を確認した
- スマホ表示を確認した
- 主要ブラウザで確認した

動作:
- ナビゲーションリンクを確認した
- ボタンリンクを確認した
- フォーム送信を確認した
- 自動返信メールを確認した

内容:
- 会社情報を確認した
- 電話番号を確認した
- 料金やサービス内容を確認した
- 誤字脱字を確認した

公開設定:
- faviconを確認した
- OGPを確認した
- SSLを確認した
- 404ページを確認した
- リダイレクトを確認した

案件に合わせて項目を増減します。

重要なのは、自分の記憶だけに頼らないことです。

公開日の進め方

公開日は、事前に作業時間と確認時間を決めておきます。

公開作業後には、公開URLで表示や動作を確認します。

公開日の流れは、次のように考えます。

1. 公開作業前の最終確認
2. バックアップや現状確認
3. 公開作業
4. 公開URLで表示確認
5. フォーム送信確認
6. クライアントへ公開完了連絡
7. 公開後の軽微な確認

公開作業は、アクセスが多い時間やクライアントの重要な営業時間を避けることもあります。

この章のまとめ

• 実装確認では、見た目だけでなく動作やリンクも確認する
• スマホ表示、主要ブラウザ、フォーム送信は必ず確認する
• OGP、favicon、404、リダイレクトも公開前に見ておく
• クライアントには、掲載内容の正しさを中心に確認してもらう
• 公開前チェックリストを使うと、確認漏れを減らせる