Web制作に役立つChromeおすすめの拡張機能11選

 
世界のブラウザで圧倒的シェアを誇るGoogle Chromeですが、便利な機能拡張もいろいろ揃ってます。皆さんも自分好みの機能拡張を利用してると思いますが、Web制作の際にも作業効率をアップできる機能拡張も多くあります。そこで今回はWebデザイン制作時に役立つGoogle Chromeの機能拡張を厳選して紹介します。





おすすめ機能拡張




1

CSS Peeper

閲覧しているページのCSSを教えてくれる機能拡張。ブラウザのCSS Peeperボタンをクリックするとフォント・カラー・イメージ情報が表示されます。
2

Web Developer

Web制作では定番の機能拡張。解析・検証に役立つツールが揃ってます。
3

WhatFon

ソースを調べなくてもフォント情報を表示できる機能拡張。調べたいテキストにカーソルを合わせるとfont-familyfont-sizeline-heightといっフォントの情報が表示されます。
4

Clear Cache

ブラウザーのキャッシュをクリアしてくれる機能拡張。webサイトの更新確認などに地味に役立つ。
5

ColorZilla

シンプルなカラーピッカー。サイト上のカラーを調べたい箇所をクリックするだけでカラーコード(16進数)をコピーできます。
6

Page Ruler

その名の通りページ上のイメージや余白などを測りたい時に役立つ機能拡張。
7

xvg

SVGのアンカーポイントを表示させる機能拡張。
8

WhatRuns

Webサイトで使用しているCMS・プラグイン・JavaScriptなどを一覧表示してくれるサイト調査に役立つ機能拡張。
9

SimilarWeb

アクセス数や流入キーワードなどを解析できる機能拡張。SimilarWebのサイトに行かなくてもブラウザのボタンをクリックするだけで、サイトのアクセス解析ができます。
10

Full Page Screen Capture

ランディングページなど、長いページをキャプチャを撮りたい時に便利な機能拡張。
11

Session Buddy

調べものをしているとブラウザのタブがどんどん増えていくことがありますが、そのタブを保存できる機能拡張。セーブしておけばブラウザを閉じてしまっても、セーブしたタブを表示(復元)できます。

Web制作から調査まで、便利な機能拡張の紹介でした。Google Chromeの機能拡張は機能のオンオフ・削除が簡単にできるので、気になる機能拡張があれば試してみてください。


RELATED POSTS
  • グラデーションのアニメーションを実装できる「Granim.js」
  • クオリティの高いグラフを描画するjsライブラリ「Chart.js」
  • 陽炎のようなエフェクトを実装できる「Animated Heat Distortion Effects with WebGL」
  • ビューポートなどで要素の可視性を検出できる「Emergence.js」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • パララックス効果がキレイなスライダー「PIGNOSE ParallaxSlider」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • 導入しておきたいWordPressのおすすめプラグイン
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-