Web反響ラボ
ホームページ制作・WEB制作 | 福岡・北九州
Google検索「ホームページ制作 福岡」「ホームページ制作 北九州」上位表示中!
093-982-4223
平日 9:30 - 17:30
福岡県北九州市小倉南区星和台2丁目2-36-2
Web反響ラボ
Web制作やWebデザイン等で使用すると作業が捗るchrome拡張機能を紹介します。
作業効率を上げてくれるChromeの拡張機能はたくさんあって、どれを選べばいいのか悩んでる方も多いのではないでしょうか?
そこで今回は、実際に使用し、使いやすく・便利と感じたものをご紹介しますので、ぜひ自分に合ったものをチェックしてみてください!
目次 - Index -
4818文字
読み終わる時間の目安:約9分
ColorZillaは、ネットサーフィン中に気になった色をすぐに調べることができます。
Webページ上の任意の部分をクリックするだけで、カラーコードが瞬時に表示され、そのまま自動的にコピーされるので、メモ帳やデザインツールなどに保存すると便利です。
ColorZillaの使い方
Fonts Ninjaは、Webサイトのフォントが気になった時にページ上のテキストにマウスオーバーするだけで、フォント名・フォントウェイト・サイズなどの情報が瞬時に確認できます。
Fonts Ninjaの使い方
FireShotは、Webページのスクリーンショットを撮影できる便利な拡張機能です。Pro版は有料ですが、スクリーンショットを画像として保存するだけなら無料版でも十分に使えます。
保存方法は画像とPDFの2種類から選べ、クリップボードにコピーすることも可能です。
FireShotの使い方
Page Rulerは、Webページに表示されている画像や任意エリアのサイズや位置をピクセル単位で測定することができます。サイト内をドラッグするだけで計測することができる拡張機能です。
Page Rulerの使い方
PerfectPixel by WellDoneCode (pixel perfect)
PerfectPixelは、デザインと実装の一致を確認するためのツールで、デザインが正確に再現されているかを細かくチェックするのに非常に便利です。デザイン画像をオーバーレイで表示し、デザインとコーディングしたページを比較しながら、ピクセルのズレを減らすことができます。
PerfectPixelの使い方
HTMLエラーチェッカーは、Webページのレイアウト崩れや表示不具合の原因となる、開始タグ・閉じタグを検出してくれる拡張機能です。自動的にHTMLコードを解析し、エラーや警告を表示します。
HTMLエラーチェッカーの使い方
HeadingsMapは、Webページの構造が適切になっているのかを自動的に検知し、見出しやセクションレベル、階層化で表示してくれます。
また、見出しをクリックすることで対象のコンテンツ部分へジャンプできます。
HeadingsMap
Window Resizerは、あらかじめ設定したブラウザサイズやプリセットされたさまざまなブラウザサイズにワンクリックで変更できるので、レスポンシブデザインの確認作業にとても便利なツールです。
サイズだけでなく表示位置も指定できるため「常にブラウザを固定したい」「ブラウザの大きさを縦横比率16:9に固定したい」といった要望にも対応可能です。
Window Resizerの基本的な使い方
Window Resizerのオリジナルプリセット
プリセットの内容
Resize target | 「Window」か「Viewport」が選択可能。 ※「Window」ではツールバーを含むのに対し「Viewport」はツールバーを含まない。 |
---|---|
Width × Height | オリジナルのブラウザサイズを指定する。 ※「use current」をクリックすると現在表示されているウィンドウ(あるいはビューポート)のサイズが指定されます。 |
Icon | プリセットのアイコンを指定する。 |
Description | プリセットの名前を指定する。 |
Position | ブラウザが表示される位置を指定する。 ※「use current」をクリックすると現在表示されている位置が指定されます。 |
モバイルシミュレーターは、ブラウザ上で表示しているWebサイトを実際のデバイスサイズに切り替えることができる拡張機能です。
有料版では多くのデバイス種類を利用できますが、無料版でも十分な数の端末サイズを選択可能です。
モバイルシミュレーターの使い方
Check My Linksは、Webページのすべてのリンクを自動でチェックし、正常に機能しているリンクとリンク切れや問題のあるリンクを特定します。サイトのメンテナンスと品質管理に便利なツールです。
Check My Linksの使い方
Table Captureは、Webページ上のtableデータを簡単に取得できる拡張機能です。
ページ内にあるtableデータを一覧で表示し、データをコピーしたりスプレッドシートに出力することができます。
Table Captureの使い方
WEBページ上の画像のaltテキストやメタデータ(タイトル、説明、キーワードなど)を簡単に確認することができます。
また、カスタマイズオプションがあるので、見た目を調整することができます。これにより、個々のニーズや好みに合わせたカスタマイズが可能です。
Alt & Meta Viewerの使い方 Altのチェック
Alt & Meta Viewerの使い方 Metaのチェック
今回は、Web制作に役立つおすすめのChrome拡張機能をご紹介しました。
これらの拡張機能を活用することで、作業パフォーマンスの向上や効率の大幅な改善が期待できます。ぜひ積極的に導入して、快適なWeb制作環境を整えてみてください。