「このLPのキャッチコピー、ちょっと変えたいけどイメージ湧かないな…」 「CMSに入稿する前に、実際のWeb画面でプレビューしながら文章を推敲したい」
そんな悩みを持つWebライター、ディレクター、ブロガーの皆さんに、とっておきの魔法の呪文をお教えします。
拡張機能もツールも不要。今すぐChromeブラウザで試せるその機能の名前は、document.designMode です。
document.designMode とは？
一言で言うと、「見ているWebページ全体を、Wordのように編集可能にする」ブラウザ標準の機能です。
通常、Webページのテキストを書き換えるには、HTMLファイルを編集するか、デベロッパーツールでちまちま要素を探して書き換える必要があります。 しかし、この機能をONにすると、ページ上のテキストをクリックして直接書き換えたり、画像をドラッグ＆ドロップで移動したりできるようになります。
まさに「簡易Figma」や「リアルタイムCMSプレビュー」のような状態になるのです。
使い方は超簡単（3ステップ）
使い方はたったこれだけです。
- 編集したいページを開く
F12キーを押してデベロッパーツールを開く- 「Console」タブに
document.designMode = 'on'と入力してEnter
手順1：F12をクリック→Consoleタブをクリック
まずは編集したいページを開き、キーボードのF12キーを押します（Macの方は Cmd + Option + I）。
画面の右側か下にパネルが出てくるので、「Console」というタブをクリックしてください。
手順2：魔法の呪文を入力
以下のコードをコピーして、Consoleに貼り付け、Enterキーを押してください。
document.designMode = 'on';
これだけです。何も起きないように見えますが、ページに戻ってみてください。
手順3：テキストを編集してみる
ページ上のテキストをクリックすると、カーソルが表示され、文字を消したり追加したりできるようになっているはずです！
テキストだけじゃない！画像も動かせる
驚くべきことに、テキストの編集だけでなく、画像の移動やサイズ変更も可能です。
- 画像の移動: ドラッグ＆ドロップで好きな場所に移動
- サイズ変更: 画像をクリックして四隅のハンドルを操作（※一部サイトでは制限あり）
- 削除: 画像を選択してDeleteキー
これにより、「この画像をこっちの段落の下に持ってきたい」といったレイアウトの検証も一瞬で済みます。
実践的な活用シーン
この機能、ただ面白いだけではありません。実務でめちゃくちゃ使えます。
1. LP・セールスレターのコピー微調整
「てにをは」を変えただけで改行位置がどう変わるか、スマホで見た時に見出しが長すぎないか、などをリアルタイム（実際のCSSが当たった状態）で確認できます。
2. 既存記事のリライト案作成
公開済みのブログ記事を見ながら、「ここの表現をこう変えたい」という推敲がその場でできます。Before/Afterの比較検証に最適です。
3. クライアントへの修正提案
「ここをこう直した方が読みやすいですよ」という提案をする際、口で説明するより、ササッと書き換えた画面のスクリーンショットを撮って送る方が100倍伝わります。
⚠️ 重要な注意点：保存はされません
この機能を使う上で最も重要な注意点は、「編集内容は保存されない」ということです。
ブラウザをリロード（再読み込み）すると、全て元通りに消えてしまいます。 あくまで「プレビュー」「下書き」用として使いましょう。
編集結果を残す方法：
- スクリーンショットを撮る: 修正指示やイメージ共有用
- HTML全体をコピーする: デベロッパーツールの「Elements」タブで
<html>タグを右クリックして「Copy outerHTML」を選択すれば、編集後のHTMLを保存できます。 - テキストをコピーする: 全選択してWordやメモ帳に貼り付け
【便利技】1クリックで起動する「ブックマークレット」
毎回F12を押してコマンドを入力するのは面倒ですよね。 そこで、1クリックで編集モードのON/OFFを切り替えられるブックマークレットを用意しました。
登録方法
- ブラウザのブックマークバーを右クリックして「ページを追加」を選択
- 名前に「編集モード」など好きな名前を入力
- URL欄に以下のコードを貼り付けて保存
javascript:document.designMode='on';void(0);これで、編集したいページでこのブックマークをクリックするだけで、即座に編集モードになります。
元に戻したい（OFFにしたい）時用のブックマークはこちら：
javascript:document.designMode='off';void(0);まとめ
document.designMode は、Web制作やライティングに関わる全ての人におすすめしたい「時短テクニック」です。
- リアルな見た目で推敲できる
- 修正指示がスクショで一発で伝わる
- ツール不要で今すぐ使える
ぜひ、今日からの作業に取り入れてみてください。ブラウザが最強のエディタに変わりますよ！
詳細情報セクション
| 項目 | 内容 |
|---|---|
| 機能名 | document.designMode |
| 分類 | DOM API プロパティ |
| 対応ブラウザ | Chrome, Firefox, Safari, Edge 等の主要モダンブラウザ |
| デフォルト値 | 'off' |
| 設定値 | 'on' (編集可) / 'off' (編集不可) |
| 公式ドキュメント | MDN Web Docs: document.designMode |
注意: この機能はローカルのブラウザ上での表示を変更するだけであり、サーバー上の実際のデータや他人の表示には一切影響を与えません。安心していじり倒してください。