お役立ち情報 その他・ツール まとめ記事

ウェブ制作に役立つ!オススメのChromeプラグイン10選を紹介(2021年最新)

komi

兼業エンジニアです。 仕事の生産性が高まるPCアプリ、ビジネスツールの紹介の他、プログラミングや語学の学習情報を発信していきます。

コロナ禍により家にいる時間が多くなり、学習や副業がブームとなりました。

その中でもWebデザインやWebサイト制作は人気が高まり、本職として活動する方や副業として取り組んでいる方が増えてきています。

今回は、Webサイト制作時に必ず確認する作業やコーディングが格段に便利になる、オススメのGoogle Chromeプラグイン10選を紹介します。

現役のWeb制作者が活用しているものを厳選して紹介しますので、是非とも参考にしてください。

オススメ①:Awesome Screenshot

Webページ全体のスクリーンショットなどをワンクリックで撮影することができます。

ブログにおいての写真紹介や、ポートフォリオサイトに縦長のスクショを載せたい時などに重宝します。

▼本サイトをスクショしてみました。

その他にも様々な撮影機能があるので、ぜひ試してみてください。

オススメ②:Window Resizer

クリックのみで容易にブラウザのサイズを変更することができるプラグインです。

▼スマホやタブレットなど、端末ごとのディスプレイの大きさでサイトを表示した際の様子を確認できる。

レスポンシブ対応確認に大変便利なので、是非とも導入してみてはいかがでしょうか。

オススメ③:The QR Code Extension

▼アイコンをクリックするだけで閲覧中のサイトのQRコードを表示することができます。

スマホで表示や動作確認を行う際に大変便利なプラグインです。

オススメ④:Clear Cache

ワンクリックでChromeのキャッシュを削除できるプラグインです。

Webページの動作が遅くなったり、古いキャッシュのせいで表示が崩れたりするのを防ぐことができます。

Cookieや閲覧履歴等のデータも設定することで削除可能です。

オススメ⑤:ColorPick Eyedropper

Webサイトのカラーコードが簡単にわかるプラグインです。

▼カーソルを持っていったところのカラーコードがこのように表示されます。

デベロッパーツールよりもお手軽に調べることができ、重宝します。

オススメ⑥:Link to Text Fragment

Webページの特定のテキストに飛ぶURLリンクを作成することができます。

Webページが複数ページあり、その一部分を相手にみて欲しい時に重宝します。

テキストを選択し、作られたリンクを相手に送れば一発でそのテキストまで飛んでくれます。

オススメ⑦:WhatFont

Webサイトのフォント情報を調べることができるプラグインです。

▼このように表示されます。

デベロッパーツールでCSSを確認するよりも簡単ですね!

オススメ⑧:HTMLエラーチェッカー

WebページのHTMLタグの記述ミス(閉じ忘れ)をエラー表示してくれます。

▼エラー箇所と件数が表示されるので、簡単に確認ができます。

オススメ⑨:Koala Inspector

Shopifyで構築したストアで使用することで、テーマや独自ドメイン、商品情報をしらべることができます。

▼このようにテーマや使用アプリを瞬時に表示することができます。

オススメ⑩:Wappalyzer

Webサイトが使用しているソフトウェアやサービス、言語、フレームワークなどを一覧表示してくれるプラグインです。

技術が気になるサイトを見つけた場合、これを使うことで非常に参考になります。

▼本サイトで使用するとこのように表示されます。

まとめ

いかがだったでしょうか。

上記に紹介したプラグインは無料ながらWebサイト制作においては必須級のものとなります。

注意点としてプラグインは常時ONにしておくとChromeの負荷が大きくなり動作が重くなってしまうので、使いたいときに選んで使うのが基本となります。

これらのプラグインを使用して是非とも作業効率を高めていきましょう!

▼こちらの記事もオススメ

VSCodeのおすすめプラグイン9選を一挙紹介!プログラミングを効率的にサポート

プログラミングを始める時、ローカルのエディタとして Visual Studio Code(VSCode)が主流です。 ここでは初学者の方に向けて、コーディングに特に便利な9つのサポートプラグインを紹介 ...

続きを見る

ウェブ会議やミーティングの調整が簡単にできる!おすすめのスケジュール調整アプリまとめ

社内外との打ち合わせや会議、またはイベント等を主催するとき、参加者のスケジュール調整に苦労しますよね。 私も頻繁にミーティングを行いますが、特に複数の参加者がいる場合は調整のやりとりがとても大変です。 ...

続きを見る

Amazon売上ランキング(毎時更新)
  • タブレット
  • リモートワーク関連機器
  • ディスプレイ
  • デスクトップPC
  • ノートPC
  1. タブレット
  2. タブレット
  3. タブレット
  4. タブレット
  5. タブレット
  6. タブレット・アクセサリ
  7. タブレット
  8. タブレット
  9. タブレット
  10. タブレット
  11. タブレット
  12. タブレット
  13. タブレット
  14. タブレット
  15. タブレット
  16. タブレット・アクセサリ
  17. タブレット
  18. タブレット
  19. タブレット
  20. タブレット
  1. ウェブカメラ
  2. イヤホン
  3. ウェブカメラ
  4. PC用ヘッドセット
  5. PC用マイク
  6. コンデンサ
  7. コンデンサ
  8. ウェブカメラ
  9. PC用ヘッドセット
  10. イヤホン・ヘッドホン本体
    発売日 : 2018年11月12日
    価格 : ¥36,300
    新品最安値 :
    ¥36,300
  11. ウェブカメラ
  12. PC用マイク
  13. ウェブカメラ
  14. コンデンサ
  15. ゲーミングヘッドセット
  16. ウェブカメラ
  17. ウェブカメラ
  18. コンデンサ
  19. ゲーミングヘッドセット
  20. PC用マイク
  1. ディスプレイ
  2. ディスプレイ
  3. ディスプレイ
  4. ディスプレイ
  5. ディスプレイ
  6. ディスプレイ
  7. ディスプレイ
  8. ディスプレイ
  9. ディスプレイ
  10. ディスプレイ
  11. ディスプレイ
  12. ディスプレイ
  13. ディスプレイ
  14. ディスプレイ
  15. ディスプレイ
  16. ディスプレイ
  17. ディスプレイ
  18. ディスプレイ
  19. ディスプレイ
  20. ディスプレイ
  1. タワー
  2. タワー
  3. 一体型
  4. タワー
  5. タワー
  6. ミニ
  7. ミニ
  8. タワー
  9. タワー
  10. タワー
  11. タワー
  12. ミニ
  13. タワー
  14. タワー
  15. タワー
  16. デスクトップ
  17. ミニ
  18. 一体型
  19. ミニ
  20. タワー
  1. ノートパソコン
  2. ノートパソコン
  3. ノートパソコン
  4. ノートパソコン
  5. ノートパソコン
  6. ノートパソコン
  7. ノートパソコン
  8. ノートパソコン
  9. ノートパソコン
  10. ノートパソコン
  11. ノートパソコン
  12. ノートパソコン
  13. ノートパソコン
  14. ノートパソコン
  15. ノートパソコン
  16. ノートパソコン
  17. ノートパソコン
  18. ノートパソコン
  19. ノートパソコン
  20. ノートパソコン
ガジェットレビュー 一覧
  • この記事を書いた人

komi

兼業エンジニアです。 仕事の生産性が高まるPCアプリ、ビジネスツールの紹介の他、プログラミングや語学の学習情報を発信していきます。

-お役立ち情報, その他・ツール, まとめ記事
-, , , , , , ,