lo-eyes

lo-eyes

ビジュアルフロントエンドアクセシビリティ検査用 MCP サーバーです。 WCAG コントラストチェック、タッチターゲットの検証、見出し階層の監査、レスポンシブスクリーンショットに対応し、モバイルとデスクトップのビューポートを S+ で評価します。

Like One Foundation（501(c)(3) 非営利団体）が開発しました。BASE_URL を変更することで、あらゆるサイトで使用できます。

ツール

ツール	説明
eyes_screenshot	任意のデバイスプリセットでビューポートサイズのスクリーンショットを撮影します
eyes_scan	ページ全体を読みやすいビューポート単位に自動分割し、RAG マニフェストを生成します
eyes_audit	S+ 評価付きのレスポンシブおよびアクセシビリティ監査を行います
eyes_devices	利用可能なデバイスプリセットを一覧表示します

デバイスプリセット

名前	ビューポート	種類
iphone-se	375x667	モバイル
iphone-14	390x844	モバイル
ipad	768x1024	タブレット
laptop	1280x800	デスクトップ
desktop	1440x900	デスクトップ

監査項目

• オーバーフロー：ビューポート幅を超える要素（スクロール親を考慮します）
• フォントサイズ：最小値の 12px を下回るテキスト
• タッチターゲット：Apple HIG の最小値である 44px を下回るインタラクティブ要素
• 見出し階層：見出しレベルのスキップ（h1 -> h3）

評価

評価	基準
S+	問題なし
A	中程度の問題が 1～5 件、高レベルの問題は 0 件
B	中程度の問題が 6 件以上、高レベルの問題は 0 件
C	高レベルの問題が 1～2 件
D	高レベルの問題が 3～5 件
F	高レベルの問題が 6 件以上

セットアップ

cd lo-eyes
python3 -m venv .venv
source .venv/bin/activate
pip install playwright mcp
python3 -m playwright install chromium

使用方法

MCP サーバーとして使用（Claude Code）

.mcp.json に追加します：

{
  "mcpServers": {
    "lo-eyes": {
      "command": "/path/to/lo-eyes/.venv/bin/python3",
      "args": ["/path/to/lo-eyes/server.py"]
    }
  }
}

CLI として使用

./lo-eyes audit /                           # Audit homepage
./lo-eyes screenshot /blog/ --device ipad   # iPad screenshot
./lo-eyes scan / --device iphone-14         # Full-page chunked scan
./lo-eyes responsive /academy/              # All 5 viewports

技術スタック

• Python 3
• Playwright（ヘッドレス Chromium）
• MCP SDK（FastMCP、stdio トランスポート）

ライセンス

MIT

---

Like One が心を込めて開発しました。