あなたの仕事をラクにする!Google拡張機能活用完全ガイド
web制作などの作業効率をUPさせる拡張機能とはいったいどんなものか?
拡張機能とは、
「Chromeの機能を追加・強化する便利ツール」です。
必要な機能を追加し、自分なりにカスタマイズして効率的に作業が進められるようにしてみましょう。
https://chrome.google.com/webstore/category/extensions?hl=ja
↑【Chrome ウェブストア】↑
こちらから自分なりのカスタマイズができるよう追加していきます。
おすすめ 拡張機能5選
ColorPick Eyedropper
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-25-142025.png?resize=272%2C172&ssl=1)
こちらはWeb上のカラーコードを調べることが簡単に調べることができます。
とても便利な機能が無料で使用できます。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-26-154423.png?resize=580%2C525&ssl=1)
ColorPick Eyedropperを起動させ、カーソルをサイト上の調べたい部分へもっていきクリックすると、簡単にカラーコードがわかります。
模写コーディングをする上で、非常に便利な機能です。
Image Downloader
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-25-143801.png?resize=271%2C168&ssl=1)
ページ内にある画像を一括で全部ダウンロードできる機能です。
これだけで全画像が一気に抽出できるのでラクに作業ができました。
WhatFont
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-27-141746.png?resize=267%2C172&ssl=1)
web上の文字のフォント情報が一瞬でわかります。
真似したいフォントを探したい時に便利でした。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-27-142311.png?resize=812%2C597&ssl=1)
・font-family
・style
・weight
・size
・line-height
・color
を見ることができます。
GoFullPage – Full Page Screen Capture
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-27-142810.png?resize=270%2C172&ssl=1)
webページ全体のスクリーンショットをPDFやPNG画像で保存することができます。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-27-145209.png?resize=382%2C957&ssl=1)
ちょっと長いPNG画像になりますが、こんな感じです。
模写する際に、全体像を見たり、なにかとページ全部を一枚の画像として保管することができるのは便利です。
PNG画像のみでなく、PDFとしての保存も可能なので、A4用紙で印刷し、資料として使用する際も助かります。
Page Ruler
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-27-145659.png?resize=273%2C176&ssl=1)
ページ内の要素サイズをpx単位で測ることができます。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-28-133248.png?resize=756%2C412&ssl=1)
測りたい箇所をドラッグするとpx数値が表示されます。
w・hを測るのに使い方がシンプルなのでラクでした。
x・yは使用したことないです。
まとめ
Google拡張機能はいろいろ便利な機能があります。
自分にとって必要なものは何か。
私が実際模写コーディングをしていくために導入した機能はこの5つです。
使い方も非常に簡単なものばかりなので、少し使ってみたらすぐになじめました。
拡張機能は無料で使用できるので、様々な機能を試してみて自分に一番合っているものを見つけるのもいいと思います。
実際、私もこのほかにも使ってみたけど、やりにくい…と判断し削除したこともあります。
まずはやってみてください。
コメント