概要
一度作成したデモコンテンツに対して、ロゴ画像の変更やUI変更を反映させたい場合の手順をご案内します。
よくあるケースとして、以下のような場面で活用できます。
会社・サービスのロゴが変更され、キャプチャ内のロゴを差し替えたい
プロダクトのUI変更を既存デモに反映させたい
デザインリニューアル後の画面に更新したい
なお、編集作業は「下書き保存」を使うことで、公開中のURLに影響を与えずに進めることができます。準備が整ったタイミングで「保存して公開」を実行するまで、公開中のデモには変更は反映されません。
詳しくは 下書きと公開中の違い をご覧ください。
方法1：HTML編集で差し替える
特定の画像やUI要素だけをピンポイントで更新したい場合に適しています。
新しいUI・ロゴが反映された画面をPLAINER拡張機能でキャプチャする（プロダクトキャプチャ機能）
新しいキャプチャの対象要素（ロゴ画像など）をクリックし、「HTML編集(β)」をクリックしてコードをすべてコピー
既存のデモを開き、差し替えたい要素をクリックして、コピーしたコードを貼り付け
「下書き保存」で保存し、プレビューで確認する
問題なければ「保存して公開」を実行する
※この方法を行うと、そのページに付与されていたガイドが消える可能性があります。
※消えてしまった場合は、ガイドを再度作成し直すことで対応できます。
操作例（動画付き）
実際の編集手順については、操作動画をご用意しています。詳細は動画をご確認ください。
方法2：ページごと差し替える
ロゴが多数のページに登場している場合や、UIの変更箇所が広範囲にわたる場合は、こちらの方が効率的です。
新しいUI・ロゴが反映された画面をPLAINER拡張機能でキャプチャする
保存後に表示される編集画面は保存して閉じる
差し替えたいページが含まれる既存のデモコンテンツを開く
編集画面左側のサムネイル間にある「＋」ボタンから、新しくキャプチャしたページを適切な位置に追加する
追加したページに対して、改めてガイドを付与する
古いページを削除する（サムネイル右下のゴミ箱アイコン）
「下書き保存」で確認し、問題なければ「保存して公開」を実行する
参考記事：デモコンテンツへのページ追加機能