ページインスペクター

ページインスペクターは、あらゆるライブサイトがどう作られているかを明らかにする無料のウェブページ解析ツールです：レンダリングするフォント、カラーパレット、すべての画像とインライン SVG、リンク、そして素早い技術概要。すべてブラウザ内でアップロードなしに動くため、ウェブサイトのフォント探し、色の抽出、画像の監査、SVG アイコンの取得を素早く非公開に行えます — レイアウトをリバースエンジニアリングするデザイナーでも、デバッグする開発者でも、単に気になる人でも。

使い方

1. 上のライブデモを試してください — 概要・フォント・色・画像・SVG・リンクの各タブでこのページを解析します。
2. 他のサイトを検査するには、下の ページインスペクター ボタンをブックマークバーにドラッグします。
3. 任意のウェブサイトを開いてブックマークをクリックすると、その上にパネルが開きます。
4. タブを切り替えてフォントを読み、hex カラーをコピーし、画像を開き、インライン SVG マークアップを確認します。

何を検査するか

1. フォント — 実際にレンダリングされたフォントファミリーを、ウェイト・イタリックとともに使用頻度順で。
2. 色 — テキスト・背景・枠線の色を hex で、頻度順に並べてブランドカラーが先に来るように。
3. 画像 — すべての <img> と CSS 背景画像を、形式・実寸とともに。
4. SVG — インライン SVG アイコンをプレビューとマークアップ閲覧とともに。
5. リンク — すべてのリンクを内部と外部に分けて。
6. 概要 — タイトル・メタ説明・canonical・DOM ノード数・スクリプト/スタイルシート数・おおよその HTML サイズ。

レンダリングされたページを読むため、スタイルシートに宣言されたものではなくユーザーが実際に見るフォントと色を報告します。それが示す SEO タグを作るには メタタグジェネレーター と併用してください。

責任ある利用

ページインスペクターはページの構造・スタイル・メディアを解析する開発・学習用ツールで、ブラウザ内蔵の開発者ツールがすでに公開している情報と同じものを見ます。コンテンツをコピー・保存・再配布しません：画像・動画は新しいタブで開き、SVG コードは閲覧のためだけに表示されます。閲覧するすべての画像・動画・SVG は元の所有者（ウェブサイトとその著者）の財産です。それをどう使うかの責任は完全に利用者にあり、著作権のある素材を許可なく再利用しないでください。利用規約 をご覧ください。