Code and DESIGN Inc.は、iPhone・iPad向けビジュアルWebインスペクター「DOM Lens: Web Inspector（日本語名：DOM Lens：Webインスペクター）」を、App Storeで提供開始します。DOM Lensは、Webページ上の気になる要素を指でタップするだけで、DOM、適用されているCSS、Computed Style、Box Modelなどを確認できる開発支援アプリです。デザイナー、フロントエンド開発者、QA担当者、HTML／CSSを学ぶ方が、iPhoneやiPadの実機上で、見た目から実装へすばやくたどれる環境を提供します。

DOM、適用CSS、Box Model、ページ監査を実機上で確認。AI向け資料も端末内で生成

Code and DESIGN Inc.は、iPhone・iPad向けビジュアルWebインスペクター「DOM Lens: Web Inspector（日本語名：DOM Lens：Webインスペクター）」を、App Storeで提供開始します。
DOM Lensは、Webページ上の気になる要素を指でタップするだけで、DOM、適用されているCSS、Computed Style、Box Modelなどを確認できる開発支援アプリです。デザイナー、フロントエンド開発者、QA担当者、HTML／CSSを学ぶ方が、iPhoneやiPadの実機上で、見た目から実装へすばやくたどれる環境を提供します。
基本の解析・編集・共有機能は無料です。選択した要素の情報をAIツールやチームへ引き継ぎやすい資料にまとめる「AIデザイン資料」は、任意の買い切り型アプリ内課金として提供します。サブスクリプションはありません。
App Store：【要入力：公開後のApp Store URL】
製品ページ：https://utaverse.tokyo/dom-lens.html?lang=ja

開発の背景

スマートフォン向けWebサイトの確認では、実機で見つけた表示崩れや気になるデザインを、Macなどの開発環境であらためて再現し、対象要素を探し直すことがあります。
DOM Lensは、実際にページを表示しているiPhone・iPad上で、その場で要素を選び、DOMやCSSを確認できるようにすることで、デザイン確認、実装調査、QA、学習の流れを短くすることを目指して開発しました。端末内のサンプルページも収録しており、初回起動後すぐに一連の操作を試せます。

DOM Lensの主な特長

1．見えている要素をタップして解析
ページ上の要素を指で選択すると、選択箇所をハイライトしながら、次の情報を確認できます。
- Live DOM、属性、CSS Selector、XPath
- 適用CSSルール、詳細度、Computed Style
- margin、border、padding、contentのBox Model
- CSSセレクタによるページ全体検索と複数要素のハイライト
2．調査から修正確認まで、iPhone・iPad上で完結
CSSのライブ編集とUndo／Redo、Consoleログ・エラーの確認、JavaScriptの実行に対応します。Networkではfetch、XHR、リソースのメタデータを確認でき、通信のリクエスト／レスポンス本文は収集しません。
Page Auditでは、title、description、見出し構造、Open Graph、Twitter Card、JSON-LD、画像のalt属性不足などをまとめて確認できます。
3．iPhoneとiPad、それぞれに最適化した操作画面
iPhoneでは表示領域を調整しやすい段階式ボトムパネル、iPadではページと解析情報を見比べやすい左右分割画面を採用しました。要素のハイライトはスクロールに追従し、実際のページを見ながら調査できます。
4．AIやチームへの引き継ぎに使える「AIデザイン資料」
任意の買い切り機能「AIデザイン資料」では、選択要素の注釈画像、DOM、CSS、Box Model、デザイントークン、Page Audit、実装指示を、検索可能なPDF、Markdown、JSONにまとめて書き出せます。
資料は端末内で生成され、生成回数に制限はありません。AIツールへの入力、デザインレビュー、実装依頼、調査結果の共有などに利用できます。
5．プライバシーに配慮した設計
Webセッションには非永続データストアを使用し、履歴や保存セッションは端末内に保存します。DOM Lensは、HTML、CSS、フォーム値、Cookie、Storage、認証情報、通信のリクエスト／レスポンス本文を開発者のサーバーへ送信しません。広告、アナリティクス、行動追跡SDKも使用していません。
なお、Webページの表示に必要な通常の通信は、ユーザーが指定した閲覧先サイトとの間で発生します。

開発チームのコメント

Webページの見た目に気づいたその場で、実装までたどれる道具を目指しました。DOM Lensが、デザインと開発の受け渡しや、実機でのQA、HTML／CSSの学習を少しでも身近にできればと考えています。基本のインスペクター機能は無料で開放し、必要な方だけがAI向けの資料作成機能を買い切りで追加できる形にしました。
― Code and DESIGN Inc. DOM Lens開発チーム

アプリ概要

アプリ名 | DOM Lens: Web Inspector（日本語名：DOM Lens：Webインスペクター）
対応端末 | iPhone、iPad
対応OS | iOS 17.0以降、iPadOS 17.0以降
対応言語 | 日本語、英語、韓国語、スペイン語、ブラジルポルトガル語、フランス語、ドイツ語、イタリア語
価格 | アプリ本体無料
アプリ内課金 | AIデザイン資料：買い切り500円（予定。地域により価格が異なる場合があります）
| 配信ストア |https://apps.apple.com/jp/app/id6793015636
| 製品ページ | https://utaverse.tokyo/dom-lens.html?lang=ja |


提供元：valuepressプレスリリース詳細へ