WordPressプレビュー機能の使い方と活用法を徹底解説

WordPressで記事を書いているとき、「公開ボタンを押す前に、実際の見た目を確認したい」と感じたことはありませんか。誤字脱字のまま公開してしまったり、画像の配置が崩れた状態で読者の目に触れてしまったり。こうした小さなミスが、サイト全体の信頼性を損なうことがあります。

実は、WordPressには公開前に記事の仕上がりを確認できるプレビュー機能が標準で備わっています。しかし、個人的な経験では、この機能を十分に使いこなしている方は意外と少ないように感じます。プレビューにはいくつかの種類があり、それぞれ確認できる範囲や用途が異なるためです。

この記事では、WordPressのプレビュー機能について、基本的な操作方法から応用的な活用テクニックまで、実務で役立つ知識を体系的にまとめました。

WordPressプレビュー機能の基本と仕組み

WordPressのプレビュー機能とは、記事やページを実際に公開する前に、読者が見るのと同じ状態で表示を確認できる機能です。

少し技術的な話になりますが、プレビューの仕組みを簡単に説明します。WordPressでは、記事を編集している画面と、実際にサイト上で表示される画面は別物です。編集画面はあくまで「コンテンツを入力するための画面」であり、テーマのデザインやサイドバー、ヘッダー・フッターといった要素は反映されません。

プレビュー機能を使うと、WordPressは一時的にその記事データを保存し、テーマのテンプレートを適用した状態で別タブに表示してくれます。つまり、プレビューは「テーマを通して見た本当の見た目」を確認する唯一の方法です。

プレビューが必要な理由

「編集画面で見えているから大丈夫」と思う方もいるかもしれません。しかし、ブロックエディタ（Gutenberg）の編集画面は、あくまで近似的な表示に過ぎません。

実際に起こりがちな問題として、以下のようなケースがあります。

• 画像の幅がテーマの設定によって変わり、想定と異なるサイズで表示される
• カスタムCSSがテーマ側で適用されるため、文字の色やフォントが編集画面と異なる
• サイドバーやウィジェットとの位置関係で、レイアウトが崩れる
• アイキャッチ画像やメタ情報がテーマによって独自の表示になる

これまでの取り組みで感じているのは、特にテーマを変更した直後や、カスタマイズを加えた後は、プレビューの確認が不可欠だということです。

プレビューの基本操作手順

WordPressでプレビューを使う手順はとてもシンプルです。

ここで重要なのは、「新しいタブでプレビュー」を選択することです。エディタ内のプレビュー切り替え（デスクトップ/タブレット/モバイル）は、あくまでレスポンシブの簡易チェックであり、テーマのフルデザインは反映されません。

3種類のプレビュー機能と使い分け

WordPressのプレビュー機能は、大きく分けて3つの種類があります。それぞれの特徴と使いどころを理解しておくと、効率的に記事の品質チェックができます。

編集画面プレビュー

ブロックエディタ（Gutenberg）内で確認できるプレビューです。エディタ上部のプレビューボタンから、デスクトップ・タブレット・モバイルの表示幅を切り替えられます。

この方法のメリットは、編集画面を離れずにすぐ確認できる手軽さです。文章の流れや画像の配置をざっくり確認するのに向いています。

ただし、テーマのCSS、ヘッダー、フッター、サイドバーは反映されません。あくまで「コンテンツ部分だけの簡易チェック」と考えてください。

テンプレート込みプレビュー

「新しいタブでプレビュー」を選択した場合に表示されるのが、テンプレート込みプレビューです。これが最も実際の公開状態に近い確認方法です。

テーマのデザインがすべて適用された状態で表示されるため、以下の要素を一度に確認できます。

• ヘッダー・フッターのデザインとの調和
• サイドバーとの位置関係
• テーマ固有のフォントや色の適用状態
• アイキャッチ画像の表示位置とサイズ
• 関連記事やパンくずリストの表示

公開前の最終確認には、必ずこのテンプレート込みプレビューを使うことをお勧めします。

共有プレビュー

3つ目は、外部の関係者に記事の下書き状態を共有するためのプレビューです。クライアントや上司に公開前の記事を確認してもらいたい場面で使います。

WordPressの標準機能では、プレビューURLにはログインが必要です。つまり、WordPressのアカウントを持っていない人はプレビューを見ることができません。

この制限を解消するために、後述するプラグインを活用する方法があります。

公開前の品質チェック完全ワークフロー

プレビュー機能を使った公開前チェックには、効率的な手順があります。個人的には以下の7ステップを実践しており、公開後に「しまった」と思うことがほぼなくなりました。

ステップ1：コンテンツの基本確認（5〜10分）

まずは記事の内容そのものを確認します。この段階ではプレビュー機能を使わず、編集画面上で以下をチェックします。

• 誤字脱字がないか
• 画像がすべて正しく挿入されているか
• 内部リンク・外部リンクが正しいURLを指しているか
• 見出しの階層構造が適切か（H2→H3→H4の順序）
• alt属性が画像に設定されているか

経験上、この基本チェックを飛ばして見た目の確認に進んでしまうと、後から修正が必要になり、かえって時間がかかります。

ステップ2：編集画面でのレスポンシブ確認（3〜5分）

エディタ上部のプレビューボタンから、デスクトップ・タブレット・モバイルの表示幅を切り替えて確認します。

特に注意すべきは、モバイル表示での改行位置です。パソコンでは自然に見える文章でも、スマートフォンの狭い画面では読みにくくなることがあります。WordPressの改行に関する詳しい設定方法を理解しておくと、この段階でのチェックがスムーズになります。

ステップ3：テンプレート込みプレビューでの最終確認（3〜7分）

「新しいタブでプレビュー」を選択し、テーマが適用された状態で記事全体を確認します。

このステップで確認すべきポイントは多岐にわたります。

ステップ4：キャッシュの除外設定（2〜5分）

サーバーやCDNのキャッシュ設定によっては、未公開のプレビューURLがキャッシュされてしまう可能性があります。これはセキュリティ上の問題になり得ます。

具体的な対策は後述のセキュリティセクションで詳しく解説しますが、この段階で確認しておくべきことは、プレビューURLにアクセスした際に最新の内容が表示されているかどうかです。

ステップ5：共有プレビューの発行（必要な場合のみ・5分）

クライアントや社内の関係者に確認を依頼する場合は、共有プレビューリンクを発行します。プラグインを使う方法については後述します。

ステップ6：公開直前の最終チェック（3〜10分）

公開ボタンを押す前に、シークレットモード（プライベートブラウジング）でプレビューを確認することを強くお勧めします。

ログインした状態では管理バーが表示されたり、キャッシュの影響で最新の状態が見えなかったりすることがあります。シークレットモードを使えば、一般の読者と同じ条件で表示を確認できます。

また、可能であれば実際のスマートフォンからもアクセスしてみてください。ブラウザのレスポンシブモードと実機では、微妙に表示が異なることがあります。

ステップ7：公開後の確認（3〜10分）

公開した後も確認は続きます。以下の項目をチェックしましょう。

• OGP画像（SNSでシェアした際のサムネイル）が正しく設定されているか
• すべてのリンクが正常に動作するか
• ページの読み込み速度に問題がないか
• Googleサーチコンソールでインデックスリクエストを送信

モバイルプレビューの重要性と確認方法

現在、多くのWebサイトではアクセスの半数以上がスマートフォンからです。そのため、モバイルでの表示確認は必須と言えます。

エディタ内のモバイルプレビュー

ブロックエディタのプレビューボタンをクリックすると、「デスクトップ」「タブレット」「モバイル」の3つの表示幅を切り替えることができます。

これは画面幅を変えているだけなので完全な再現ではありませんが、大まかなレイアウト崩れを素早く発見するのに役立ちます。

実機での確認が重要な理由

ブラウザのレスポンシブモードと実際のスマートフォンでは、以下のような違いが生じることがあります。

• フォントのレンダリング（表示の滑らかさ）が異なる
• タッチ操作でのリンクやボタンの押しやすさが確認できない
• 画面の明るさや色味の違いで画像の見え方が変わる
• スクロールの挙動やページ読み込み速度が異なる

個人的には、公開前に最低でも1台のスマートフォンで実際にプレビューURLを開いて確認するようにしています。特にYouTubeの埋め込みがある記事では、モバイルでの表示崩れが起きやすいため注意が必要です。

プレビューURLのセキュリティと共有時の注意点

プレビュー機能を使ううえで、見落とされがちなのがセキュリティの問題です。特に未公開の記事を外部に共有する場合は、慎重な対応が求められます。

プレビューURLの仕組みと認証

WordPressのプレビューURLには、通常「preview_id」や「preview_nonce」といったパラメータが含まれています。このnonceと呼ばれるトークンは、一定時間で無効になるセキュリティ機構です。

つまり、標準のプレビューURLは以下の特徴を持っています。

• ログインしているユーザーのみがアクセスできる
• トークンに有効期限がある
• 投稿のステータス（下書き、レビュー待ち、予約投稿）に応じて挙動が変わる

キャッシュによる情報漏洩リスク

具体的な対策としては、以下の方法があります。

サーバー側の設定：多くのレンタルサーバー（エックスサーバー、ConoHa WINGなど）では、キャッシュの除外ルールを設定できます。プレビューURLに含まれる「preview=true」や「preview_id」パラメータを持つURLをキャッシュ対象外にしましょう。

CDNの設定：CloudflareなどのCDNを利用している場合は、Page Rulesでプレビュー関連のURLパターンをキャッシュバイパスに設定します。

プラグインでの対応：キャッシュプラグイン（WP Super Cache、W3 Total Cacheなど）を使っている場合は、設定画面でプレビューページの除外設定を確認してください。

外部共有時のベストプラクティス

クライアントや関係者にプレビューを共有する際は、以下のルールを守ることをお勧めします。

• 共有リンクには有効期限を設定する
• 不要になったプレビューリンクは速やかに無効化する
• 機密性の高い内容の場合は、パスワード保護との併用を検討する
• 共有相手にリンクの転送を控えるよう依頼する

プレビュー機能を拡張するプラグイン

WordPress標準のプレビュー機能だけでは対応できない場面もあります。ここでは、プレビュー機能を拡張する代表的なプラグインを紹介します。

Public Post Preview

最も広く使われているプレビュー共有プラグインです。未公開の投稿に対して、ログイン不要でアクセスできる共有URLを生成できます。

使い方は非常にシンプルです。プラグインをインストール・有効化した後、投稿の編集画面に「Enable public preview」というチェックボックスが表示されます。これにチェックを入れると、共有用のURLが生成されます。

その他のプレビュー関連プラグイン

Theme Switcha：現在のテーマを変更せずに、別のテーマでプレビューを確認できるプラグインです。テーマの変更を検討している際に、既存の記事がどのように表示されるかを事前に確認できます。

WP Staging：サイト全体のステージング環境を作成するプラグインです。大規模な変更やテーマの切り替えを行う前に、本番環境に影響を与えずにテストできます。プレビューの範囲を超えた包括的な確認が必要な場合に有効です。

プレビューが正しく表示されないときのトラブルシューティング

プレビューを使っていると、「表示がおかしい」「真っ白になる」といった問題に遭遇することがあります。ここでは、よくある原因と対処法をまとめます。

プレビューと公開後の表示が異なる

これは最もよく聞かれる問題の一つです。主な原因は以下の通りです。

キャッシュの影響：サーバーキャッシュ、CDNキャッシュ、ブラウザキャッシュのいずれかが古い情報を表示している可能性があります。まずはブラウザのキャッシュをクリアし、シークレットモードで確認してみてください。

プラグインの干渉：一部のプラグイン（特にキャッシュ系やセキュリティ系）が、プレビュー表示に影響を与えることがあります。プラグインを一時的に無効化して確認する方法が有効です。

テーマのカスタマイズ：カスタマイザーで変更した内容が、プレビューには反映されているが公開ページには反映されていない（またはその逆）ケースがあります。カスタマイザーの「公開」ボタンを押し忘れていないか確認しましょう。

プレビューが真っ白になる

いわゆる「ホワイトスクリーン」問題です。

• PHPのメモリ不足：wp-config.phpでメモリ上限を引き上げる
• プラグインの競合：すべてのプラグインを無効化し、一つずつ有効化して原因を特定する
• テーマのエラー：デフォルトテーマ（Twenty Twenty-Fourなど）に切り替えて確認する

プレビューボタンが反応しない

プレビューボタンをクリックしても何も起こらない場合は、以下を確認してください。

JavaScriptのエラーが最も多い原因です。ブラウザの開発者ツール（F12キー）でコンソールタブを開き、赤いエラーメッセージが表示されていないか確認します。

また、ブラウザのポップアップブロック機能が新しいタブの表示を妨げている可能性もあります。プレビューは新しいタブで開く仕組みのため、ポップアップを許可する設定が必要です。

モバイルプレビューの表示崩れ

モバイルプレビューで表示が崩れる場合、以下の点を確認します。

• 画像にwidth/height属性が正しく設定されているか
• テーブルが画面幅を超えていないか（横スクロールが発生していないか）
• カスタムHTMLブロックのCSSがレスポンシブ対応しているか
• テーマのブレークポイント設定が適切か

WordPressのカスタマイズを行っている場合は、追加したCSSがモバイル表示に影響していないか特に注意が必要です。

プレビュー機能の応用テクニック

基本的な使い方を押さえたら、さらに効率的にプレビューを活用するテクニックも知っておきましょう。

SEO要素のプレビュー確認

記事の見た目だけでなく、SEO関連の要素もプレビュー段階で確認できます。

Yoast SEOやAll in One SEOなどのプラグインを使っている場合、編集画面でメタタイトルやメタディスクリプションのプレビューが表示されます。しかし、実際のOGP画像（SNSシェア時のサムネイル）の確認には、外部ツールの併用がお勧めです。

Facebookのシェアデバッガーや、Twitterのカードバリデーターを使えば、公開後にSNSでどのように表示されるかを事前に確認できます。ただし、これらのツールは公開済みのURLでないと完全には動作しないため、公開直後の確認が現実的です。

複数人での共同レビューワークフロー

チームで記事を作成している場合、プレビュー機能を活用した効率的なレビューワークフローを構築できます。

1. ライターが記事を作成し、ステータスを「レビュー待ち」に設定する
2. Public Post Previewプラグインで共有URLを生成する
3. レビュアーにURLとともに確認ポイントを共有する
4. フィードバックを受けて修正する
5. 最終確認後に公開する

この方法であれば、レビュアーにWordPressのアカウントを発行する必要がなく、セキュリティリスクを最小限に抑えられます。

予約投稿のプレビュー活用

予約投稿を設定した記事も、公開予定日前にプレビューで確認できます。WordPressの非公開設定と組み合わせることで、特定の日時に合わせたコンテンツの品質管理が可能です。

特に季節性のあるコンテンツや、キャンペーンに連動した記事では、公開日の数日前にプレビューで最終確認を行う習慣をつけておくと安心です。

よくある質問

プレビューは下書き保存しないと確認できませんか

厳密には、下書き保存をしなくてもプレビューボタンは機能します。しかし、保存されていない変更が正しくプレビューに反映されない場合があります。特に画像の追加やカスタムフィールドの変更は、保存前だとプレビューに反映されないことがあるため、プレビュー前に必ず下書き保存する習慣をつけることをお勧めします。

プレビューURLを外部の人に送っても見られないのはなぜですか

WordPressの標準プレビューURLは、ログインしているユーザーのみがアクセスできる仕組みになっています。外部の人に未公開記事を見せたい場合は、Public Post Previewなどのプラグインを導入して、ログイン不要の共有URLを生成する必要があります。

プレビューで確認した内容と公開後の表示が違うことがあるのはなぜですか

主な原因はキャッシュです。サーバーキャッシュ、CDNキャッシュ、ブラウザキャッシュのいずれかが古い情報を保持していると、プレビューと公開後で表示が異なることがあります。また、一部のプラグインがログインユーザーと非ログインユーザーで異なる処理を行うケースもあります。シークレットモードでの確認が最も確実な方法です。

スマートフォンでのプレビュー確認はブラウザのレスポンシブモードで十分ですか

簡易的な確認であればレスポンシブモードでも問題ありませんが、最終確認には実機での確認をお勧めします。フォントのレンダリング、タッチ操作の使いやすさ、実際の読み込み速度など、レスポンシブモードでは再現できない要素があるためです。

プレビュー機能はカスタム投稿タイプでも使えますか

はい、カスタム投稿タイプでもプレビュー機能は利用できます。ただし、カスタム投稿タイプの登録時に「publicly_queryable」がtrueに設定されている必要があります。また、カスタムテンプレートを使用している場合は、そのテンプレートがプレビュー表示に対応しているか確認してください。プラグインで作成したカスタム投稿タイプの場合は、プラグインの設定を確認しましょう。

まとめ

WordPressのプレビュー機能は、記事の品質を公開前に担保するための重要なツールです。

この記事で解説した内容を振り返ると、プレビューには「編集画面プレビュー」「テンプレート込みプレビュー」「共有プレビュー」の3種類があり、それぞれ用途が異なります。日常的な記事作成では、7ステップのワークフローに沿って確認を進めることで、公開後の修正を大幅に減らせます。

特に重要なのは、以下の3点です。

• 最終確認には必ず「新しいタブでプレビュー」を使い、テーマ適用後の状態を確認する
• モバイル表示は実機での確認が理想的
• 外部共有時はセキュリティ（キャッシュ除外、URL有効期限）に注意する

プレビュー機能を正しく活用することは、読者に質の高いコンテンツを届けるための基本です。WordPressを始めたばかりの方も、ぜひ今日から公開前のプレビュー確認を習慣にしてみてください。少しの手間が、サイト全体の信頼性を大きく高めてくれるはずです。