Visual Editing by DatoCMS favicon

Visual Editing by DatoCMS

オープンサイト

DatoCMS Visual Editing: サイト上で直接クリックして編集可能な画期的ビジュアルエディティング機能

導入:

DatoCMSのVisual Editingは、ヘッドレスCMSの常識を覆す直感的な編集体験を提供します。ウェブサイト上の要素を直接クリックするだけで編集画面が開く「Content Link」や、プレビューと編集パネルを並べて操作できる「Visual Mode」を搭載。Next.jsやAstroなどの主要フレームワークに対応し、無料プランを含む全プランで利用可能です。開発者の手間を最小限に抑えつつ、編集者の生産性を劇的に向上させます。

追加日:

2026-02-13

月間訪問者数:

--K

コードとIT
Visual Editing by DatoCMS - AI Tool Screenshot and Interface Preview

Visual Editing by DatoCMS 製品情報

DatoCMS Visual Editing：クリックして、変える。次世代のビジュアル編集体験

DatoCMSは、ヘッドレスCMSの柔軟性と、直感的なビジュアル編集の利便性を融合させた新機能Visual Editingをリリースしました。これまでコンテンツ編集者が抱えていた「どのフィールドがどの表示に対応しているのか分からない」という課題を、Visual Editingが完全に解決します。

What's Visual Editing? (Visual Editingとは)

Visual Editingは、DatoCMSを利用しているウェブサイト上で、修正したい要素を直接クリックするだけで、DatoCMS内の該当する編集レコードを即座に呼び出せる機能です。編集者はモデルやフィールドの構造を意識することなく、実際のページ構成を確認しながら直感的にコンテンツを更新できます。

この機能は、ドラフトモードやリアルタイム更新と組み合わせることで、変更内容を即座に確認しながら作業できる「ストレスフリーな編集環境」を実現します。Visual Editingは、Freeプランを含むすべてのプランで標準機能として提供されています。

Visual Editing の主な特徴

1. Click-to-edit: ウェブサイト上のコンテンツリンク

サイト上の要素にホバーすると編集可能なエリアが表示され、クリックするだけで新しいタブでDatoCMSの編集画面が開きます。Vercel、Netlify、Cloudflareなど、あらゆるホスティング環境で動作します。

2. Visual Mode: サイドバイサイド編集

CMS内で左側にウェブプレビュー、右側に編集パネルを並べて表示します。プレビュー内のテキストをクリックすると右側の編集パネルが該当箇所にジャンプし、逆に編集パネルをスクロールするとプレビューも同期して動く「双方向ナビゲーション」をサポートしています。

3. ステガノグラフィー技術による自動マッピング

GraphQL APIのレスポンスに不可視のUnicode文字を埋め込むことで、どのデータがどのレコードIDやフィールドに由来するかを自動的に識別します。開発者が手動で複雑なワイヤリングを行う必要はありません。

4. 幅広いフレームワーク対応

DatoCMSは、以下の主要なモダンフレームワーク向けに専用SDKを提供しています：

  • Next.js / React
  • Astro
  • Svelte / SvelteKit
  • Vue / Nuxt

Visual Editing のユースケース (Use Case)

  • マーケティングチームによる迅速な修正: キャンペーンページの見出しや説明文を、エンジニアの助けを借りずにブラウザ上で見たまま修正したい場合。
  • 複雑なランディングページの管理: 多数のモジュールブロックが組み合わさったページで、特定のブロックを迷わずに編集したい場合。
  • リアルタイムでのコンテンツ調整: デザインと文言のバランスを、ライブプレビューを見ながら微調整したいクリエイティブチームの作業に最適です。

How to Use (導入方法)

Visual Editingのセットアップは、以下の3ステップで完了します。

  1. ステガエンコーディングの有効化 GraphQLリクエストに以下のヘッダーを追加します：

    • X-Visual-Editing: v1
    • X-Base-Editing-Url: https://<PROJECT-NAME>.admin.datocms.com

  2. SDKの導入 レイアウトに <ContentLink /> コンポーネントを追加します。これにより、ページ内のメタデータをスキャンし、自動的に編集用オーバーレイがレンダリングされます。

  3. Web Previews プラグインの設定 (任意) CMS内でサイドバイサイド編集（Visual Mode）を行いたい場合は、Web Previewsプラグインをインストールして構成します。

FAQ (よくある質問)

Q: Visual Editingは有料プランのみの機能ですか？ A: いいえ、Visual EditingはFreeプランを含むすべてのプランでご利用いただけます。

Q: 独自の複雑なコンポーネント構成でも動作しますか？ A: はい。入れ子になったモジュラーブロックや、タブレイアウト内のローカライズされた構造化テキスト（Structured Text）など、複雑な構成でも動作するように設計されています。

Q: 導入前に試すことはできますか？ A: try.datocms.com で、登録不要のデモプロジェクトをすぐに体験いただけます。

Visual Editingを活用して、コンテンツ編集のワークフローを次世代のスピードへと進化させましょう。