Chrome Extension / Web Design Tool
Website Inspector Z
Webデザインの構造を、美しく解剖する。
ワンクリックで起動。要素の即座な検証、カラーパレットの抽出、全てのアセットの一括ダウンロード、そしてアクセシビリティのコントラストチェックまで備えた、次世代のモダン・インスペクター。
ワンクリックで起動。要素の即座な検証、カラーパレットの抽出、全てのアセットの一括ダウンロード、そしてアクセシビリティのコントラストチェックまで備えた、次世代のモダン・インスペクター。
マウスホバーとクリックだけで、要素のBoxモデル（マージン、パディング等）、タイポグラフィ、使用カラーなどのCSS情報を美しく・分かりやすく表示。デベロッパーツールを開く手間を省きます。
ページ内で使用されているカラーパレットを一覧表示し、クリックでHexコードを即座にコピー。さらに、画像などのアセットも自動で一覧化され、ZIPファイルとして一括ダウンロード（エクスポート）が可能です。
アクセシビリティ（A11y）対応のためのコントラストチェッカーを内蔵。WCAG基準を満たしているかを瞬時にスキャンし、Pass/Failで視覚的にテキストの視認性を評価します。
インストール後、Chromeのツールバーにある「Website Inspector Z」のアイコンをクリックしてインスペクターを起動します。画面上に専用のパネルが表示されます。
ページ内の気になる要素の上にマウスカーソルを合わせると青いハイライトが表示されます。クリックすると、その要素のフォント情報、カラー、サイズ、マージンなどの詳細なCSS情報がパネルに表示され、クリックで値をコピーできます。
パネル上部のタブ（Colors / Assets / Contrast）を切り替えることで、ページ全体のカラーパレット一覧や画像アセット一覧、コントラストの検証結果を素早く確認できます。アセットタブからは一括ダウンロード（Export all）も可能です。
現在この拡張機能はChromeウェブストアのパブリック公開前です。以下の手順でローカルからパッケージを読み込んでご利用ください。
Chromeの右上にあるメニュー（︙）から「拡張機能」＞「拡張機能を管理」を選択し、管理画面（chrome://extensions/）を開きます。
拡張機能の管理画面の右上に配置されている「デベロッパーモード」のトグルスイッチをクリックし、ONに切り替えます。
左上に現れる「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、ダウンロード・解凍した「Website-Inspector-Z」のフォルダを選択します。一覧にツールが追加されれば準備完了です！
あなたのWeb制作を、より直感的に、よりクールに。