Webデザイナー必見!作業を格段に効率化してくれるChrome拡張機能11選
Web制作において、Chromeは欠かせないツールのひとつです。
作業効率を上げるChrome拡張機能は、Webデザイン時にも役立つ機能が揃っています。
今回は、Webデザイナーの方に特にオススメのChrome拡張機能11選をご紹介します。
どれもデザインを行う際に非常に便利なものばかりですので、本記事を参考に利用してみてはいかがでしょうか。
このニュースを読んだあなたにオススメ
作業効率がアップ!オススメのChrome拡張機能20選
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
作業を格段に効率化してくれるChrome拡張機能11選
1.Web Developer Checklist
開発を行う際にやるべきことのチェックリストを作成することができる拡張機能です。
チェックすべき項目がカテゴリごとにまとまっていて、チェックボックスがありますので完了した項目にチェックを入れていきます。
シンプルな作りですが、特に開発の際はやらなければならないことが多いため、意外と重宝します。
2.ColorZilla
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
ホームページ上の要素のカラーコードをスポイトで取得することができる拡張機能です。
取得したカラーコードは履歴に残るので、後から確認することも可能です。
デザインの参考にしたいホームページなどでどのような色を使用しているのか簡単に調べられますので、特にホームページ制作時には重宝します。
3.WhatFont
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
開いているホームページで使用されているフォントを調べることができる拡張機能です。
調べたいテキストの上にカーソルを合わせるだけで、フォントやサイズをすぐに確認できます。
さらに、CSSではどのように指定しているのかも教えてくれますので、使い始めると重宝します。
4.Image Downloader
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja
ホームページ上にある画像を簡単にダウンロードすることができる拡張機能です。
ページ上の画像をひとつだけダウンロードするならドラッグ&ドロップでも保存可能ですが、この拡張機能を利用すれば複数の画像を一度にダウンロードすることができますので、知っているといざという時に便利です。
5.Window Resizer
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja
ブラウザの画面サイズを特定の大きさに変更してくれる拡張機能です。
パソコン上での表示だけではなく、スマートフォンやタブレットなどでの表示を確認することができますので、レスポンシブレイアウトのテストを行う際に便利です。
6.Check My Links
https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf
ページ内にリンク切れがないかをチェックすることができる拡張機能です。
正常にリンクが作動しているものは緑色になり、リンク切れの場合は赤色で表示されます。
チェックする際にすべてのURLをクリックする必要がなくなるので、作業時間が大幅に短縮できます。
7.Clear Cache
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
ブラウザのキャッシュを、ワンクリックで削除することができる拡張機能です。
例えば、サーバでブラウザキャッシュが効く設定にしている場合、CSSや画像の変更が反映されない場合があります。
このような場合にClear Cacheを使用すると、アイコンが緑色になってキャッシュがクリアされ、すぐに反映されるようになります。
8.Awesome Screenshot
いわずと知れた、スクリーンショットを撮影することができる拡張機能です。
Macユーザーの方はショートカットキーで簡単にスクリーンショットを撮影することができますが、Windowsユーザーの方は設定を行ったりアプリをインストールしたりする必要があるため少し手間がかかってしまいます。
この拡張機能をインストールしておけば、選択したエリアのスクリーンショットを撮影できるだけではなく、自動スクロールしてページ全体を撮影することができます。
さらに、保存前に枠線を入れたりテキストを挿入したりなどの画像編集も可能です。
9.BuiltWith Technology Profiler
現在開いているホームページが、どのような技術やサービスが使用されているのかを確認することができる拡張機能です。
バックエンドの技術はもちろん、使用されているプラグイン名などのフロントエンドの技術も知ることができますので、ホームページを制作する際に役立ちます。
10.The QR Code Extension
ホームページのURLをQRコードに変換してくれる拡張機能です。
デザインする中でQRコードをつけたい場合に作成ツールをわざわざ開く必要がなくなりますので、作業時間の短縮になります。
11.CSSViewer
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja
画像やフォントなどにマウスオーバーをするだけで、その箇所に使用されているCSSプロパティをリアルタイムで表示することができます。
フォントサイズや余白、画像の幅、高さなどをすべて丸裸になりますので、余程複雑な箇所でない限りはデペロッパーツールを起動する必要がなくなり、手間を省くことができます。
まとめ
Webデザイナーの作業量は膨大になるケースが多く作業時間も長引きがちなので、ツールを活用していかに効率化できるかということは重要なポイントです。
Chrome拡張機能は無料で使用できるものがほとんどですので、まず試しに使用してみて必要なものだけを残しておきましょう。
これらのツールを使用して、少しでも作業効率アップを図りましょう。
このニュースを読んだあなたにオススメ
WordPressのデザインテーマを変えてみよう
作業効率がアップ!オススメのChrome拡張機能20選
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
このニュースに関連するカリキュラム
WordPressのデザインテーマを変えてみよう
有料・無料問わず多くのでデザインテーマが公開されています。WordPressテーマファイルをダウンロードし、FTPを活用しアップロードする。もしくは、WordPressの管理画面から新規テーマを追加することができます。追加したテーマを有効化し、色やヘッダー画像、ウィジェットなどをカスタマイズすることで独自のページデザインができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング