• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

【2020年版】効率化と生産性向上!WEBデザイナーの私がオススメする Chrome 拡張 5選

Google Chrome 拡張 5選

筆者は現役のフリーランスのWEBデザイナーとして活動していますが、
実際の制作においてGoogle Chromeの拡張機能を重宝しています。

その中でもオススメのChrome拡張を5つ厳選してご紹介させていただきます。

コーディング支援

Web Maker

サイトの制作を行うにあたって通常はIDEを利用しますが、
細かい検証を行う際に作業中のプロジェクトスペースから隔離した環境で
テストができればなとよく感じます。

既存のサービスとしてcodepenやJSFiddleなどがありますが、
ログイン不要でテストしたい場合にすぐに呼び出せるWeb Makerなら
手軽に小さなコードの検証を行うことが可能です。

Web Maker

SEO対策

NoFollow

WEB制作では、ローカル環境やテスト環境での実装を経て、
本番環境へ最終的に反映をするという流れをよく行います。

その際に怖いのがテスト環境のままの設定にしており、
noindexnofollow指定のまま検索エンジンにインデックスされないというミスです。

Chromeの拡張機能として提供されているNoFollow
ブラウザで開いたページでnoindexやnofollowの指定がされている場合に、
通知を表示してくれます。

NoFollow

HTML

HTMLエラーチェッカー

長い時間膨大なHTMLの記述をしているとHTMLタグの閉じ忘れなどのミスが起こることもあります。

そういった基本的なミスを確認できるHTMLエラーチェッカー
開いているページのHTML構文をチェックし、 閉じタグ忘れなどを指摘してくれる拡張機能です。

人はミスする生き物ですので、ミスをしない工夫を実際のコーディングでは意識しつつ、
気づける工夫としてこの拡張機能を利用しています。

HTMLエラーチェッカー

Check My Links

リンク切れはユーザー体験、サイトの運営において致命的です。
ただ、テスト環境と本番環境の変化や、テストデータの流し込みのままになっているなど、
どうしても気づかず単純なミスでリンク切れを起こしてしまうケースはあります。

Chrome拡張Check My Linksは開いているページ内でリンク切れになっているaタグを
わかりやすく色付けして表示してくれる機能を追加できます。

Check My Links

サイトの速度対策

Lighthouse

SEO対策やユーザーの離脱率などにもつながってくることから、
WEBサイトの速度は非常に重要なファクターになっています。

実際の本番環境における速度の指標はPage Speed InsightsやGT Metrixを利用しますが、
ローカル環境やBASIC認証などをかけたテスト環境など、閉じられたサイトの測定を行うことはできません。

そういった環境でもブラウザから拡張機能として利用ができるLighthouseであれば、
Page Speed Insightsにも利用されていることから同程度の結果を得ることができます。

開発中に特に利用する拡張機能です。

Lighthouse

まとめ

今回はコードのご紹介ではなく効率化と生産性向上の手助けをしてくれる拡張機能のご紹介でした。
有名なものばかりですが実際の作業で非常に役立つものを厳選しましたので、参考になれば幸いです。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND