Webパーツ工房シリーズ

SNSでどう見えるか、一目でわかる

「Webパーツ工房 かどみえ」

metaタグの羅列ではなく、実際のSNSカード表示を中心にした OGP 診断ツール。シェア前の見え方確認・画像の見切れチェック・モバイル可読性まで、ブラウザ内で完結します。

  • インストール不要
  • 登録不要
  • 無料
  • ブラウザ完結

▼ ツール本体

かどみえでできること

URL入力・HTML貼り付け・解析ボタンの画面

URLまたはHTMLを入力

公開URLの解析に加え、HTMLの貼り付けやローカル .html ファイルにも対応。OGPタグを取り込み、比較用スロット A/B で2ページを並べて確認できます。

複数SNSのカードプレビューが並んだ画面

SNSカードを確認

X、Facebook、Bluesky、Discord など10種のカード表示を HTML/CSS で近似再現。タイトル省略や画像比率の違いを並べて、シェア前の見え方を把握できます。

互換性・可読性・改善提案が表示された画面

改善ポイントを把握

互換性スコア・可読性・文字数制限・フォールバック経路を一覧表示。AIアドバイスでは改善ヒントをすぐ確認でき、任意で Chrome 138 以降の端末内AIによる文章案も利用できます(Chrome 以外のブラウザではヒントのみ)。

画像解析タブと安全領域オーバーレイの画面

画像解析と安全領域

OGP画像のサイズ・比率・ファイル重量をチェック。SNSごとのクロップ傾向をオーバーレイ表示し、端の文字やロゴの見切れリスクを視覚的に確認できます。

「Webパーツ工房 かどみえ」が選ばれる3つの理由

履歴は端末内だけ

「履歴に保存」した解析結果はお使いのブラウザの localStorage にのみ保持します。当サイトのサーバに診断結果を蓄積しません(URL取得用のプロキシを除く)。

インストール不要

会員登録も不要。このページを開いて URL や HTML を入力するだけで、すぐに SNS カードの見え方を確認できます。

meta の羅列ではなく見た目で判断

X・Facebook・Bluesky など複数のカード表示を並べて比較。文字数制限・画像の安全領域・互換性スコアまで、シェア前のチェックに使えます。

よくある質問 (FAQ)

各SNSの表示と100%同じになりますか?
A1: いいえ。かどみえのカードは HTML/CSS による近似再現です。プラットフォームの更新やアカウント設定により実際の見え方は異なる場合があります。最終判断は本家のシェアプレビューや実機確認もあわせて行ってください。
URLの内容はサーバーに保存されますか?
A2: 診断結果の履歴はブラウザ内(localStorage)のみです。公開 URL を解析するときは、HTML 取得のため当サイトのプロキシ(fetch.php)を経由しますが、診断レポートをサーバ側に保存する機能はありません。
まだ公開していないページでも試せますか?
A3: HTML の head 部分を貼り付けるか、ローカルの .html ファイルを選べます。og:image が /images/og.png のような相対パスのときは、ベースURLに公開予定のページURL(例: https://example.com/)を入れると画像を正しく解決できます。すべて絶対URLなら空欄で構いません。
画像の安全領域はどの程度信頼できますか?
A4: OGP 画像の実寸と、各 SNS の表示比率からクロップ傾向を計算した参考表示です。公式仕様の保証ではなく、見切れリスクの目安としてご利用ください。
Facebook Sharing Debugger との違いは?
A5: Facebook 向けの公式デバッガに加え、かどみえは X・Bluesky・Discord など複数 SNS を横並びで比較し、互換性・可読性・安全領域・フォールバック経路もまとめて確認できます。OGP を直したあとのキャッシュ更新は、ツール内「画像解析」タブの「OGP・画像キャッシュの更新」から Sharing Debugger 等へ進めます。
og:image を変えたのに SNS で古い画像のままです
A6: 各プラットフォームは OGP をキャッシュします。Facebook では Sharing Debugger の「Scrape Again」など、画像解析タブにまとめた公式ツールで再取得してください。X には同等の公開ツールがなく、og:image の URL を ?v=2 のように変える方法が現実的です。Bluesky などは時間経過や再投稿での確認になります。
AIアドバイスの「Chrome内AI」が使えません
A7: Chrome 内 AI(Gemini Nano / Prompt API)は Google Chrome 138 以降のみ対応です。Microsoft Edge・Firefox・Safari ではボタンは無効になりますが、ステップ1の「改善ヒントを表示」はどのブラウザでも利用できます。Chrome を最新版に更新し、設定で端末内 AI が有効かも確認してください。
X の Card Validator は使えますか?
A8: cards-dev.twitter.com の Card Validator は、一般向けには提供終了に近い状態です。キャッシュ更新の公式ツールはなく、画像 URL の変更(クエリ付与)や新規ポストでの確認が中心になります。タグ仕様は X の開発者ドキュメントを参照し、かどみえの画像解析タブにも X 向けの注意を記載しています。
スマートフォンでも使えますか?
A9: PC ブラウザ(Chrome / Edge 推奨)向けです。カード一覧や比較表示は画面が狭いと操作しづらい場合があります。Chrome 内 AI はデスクトップ版 Chrome 138 以降を想定しています。

SNSでどう見えるか確認する「Webパーツ工房 かどみえ」

登録不要・インストール不要。ブラウザ内で、今すぐ試せます。

今すぐ無料で試す