メインコンテンツにスキップ

画面UIのアップデートを、デモに反映させたい

よくある質問

「一度作成したデモに、UI上で新しく追加された画像やメニューを反映させたいのですが、デモを作り直さずに対応する方法はありますか?」

回答

デモに新しい画像を差し込みたい場合、以下の方法があります。

方法1:HTML編集で差し替える

  1. 新旧のHTMLキャプチャを準備(HTMLキャプチャはPLAINERの拡張機能にて撮影)

  2. 新しいUIの、対象の画像やメニューなどの要素をクリックして、HTML編集(β)をクリックして、コードを全てコピー

  3. 古いUIの、差し替えたい画像やメニューなどの要素をクリックして、上記でコピーしたコードを貼り付け

  4. 保存をクリック

※ただし、この方法を行うと、そのページに付与されていたガイドが消える可能性があります。

※消えてしまった場合は、ガイドを再度作成し直すことで対応できます。

操作例(動画付き)

実際の編集手順については、操作動画をご用意しています。詳細は動画をご確認ください。

方法2:新しいページを追加する

差し替えたいUI箇所にガイドが多く設定されている場合や、アップデートされたUI箇所が多い場合には、以下の方法の方が効率的な場合があります。

  1. 事前に新しいUIのページのHTMLキャプチャを準備(HTMLキャプチャはPLAINERの拡張機能にて撮影)

  2. デモの編集画面左側のサムネイル間にある「+」ボタンをクリック

  3. 撮影した新しいUIのコンテンツから、対象ページを追加

  4. 追加したページに対して、改めてガイドを付与する

こちらの回答で解決しましたか?