Web Review Toolkit — Pre-launch Website Review Tool

Web Review Toolkit — Pre-launch Website Review Tool Web Review Toolkitは、Webサイト公開前のレビューを、実際のページを見ながら効率よく行うためのChrome拡張機能です。 見出し、画像のAlt、画像・動画、リンク、仮コンテンツ、ページ設定に加え、ページ全体のHTML構造やアクセシビリティなどを可視化して確認できます。 また、Google Geminiを利用したAIレビューでは、ページ構造をHTML・ボット・アクセシビリティ・ユーザーの4つの視点から確認し、公開前に優先して確認したいポイントを整理できます。 ソースコードや複数の確認ツールを行き来することなく、公開前に確認しておきたいポイントを、Webページを見ながらまとめてチェックできます。 Web制作会社、Web担当者、コーダー、ディレクターなど、Webサイトの公開前チェックや品質確認を行う方を想定して開発しています。 ■ ページを見ながらレビュー Web Review Toolkitを起動すると、確認対象をページ上にアイコンや枠で表示します。 「問題を自動的に断定する」のではなく、 ・どこを確認すればよいか ・何が設定されているか ・どこに気になる点があるか を見えるようにして、制作者自身が判断しやすくすることを重視しています。 ■ ページ構造を可視化 ページ内のHTML構造をツリー形式で表示し、ページ全体の構成を確認できます。 ・header / nav / main / section / aside / footerなどのランドマーク ・h1〜h6の見出し構造 ・リストや操作要素 ・画像のAltやアクセシブルな名前 ・フォーカスや非表示要素 ・その他、構造上確認しておきたい要素 ツリー上の項目から実際のページ内要素へ移動できるため、HTMLソースだけでは把握しにくいページ全体の構造を、実際の表示と照らし合わせながら確認できます。 ■ AIによるページ構造レビュー Google Geminiを利用して、ページ全体を4つの視点からレビューします。 ・HTML — セマンティクス、見出し、文書構造 ・ボット — 検索エンジンやAIクローラーからの理解しやすさ ・アクセシビリティ — 支援技術やキーボード利用を含む利用しやすさ ・ユーザー — 初めて訪れたユーザーの理解しやすさ、迷いにくさ、行動しやすさ 総合レビューでは、4視点の評価をレーダーチャートで確認でき、ページ全体の強み、確認したい点、改善の優先順位を整理します。 各視点ではさらに詳細なレビューを確認でき、AIが指摘した場所と実際のページ内要素を照らし合わせながら確認できます。 ※AIによる評価は品質を保証するものではありません。公開前レビューで確認するポイントや改善の優先順位を考えるための参考情報としてご利用ください。 ■ 見出しチェック ページ内のh1〜h6を検出し、見出しレベルをページ上に表示します。 ・h1〜h6を可視化 ・レベルごとの件数を表示 ・レベルごとに表示ON／OFF ・マーカーから対象の見出しを確認 見出し構造を、実際のページを見ながら確認できます。 ■ 画像のAltチェック ページ内画像のalt属性を確認し、 ・ALTなし ・ALT空 ・ALTあり ・要確認 に分類して表示します。 必要に応じて、設定されているAltテキストもページ上に表示できます。 画像一覧から対象画像を確認できるため、画像の多いページでもAltの設定状況を確認しやすくなっています。 ■ AIによるAltレビュー Web Review Toolkitには、Alt属性レビュー専用Chrome拡張機能「Alt Checker」で培ったAIレビュー機能が組み込まれています。 Google Geminiを利用して、現在のAltだけでなく、ページの文脈や画像の役割も考慮しながらレビューします。 AltのAIレビューには、 ・簡易レビュー ・精密レビュー の2種類があります。 さらに、Alt候補を ・Alt Checker推奨 ・SEO重視 ・アクセシビリティ重視 の3方向から提案します。 レビュー方針は、 ・節約モード ・標準モード（推奨） ・高品質モード から選択できます。 英語サイトや繁体字サイトなどでは、html要素のlang属性を優先して、ページの言語に合わせたAlt候補を提案します。 ※AIレビューは補助機能です。最終的なAlt属性は、ページの目的や画像の役割を考慮して利用者自身で判断してください。 ■ 画像・動画のメディア情報 画像や動画について、公開前に確認しておきたい情報をページ上に表示します。 【画像】 ・ファイル容量 ・元画像サイズ ・表示倍率 ・Lazy Load 【動画】 ・ファイル容量 ・動画情報 ・外部動画サービスの判別 大きすぎる画像や、元画像に対して拡大表示されている画像などに気づくための確認にも利用できます。 確認が必要な画像・動画は一覧で確認でき、一覧から実際のページ上の対象メディアへ移動できます。 ■ リンクチェック ページ内のリンクを種類ごとに分類して表示します。 ・通常リンク ・同ページ内アンカーリンク ・外部リンク ・PDF ・TEL ・MAIL ・要確認 ・要修正 必要に応じて、HTMLソース上に記述されているURLもページ上に表示できます。 「#」のままになっているリンクや、リンク先となる要素が存在しない同ページ内アンカーなど、公開前に確認したいリンクには注意表示を行い、理由を確認できます。 ■ 仮コンテンツチェック 制作中に使用した仮テキストや仮画像など、公開時に残したくない要素をチェックします。 問題が見つからなかった場合も、コントロールパネル上で「問題なし」と確認できます。 検出された内容が実際に修正を必要とするかは、ページの内容に応じて利用者自身で判断できます。 ■ 公開前のページ設定チェック HTMLの基本設定についても、まとめて確認できます。 ・index / noindex ・Google Analytics / Google Tag Manager ・title ・meta description ・canonical ・html lang ・favicon ・apple-touch-icon 未設定・未検出など、確認しておきたい項目をコントロールパネルに表示します。 ※未設定・未検出が必ずしも問題を意味するものではありません。サイトの公開要件に合わせて判断してください。 ■ モノトーン表示 レビュー中のページをモノトーン表示に切り替えることができます。 ページ本来の色による情報量を抑えることで、Web Review Toolkitのマーカーや確認対象を見つけやすくします。 ■ 動的なページにも対応 カルーセルやスクロール、DOMの更新などによって表示状態が変わるページでも、現在表示されている要素を判定しながらレビュー用マーカーを更新します。 ■ Gemini APIキーについて 見出し、メディア情報、リンク、仮コンテンツ、ページ設定、通常のAltチェック、ページ構造の可視化など、基本的なレビュー機能はGemini APIキーなしで利用できます。 AIによるAltレビュー、AIによるページ構造レビュー、および「このサイト・ページについて」のAI補助機能を利用する場合に、Google Gemini APIキーが必要です。 Gemini APIの無料枠でも利用できますが、多数のページを継続的にレビューする場合は、有料利用が可能なAPI環境をおすすめします。 APIの利用料金や利用制限はGoogle Gemini API側の契約・料金体系に準じます。 ■ Web Review Toolkitが目指していること 公開前チェックでは、 「設定されていると思っていた」 「見落としていた」 「別の確認作業に気を取られていた」 といった小さな見落としが起こります。 Web Review Toolkitは、すべてを自動判定するツールではありません。 ページを見ながら確認ポイントを可視化し、制作者に「気づき」を与えることで、公開前レビューを短時間で行いやすくすることを目的としています。 ■ Alt Checkerについて Web Review Toolkitは、画像のAlt属性レビューに特化したChrome拡張機能「Alt Checker」を基盤として開発されています。 Alt Checkerの主要なAltレビュー機能を内包し、さらに見出し、メディア、リンク、仮コンテンツ、ページ設定、ページ構造まで確認対象を広げた発展版です。 これから公開前レビュー全体を行いたい方には、Web Review Toolkitの利用をおすすめします。 ■ プライバシーについて 通常のレビュー機能では、閲覧中ページのHTML、テキスト、画像、動画、リンク、meta情報などをブラウザ内で処理します。 これらのページ情報を、Web Review Toolkitの開発者が管理するサーバーへ送信することはありません。 AIレビューを実行した場合のみ、レビューに必要なページ情報をGoogle Gemini APIへ送信します。 Gemini APIキーや拡張機能の設定情報はChrome Storageへ保存されます。 詳しくはWeb Review Toolkitのプライバシーポリシーをご確認ください。 Web Review Toolkit — Pre-launch Website Review Tool 公開前レビューを、ページを見ながら。