株式会社Code and DESIGNのプレスリリース

• 旅行・観光・地域情報
• 不動産
• 農林水産
• 鉄鋼・非鉄・金属
• 繊維・エネルギー・素材
• 精密機器
• 新聞・出版・放送
• 食品関連
• 商社・流通業
• 自動車・自動車部品
• 国・自治体・公共機関
• 広告・デザイン
• 建築・土木
• 携帯、モバイル関連
• 金融・保険
• 教育
• 機械
• 外食・フードサービス
• 運輸・交通
• 医療・健康
• ファッション・ビューティー
• ビジネス・人事サービス
• ネットサービス
• コンピュータ・通信機器
• エンタテインメント・音楽関連
• その他非製造業
• その他製造業
• その他サービス
• その他

• サービス
• 製品
• 告知・募集
• キャンペーン
• 企業の動向
• 研究調査報告
• 業績報告
• 人事
• 技術開発成果報告
• その他

Check 　 　Tweet

2026年08月06日 10時　[広告・デザイン／製品]

株式会社Code and DESIGN

ビジュアルWebインスペクター「DOM Lens」を提供開始

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プレスリリース詳細へ

Check

Tweet

2026年10月23日　[製品]
たぬきを塗って、背景に隠れろ！最大10人のオンラインかくれんぼ『Pixel Invisible』をiOS・Android向けにリリース

2026年10月13日　[製品]
無料・オンライン対戦対応のエミュレーター「emu」、iPhone・iPad版をリリース。17種類のゲームシステムを1つのアプリで

2026年10月01日　[製品]
ひとりの練習を、バンドとのセッションに。100曲の編集できる伴奏を搭載した音楽アプリ「Traknotta」iPhone・iPad向けにリリース

2026年09月30日　[製品]
筋トレの行き着く先は、宇宙。筋肉インフレ育成ゲーム『Mr.筋肉』iOS版をリリース

2026年09月25日　[製品]
人口1人の国で、人工衛星をつくる。工場自動化ゲーム『PORTORIA』iPhone・iPad版を配信開始

関連するプレスリリース一覧(新着順)