ウェブサイトのテキストを直接編集してテストできる拡張機能「Design Mode」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

Design Mode」は、ウェブサイト上のテキストを一時的に編集することができるChrome拡張機能。

拡張機能のインストール

  1. chromeウェブストアで「Design Mode」を検索し、「CHROMEに追加」をクリック。
    CHROMEに追加
  2. 確認メッセージが表示されるので「拡張機能を追加」をクリック。
    拡張機能を追加
  3. Design ModeがChromeに追加されました。
    追加されました

使い方

インストールしたら、テキストを編集したいサイトを開いてDesign Modeのアイコンをクリック。
すると表示が「ON」になります。

機能をオン

公開されているウェブサイトの文字なら自由に書き換えたり追記したりすることが可能で、好きな文章やタイトルを入力して、見え方のテストができます。

テキストを自由に書き換え

もちろん、実際にそのサイトの内容を書き換えてしまうわけではないので、機能をオフにすればもとに戻りますよ。

画像を移動させたりもできます。

画像を移動

終了するときは、再度アイコンをクリックします。

自分のサイトであれば、修正する前にレイアウトのパターンをテストしたり、文字の回り込みのチェックをしたり。
好きなサイトに自分の文章をあてはめてみて、フォントやデザインの参考にする…ということもできますね。

どんなサイトでも変更可能

サンプルサイトでプレゼンする際、クライアントの名前をその場で入力してイメージを掴んでもらう、なんて使い方もできそう。

シンプルな拡張機能ですが、使いみちは色々ありそうです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください