概要
本記事は、Webサイトのユーザー体験やSEOを計測する指標である Lighthouse および PageSpeed Insights（PSI）のスコアを、Studioでの制作・レビュー・QA・納品前確認の指標として活用するための参考チェックリストです。
新しい公開基盤（MPA＋SSR＋キャッシュ）を利用して、公開サイトのパフォーマンスを最大化するためのガイドとして活用できます。
注意：新しい公開基盤は、現在ベータ版として段階的に提供しています。
一部機能との互換性が十分でないケースがあり、さまざまなサイトへの対応状況を検証・改善している段階です。
現時点で把握できている互換性の問題や不具合事象については、下記ページにて随時更新中です。
新しい基盤での公開を試してみたい場合には、下記記事の 切り替え手順 を参考に、公開基盤を切り替えてください。
0. 計測の前提条件
本記事のチェック項目は、下記の条件での計測を前提としています。
Mobile / Desktop の両方で計測している。
本番URL（実際にユーザーが閲覧するURL）で計測している。
シークレットウィンドウなどを利用し、キャッシュおよびブラウザ拡張機能の影響を排除している。
3回以上計測し、スコアや指標の中央値を確認している。
Lighthouse と PageSpeed Insights の両方で結果を確認している。
1. Performance（パフォーマンス）
ページの表示速度や操作の快適さなど、ユーザーの体感に直結する指標です。
1-1. LCP（Largest Contentful Paint）
ファーストビュー内で最も大きな要素（画像や見出しなど）が表示されるまでの時間です。
ユーザーが「ページが表示された」と感じるタイミングに対応する重要な指標です。
☝️ チェックポイント
不要に大きなサイズの画像ボックスを使用していない。
画像に Unsplash や Studio.Stock の API 経由画像を使用していない。
💡 サービスから画像をダウンロードし、エディタ上でアセットとしてアップロードすることで最適化が可能です。
boxではなく img 要素で画像を配置しており、CSS の background-image のみに依存していない。
ファーストビューに不要な出現時アニメーションが存在しない。
疑似ローディング（本来不要なローディング演出）がない。
不要なリダイレクトが存在しない。
不要に高解像度な動画が配置されていない。
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（アクセシビリティ）
障害の有無や操作手段にかかわらず、誰でも利用できる状態かどうかを評価します。
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 の実ユーザー指標（フィールドデータ）を合わせて確認する。
本記事は、公開サイト新基盤（Beta版）の提供開始にあわせて、実際に各スコアで100点獲得を目指した検証や、過去の制作現場での経験を持つメンバーの知見をもとに作成したものです。
今後も運用や検証を通じて、随時内容をアップデートする予定です。
アクセシビリティやパフォーマンスの観点において、専門的な背景を伴う改善提案やフィードバックがありましたら、チャット窓口までご意見をお寄せください。いただいた内容を参考に、改善を検討いたします。