ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webサイトのデザインを作っていて、配置を少し変えたり、色合いを変えたいと思うことは多いでしょう。開発者ツールでCSSを変更したり、Webブラウザを再読込しても良いですが、細かい調整では時間がかかってしまいます。

そこで使ってみたいのがProjectVisBugです。ビジュアルを細かく調整できるGoogle Chrome機能拡張です。

ProjectVisBugの使い方

DOM単位で選択して影をつけたりマージンを調整したりできます。

幅を変更して見た目がどれくらい変わるのか確認しているところ。

画像を右に寄せています。

画像の情報を表示しています。

スタイルシートの設定も確認できます。

同様の情報は開発者ツールの中で見ることもできますが、デザイナーにとってはProjectVisBugの方が使いやすいのではないでしょうか。ビジュアル的に分かりやすく、Webデザインの調整などにお勧めです。

ProjectVisBugはGoogle Chrome用のオープンソース・ソフトウェア(Apache Licnese 2.0)です。

GoogleChromeLabs/ProjectVisBug: ? Make any webpage feel like an artboard, download extension here https://chrome.google.com/webstore/detail/cdockenadnadldjbbgcallicgledbeoc

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2