これは便利!デザイナー向けのChrome拡張機能用デザインツールVisBug

これは便利!デザイナー向けのChrome拡張機能用デザインツールVisBug

  • このエントリーをはてなブックマークに追加

Chromeのブラウザにはデベロッパーツールというのがありますが、それを利用することでWebページのHTMLやCSSを書き換えて素早くコーディングをしたり、動作検証をすることができます。コーディングに使えるのはもちろんですが、うまく使えばデザインをあれこれと試行錯誤することもできます。

このデベロッパーツールに似たChrome拡張機能用デザインツールにVisBugというのがあります。

目次

VisBugとは?

VisBugは、オープンソースによるChrome拡張機能用のデザインツールです。

下記のような主な特徴があります。

  • Webページの要素などをクリックすると、様々な情報を表示
  • アートボードのようにページを編集したり、スタイルを変更できる
  • ホバースタイルやアクセシビリティの確認、要素配置の変更も可能
  • レイアウトとコンテントは、様々なデバイスサイズに対応
  • AdobeとSketchのスキルを活用
  • テキストの編集や画像の置き換えが可能
  • アートボードのようにプロトタイプとして使用できる
  • レイテンシ、i18n、メディアクエリ、プラットフォーム制約、CPU、スクリーンサイズなどをシミュレートしながら設計
  • サイト/アプリのフロントエンドでより多くの決定をもたらす
  • 簡単に編集できるので、アイデアやテストをやりやすい

機能がざっくりと動画で紹介されています。

VisBugのインストール

Chromeで下記ページにアクセスしてインストールすればOKです。
VisBug

VisBugの使い方

VisBugをインストールするとChromeのツールバーにアイコンが追加されますので、それをクリックするとページの左にツールバーが追加されます。
Chrome用デベロッパーツールVisBug

それぞれのツールをマウスオーバーすると、使い方が英語で表示されます。
VisBugのツールバーをマウスオーバー

ガイドツールでは、要素に関連するガイドが表示されます。
VisBugの要素のガイド

Inspectツールでは、クリックした要素のスタイルシートを確認できます。「Altキー + クリック」でインスペクトウィンドウをピン留めできます。さらにもう一回「Altキー + クリック」でピン留めを解除できます。
VisBugのInspect

アクセシビリティも簡単に確認でき、「Altキー + クリック」でピン留めの設定・解除ができます。
VisBugのアクセシビリティ

Moveツールは、キーボードの十字キーで下記のような動作が行われます。

  • 左右キー:コンテナ内を上下に移動
  • 上キー:コンテナの上&外に移動
  • 下キー:コンテナの下&中に移動

VisBugのMove

Marginツールは、マージンを調整します。

  • 上下左右キー:マージンを広げる
  • Alt + 上下左右キー:マージンを狭める
  • Ctrl + 上下キー:マージンの変更を選択した要素のすべてに適用

VisBugのMargin

Paddingツールも、Marginツール同様にパディングを調整します。

  • 上下左右キー:パディングを広げる
  • Alt + 上下左右キー:パディングを狭める
  • Ctrl + 上下キー:パディングの変更を選択した要素のすべてに適用

VisBugのPadding

Flexbox Alignツールは、Felxboxによる配置が可能です。

  • 上下左右キー:上下、左右、中央に配置
  • Shift + 左右キー:配置間隔
  • 左下キー:方向

VisBugのFlexbox Align

Hue Shiftツールは、彩度、明度、色相、透明度の設定が可能です。

  • 左右キー:彩度
  • 上下キー:明度
  • Ctrl + 上下キー:色相
  • Ctrl + 左右キー:透明度

VisBugのHue Shift

Shadowツールは、影の設定が可能です。

  • 上下左右キー:影のX/Yの位置
  • Shift + 上下キー:ブラー
  • Shift + 左右キー:範囲
  • Ctrl + 左右キー:透明度

VisBugのShadow

Positionツールは、要素などを自由な位置に配置できます。

  • 上下左右キー:ピクセル単位で移動
  • クリック&ドラッグ:自由配置

VisBugのPosition

Font Styleツールは、フォントのスタイルを自由に設定できます。

  • 上下キー:サイズ
  • 左右キー:列の位置
  • Shift + 上下キー:行間
  • Shift + 左右キー:文字間隔
  • Ctrl + 上下キー:太さ

VisBugのFont Style

Edit Textツールは、文字をクリックして編集ができます。

デベロッパーツールと組み合わせて使う

VisBugを開いた状態でもデベロッパーツールは使えますので、併用するとけっこう便利かもしれません。
VisBugとデベロッパーツールを併用する

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

ビールが好き。 でも最近はワインと日本酒もいいなぁと思える今日この頃。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter

Webデザイナー募集!

新着の記事

mautic is open source marketing automation