プロトタイプ作成やデモの時にWebページを直接変更する方法2019-08-20プロトタイプ作成やデモの時にWebページを直接変更する方法スポンサーリンクスポンサーリンクchrome.google.comプロトタイプ作成してる時、デモの時に他の人の意見を聞きながら、文字や色、フォントなど変更したい時ってありますよね?そんな時に便利なのが、visbugというChromeで使える拡張機能。Text機能紹介:Searchvisbugの簡単なデモまずは、一部機能の簡単なデモ動画を見てください。※検索結果の3番目に表示されたこのブログ記事を1番目に移動しました。youtu.beインストール方法インストール方法は簡単。下記ページでChrome拡張を追加するだけ。https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc機能紹介:Guidesマウスカーソルを調べたい箇所の上に持ってくと要素を表示してくれます。要素をクリックして、他の要素にカーソルを持ってくと最初にクリックした要素との距離をピクセル表示してくれます。機能紹介:Inspectマウスカーソルで選択した要素のStyle(CSS)を表示してくれます。Macの場合、Optionキー押下して、クリックすると表示を残してくれます。最初に選択した要素をOption+クリックして、別の要素をOptin+クリックすると最初と2番目をそのまま表示してくれるので見比べることができます。機能紹介:Accessibility人が見て、どのくらい分かりやすいかをチェックするためのものっぽいです。マウスカーソルで選択した箇所で出てくる数値が高ければ高いほど人の目に優しくて問題なければ緑色のチェックが表示され、問題があれば赤色でバツが表示されます。機能紹介:Move要素の中で上下左右に対象の要素を移動できます。横にボタンが3つ並んでいたらそのボタンの順番を変更できます。要素の中だけで順番を変更できる感じです。機能紹介:Margin要素を選択して、その後に上下左右ボタン押下でそれぞれのMarginを広げたり、狭めたりできます。機能紹介:Padding要素を選択して、その後に上下左右ボタン押下でそれぞれのPaddingを広げたり、狭めたりできます。Align選択した要素のAlignを上下左右ボタン押下で変更することができます。Shift選択した要素の色、背景色を上下左右ボタンで変更することができます。要素は複数選択も可です。機能紹介:Shadow選択した要素の影を追加することができます。こちらも上下左右ボタンで変更することが可能です。機能紹介:Positionこのブログのデモに紹介した機能です。Styles選択した要素のフォントサイズ、Boldを変更できます。Text選択した要素のテキストを変更する機能です。機能紹介:Search要素を検索できます。検索ボックスに検索したいスタイルなどを入力し検索します。▼ボタンからそのページで使われてる要素の候補から検索することもできます。(60)月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。