Webデザイナー必見！作業を格段に効率化してくれるChrome拡張機能15選
Web制作において、Chromeは欠かせないツールのひとつです。
作業効率を上げるChrome拡張機能は、Webデザイン時にも役立つ機能が揃っています。
今回は、Webデザイナーの方に特にオススメのChrome拡張機能15選をご紹介します。
どれもデザインを行う際に非常に便利なものばかりですので、本記事を参考に利用してみてはいかがでしょうか。
このニュースを読んだあなたにオススメ
WordPressのデザインテーマを変えてみよう
作業効率がアップ！オススメのChrome拡張機能20選
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
作業を格段に効率化してくれるChrome拡張機能15選
1.Web Developer Checklist
開発を行う際にやるべきことのチェックリストを作成することができる拡張機能です。
チェックすべき項目がカテゴリごとにまとまっていて、チェックボックスがありますので完了した項目にチェックを入れていきます。
シンプルな作りですが、特に開発の際はやらなければならないことが多いため、意外と重宝します。
2.Page Ruler
https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=ja
ホームページ内の任意の場所の幅と高さを、ドラッグ&ドロップで計測することができる拡張機能です。
レイアウトを調整したり、画像を掲載する際のサイズを検討する際などに便利です。
3.ColorZilla
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
ホームページ上の要素のカラーコードをスポイトで取得することができる拡張機能です。
取得したカラーコードは履歴に残るので、後から確認することも可能です。
デザインの参考にしたいホームページなどでどのような色を使用しているのか簡単に調べられますので、特にホームページ制作時には重宝します。
4.WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
開いているホームページで使用されているフォントを調べることができる拡張機能です。
調べたいテキストの上にカーソルを合わせるだけで、フォントやサイズをすぐに確認できます。
さらに、CSSではどのように指定しているのかも教えてくれますので、使い始めると重宝します。
5.Firebug Lite for Google Chrome
コード修正の補助をしてくれる拡張機能です。
画面の下半分にHTMLとCSSが表示されますのでコードを修正すると、リアルタイムで画面上半分に表示されているページを確認することができます。
ただし、ホームページの改ざん防止のために、確認ができるだけで変更内容がそのまま適応されるわけではありません。
この拡張機能を利用して変更箇所と変更内容が決まったら、自社のホームページのコード部分でHTML・CSSを変更してください。
6.Image Downloader
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja
ホームページ上にある画像を簡単にダウンロードすることができる拡張機能です。
ページ上の画像をひとつだけダウンロードするならドラッグ＆ドロップでも保存可能ですが、この拡張機能を利用すれば複数の画像を一度にダウンロードすることができますので、知っているといざという時に便利です。
7.Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja
ブラウザの画面サイズを特定の大きさに変更してくれる拡張機能です。
パソコン上での表示だけではなく、スマートフォンやタブレットなどでの表示を確認することができますので、レスポンシブレイアウトのテストを行う際に便利です。
8.Adobe Edge Inspect CC
こちらも、スマートフォンやタブレットでの表示確認ができる拡張機能です。
Adobe Edge Inspect CCでは、現在表示しているページを自分が使用しているスマートフォンと同期し、ライブプレビューすることができます。
拡張機能をインストールするとIPアドレスが表示されるので、メモしておいてください。
続いて、App StoreまたはGoogle playでもアプリをインストールします。
アプリを起動すると接続するパソコンの名称が表示されますのでタップしてください。
万が一表示されない場合は、画面右上の「＋」アイコンをクリックしてIPアドレスを入力してください。
続いて、スマートフォン側に表示されたパスコードを、Chrome側に表示されたスマートフォンの名称部分に入力すれば設定完了です。
9.Check My Links
https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf
ページ内にリンク切れがないかをチェックすることができる拡張機能です。
正常にリンクが作動しているものは緑色になり、リンク切れの場合は赤色で表示されます。
チェックする際にすべてのURLをクリックする必要がなくなるので、作業時間が大幅に短縮できます。
10.Clear Cache
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
ブラウザのキャッシュを、ワンクリックで削除することができる拡張機能です。
例えば、サーバでブラウザキャッシュが効く設定にしている場合、CSSや画像の変更が反映されない場合があります。
このような場合にClear Cacheを使用すると、アイコンが緑色になってキャッシュがクリアされ、すぐに反映されるようになります。
11.Awesome Screenshot
いわずと知れた、スクリーンショットを撮影することができる拡張機能です。
Macユーザーの方はショートカットキーで簡単にスクリーンショットを撮影することができますが、Windowsユーザーの方は設定を行ったりアプリをインストールしたりする必要があるため少し手間がかかってしまいます。
この拡張機能をインストールしておけば、選択したエリアのスクリーンショットを撮影できるだけではなく、自動スクロールしてページ全体を撮影することができます。
さらに、保存前に枠線を入れたりテキストを挿入したりなどの画像編集も可能です。
12.BuiltWith Technology Profiler
現在開いているホームページが、どのような技術やサービスが使用されているのかを確認することができる拡張機能です。
バックエンドの技術はもちろん、使用されているプラグイン名などのフロントエンドの技術も知ることができますので、ホームページを制作する際に役立ちます。
13.The QR Code Extension
ホームページのURLをQRコードに変換してくれる拡張機能です。
デザインする中でQRコードをつけたい場合に作成ツールをわざわざ開く必要がなくなりますので、作業時間の短縮になります。
14.Search by Images
Google内での画像検索を、素早く行ってくれる拡張機能です。
例えば、ホームページデザインの参考にするためにさまざまなホームページを閲覧している際に、イメージに合う写真があって二次利用したい場合などに便利です。
二次利用するためにはクレジット表記を入れる必要がありますが、わざわざGoogle画像検索メニューから検索するのは面倒です。
この拡張機能を利用すればすぐに検索可能ですので、すぐに画像に関する情報を把握できます。
15.CSSViewer
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja
画像やフォントなどにマウスオーバーをするだけで、その箇所に使用されているCSSプロパティをリアルタイムで表示することができます。
フォントサイズや余白、画像の幅、高さなどをすべて丸裸になりますので、余程複雑な箇所でない限りはデペロッパーツールを起動する必要がなくなり、手間を省くことができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト（ウェブレイアウト）」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。１９９８年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの（エクセル・ワード等）作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン（メール・ゲーム・カレンダー等）のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの（エクセル・ワード等）作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン（メール・ゲーム・カレンダー等）のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの（エクセル・ワード等）作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン（メール・ゲーム・カレンダー等）のことをアプリと呼ぶことが主流になりました。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。 このページではWordpressのプラグインを例としてお話していきます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。１９９８年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- Googleとは、世界最大の検索エンジンであるGoogleを展開する米国の企業です。１９９８年に創業され急激に成長しました。その検索エンジンであるGoogleは、現在日本でも展開していて、日本のYahoo!Japanにも検索結果のデータを提供するなど、検索市場において圧倒的な地位を築いています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO（検索エンジン最適化）
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション（MA）
- リードジェネレーション（見込み顧客獲得）
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O（Online to Offline）
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
その他のカテゴリ
この記事を書いたライター
