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

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

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

サイトのキャプチャ

ProjectVisBug -GitHub

VisBugの特徴

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

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

サイトのキャプチャ
  • 要素をクリックするだけで、さまざまな情報を表示。
  • アートボードのようにページを変更し、スタイルを変更できます。
  • ホバーのスタイル、アクセシビリティのチェック、配置変更も可能。
  • レイアウトとコンテンツは、あらゆるデバイスのサイズで変更可能。
  • AdobeやSketchのスキルを活用。
  • テキストを編集したり、画像を変更したりできます。
  • 制作過程のプロトタイプとして利用することもできます。
  • i18n、メディアクエリ、プラットフォーム、スクリーンサイズなどをシミュレート。
  • Webサイトやアプリ制作のミーティング時にも便利。
  • 直接、最終状態を編集し、アイデアを実行・テストすることができます。

VisBugのインストール

VisBugは、Chromeウェブストアから無料でインストールできます。
※Firefox版も準備中とのことです。

サイトのキャプチャ

VisBug -Chromeウェブストア

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

サイトのキャプチャ

VisBugのインストール完了

VisBugの機能

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

VisBugの機能

Guides

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

VisBugの機能

Inspect

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

VisBugの機能

Accessibility

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

VisBugの機能

Move

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

VisBugの機能

Margin

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

VisBugの機能

Padding

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

VisBugの機能

Flexbox Align

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

VisBugの機能

Hue Shift

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

VisBugの機能

Shadow

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

VisBugの機能

Position

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

VisBugの機能

Font Styles

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

VisBugの機能

Edit Text

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

VisBugの機能

Search

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

sponsors

top of page

©2018 coliss