webデザインにおいて、「クライアントに満足してもらるようなデザインを作る」というのはあたりまえのことです。

しかし、デザイン作成に時間がかかりすぎてしまい、赤字になるようなことがあってはいけません。

そこで今回はwebデザインを行っている人に役立つGoogleChrome拡張機能を10個ご紹介します！

GoogleChromeの拡張機能を活用することで、作業効率が劇的にアップします。また各作業を正確かつ簡単に行えたり、余った時間を他の作業に回すこともできるでしょう。

最後までお読みいただければ幸いです。

デザイン時に役立つ拡張機能

ColorZilla

ColorZillaはweb上で使用されている色をワンクリックで簡単に取得できる拡張機能です。

サイトをデザインするときに、他のサイトを参考にすることってありませんか？

ColorZillaを活用することで、「ヘッダーの色がきれいだな」とか、「この背景の色を使いたい」と感じた時に即座に色を取得できます。

以下のことが可能です。

• webページから簡単にカラーコードを確認できる
• 取得したカラーコードを履歴として保存できる
• グラデーションを表現するCSSを簡単につくれる

ダウンロード先:ColorZilla

 

FireShot

FireShotはwebページのスクリーンショットをキャプチャするための拡張機能です。

widowやmacにも、スクリーンショットができますがディスプレイに表示中の画面に限られると思われます。

しかしFireShotがあれば、長いページでも切れ目のない1つの画像として保存できます。その他にもスクリーンショットした画像をトリミング、リサイズ、テキスト追加といった編集機能も追加することができる。

ダウンロード先:FireShot

 

Page Ruler Redux

Page Ruler Reduxはwebページに表示されている画像や任意のサイズをピクセル単位で測ることができる拡張機能です。

特にホームページ作成やwebデザインなどをしていると、webページ上のもののサイズを知りたいことがたくさんありますよね。そんなときはPage Ruler Reduxを活用することで要素の幅、高さやマージンの幅などを測定することができ、とても便利です。

ダウンロード先:Page Ruler Redux

 

WhatFont

WhatFontは使用されているフォントが何というフォントか、特定することができる拡張機能です。

webデザインを作成するとき、「このサイトのフォント使ってみたいな」と思うときってありますよね。そんなときはWhatFontを活用することでワンクリックで調べることができるでしょう。

以下のフォントの要素を調べることができます。

• フォントの種類
• 標準・イタリック体・斜体といったスタイル
• フォントの太さ、大きさ
• 行間
• 文字色

ダウンロード先:WhatFont

 

Dimensions

Dimensionsはページ内の長さを測定できる拡張機能です。

Webデザインを制作しているときに、要素の幅や高さを知りたいときがありますよね。そのたびに毎回画像編集ソフトを起動して調べるのがとても面倒ですよね。

Dimensionsがあれば、マウスのカーソルを移動させるだけで測定できるため、とても便利で手軽です。

ダウンロード先:Dimensions

作業効率アップに繋がる拡張機能

Image Downloader

Image Downloaderは、webサイト上の画像ファイルを一括でダウンロードできる拡張機能です。

複数の画像を保存するときに、１つ１つ画像を選択して「名前を付けて画像を保存していたのでは非効率ですよね。

そんなときにImage Downloaderがあれば、対象サイトの画像を一括で取得することができるため、作業時間を格段に短縮することができると思われます。

ダウンロード先:Image Downloader

 

Pasty

Pastyはクリップボードにコピーした複数のURLをまとめてタブで開くことができる拡張機能です。

皆さん、以下のようなケースの時にURLをひとつづつ開いていませんか？

• テキストファイルやエクセル、スプレッドシートなどでURLの管理をしている。
• 社内メールにたくさんのURLが送られてくる。

Pastyを活用することで、ワンクリックで開くことができます！

ダウンロード先:Pasty

 

SearchPreview

SearchPreviewは検索結果にサイトのプレビュー画像を表示させる拡張機能です。

本来は検索結果から文字情報だけで、サイトを開かいないといけません。そのため「またこのサイトを開いてしまった…」という経験はものすごく多いですよね。

SerchPreviewを活用することで文字情報だけではなく画像情報も得られるため、目的のサイトにスムーズにたどり着くことができ、作業効率がアップします。

ダウンロード先:SearchPreview

 

Copy All Urls

Copy All Urlsは開いているタブのURLをまとめてコピーできる拡張機能です。

調べ物をしていて大量のタブを開いた際、タブごとにURLをコピーするのは手間がかかります。しかしこの拡張機能を活用することで、わずかな手順で一括コピーが可能になります。

資料の作成や情報収集をしている人におすすめの拡張機能です。

ダウンロード先:Copy All Urls

おまけ

Visual Inspector

Visual Inspectorはwebデザイン制作に役立つ機能が1つにまとめられた拡張機能です。

この拡張機能は先ほど紹介した「Colorzilla」　「Page Ruler Redux」　「WhatFont」と同じ機能が追加されています。

具体的に、以下の機能があります。

• サイズ計測機能
• カラーピッカー機能
• テキストのライブ編集
• 画像の一括ダウンロード
• フォントの抽出と変更

webデザイナーには必須のツールになります！

ダウンロード先:Visual Inspector

さいごに

Webデザイン時に役立ちそうな拡張機能はありましたでしょうか？

デザイン作業において、ひとつひとつの作業はアナログな工程が多いですよね。Google Chrome拡張機能を使用することで作業スピードの向上や効率化に繋がります。

今回の記事が皆さんの悩みを解消したり、快適なwebデザイン制作の助けに少しでもなれば嬉しいです。

制作会社向けのGoogleChromeの拡張機能が知りたい方は、下記記事をお役立てください。

参考記事:【制作会社向け】サイト制作に最適なGoogleChromeの拡張機能18選！