【お守り】操作を間違えた！一つ前に戻す方法 (Ctrl+Z)

旧マニュアル番号: No.45

【注意】この操作は「デザイナーモード」で行います。No.38の注意点を必ず読んでから、自己責任の上で実行してください。

デザイナーモードでの作業は、常に危険と隣り合わせです。「間違って要素を消してしまった！」「数値を変更したらレイアウトが崩れた！」そんな青ざめるような事態は、誰にでも起こり得ます。しかし、慌てる必要はありません。ほとんどのPCアプリケーションと同じように、Webflowにも強力な「元に戻す」機能が備わっています。 実画面例: Designerで誤操作した場合は、慌てて追加操作をせず、まずUndoで戻せるか確認します。

1. 「元に戻す」ショートカットキー

デザイナーモードで直前の操作を取り消したい時、以下のキーボードショートカットを使います。これは絶対に覚えておいてください。

Windowsの場合: Ctrl + Z
Macの場合: Command (⌘) + Z

このキーを押すたびに、操作が一段階ずつ過去に遡っていきます。2回押せば2つ前の操作に、3回押せば3つ前の操作に戻ります。

2. 「やり直す」ショートカットキー

「元に戻す」操作を取り消して、未来の操作に一段階進めたい（元に戻しすぎた場合など）は、以下のショートカットキーを使います。

Windowsの場合: Ctrl + Shift + Z
Macの場合: Command (⌘) + Shift + Z

3. この機能が役立つ場面

要素を誤って削除・移動してしまった時: すぐに Ctrl+Z を押せば、削除した要素が元通りに現れます。
スタイルパネルの数値を変更してデザインが崩れた時: 焦らず Ctrl+Z を数回押して、元の状態に戻るまで操作を遡ります。
何かよくわからないけど、表示がおかしくなった時: とにかく Ctrl+Z を押してみるのが有効です。直前の何気ない操作が原因だった、ということがよくあります。

4. パネルからも操作可能

ショートカットキーを忘れてしまった場合でも、デザイナーモードの左上にあるパネルから操作できます。

元に戻す: 左向きの矢印アイコン
やり直す: 右向きの矢印アイコン

キャプチャー指示: Designer左上のUndo / Redo操作

保存名: 04-08-undo-redo-toolbar.png
差し込み位置: 4. パネルからも操作可能 の直後
撮影画面: Designer画面左上のUndo / Redoアイコンが見える状態
事前状態: BOOSTのWebflowサイトで、公開に影響しない軽微なテキスト変更を行った直後にする。本番公開は実行しない
強調箇所: Undoアイコン、Redoアイコン、選択中の編集対象
隠す情報: 顧客サイト名、未公開デザイン、ユーザー名
撮影後チェック: ショートカットを忘れた時にどこを押せばよいか分かること

5. 【重要】「元に戻す」の限界

この「元に戻す」機能は、デザイナーモードを開いている間の操作履歴を記憶しているものです。一度デザイナーモードを閉じてしまったり、ブラウザを更新してしまったりすると、操作履歴はリセットされます。

また、「Publish（公開）」してしまった変更を、この機能で元に戻すことはできません。 Publishする前には、必ずプレビューで表示がおかしくないかを確認する癖をつけましょう。

次のステップ: Ctrl+Z はデザイナーモードの命綱です。必ず覚えておきましょう。次は、もう一つの安全装置、「No.46 デザインが崩れたかも？変更を保存せずに終了する方法」です。