🗒️

本番適用する前に要確認！リリース前チェックリスト

2021/02/28に公開

初心者

ようやく完成したWEBサイトやWEBサービスも、いざ本番にリリースするとaltの設定うっかり忘れていた！みたいなことがやたら多いので、リリース前に要確認すべき項目を一覧にまとめました。

サイト全体なら問い合わせフォームの挙動や404ページの追加などの確認も必要ですが、今回は複数ページのあるサイトの1ページをリリースする際のチェックリストを作成しました。

見る順番として、ページの細部からページ全体の情報、他ページとのつながり等サイト全体の確認という徐々に視野が広くなるようにチェックしていきます。

ページ内の細部

スペルミスのチェック

時間軸の確認

alt属性の確認

ページ全体の情報や構成

Faviconやメタタグの確認

不要なコードの削除や整理

ページ全体の動きの確認

他ページ含むサイト全体

ページ内の全てのリンクの確認

差分の確認

互換性の確認

それでは1つ1つ解説していきます。

1,ページ内の細部

まずは、ページ内の抜け漏れなど細かい部分をチェックしていきます。

スペルミスのチェック

日本語として、文章として、単語として正しいか確認するのはもちろんのこと、画像とその説明文が間違っていないかも要注意です。画像は合っていてもテキストには違うこと書かれていたり、その逆もなんと多いこと。

あと、ECサイトならサイト内での価格と実際の価格（←最新版の！！）と違わないかどうかも確認する。

時間軸の確認

頻繁にキャンペーンを打ち出すサイトのコーディングの場合、タイマー設定漏れがないかの確認は必須。

期間限定ならその日以降は表示されないようになっているか。別のキャンペーンに切り替わる系の期間限定キャンペーンなら、切り替わるタイミングでPHPなどでタイマー設定ができているかどうか。

alt属性の確認

ビジュアルで確認を繰り返していると忘れがちなのがalt属性の確認。

Googleに画像の意味を認識してもらうためにも、画像が万が一読み込まれなかった場合の対処としても必要です。

ちなみに、alt内は

画像の意味があるならその意味
意味のない画像なら空白

を書いています。意味がない画像のときでも、意味がないよ！とGoogleに教えるためにalt=""で指定。

2,ページ全体の情報や構成

続いてページ内の大まかな内容や基本情報に抜け漏れが無いかチェックしていきます。

Faviconやメタタグの確認

これもビジュアルだけで確認していると忘れがち、メタタグの確認です。

SEO対策として、SNS等での共有・拡散率増加として、メタタグがコーディングされているか確認していきます。

必要なメタタグ一覧

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:url" content="サイトのURL" />
<meta property="og:title" content="サイトタイトル"/>
<meta property="og:type" content="website" />
<meta property="og:description" content=""/>
<meta property="og:image" content="img/fv.jpg" />
<meta name="twitter:card" content="large" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="og:site_name" content="サイトタイトル"/>
<meta property="og:locale" content="ja_JP" />

不要なコードの削除や整理

頻繁に新商品を出すサイトを制作する場合、リリース後のメンテナンスのことも考えてコードを整理しましょう。

VisualStudioCodeなら、Prettierというプラグインで自動でコードを整理できます。

あと、結局使わなかったCSSやJS、コメントアウトしている部分はできる限り削除しておいたほうが後で探す負担が減るのでよくやっています。

ページ全体の動きの確認

大体コードが整理できたら、ページに実装した機能が一通り動くかどうかを確認します。いわゆるユーザビリティテストというやつ。

実装した機能1つ1つを見ていって動くかの確認。特にjQueryを複数使っちゃうと、機能同士でぶつかりあって正常に動かなくなることもあります。

あと、ログイン機能のあるサイトなら、ログイン前とログイン後でログイン関連の表示が切り替わるか確認が必要。特に新規登録キャンペーンとかをログイン状態で表示してしまうパターンは多いので要注意。

ちゃんとしているところなら、CSSと画像を取り除いた状態で動くか確認することもあるみたいですね。(多分Googleに認識されやすいかのテストとして)

3,他ページ含むサイト全体

ページの機能に問題がなければ、他ページとの整合性も確認します。

ページ内の全てのリンクの確認

まずは、貼っているリンクがちゃんと機能しているか確認します。

特に遷移先が動いているかどうかが本番とステージングで異なることもあるので要注意です。

具体的には、ステージングにはページが実装されてあるけど、本番環境にはまだ適用していないからページが存在しないなど。いざ本番適用して動いていないみたいなことの無いように確認していきましょう。

差分の確認

続いて、ファイルのログで差分などを確認してコンフリクト対策していきます。

システムが絡むと大体見た目側とシステム側でコンフリクト起こると思っておきましょう。

価格が頻繁に変わるECサイトのコーディングとかなら、マメにログを確認して、定期的にGitやSVNなどのバージョン管理システムをアップデートしておくことが必須です。（アップデートしないまま本番に適用してしくじった経験者が語る）

互換性の確認

対応機種やブラウザとかはクライアント次第なところもありますが、様々なデバイスと様々なブラウザでそれぞれ動くか確認します。

レスポンシブはもちろん、他のデバイスで表示させると崩れることが無いかなどをディベロッパーツールや実機でチェックをしていきましょう。

また、ChromeやEdge、Firefox、Operaなど複数のブラウザ間で問題が無いかも要チェックです。

ということで、本番にリリースする前にチェックすべき項目一覧とその解説でした。

まとめると、