---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/preview-mode'
title: '訪問者目線でのページ確認 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:20:40+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: Previewではすべてのコントロールバーと追加ボタンが隠れ、訪問者と同じ見た目でページを確認できます。保存前のレイアウト確認に使います。未保存の変更も表示されます。動画では完成したセクションをプレビューし、編集に戻って保存してから、キーボードでPreviewをオンにしています。
tags:
  - 'Edit a page'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 訪問者目線でのページ確認
      description: Previewではすべてのコントロールバーと追加ボタンが隠れ、訪問者と同じ見た目でページを確認できます。保存前のレイアウト確認に使います。未保存の変更も表示されます。動画では完成したセクションをプレビューし、編集に戻って保存してから、キーボードでPreviewをオンにしています。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:20:40+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/preview-mode'
      articleSection: ページを編集
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/preview-mode'
      description: Previewではすべてのコントロールバーと追加ボタンが隠れ、訪問者と同じ見た目でページを確認できます。保存前のレイアウト確認に使います。未保存の変更も表示されます。動画では完成したセクションをプレビューし、編集に戻って保存してから、キーボードでPreviewをオンにしています。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[ページを編集](/ja/hc/documentation/learn-dxpr-builder/editing) # 訪問者目線でのページ確認.

 DXPR Builderを学ぶページを作るページを編集

   ## このガイドの内容

 関連ガイド

- [ページの保存と公開](/ja/hc/documentation/learn-dxpr-builder/editing/save-and-publish)
- [スマートフォンやタブレットでのページ編集](/ja/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [レイアウトをスマートフォンに対応させる](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)

Previewではすべてのコントロールバーと追加ボタンが隠れ、訪問者と同じ見た目でページを確認できます。保存前のレイアウト確認に使います。未保存の変更も表示されます。動画では完成したセクションをプレビューし、編集に戻って保存してから、キーボードでPreviewをオンにしています。

  ## プレビューとの切り替え

1. DXPRツールバーの**目アイコン**をクリックし、表示メニューから**Preview**を選びます。
2. ページを確認します。コントロールバーと追加ボタンは、訪問者向けと同じく非表示です。
3. 表示メニューをもう一度開き、**Edit**を選んで作業を続けます。未保存の変更は保持されます。
4. 最後に**Save**をクリックして、ページを保存します。

キーボードでは**Ctrl+Shift+P**キー（Macでは**Cmd+Shift+P**キー）でPreviewのオン・オフを切り替えます。

## 表示内容

- **編集補助なし。** コントロールバー、ホバー時の枠線、追加ボタン、選択中エレメントの枠線が消えます。
- **ツールバーの赤い目。** Preview中は、DXPRツールバーの目アイコンが赤い取り消し線付きで表示されます。ツールバーは残るため、いつでも戻せます。
- **テキスト編集なし。** もう一度**Edit**を選ぶまで、テキストのクリックではテキストエディターが開きません。

ビルダーはこのブラウザーでの選択を記憶します。ページをPreviewのまま離れると、次に編集するページもPreviewで開きます。

## 狭い画面の確認

Previewに切り替え、ブラウザーウィンドウを狭めます。新しいローはタブレット幅以上でカラムを横並びにし、スマートフォンでは積み重ねます。積み重なった各カラムが読みやすいか確認します。画面サイズごとの変え方は[レスポンシブデザイン](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)をご覧ください。

## プレビューと公開ページ

Previewには、保存済み・未保存にかかわらずエディター内の今の内容が表示されます。訪問者には最後に保存した版が見え、公開後に限ります。訪問者とまったく同じ見た目の確認には、プライベートブラウザーウィンドウで開きます。

## プレビューが表示されない場合

- **ページがコントロールバーなしで開く。** 前のページをPreviewのままにし、ビルダーがその選択を保持しています。表示メニューを開いて**Edit**を選びます。
- **ショートカットが効かない。** 編集中のテキスト内にカーソルがある間は、ショートカットが休止します。テキストの外側をクリックしてから、もう一度**Ctrl+Shift+P**キーを押します。
- **訪問者にPreviewどおりに見えない。** Previewには未保存の変更が含まれますが、訪問者には公開ページのみ見えます。**Save**をクリックし、[ページの保存と公開](/ja/hc/documentation/learn-dxpr-builder/editing/save-and-publish)の手順でページを公開します。

## 次のステップ

- [ページの保存と公開](/ja/hc/documentation/learn-dxpr-builder/editing/save-and-publish)：変更を保存し、訪問者に見えるようにします。
- [スマートフォンやタブレットでのページ編集](/ja/hc/documentation/learn-dxpr-builder/editing/mobile-editing)：タッチ画面でのエディターの違いを確認できます。
- [レスポンシブデザイン](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)：画面サイズごとのレイアウトの合わせ方を調整します。