対象プラン：全プラン
操作可能ロール：全ロール
ライブプレビューの概要と使い方
ライブプレビューは、エディタでの編集内容をブラウザでリアルタイムに確認できる機能です。ライブプレビューのURLを社内メンバーなどと共有することで、リアルタイムの編集状況を伝えることができます。
注意: ライブプレビュー画面の仕様変更について
2025年10月14日より、ライブプレビュー画面の仕様が変更になりました。画面右下に、プレビュー画面であることを示す通知が表示されます。
ライブプレビューを表示する方法
注意：カスタムコードで加えた編集内容は、ライブプレビューには反映されません。
画面右上の[ライブプレビュー]をクリックします。
ライブプレビューをまだ利用したことがない場合は、[スタート]をクリックします。
[URLをコピー]をクリックすると、自動でランダムなライブプレビューURLが生成されます。（例：
preview.Studio.site/live/{ランダムな文字列}/）live
パネル上のURLをクリックすると、ライブプレビューが表示されます。
Tips: ライブプレビューでレスポンシブデザインを確認したい
レスポンシブデザインをライブプレビューで確認する際は、ライブプレビューを表示しているブラウザのウィンドウ幅を調整してください。
エディタ上のブレイクポイント設定とライブプレビューの表示は対応していません。
＜例＞タブレット用のレスポンシブデザインを確認したい
OK：PCでライブプレビューを開き、ウィンドウ幅を840px以内にする
OK：タブレット上のブラウザでライブプレビューを開く
NG：エディタのブレイクポイント設定を「タブレット」にした上で、ライブプレビューを開く
ライブプレビューを共有する方法
URLを共有する
[URLをコピー]をクリックすると、ライブプレビューURLをコピーできます。
QRコードを活用する
表示されたQRコードを読み込むと、読み込んだデバイス上でライブプレビュー表示が可能です。スマホやタブレット上で確認する際に便利です。
ライブプレビューのURLを削除する方法
URLを削除すると、発行済みURLは利用できなくなります。再度URLを発行すると、新たなライブプレビューURLが生成されます。
画面右上の[ライブプレビュー]をクリックします。
[ライブプレビューURLを削除]をクリックします。
