Webデザイン

【随時更新】超便利!Webデザイナーが実務で使えるGoogle Chrome拡張機能

Webデザイナー就職して早3ヵ月。

就職したことによって、一人で勉強している時と比べ物にならないくらいインプット・アウトプット量が増えました。

又、社内でWebデザイナーの方と知り合えたことで

無料で使える便利ツールの知識も増えていったのですが

この便利ツールが更にインプット・アウトプットのサイクルを速めてくれている気がします。

というわけで今回は、私が実際に実務で使用しているGoogle拡張ツールをリストアップしていきます。

【初心者向け】Google Chrome 拡張機能の追加方法

ログイン済みの Google Chromeで追加したい拡張機能のページに行きます。

すると以下画像↓のように『Chromeに追加』というボタンがあるのでクリックします。

するとこのようなウィンドウ↓が現れるので、『拡張機能を追加』をクリック。

無事追加されると、画面右上に『……がChromeに追加されました』と報告されます。

これでOK!

もし追加した拡張機能の使用頻度が多い場合は、そのツールを固定させておくと便利です。

ジグソーパズル型のアイコンをクリックして、ピン型のアイコンをクリックします。

これですぐツールを開けるようになりました。

Web上の色を調べたい…Webスポイトツール

ColorZilla

Web上で見つけた素敵な色合い、マネしたい配色ってありますよね。

でも、そのサイトで使っている色を調べるためにわざわざスクショして

Photoshop起動させてスポイトツールを使うのは非常に面倒。

そんな時に便利なのが、ColorZillaというツールです。

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

CollorZilla - Chrome ウェブストア

使い方は直感的で超カンタン!

試しに今すごく欲しい無印のチノパンの色を調べてみます。

スポイト型のアイコンをクリックして

現れたウィンドウの一番上 “Page Color Picker Active” をクリックして

十字カーソルを動かして、調べたい色のところでクリックすると

画面上の黒いバーに、その色のカラーコードが表示されます。

ピックアップした色についてもうちょっと詳しく見たい場合は

元のウィンドウに戻って

“Color Picker”をクリックすると、その色のRGBも知ることができます。

また、これはまだ私も使ったことが無いのですが

“CSS Gradient Generator”というところをクリックすると

なんと! 様々な色合いを表示するためのCSSコード生成ができるというのです!

こんな風にCSSが生成されるのです。 す、すごい!

SCSSでもコードを生成できるそうなので、これは便利ですね。

CSS生成昨日についてはまだ全然いじっていないので、これからいろいろと遊んでみたいと思います。

PCで見ている画面をスマホで確認したい

The QR Code Extension

Webデザイナーの作業は基本PC上ですが、作ったページの多くはスマホで見られています。

なので

「このページはスマホでどんな風に見えるんだろう?」

と思うことが多々あります。

でも、作業中のWebサイトのURLをスマホに送って

そのURLをコピペしてスマホでサイトを確認する……という作業は凄く面倒です。

こんな時に便利なのが The QR Code Extension というツールです。

https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb?hl=ja

The QR Code Extension - Chrome ウェブストア

これも使い方は超簡単!

QRコード型のアイコンをクリックすると

今表示されているサイトのQRコードが現れます。

このQRコード↑をスマホで読み取れば『たれみみらいふ。』のトップページに飛べます。

Web上の画像を、拡張子を指定して保存したい

Save image as Type

Web上の画像を保存する時

保存してから手打ちで拡張子を変えるのって、地味に面倒ですよね。

それに、手打ちで変更すると画像が使えなくなることもあります。

特に、拡張子が”.webp”だとPhotoshopで編集もできないので、本当に困ります。

そんな時に便利なのが Save image as Type というツールです。

https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd/related

Save image as Type - Chrome ウェブストア

この使い方も直感的で超簡単!

保存したい画像上にカーソルを置いて

右クリック

→ Save image as Type

→ Save as JPG/PNG/WebP

これで、元の拡張子が何であるかにかかわらず

選んだ拡張子で画像が保存されます。

縦長なWebページをスクショしたい

GoFullPage – Full Page Screen Capture

Webデザイナーをやっていると、LPを画像として保存したいと思うことがちょくちょくあります。

そんな時に便利なのが GoFullPage というツールです。

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl

GoFullPage – Full Page Screen Capture - Chrome ウェブストア

このツールもクリックするだけ超簡単!

カメラ型のアイコンをクリックするとスクショが開始されます。

スクショの進捗度(と言っても数秒で終わりますが)はパックマンぽいアニメーションで表示されます。

終わるとこんな風に↓スクショしたLPが表示されます。

右上のアイコンで削除とか保存とかの操作ができます。

保存はPDFかPNGのみですが、個人的には十分です◎

関連記事