構造設計とセマンティクス
レイアウト構造、見出し階層、ランドマーク要素が一般的な実装基準に沿っているかを確認します。
- `header` `main` `nav` `footer` のランドマーク配置
- H1-H3 の見出し順序と重複見出し
- リンクとボタンの役割分離
- フォームラベルと入力要素の関連付け
Web Diagnosis
一般的な実装基準と独自観点の両方から、Webサイトを診断します。
構造的に問題がないか、構造化データはあるか、GA4 は入っているか、alt タグや lazyload は適切か。コード品質だけで終わらず、CV導線と更新しやすさまで含めて整理します。
Common Checks
一般的に使われるコード基準での診断
SEO、アクセシビリティ、計測、表示速度の基礎品質を、実装観点で横断確認します。
構造化データ
検索エンジン向けに意味を伝える JSON-LD の実装状況を確認します。
- `Organization` `WebSite` `Service` の有無
- `FAQPage` `BreadcrumbList` の適用可否
- 必須プロパティの欠落
- ページ内容との整合性
計測基盤
GA4 を中心に、基本的な計測タグとイベント設計の土台を確認します。
- GA4 計測タグの実装有無
- 主要導線のイベント計測設計
- 重複計測や誤発火の可能性
- サンクスページや送信完了導線の計測
画像最適化
画像配信、代替テキスト、読み込み制御などの基本品質を診断します。
- `alt` 属性の設定と内容の妥当性
- LCP 画像の優先読み込み
- 非表示領域画像の lazyload
- 画像サイズ属性や最適化方針
表示速度と安定性
Web Vitals に影響しやすい実装を中心に、表示速度の基礎状態を見ます。
- 不要な JavaScript 読み込み
- フォント読み込みのボトルネック
- CLS を起こす UI の有無
- ファーストビューの DOM 密度
SEO 基本設定
タイトル、description、OGP、canonical などの基本タグを横断確認します。
- ページごとの title / description
- canonical と index 制御
- Open Graph / Twitter Card
- robots / sitemap の整備状況
Custom Review
独自の診断観点
単なるタグチェックではなく、問い合わせや申込につながる導線設計まで見ます。
訴求の明確さ
ファーストビューで誰向けの何の価値があるかが短時間で伝わるかを確認します。
- 見出しが抽象的すぎないか
- 提供価値と差別化が 1 画面で読めるか
- CTA が主張に対して自然につながっているか
CV 導線設計
問い合わせ、資料請求、申込などのコンバージョンまでの流れを診断します。
- CTA の数と配置バランス
- スクロール位置ごとの導線継続性
- フォーム到達前の情報過不足
- 離脱要因になる UI ノイズ
信頼形成
実績、根拠、監修、運営情報など、信頼を補強する要素の配置を確認します。
- 運営主体や実績の見せ方
- 料金や提供範囲の透明性
- FAQ や比較情報の不足
- 問い合わせ前の不安要素
運用しやすさ
更新頻度の高い導線やコンテンツが再利用しやすい構造かを見ます。
- 共通パーツ化の余地
- CMS や管理画面から更新しやすい構造か
- ページ追加時に SEO 品質を維持できるか
- 計測設定が属人化していないか
JIS X 8341-3:2016
JIS X 8341-3:2016 の要件チェックにも対応
JIS X 8341-3:2016 は WCAG 2.0 と一致した内容を持つ規格です。この診断では、 コードから確認しやすい達成基準と、適合表明の前提になる適合要件を分けて確認します。
コード基準で確認しやすい項目
1.1.1 非テキストコンテンツ
画像、アイコン、ボタン画像などに代替テキストがあるかを確認します。
- `img` の `alt` 設定
- 装飾画像の空 `alt` または CSS 化
- SVG アイコンボタンの名前付け
- フォーム画像ボタンの代替テキスト
1.3 情報及び関係性 / 4.1 名前・役割・値
見出し、ラベル、テーブル、ARIA など、支援技術が構造を解釈できるかを確認します。
- 見出し階層の破綻有無
- `label` と入力要素の関連付け
- テーブル見出しや関連付けの有無
- ARIA の名前・役割・値の妥当性
1.4 判別可能
文字色コントラスト、テキスト拡大、情報の色依存などを確認します。
- 本文やUIテキストのコントラスト比
- 文字拡大時の崩れや欠落
- 色だけに依存した状態表現の有無
- フォーカス表示の視認性
2.1 キーボード操作 / 2.4 ナビゲーション
キーボードだけで主要操作が完了できるか、フォーカス移動が追えるかを確認します。
- キーボードで操作不能なUIの有無
- フォーカストラップの有無
- スキップリンクや主要ランドマーク
- リンク目的の明確さ
3.2 予測可能 / 3.3 入力支援
入力やフォーカスで予期しない画面変化が起きないか、エラー支援があるかを確認します。
- フォーカス時・入力時の意図しない遷移
- 必須項目や入力条件の提示
- エラーメッセージの明確さ
- 送信前後の文脈変化の説明
適合要件として別途確認する項目
5.1.1 適合レベル
レベルA、AA、AAAのどこまでを対象にするかを事前に定め、対象達成基準を満たす必要があります。
- 対象レベルの明示
- 対象外範囲の明記
- 試験対象ページ群の定義
5.1.2 ウェブページ全体 / 5.1.3 プロセス全体
単一ページだけでなく、予約・申込など一連の操作全体で要件を満たすかを確認します。
- ページ全体での達成基準確認
- 多段フォームや購入導線の通し確認
- 途中ステップだけ達成していても全体未達にならないか
5.1.4 アクセシビリティ サポーテッド / 5.1.5 非干渉
採用技術が支援技術で利用可能か、補助技術を妨げる挙動がないかを確認します。
- 支援技術で解釈可能な実装か
- スクリプトや自動再生が操作を妨げないか
- 代替手段なしで機能停止しないか
診断結果
HTML を送信すると、カテゴリ別の診断結果をここに表示します。
1. 現状把握
構成とコードを確認
DOM 構造、metadata、構造化データ、計測タグ、画像運用を確認します。
2. 優先度整理
改善の順番を決める
影響度と工数を踏まえて、先に直すべき課題を優先順に整理します。
3. 改善提案
実装に落ちる形で返す
抽象的な所感ではなく、タグ・コード・導線単位で改善案を返します。
FAQ
よくある質問
どこまで自動で診断されますか？
一般的な実装基準に関わる確認項目は定型化し、構成やCV導線、信頼形成のような文脈依存の領域は目視評価を含めて診断します。
GA4 や構造化データが未実装でも診断できますか？
可能です。未実装箇所は欠落として洗い出し、優先度付きの改善案として整理します。
Next.js 以外のサイトでも対象ですか？
対象です。HTML ベースの静的サイト、WordPress、各種フレームワーク実装でも診断観点は共通化できます。