Facet

facet-check

実際のスマートフォン、タブレット、デスクトップのビューポートで、ウェブページのレスポンシブデザインの問題をチェックします。 コマンドラインや CI で実行できるほか、AI コーディングエージェント（Claude Code、Cursor、Codex、VS Code）が呼び出せる MCP サーバーとしても動作します。

npx @chandra14/facet-check localhost:3000

または、npm install -g @chandra14/facet-check で一度インストールしてから、facet-check localhost:3000 を実行します。

スマートフォンでは幅が広すぎる価格表を含むテストページの出力例（短縮版）：

Facet check http://localhost:3000
6 devices · 14 errors · 14 warnings

✗ iPhone 16 393×852 @3x
  error Page scrolls sideways by 267px — The document is 660px wide in a 393px viewport.
  error Extends 267px past the viewport — <table.prices> “SizeWhole beanGroundSubscriptionWholesal”
        html > body > main > table
        fix: Constrain it with max-width: 100%, min-width: 0 on a flex child, overflow-wrap: anywhere, or let it scroll inside its own container.
  error Tap target is 13 × 13px — <input#weekly>
        #weekly
        fix: Targets must be at least 24 × 24px (WCAG 2.5.8); 44 × 44px is comfortable.
  warn  Field text is 14px, so iOS zooms in on focus — <input#email>
        #email
        fix: Give form controls font-size: 16px or larger.
  console Carousel failed to initialise at 393px

! Full HD laptop at 125% (most common) 1536×864 @1.25x
  warn  Text is only 10px — <p#terms> “Prices include tax. Orders placed after ”

各デバイスは、ウィンドウのサイズを変更したものではなく、ヘッドレス Chromium で実際にエミュレートされています。デバイスのビューポート、ピクセル比、タッチ対応、モバイルのビューポート動作、ユーザーエージェントを使用します。ビューポートのメタタグがないページは、実機と同じようにスマートフォン上で幅 980px のレイアウトになります。

これは、レスポンシブウェブ開発向けのオープンソースブラウザー Facet のコマンドラインおよびエージェント向け機能です。Facet のデバイスカタログには、iPhone SE から 2026 年の最新フラッグシップ機、折りたたみ式デバイス、タブレット、ノート PC、4K モニターまで、290 以上のプロファイルがあります。

検出できる問題

各デバイスで、次の問題を検出します。

• 横スクロールと、その原因となる要素（各セルではなくテーブルなど）
• タッチデバイスで 24 × 24px より小さいタップターゲット（WCAG 2.5.8）
• 12px より小さいテキスト、および省略記号なしで途切れているテキスト
• フォーカス時に iOS のズームを引き起こす、16px 未満のフォームフィールド
• ビューポートメタタグの問題：未設定、device-width ではない、またはズームが無効
• 必要なサイズを大幅に超える、解像度の高い画面でぼやける、または寸法が指定されていない画像
• 小さな画面を覆いすぎる固定ヘッダーやバナー
• デバイスごとのコンソールエラー、未捕捉の例外、リクエストの失敗。特定のデバイスでのみ記録されるエラーは、そのビューポート固有のバグです。

コマンドライン

npx @chandra14/facet-check <url> [options]

オプション
-d, --devices <list>	デバイス ID、名前、1024x768 のようなサイズ、またはプリセット（デフォルト：popular）
-s, --screenshots <dir>	各デバイスの PNG を保存します
--full-page	最初の画面だけでなく、ページ全体をキャプチャします
--json	レポート全体を JSON 形式で出力します
--all	情報レベルの注記も一覧表示します
--fail-on <level>	検出結果が error（デフォルト）、warn、または info 以上の場合に終了コード 1 を返します。never の場合は常に終了コード 0 を返します
--timeout <ms>	ページの読み込みタイムアウト（デフォルト：30000）
--list-devices [query]	プリセットとデバイスカタログを表示します

URL には、完全な URL、ホスト名のみ（example.com）、ローカル開発サーバー（localhost:3000、:5173）、または HTML ファイルへのパスを指定できます。

プリセット： popular（実際によく使われる 6 つのサイズ）、default（スマートフォン、タブレット、ノート PC）、phones、latest、tablets、desktops、apple、foldables、extremes。

npx @chandra14/facet-check localhost:3000 -d phones --screenshots shots
npx @chandra14/facet-check https://example.com -d iphone-17,"Galaxy S26",ipad,1440x900 --json

CI での利用

エラーが見つかると終了コード 1 を返すため、プルリクエストのチェックに利用できます。

- run: npx @chandra14/facet-check http://localhost:4173 --fail-on error

AI エージェント向け MCP サーバー

facet-check mcp を実行すると、標準入出力を介して Model Context Protocol サーバーが起動します。エージェントは複数の画面サイズで自身の CSS 変更をチェックし、結果を確認できます。

Claude Code

claude mcp add facet -- npx -y @chandra14/facet-check mcp

Cursor、VS Code、Claude Desktop、その他のクライアント

{
  "mcpServers": {
    "facet": { "command": "npx", "args": ["-y", "@chandra14/facet-check", "mcp"] }
  }
}

ツール	機能
check_responsive	複数のデバイスで URL を読み込み、セレクターと修正方法を含む各デバイスの問題を返します
screenshot	デバイスごとにラベル付き画像を 1 枚返します（ビューポートまたはページ全体）
compare_element	各デバイスで 1 つの要素を測定します：サイズ、表示状態、フォントサイズ、display、flex、grid
audit_accessibility	1 つのデバイスで axe-core を実行し、修正方法とともに WCAG 違反を返します
list_devices	デバイスカタログとプリセットを一覧表示します

たとえば、次のように依頼します：「localhost:3000 をスマートフォンでチェックして、横スクロールが発生する箇所をすべて修正してください。」

必要条件

Node 20 以降と、Chromium ベースのブラウザーが必要です。facet-check は次の順に使用します：FACET_CHROME で指定されたブラウザー、Playwright の Chromium（npx playwright install chromium）、Google Chrome、Microsoft Edge。ほとんどのマシンには、これらのいずれかがすでにインストールされています。

制限事項

• Chromium のみです。 iPhone プロファイルでエミュレートするのは iPhone の画面であり、Safari の WebKit エンジンではありません。Safari 固有のバグの確認には、引き続き Safari が必要です。
• ページの読み込み後の状態をチェックします。ログインやクリックの先にあるコンテンツには、コマンドラインからアクセスできません。

ライセンス

MIT