Webページをスマートフォンで確認しているとき、「この余白はどのCSSから来ているのか」「この見出しのDOM構造を見たい」と思っても、調査のためにMacへ戻り、同じページと要素を探し直すことがあります。

そこで、いまiPhoneやiPadに見えているWebページを、そのまま指で調べられるアプリとして「DOM Lens」を開発しました。URLを開き、気になる要素をタップすると、DOM、適用CSS、Computed Style、Box Modelなどを確認できます。

💡 DOM Lensの3行まとめ
① Webページ上の要素をタップして、DOMとCSSを実機上で確認
② CSS編集、Console、Network、Page Auditまで一つのアプリに集約
③ 解析内容を外部サーバーへ送らず、AIやチーム向け資料も端末内で生成

現在、App Storeでの公開に向けて準備を進めています。この記事では、DOM Lensをなぜ作ったのか、そしてモバイル上のWebインスペクターをどのように設計したのかをご紹介します。

「見つけた場所」と「調べる場所」を同じにしたい

レスポンシブなWebサイトでは、iPhoneの画面幅、セーフエリア、文字サイズ、タッチ操作など、実機で初めて気づくことがあります。一方、問題を調べる道具はデスクトップの開発者ツールが中心です。

もちろん、デスクトップの開発者ツールは高機能です。DOM Lensが目指したのは、その代わりをすべて詰め込むことではありません。実機で気づいた瞬間に対象を選び、実装の手がかりを持ち帰れることに焦点を置きました。

デザイナーがCSSの値を確認する、QA担当者が表示崩れの要素を特定する、フロントエンド開発者が移動中に実ページを調べる、HTML／CSSを学ぶ人が画面とコードの関係を確かめる。こうした短い調査を、iPhoneとiPadだけで始められるようにしています。

Webページをタップすると、DOMとCSSへ移動できる

DOM LensでURLを開いて要素選択モードにすると、ページ上の要素を直接タップできます。選択した要素はハイライトされ、スクロールしても位置を追従します。

選択した要素から確認できる主な情報は次のとおりです。

  • Live DOM、親要素・子要素、安全化した属性
  • CSS SelectorとXPath
  • 適用されたCSSルール、セレクタの詳細度
  • Computed Style
  • margin、border、padding、contentのBox Model
  • CSSセレクタによるページ全体検索と複数要素のハイライト

DOMツリーだけを見るのではなく、画面上の見た目と解析情報を往復できることを重視しました。DOMが変化したときは選択中の情報も更新し、動的なWebページでも対象を追いやすくしています。

調べるだけでなく、修正の手がかりまで

要素を特定したあとは、その場でCSSを編集し、表示の変化を確認できます。編集内容にはUndo／Redoがあり、値を試しながら原因を絞り込めます。

さらに、調査に必要になりやすい機能をタブごとにまとめました。

機能確認できること
ElementsDOM、属性、Selector、XPath、テキストノード
Styles適用CSS、詳細度、Computed Style、ライブ編集
Box Modelmargin、border、padding、contentの寸法
Consoleconsoleログ、JavaScriptエラー、式の実行
Networkfetch、XHR、画像などのリクエストメタデータ
Sourceフォーム値を除外したLive DOMとMarkdown共有
Page Audittitle、description、OGP、Twitter Card、JSON-LD、見出し、alt不足

Networkではリクエスト／レスポンスの本文を収集せず、URLに含まれる機密性の高いクエリも共有時にマスクします。問題の切り分けに必要な情報と、扱わない情報の境界を明確にしました。

なお、別ドメインのCSSルール、iframe、closed Shadow DOMなどは、ブラウザのセキュリティ制約によって取得できない場合があります。DOM Lensは制約を回避せず、取得できた情報とComputed Styleを分けて表示します。

iPhoneでは段階式パネル、iPadでは左右分割

小さな画面でWebページと大量の解析情報を同時に見せると、どちらも扱いにくくなります。そのため、iPhoneとiPadでは同じ情報を異なるレイアウトで表示します。

iPhoneでは、下から引き上げる段階式のパネルを採用しました。ページを広く見たいとき、要素を選ぶとき、詳細を読みたいときで、パネルの高さを切り替えられます。

iPadでは、Webページとインスペクターを左右に並べる分割画面です。広い表示領域を使い、選択した箇所とCSS、Box Modelなどを見比べやすくしました。

端末内にサンプルページも収録しているため、外部サイトを用意しなくても、初回起動後すぐに要素選択から解析までを試せます。

AIへ渡す前に、必要な文脈を一つの資料へ

生成AIにUI実装を依頼するとき、スクリーンショットだけではDOM構造やCSS、寸法、ページ全体の文脈が不足します。反対に、HTMLやCSSをそのまま渡すだけでは「画面のどこを対象にしているか」が伝わりにくくなります。

任意の買い切り機能「AIデザイン資料」では、選択した要素を起点に、次の内容を一つにまとめます。

  • 選択箇所を示した注釈画像
  • DOM、CSS、Computed Style、Box Model
  • 色、文字、余白などのデザイントークン
  • Page Auditの結果
  • 実装時に参照できる要点
  • 検索可能なPDF、Markdown、JSON

資料は端末内で生成し、回数制限はありません。AIツールへの入力だけでなく、デザインレビュー、実装依頼、QA結果の共有にも使える構成にしています。

基本の解析・編集・共有機能は無料です。AIデザイン資料だけを、必要な方が追加できる買い切りにし、サブスクリプションは設けません。

Webを調べるアプリだからこそ、端末の外へ出さない

Webインスペクターは、ユーザーが指定したページの構造や通信情報を扱います。そのためDOM Lensでは、解析内容を自社サーバーへ送らない構成を採用しました。

  • Webセッションには非永続データストアを使用
  • HTML、CSS、フォーム値、Cookie、Storage、認証情報を開発者サーバーへ送信しない
  • Networkのリクエスト／レスポンス本文を収集しない
  • 広告、アナリティクス、行動追跡SDKを使用しない
  • 履歴、保存セッション、設定は端末内に保存

AIデザイン資料にも、フォーム値、Cookie、Storage、認証情報、通信本文は含めません。書き出した資料が外部へ送られるのは、ユーザーがシステムの共有画面で送信先を選んだときだけです。

ページを表示するための通常の通信は、指定した閲覧先サイトとの間で発生します。セッションは非永続のため、Cookieやログイン状態はアプリ終了後に保持されません。

DOM Lensが役立つ場面

DOM Lensは、デスクトップの開発者ツールを置き換えるものではなく、実機から調査を始めるための道具です。

  • デザイナー：参考ページの余白、文字、色、Box Modelを確認する
  • フロントエンド開発者：実機で見つけた表示の原因をその場で絞り込む
  • QA担当者：対象要素、Selector、ページ情報を開発者へ共有する
  • ディレクター：OGP、見出し、alt属性などをページ単位で点検する
  • HTML／CSS学習者：見えているデザインとDOM・CSSの対応を確かめる
  • AIを使う開発チーム：画面、構造、スタイルをまとめた資料を実装の入力にする

App Store公開に向けて

DOM Lensは、iOS 17／iPadOS 17以降のiPhone・iPadに対応し、日本語、英語、韓国語、スペイン語、ブラジルポルトガル語、フランス語、ドイツ語、イタリア語の8言語を用意しています。

現在はApp Storeでの公開準備中です。公開状況はDOM Lens製品ページでお知らせします。

Webページの「ここはどう作られているのだろう」を、その場で確かめられるレンズとして。DOM Lensを、デザインと実装の距離を少し縮める道具に育てていきます。