フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

プロトタイプ作成やデモの時にWebページを直接変更する方法

スポンサーリンク

スポンサーリンク

chrome.google.com

 

プロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?

 

そんな時に便利なのが、visbugというChromeで使える拡張機能。

 

 

visbugの簡単なデモ

まずは、一部機能の簡単なデモ動画を見てください。

※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。

 

youtu.be

 

インストール方法

インストール方法は簡単。

下記ページでChrome拡張を追加するだけ。

https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

 

機能紹介:Guides

f:id:ksakae1216:20190818203253p:plain

 

マウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。

また、要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。

 

機能紹介:Inspect

f:id:ksakae1216:20190818210819p:plain

マウスカーソルで選択した要素のStyle(CSS)を表示してくれます。

 

またMacの場合、Optionキー押下して、クリックすると表示を残してくれます。

例えば、最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。

 

機能紹介:Accessibility

f:id:ksakae1216:20190818210841p:plain

人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。

マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。

 

機能紹介:Move

f:id:ksakae1216:20190818210855p:plain

要素の中で上下左右に対象の要素を移動できます。

例えば横にボタンが3つ並んでいたらそのボタンの順番を変更できます。

 

つまり要素の中だけで順番を変更できる感じです。

 

機能紹介:Margin

f:id:ksakae1216:20190818212100p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。

 

機能紹介:Padding

f:id:ksakae1216:20190818212208p:plain

要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。

 

機能紹介:Flexbox Align

f:id:ksakae1216:20190818212325p:plain

選択した要素のAlignを上下左右ボタン押下で変更することができます。 

 

機能紹介:Hue Shift

f:id:ksakae1216:20190818212914p:plain

選択した要素の色、背景色を上下左右ボタンで変更することができます。

要素は複数選択も可です。 

 

機能紹介:Shadow

f:id:ksakae1216:20190818212946p:plain

選択した要素の影を追加することができます。

こちらも上下左右ボタンで変更することが可能です。 

 

機能紹介:Position

f:id:ksakae1216:20190818213155p:plain

このブログのデモに紹介した機能です。

要素を移動できます。 

 

機能紹介:Font Styles

f:id:ksakae1216:20190818213922p:plain

選択した要素のフォントサイズ、Boldを変更できます。

こちらも上下左右ボタンで変更可能。 

 

機能紹介:Edit Text 

f:id:ksakae1216:20190818214117p:plain

選択した要素のテキストを変更する機能です。 

 

機能紹介:Search

f:id:ksakae1216:20190818214730p:plain

要素を検索できます。

検索ボックスに検索したいスタイルなどを入力し検索します。

また、▼ボタンからそのページで使われてる要素の候補から検索することもできます。