この記事は、LighthouseとPageSpeed Insights（PSI）のスコアを指標にして、公開サイトの品質を確認するためのチェックリストです。 制作・レビュー・QA・納品前の確認に活用できます。
扱う観点は、Lighthouseが評価する次の4カテゴリと、モバイル体験です。
Performance（パフォーマンス）
Accessibility（アクセシビリティ）
Best Practices（ベストプラクティス）
SEO（検索エンジン最適化）
Studioで表示速度を改善する具体的な対策は、公開サイトの表示速度を改善するを参照してください。
Point：新基盤での計測を前提としています
チェック項目は、新基盤（MPA＋SSR＋キャッシュ）で計測することを前提にしています。旧基盤を使用している場合は、先に新基盤への切り替えを検討してください。
💡切り替えの手順：公開サイト基盤を旧基盤から新基盤へ切り替える
💡基盤の仕様：Studioの公開サイト基盤
0. 計測の前提条件
チェック項目は、次の条件で計測することを前提にしています。
Mobile／Desktopの両方で計測している
本番URL（実際にユーザーが閲覧するURL）で計測している
シークレットウィンドウなどを使い、キャッシュやブラウザ拡張機能の影響を除いている
3回以上計測し、スコアや指標の中央値を確認している
LighthouseとPageSpeed Insightsの両方で結果を確認している
注意：ライブプレビューでは計測しないでください。変更内容をリアルタイムに反映する仕組みのため、公開サイトより表示が遅くなります。
1. Performance（パフォーマンス）
ページの表示速度や操作の快適さなど、ユーザーの体感に直結する指標です。
1-1. LCP（Largest Contentful Paint）
ファーストビュー内で最も大きな要素（画像や見出しなど）が表示されるまでの時間です。
ユーザーが「ページが表示された」と感じるタイミングに対応する重要な指標です。
☝️ チェックポイント
不要に大きなサイズの画像ボックスを使用していない
画像に Unsplash や Studio.Stock の API 経由画像を使用していない
Point：サービスから画像をダウンロードし、エディタ上でアセットとしてアップロードすることで最適化が可能です。
画像を CSS の background-image だけで表示せず、img 要素で配置している
ファーストビューに不要な出現時アニメーションがない
疑似ローディング（本来不要なローディング演出）がない
不要なリダイレクトがない
不要に高解像度な動画を配置していない
YouTube や Vimeo のコンテンツをファーストビューに配置していない
カルーセルをファーストビューに配置していない
参考記事
1-2. INP / TBT（操作レスポンス）
クリックやタップに対する反応の速さに関する指標です。
ユーザーが「押しても反応しない」「引っかかる」と感じる体験を防ぐために重要です。
☝️ チェックポイント
初期表示に不要なカスタムコード（JavaScript）を削除している
カスタムコードが肥大化していない
外部読み込みのスクリプトを最小限にしている
タグマネージャー経由で読み込んでいるJavaScriptを精査している
参考記事
1-3. CLS（Cumulative Layout Shift）
ページ表示中にレイアウトがどれだけずれるかを示す指標です。
「読もうとしたら要素の位置が動く」といったストレスの原因になります。
☝️ チェックポイント
すべての画像に width / height を指定している
iframe や embed 要素に十分な高さを確保している
広告など動的に変化する要素の表示領域を、事前に確保している
不要な出現時アニメーションが存在しない
参考記事
1-4. FCP（First Contentful Paint）
画面に最初のテキストや画像が表示されるまでの時間です。
ユーザーにとっては「真っ白な画面が終わるまで」の速さに相当します。
☝️ チェックポイント
カスタムコードや embed 用のCSSが肥大化していない
不必要なスタイル指定（未使用CSS）をカスタムコードなどで追加していない
Webフォントを使いすぎていない
不要なフォントウェイトを読み込んでいない
不要な div や過剰な階層構造を解消している
タグマネージャーを使用しない、または、タグマネージャー経由の即時実行JavaScriptを最小限にしている
アイコンフォントを SVG に置き換えられる箇所では SVG を利用している
参考記事
1-5. 画像・メディア最適化
通信量を減らし、表示速度と体感を改善するための基本項目です。
☝️ チェックポイント
すべての画像が適切なサイズ（必要サイズの約4倍程度まで）になっている
画像はStudioにアップロードしたものを利用しており、外部API経由で取得していない
SVGで代替可能な要素はSVG化している
ファーストビューに動画を多用していない
参考記事
1-6. Lighthouse Opportunities 対応
Lighthouseが「ここを直すと速くなる」と示す改善候補（Opportunities）への対応です。
☝️ チェックポイント
カスタムコードや embed 用のJavaScriptのうち、使用していないものを削除している
カスタムコードや embed 用のCSSのうち、使用していないものを削除している
適切なサイズの画像（必要サイズの約4倍程度）を利用している
外部読み込みのスクリプトを最小限にしている
タグマネージャー経由のJavaScriptを精査している
参考記事
2. Accessibility（アクセシビリティ）
障害の有無や操作手段にかかわらず、誰でも利用できる状態かどうかを評価します。
Studioアクセシビリティチェックシートも参照してください。
2-1. 基本設定
☝️ チェックポイント
ページの言語が正しく設定されている（lang属性）
title 要素が存在し、ページ内容に即したタイトルになっている
meta name="description" が存在し、ページの概要を適切に記載している
参考記事
2-2. 画像・非テキスト要素
スクリーンリーダー利用者にも内容が伝わるようにします。
☝️ チェックポイント
意味のある画像すべてに alt 属性が設定されている
アイコンボタンに aria-label を設定している
画像リンクの alt が、リンク先の内容を説明するテキストになっている
参考記事
2-3. フォーム
入力内容やエラーが誰にでも理解できる状態を目指します。
☝️ チェックポイント
input と label が関連付けられている
placeholder のみで入力内容を説明していない
必須項目（required フィールド）が明示されている
参考記事
2-4. 色・コントラスト
色覚に依存せず情報が伝わるかを確認します。
☝️ チェックポイント
テキストと背景のコントラスト比が十分である
リンクが色だけで区別されておらず、スタイルや下線でも分かる
ホバー時やフォーカス時の状態が視認可能になっている
参考記事
2-5. キーボード操作
マウスが使えない環境でも操作できることが重要です。
☝️ チェックポイント
Tabキーですべてのインタラクティブ要素にアクセスできる
フォーカスが視覚的に分かる
フォーカス順が論理的な順序になっている
モーダル表示中は、フォーカスがモーダル内に閉じている
参考記事
2-6. 構造・ランドマーク
☝️ チェックポイント
見出し構造が論理的な階層になっている
見た目だけの目的で見出し要素を使用していない
header / nav / main / footer などのランドマーク要素を適切に利用している
参考記事
3. Best Practices（ベストプラクティス）
セキュリティや技術的健全性、UXの基本ルールに関する項目です。
3-1. 画像・メディア品質
☝️ チェックポイント
画像のアスペクト比が崩れていない
解像度が適切である
自動再生（autoplay）の動画には muted / controls を付けている
参考記事
3-2. UX配慮
☝️ チェックポイント
intrusive なポップアップ（閲覧を妨げる強いポップアップ）がない
画面全体を覆う広告がない
モバイルで操作不能な要素がない
4. SEO（検索エンジン最適化）
検索エンジンにページ内容を正しく理解・評価してもらうための基本項目です。
参考記事
4-1. メタ・基本
☝️ チェックポイント
title が適切な長さ（おおよそ30〜60文字）で設定されている
meta name="description" が設定されている
参考記事
4-2. 見出し構造
☝️ チェックポイント
h1 は1ページに1つだけ存在する
h1 がページの主題を表している
h2〜h4 が論理的な階層で構成されている
見出しレベルの飛び級がない
参考記事
4-3. 画像SEO
☝️ チェックポイント
alt が適切に記述されている
alt に不自然なキーワード詰め込みをしていない
参考記事
4-4. コンテンツ
☝️ チェックポイント
テキスト情報が十分に存在する
画像だけで構成されたページになっていない
内部リンクが適切に設置されている
リンクテキストが「こちら」だけでなく、リンク先の内容が分かる具体的な文言になっている
参考記事
4-5. インデックス・クロール
☝️ チェックポイント
noindex の誤設定がない
404 や 5xx エラーが多発していない
参考記事
5. モバイル体験（PSI重要項目）
モバイルユーザーの操作しやすさと読みやすさを確認します。
☝️ チェックポイント
タップ要素が小さすぎない
タップ要素同士の間隔が十分に空いている
横スクロールが発生しないレイアウトになっている
ファーストビューでページの主旨が理解できる
モバイル端末で文字サイズが小さすぎない
参考記事
6. クロスチェック（参考）
パフォーマンス向上とSEOやUXとのバランスを確認します。
☝️ チェックポイント
パフォーマンス最適化が SEO を阻害していない
JavaScript依存にしすぎず、クローラーが主要な内容を取得できる
アクセシビリティ対応がUXを損ねていない
モバイルでも可読性と操作性が維持されている
7. 実務でのおすすめの使い分け
制作・公開・納品のフェーズごとに、指標の重点を切り替えると効率的です。
☝️ チェックポイント
制作中：Performance / Accessibility を中心に確認する
公開前：Best Practices / SEO を重点的に確認する
納品前：Lighthouse の全カテゴリと、PSI の実ユーザー指標（フィールドデータ）を合わせて確認する
この記事は、新基盤の提供開始にあわせて作成しました。各スコアで100点の獲得を目指した検証と、制作現場での経験を持つメンバーの知見をもとにしています。今後も、運用や検証を通じて内容を更新します。
アクセシビリティやパフォーマンスについて、専門的な観点からの改善提案があれば、以下のボタンから送信してください。送信された内容をもとに、記事の改善を検討します。