ページデザインレビューは何をしますか？

概要

「見た目が良い」と報告するデザインレビューは無価値です。有用なレビューは、要素名、測定値、そしてあるべき値を示します。

核となる原則：すべての所見には数値またはセレクタを添えること。証拠のない形容詞は禁止。検証できなかったことは口に出すこと。

パスの順序

この順序で実行します。以降のパスは、先行するパスが失敗した場合は無駄になります。

構造：すべてのセクションが意図された順序で存在し、コンテンツがバインドされているか
リズム：セクション結合部のギャップ、グリッドの配置、カードの高さ、セクションシステム
レスポンシブ：以下のウィンドウマトリックス、モバイルとデスクトップ
タイポグラフィと色彩：コントラスト、階層、オーファン、オーバーフロー、デザインに対するテキスト幅
モーション：「アニメーションWebページ」と「スクロールストーリーの振付」を参照
クレームとコンテンツ：「保持するクレームの作成」を参照
アクセシビリティとパフォーマンス：フォーカス、altテキスト、LCP、レイアウトシフト

ウィンドウマトリックス

代表的な幅ではなく、ページが耐えなければならない幅をテストします。実際のローンチで耐えたセット：デスクトップは1024、1280、1440、1920、2560、スマートフォンは320、360、390、430。

幅	確認項目
1440	約75文字を超える行長、中央揃えになるべきでないのに中央揃えになるセクション
992	2列になるべき3列グリッド、トラベルしないスティッキー要素
768	誰も書かなかったタブレットブロック。デスクトップの値が半分の幅で適用される
390	被写体を包含しなくなったフルブリードメディア、暗い帯に暗いテキスト、水平オーバーフロー
320	最小のスマートフォン：折り返した見出し、クリップされたボタン
2560	Retina画面でぼやける画像、広いキャンバスの中央に埋もれるコンテンツ

言及に値するモバイルの失敗：フルハイトのヒーローで、メディアがセクションの約55%しかない場合、残りの部分にセクションの背景が表示されます。セクションの背景が暗く、コピーがライトテーマに切り替わっている場合、テキストとボタンが見えなくなります。390で両方のテーマ状態を確認してください。

目視ではなく測定

スクリーンショットから判断するのではなく、ライブページから値を読み取ります。こちらの方が高速で、目に見えないものを見逃さず、レンダリングが利用できない場合でも機能します。

// セクションのリズム：重要なギャップは各結合部のSUM
[...document.querySelectorAll('section')].map(s => {
  const c = getComputedStyle(s);
  return { cls: s.className, h: Math.round(s.getBoundingClientRect().height),
           padT: c.paddingTop, padB: c.paddingBottom };
});

// オーバーフロー、最も一般的な目に見えないバグ
[...document.querySelectorAll('*')]
  .filter(e => e.scrollWidth > e.clientWidth + 1)
  .map(e => e.className);

// 水平ページオーバーフロー
document.documentElement.scrollWidth > document.documentElement.clientWidth;

// グリッド内のカードの均一性
[...document.querySelectorAll('.card')].map(c => Math.round(c.getBoundingClientRect().height));

このリポジトリの tools/page-measure.js は、これらと以下のチェックを1つのスニペットにバンドルしています。

さらに、その価値が証明された測定チェック：

セクションシステム：すべてのコンテンツセクションのタイトルが同じ計算フォントサイズである；すべての左端がナビロゴの端と一致する。
テキストサイズの下限：10px未満のテキストがない。
h1は1つだけ。 見出しレベルはスキップせずに降下する。
画像：すべての画像がデコードされる；すべてのスクロール位置とデバイスピクセル比で実効ピクセル比が1.0以下。
シーンごとのコントラスト：ピン留めされたシーン内のすべてのテキストノードが、シーンの完成状態で、最初のソリッド背景に対して少なくとも3:1（大）または4.5:1（本文）である。
ヒーロー：8秒間のサンプルフレーム。重複画像、ヒーロー矩形外のタイル、重なり、コピー下のタイル、またはイントロが落ち着いた後の変更がある場合は失敗。
スクロール感：実際のホイール入力。「スクロールストーリーの振付」を参照。
コンソールはクリーン。 スクリプトが開始し、イントロが実行され、保留中のエラーがない。

スクリーンショットが撮れない場合

ヘッドレスブラウザや非表示のブラウザペインはレンダリングを一時停止するため、DOMは完全に正常でもスクリーンショットは空白で返ってきます。それはレビューをスキップする理由でも、ユーザーに代わりに確認を依頼する理由でもありません。

代わりに数値で検証します：計算されたスタイル、バウンディングボックス、scrollWidth、アセットのフェッチステータス、コンテンツタイプ。レポートでは、どの所見が測定されたもので、どの所見が目視されたものかを明示的に述べてください。

コンテンツとクレーム

デザインレビューには、ページが何を言っているかも含まれます。

すべての統計には帰属があり、その帰属はマーケティング利用が承認されている
顧客ロゴは承認済みリストにあり、「私たちが持っているロゴ」だけではない
altテキストは画像を説明し、ファイル名ではなく、意味のある画像では空ではない
CMSリストにプレースホルダーテキストがない；アニメーションの背後に空のカードがない
禁止語がない；ハウススタイルで禁止されている場合、emダッシュがない

アクセシビリティの下限

すべてのインタラクティブ要素にフォーカスリングが表示される（outline: noneではなく :focus-visible）
本文テキストのコントラストが少なくとも4.5:1、大きなテキストは3:1
タッチ操作のインタラクティブターゲットが少なくとも44x44
prefers-reduced-motion が尊重されている：ページは完全で静的である
スクリプトなし：すべてが表示される

パフォーマンスの下限

LCP画像は eager、それ以外は lazy
ヒーロー画像はCSS幅の約2倍であり、4倍ではない
寸法や aspect-ratio ラッパーがない画像によるレイアウトシフトがない
動画はスマートフォンでは1xまたはliteファイルで、ポスター付き

どの程度実行するか

マイルストーンではフルスイートを実行します。小さな修正では、変更をカバーする1つのチェック、ステージングへの公開、レポートのみを実行します。すべての調整後にフルスイートを実行すると、1行の修正が1時間になります。「完全にQAして」と言われたら、すべてを実行します。

修正後は、ローカルビルドだけでなく、ステージングに公開してQAを実行します。出荷されるものがチェックの対象です。

ログではなく実行を検証

数値を報告する前に、それを生成した実行が完了したことを確認します：ステートファイルは本日のもので、ログはきれいに終了し、ウィンドウは意図したものです。以前の実行からの古いログブロックは、新しいものとまったく同じように見えます。

コールドレビューアゲート

自分自身のQAは自分の盲点を共有します。マイルストーンでは、その作業を見たことのない新しいレビューアに、成果物のみを渡します：マトリックス幅の全ページスクリーンショット、390のシート、モーションキャプチャ、クレーム台帳。基準：階層、リズム、モーション、イメージ、コピーのそれぞれで10点中8点。最大3ラウンド、各ラウンドで新しいレビューア。完成した動画でのパイロットでは、総合7点で、静的フックと遅れて登場したブランド名を見つけましたが、これらはすべての自動チェックを通過していました。

レポート形式

1つのテーブル。重要度、場所、測定値、修正。最も重大なものから順にランク付け。

重要度	場所	測定値	修正
高	390での`.hero`	812pxのセクション内に500pxのメディア；コピー領域は `#0c0c0c`	テーマごとにセクションの背景を設定
中	プルーフから情報への結合部	120 + 120 = 240pxの空の白	80に縮小するか、そこにCTAを配置

最後に、確認したが問題が見つからなかった箇所と、検証できなかった項目（例：「音声が聞こえません」「ドラフトをプロダクションドメインでプレビューできません」）のリストで締めくくります。クリーンな行がないレビューは、徹底的ではなく未完成と見なされます。

レッドフラグ

「モバイルで見た目が良い」と幅が指定されていない
再測定せずに修正が完了したと報告する
前のパスがクリーンだったためパスをスキップする
自分で測定できることをユーザーに依頼する
完了を確認しなかった実行の数値を報告する
1行の変更に対してフルスイートを実行する

ページデザインレビュー