本文へスキップ
  1. TOP
  2. Web制作
  3. つくるフェーズ
  4. 品質管理・テスト設計

03 / BUILD

つくるフェーズ

品質管理・テスト設計

品質は、最後ではなく最初に決まる

Flying High Works(FHW)では、品質管理を「公開前にまとめて行う作業」とは考えていません。

品質は、設計の段階で方向が定まり、実装の過程で積み重なり、公開前チェックで、想定どおりの状態かを確認するものです。

そのためFHWでは、品質管理とテスト設計を設計・実装の前提条件として組み込み、公開後も安定して運用できる状態をつくります。

品質管理は「最後の工程」ではない

品質管理という言葉から、公開直前のチェック作業を想像されることがあります。
FHWでは、品質管理を次のように捉えています。

  • 設計時に判断基準を揃える
  • 実装時に前提を崩さない
  • 公開前に状態を確認する

つまり、品質は工程を通じて管理するものであり、最後にまとめて作り込むものではありません。

FHWにおける品質基準

FHWの品質基準には、大きく分けて二つの層があります。

社内で共有されている基準

  • HTML構造・実装の考え方
  • 表示・動作の最低要件
  • パフォーマンスや安全性に対する感覚

これらは、日々の制作の中で暗黙的に共有されている基準です。

プロジェクトごとに明文化する基準

一方で、

  • 対象デバイス
  • 想定ユーザー
  • 表示・挙動の許容範囲

などは、プロジェクトごとに明文化して共有します。
これにより、判断のブレや認識のズレを防ぎます。

表示・動作確認の考え方

FHWでは、表示・動作確認を網羅チェックとしては行いません。
すべての端末・ブラウザを対象にするのではなく、モダンブラウザを中心として、

  • 利用頻度
  • 影響度
  • 重要度

を考慮して、確認の優先順位を決めます
重要な体験に影響する部分を重点的に確認することで、現実的な品質担保を行います。

自動テストとの向き合い方

E2Eテストや自動テストは、常に必須と考えているわけではありません。

  • 規模が小さい案件
  • 変更頻度が低いサイト

では、手動確認の方が適している場合もあります。
一方で、

  • 繰り返し確認が必要な箇所
  • 人為ミスが起きやすい部分

については、自動テストを選択肢として持っている状態です。
重要なのは、テスト手法そのものより、どう品質を担保するかです。

公開前チェックの位置づけ

公開前チェックは、バグを探し回る工程ではありません。
FHWでは、

  • 設計時に想定した状態になっているか
  • 実装の前提が崩れていないか
  • 公開して問題ない状態か

を確認します。
これは、最終確認であって、やり直しの工程ではないという位置づけです。

属人化させない品質担保

品質を個人の感覚に委ねると、担当者が変わった途端に品質が不安定になります。
FHWでは、属人化を防ぐために、

  • チェック観点を共有する
  • 判断理由を記録として残す
  • 再現できる確認方法を取る

といった考え方を重視しています。
これにより、誰が担当しても同じ判断ができる状態をつくります。

品質管理と他工程との関係

品質管理・テスト設計は、単独で完結するものではありません。

これらすべてと連動して、品質は保たれます。

このページで伝えたいこと

品質は、

  • 個人のスキル
  • 気合い
  • 最後のチェック

で担保されるものではありません。

  • 判断基準を揃える
  • 前提を共有する
  • 状態を確認する

こうした仕組みの積み重ねによって、品質と安定性は支えられます。
FHWでは、品質管理とテスト設計をWeb制作全体の前提条件として組み込んでいます。

PRACTICAL INSIGHT 検証端末は、一般論ではなく実際の利用場面から選ぶ

スマートフォン対応を基準にしても、実際の閲覧がスマートフォンだけとは限りません。利用場所、同席者、入力の有無、外部サービスへの遷移を確認し、重要な使われ方から検証範囲を決めます。

個人で短時間見るのか、店舗や窓口で複数人が見るのかによって、文字サイズ、画像の見え方、ボタンの押しやすさは変わります。外部の申込・購入画面へ移動する場合は、遷移前後で迷わず戻れるかも確認します。

短期制作ほど、代表端末だけを最後に確認するのではなく、背景、見出し、ボタン、画像など共通ルールを先に定めます。スマートフォンを基準にしつつ、利用可能性が高いタブレット横向きなども、読みやすさと操作性の観点で検証します。

確認しておきたいこと

  • 閲覧場所、利用者、同席者、操作時間、入力の有無
  • 外部サイトへ遷移する前後の導線と戻り方
  • 共通部品が各画面幅で保つべき読みやすさと操作性
  • 優先端末と、簡易確認に留める端末の境界

この考え方が有効な条件

閲覧環境が限定される業務サイト、イベント・施設向けページ、外部申込へ接続するページで特に有効です。利用状況が不明な場合は、アクセスデータや担当者への確認から始めます。

対応端末・ブラウザの優先順位と検証範囲を、実務知識で詳しく見る

関連するケーススタディ

RELATED CONTENT 次に読む

同じ「つくるフェーズ」から、あわせて読みたい内容をご案内します。