ビジュアルWebインスペクター「DOM Lens」を提供開始 (3/4ページ)
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向けの資料作成機能を買い切りで追加できる形にしました。