制作実績 BLOG

  • HOME
  • BLOG
  • 【厳選】Web制作の作業効率アップ!おすすめChrome拡張機能18選
  • Web制作

【厳選】Web制作の作業効率アップ!おすすめChrome拡張機能18選

2022/10/16

2022/10/22

Web制作の作業効率アップ!おすすめChrome拡張機能

Web制作の現場で本当に役立つChrome拡張機能を、ディレクター・デザイナー・エンジニア向けにご紹介します。

ツバサ
フリーランスでウェブ屋さんをしながら原付でトコトコ旅暮らしをしています。仕事のこと、旅のことをブログ・SNSで発信します。

目次

Chrome拡張機能とは?

WebブラウザにはChrome・Safari・Edge・Firefox・IEなどがありますが、世界・国内ともにシェア60%以上と圧倒的なシェアを占めているブラウザが Chromeです。

その要因として「拡張機能」でカスタマイズできる汎用性の高さが挙げられます。

Chrome拡張機能とは、Google Chromeブラウザの機能を強化する追加機能のことです。拡張機能(アドオン)の多くは無料で利用することができるので、Chromeブラウザを使用するなら必ず使いたい機能です。

Chrome拡張機能の追加・削除方法

拡張機能の追加方法

拡張機能は、Chrome ウェブストアから追加します。

Web制作の作業効率アップ!おすすめChrome拡張機能
Web制作の作業効率アップ!おすすめChrome拡張機能
Web制作の作業効率アップ!おすすめChrome拡張機能

使用頻度の高い拡張機能は、メニューバーに固定しておきましょう。
拡張機能アイコンをクリックして、ピンアイコンで固定できます。

拡張機能の削除方法

拡張機能を削除したいときは、拡張機能アイコンから削除できます。

Web制作の作業効率アップ!おすすめChrome拡張機能

Chrome拡張機能の注意点

追加しすぎるとブラウザが重くなる

拡張機能は便利な反面、入れすぎるとブラウザの動作が重くなる原因になります。
快適に利用するためにも、不要な拡張機能を削除しておきましょう。

怪しい拡張機能に注意

安全でない拡張機能はマルウェアの侵入経路にもなり得ます。そのリスクを下げるためにも、拡張機能は信頼でき、本当に役に立つものだけを厳選して追加することをおすすめします。

【Web制作に関わる人必須!】おすすめChrome拡張機能

【Toby for Chrome】複数タブの管理

Web制作の作業効率アップ!おすすめChrome拡張機能
Toby for Chrome – Chrome ウェブストア

開いているタブをまとめてコレクションに保存し、ボタンひとつで一気に開くことができる拡張機能です。ブックマークのような感覚でコレクションに追加していくことも可能です。
プロジェクトごとにタブを一気に切り替えて作業できるので、複数案件を同時に進める際ににおすすめ。

【Pasty】複数のURLを一気に開く

Web制作の作業効率アップ!おすすめChrome拡張機能
Pasty – Chrome ウェブストア

複数のURLをまとめてコピーするだけで一気に開くことができる拡張機能です。
エクセルやメモ帳で共有されたURLを一つずつコピペで開く手間が省けます。URLの間に文章が混ざっていてもURLだけを抜き出して開くことができます。

【GoFullPage – Full Page Screen Capture】ページ全体をスクショ保存

Web制作の作業効率アップ!おすすめChrome拡張機能
GoFullPage – Full Page Screen Capture – Chrome ウェブストア

ページ全体を1枚のスクリーンショットで保存することができる拡張機能です。
画像ファイルの保存形式はPNGとJPGから選べます。

【SearchPreview】検索結果にサムネイルを追加

Web制作の作業効率アップ!おすすめChrome拡張機能
SearchPreview – Chrome ウェブストア

Google と Yahoo! の検索結果にサムネイルを追加してくれる拡張機能。ページを開く前にサイトのイメージを把握できるため、参考サイト探しに役立ちます。

【Wayback Machine】サイトの過去の状態を確認

Web制作の作業効率アップ!おすすめChrome拡張機能
Wayback Machine – Chrome ウェブストア

Webサイトのアーカイブを保存してくれるサービス「Wayback Machine」の公式Chrome拡張機能。
参考サイトがリニューアルされている・消失しているといった場合に、過去の状態を確認できます。実務でも特にお世話になることの多いサイトです。

【Webディレクター向け】おすすめChrome拡張機能

【DeepL翻訳】高精度な翻訳

Web制作の作業効率アップ!おすすめChrome拡張機能
DeepL翻訳:読みながら、書きながら使える翻訳ツール – Chrome ウェブストア

Google翻訳よりも精度が高いといわれるDeepl翻訳。翻訳したい文章を選択してDeepLのアイコンをクリックすると、26言語から指定の言語で翻訳が可能。

【かんたん文字数カウント】選択したテキストの文字数をカウント

Web制作の作業効率アップ!おすすめChrome拡張機能
かんたん文字数カウント – Chrome ウェブストア

選択したテキストの文字数をカウントしてくれます。スプレッドシートやWordpPressのエディター上でも使えます。

【Create Link】URLとタイトルを同時にコピー

Web制作の作業効率アップ!おすすめChrome拡張機能
Create Link – Chrome ウェブストア

4つの形式から選択してコピーできるので、例えばHTMLを選択するとWordpressのエディターに直接貼り付け、テキストリンクにすることも可能。資料作りやブログ記事作成にも便利です。

【Google Analytics オプトアウト アドオン】自分のアクセスをGAに反映させない

Web制作の作業効率アップ!おすすめChrome拡張機能
Google Analytics オプトアウト アドオン (by Google) – Chrome ウェブストア

Googleアナリティクスによるデータの収集や使用を無効にできる拡張機能です。
自分のアクセスをアナリティクスに反映させないために追加しています。追加するだけで機能するので、設定の手間がかからないという点でもおすすめ。

【Image Downloader】ページ上の画像を一括ダウンロード

Web制作の作業効率アップ!おすすめChrome拡張機能
Image Downloader – Chrome ウェブストア

Webページ上の画像を全て一括でダウンロードできる拡張機能です。
大量の画像を一括でダウンロードできるので、ダミー画像を既存サイトから抜き出す際に活躍します。ダウンロードする画像の取捨選択ができたり、画像の高さと横幅も指定できるのも嬉しいポイント。

【Clear Cache】根強いブラウザキャッシュを削除

Web制作の作業効率アップ!おすすめChrome拡張機能
Clear Cache – Chrome ウェブストア

リロードでも、スーパーリロードでも消えない根強いブラウザキャッシュをワンクリックで削除できる拡張機能です。ブラウザの管理画面から履歴削除する手間が省けます。

【Webデザイナー向け】おすすめChrome拡張機能

【ColorZilla】使われている色を抽出

Web制作の作業効率アップ!おすすめChrome拡張機能
ColorZilla – Chrome ウェブストア

ページ上で使われている色を抽出できる拡張機能です。
「Pick Color From Page」でページ内のピンポイントのカラーを抽出することができ、「Webpage Color Analyzer」を使うとページで使われているカラーを一覧取得することも可能です。

【WhatFont】使われているフォント情報を確認

Web制作の作業効率アップ!おすすめChrome拡張機能
WhatFont – Chrome ウェブストア

ページ上で使われているフォント情報を確認できる拡張機能です。
開発ツールでも確認することはできますが、この拡張機能はマウスオーバーだけでWeightやLineHeightまで確認することが可能。もっと手軽に確認したい人におすすめです。

【Pinterest 保存ボタン】Web上の画像をPintarestへ保存

Web制作の作業効率アップ!おすすめChrome拡張機能
Pinterest 保存ボタン – Chrome ウェブストア

Web上の画像をPinterestへ簡単に保存することができる拡張機能です。

【Webエンジニア向け】おすすめChrome拡張機能

【Wappalyzer】サイトのサーバー・CMS・使用言語を見る

Web制作の作業効率アップ!おすすめChrome拡張機能
Wappalyzer – Chrome ウェブストア

表示中のWebサイトが使用している「サーバー」「CMS」「使用言語」などを見ることができます。

【HeadingsMap】アウトライン構造(見出しタグ)を確認

Web制作の作業効率アップ!おすすめChrome拡張機能
HeadingsMap – Chrome ウェブストア

アイコンをクリックすると、表示中のページの見出しタグの構造を一覧で確認することができます。
アウトライン構造の最終チェックにおすすめです。

【Gyazo】スクショをURL共有

Gyazo – Webページのスクリーンショットを保存 – Chrome ウェブストア

スクリーンショットをURLで共有できる拡張機能。7秒間の動画も共有できるので、ローカル環境での動きを共有する際に便利です。

【ato-ichinen】検索結果を1年以内に限定

Web制作の作業効率アップ!おすすめChrome拡張機能
ato-ichinen – Chrome ウェブストア

Google検索結果を1年以内のものに限定できる拡張機能です。新しい情報だけを調べたい時に便利です。

お問い合わせ CONTACT

ウェブのご相談・お見積もり
お気軽にお問い合わせください