Chromeの新しい機能拡張が便利すぎる！デザイナーやディレクター向けの新しいデザインツール

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。

制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。

VisBug -GitHub

VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。

機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。

VisBugは、Chromeウェブストアから無料でインストールできます。

VisBug -Chromeウェブストア

各ブラウザ用のVisBugも用意されています。

インストールが完了したら、VisBugのアイコンをクリックすると起動します。

VisBugのインストール完了

VisBugには便利な機能がたくさん備わっています。

Guides

マウスを移動するだけで、その要素を中心にガイドを表示されます。グリッドや要素の揃えなどの確認に便利です。また、クリックすると、その要素が表示され、さらに要素をクリックすると同じ要素がハイライトされます。

Inspect

要素のさまざまな情報を表示します。

Accessibility

要素のアクセシビリティに関する情報を表示します。

Move

要素を移動できます。 ボタンの並び順を変更したり、画像とテキストを入れ替えたり、といったことができます。

Margin

要素の上下左右のマージンを変更できます。

Padding

要素の上下左右のパディングを変更できます。

Flexbox Align

Flexboxで実装されている要素のプロパティを変更できます。

Hue Shift

要素の彩度・明度・色相、そして不透明度を変更できます。

Shadow

要素のbox-shadowを変更できます。

Position

要素の配置を自由に変更できます。 要素はすべて並べ替えることが可能なので、レイアウトの変更なども簡単に試せます。

Font Styles

フォントのスタイルを変更できます。

Edit Text

テキスト要素をダブルクリックすると、テキストを変更できます。

Search

要素名やclass名の検索ができます。 ※通常の検索（command+F）のようなコンテンツ検索ではありません。