🗒️

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

2021/02/28に公開

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

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

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

  1. ページ内の細部

    • スペルミスのチェック
    • 時間軸の確認
    • alt属性の確認
  2. ページ全体の情報や構成

    • Faviconやメタタグの確認
    • 不要なコードの削除や整理
    • ページ全体の動きの確認
  3. 他ページ含むサイト全体

    • ページ内の全てのリンクの確認
    • 差分の確認
    • 互換性の確認

それでは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など複数のブラウザ間で問題が無いかも要チェックです。


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

まとめると、

  1. ページ内の細部

    • スペルミスのチェック
    • 時間軸の確認
    • alt属性の確認
  2. ページ全体の情報や構成

    • Faviconやメタタグの確認
    • 不要なコードの削除や整理
    • ページ全体の動きの確認
  3. 他ページ含むサイト全体

    • ページ内の全てのリンクの確認
    • 差分の確認
    • 互換性の確認

こんな具合です。
もっと具体的なチェックリストを最後に掲載したので、是非ご活用ください。

また、こんなのも確認したほうがいいよ!というものがあればお気軽にご相談ください!

ここまで読んでくださりありがとうございました。それでは。

おまけ:本番適用・リリース前チェックリスト一覧

  1. ページ内の細部

    • スペルミスのチェック
      • 文章として成立しているか
      • 画像と説明文に違いはないか
      • 価格は合致しているか
    • 時間軸の確認
      • 期間限定はタイマー設定しているか
      • キャンペーンの切り替え設定できているか
    • alt属性の確認
      • 意味のある画像のalt属性は埋まっているか
      • 意味のない画像でもalt=""となっているか
  2. ページ全体の情報や構成

    • Faviconやメタタグの確認
      • Faviconのメタ設定できているか
      • メタディスクリプションの設定
      • メタタイトルの設定
      • OGP画像の設定
      • Twitterカードの設定
    • 不要なコードの削除や整理
      • 不要なコードは削除しているか
      • Prettier等でコード整理しているか
    • ページ全体の動きの確認
      • JSで実装した機能は全て動くか
      • CSSの動きも問題ないか
      • ログイン後の画面で新規登録CP等非表示しているか
      • 問い合わせフォームは送信できるか
  3. 他ページ含むサイト全体

    • ページ内の全てのリンクの確認
      • ページ内の全てのリンクが設定されているか
      • ページ内の全てのリンクが本番でも表示されているか
      • blankの設定有無は確認できているか
      • blankならセキュリティ対策しているか
    • 差分の確認
      • ファイルを最新にアップデートしたか
      • 直近でファイルを修正した人はいないか
      • バックエンドは機能しているか
    • 互換性の確認
      • デバイスチェック
      • ブラウザチェック

Discussion