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

VFリリーストップ | 運営会社

■【重要】配信サービス統合に関するお知らせ

現在ご利用頂いております「VFリリース」につきまして、ユーザビリティの向上、機能追加、品質向上を目的とし、2012年4月1日（日）に「ValuePress!」と配信サービスを統合させて頂く運びとなりました。

配信サービス統合に関する詳細はこちらをご覧下さい。
(2012-03-19 00:00:00)

■【重要】経営統合のお知らせ

クラシックコミュニケーション株式会社は、株式会社バリュープレスと平成24年3月1日付けでPR総合支援企業に向けた経営統合を行うことを決定致しました。

詳細はこちらをご覧下さい。

(2012-02-28 12:00:00)

■リリースの「業界検索」機能を強化しました。

VFリリース内の「業界検索」機能を強化しました。

(2012-01-17 16:00:00)

■Grow!ボタンを設置しました。

ソーシャル環境を調査を目的に「Grow!」ボタンを設置しました。

(2012-01-17 10:00:00)

　Check

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