【2020】Webデザイナー必見！現役Webデザイナー使用中の便利な「Chrome拡張機能まとめ」

f:id:webdesign-css-html-koyaman:20200524031754j:plain

【2020】Webデザイナー必見！現役Webデザイナー使用中の便利な「Chrome 拡張機能まとめ」。現在使用しているChrome 拡張機能とChrome アプリをまとめました。

Chrome拡張機能について
拡張機能のメリット・デメリット
Chrome拡張機能追加・設定の方法
Webデザインの時に使用するChrome拡張機能
HTMLコーディングの時に使用するChrome拡張機能
Webサイト制作の時短・効率アップに使用するChrome拡張機能
Webライティングの時に使用するChrome拡張機能
Webディレクション・デザイン・コーディングの時に使用するChrome拡張機能
- Webサイトで使用しているプラグイン・ツールがまる見え「WhatRuns」
その他のChrome拡張機能
- 自分のパソコンからのアクセスを計測させない「Google Analytics オプトアウトアドオン (by Google)」
- Chrome アプリのスプレッドシート・ドキュメントをオフラインで作業する「Google オフラインドキュメント」
現役Webデザイナー使用中のChrome アプリ
- Excelより便利！無料オンライン表計算アプリ「スプレッドシート」
- Wordより便利！無料オンラインワードアプリ「ドキュメント」

Chrome 拡張機能について

ブラウザにワンクリックで簡単に追加できるブラウザを便利に使用するために開発されたアプリ。

拡張機能のメリット・デメリット

Chrome 拡張機能メリット: Webデザイン・コーディングの仕事の効率アップ、時短。
Chrome 拡張機能デメリット: PCが重くなり、PC動作が鈍くなる。

Chrome 拡張機能追加・設定の方法

Chrome 拡張機能は Chrome ウェブストアから追加します。
左上の検索バーより拡張したい機能を検索し、拡張機能を選んでクリック。拡張機能の詳細を確認します。
平均評価（★の数）、ユーザー数、更新日時、最新レビューをよく確認した上で、［Chromeに追加ボタン］をクリック。
「拡張機能XXXX」を追加しますか？というポップアップが出てきたら、［拡張機能を追加］をクリックする。
ブラウザに「追加した拡張機能XXXX」のWebサイト（利用規約）が表示された場合は、さらっと見て、閉じてOK。
ブラウザ右上、［三本点（Google Chromeの設定ボタン）］をクリック、設定→拡張機能で追加した拡張機能を確認する。
追加した拡張機能の詳細、拡張機能のON、OFFの変更、拡張機能の削除がこの画面または、ツールバーの拡張機能アイコンを右クリックし、Chromeから削除、拡張機能を管理で拡張機能の詳細、拡張機能のON、OFFが設定できます。

Webデザインの時に使用するChrome 拡張機能

Webページで使用されている色を調べる「ColorZilla」

「ColorZilla拡張機能」の使い方

ツールバーのColorZillaのアイコンクリック!
十字線カーソルをWebページの調べたい色の上に重ねて、左クリック！
クリップボードにコピーされているので、あとは貼り付けるだけ！

「ColorZilla」拡張機能の特徴

カーソルが十字線なので、正確にスポイト場所をクリックできる。
抽出したカラーの履歴が保存されている。
マウスオーバーした要素も確認できる。
CSSグラデーションジェネレーター機能があるので、Photoshopより簡単にグラデーションを作成、自動でCSS出力してくれます。
Photoshopとほぼ同じカラーピッカー機能があり、「ColorZilla」のカラーピッカー機能で簡単に使いたい色を選択できる。

「ColorZilla」拡張機能のオプション

自動コピーのカラー形式を【】の中から選べます。
【#RRGGBB,RRGGBB,rgb(R、G、B),rgb(R%、G%、B%),hsl(H、S%、L%)】
カラー形式の16進コードを小文字に変更可能。
ショートカットを作成でき、ツールバーの「ColorZilla」のアイコンをクリックしなくても、スポイトを開始できます。

ページ全体をキャプチャする「Full Page Screen Capture」

「Full Page Screen Capture拡張機能」の使い方

スクリーンショットをしたいWebページ上で「Full Page Screen Capture」のアイコンクリック!
スクリーンショットを新しいウィンドウで確認、PDFかpngを選択する。
※スクリーンショットをjpgで保存したい場合は、オプションで変更する。
デフォルトは、C:\Users\ユーザー名\Downloadsに保存されます。

「Full Page Screen Capture」拡張機能の特徴

ダウンロード履歴が残っていて、再ダウンロード可能です。
PDF、png、jpgからスクリーンショットの画像フォーマットを選択できます。 ※PDF（オプションで「Auto-download files (beta)」をチェックを入れている場合は、PDFは利用不可。チェックを外せば有効になります。）

「Full Page Screen Capture」拡張機能のオプション

画像フォーマットがpng、jpgから選べる。
スクリーンショットを保存するダウンロードディレクトリの下の任意ディレクトリが指定可能。
Directoryを「screencaptures」に指定すると、下記にスクリーンショットを保存されます。
C:\Users\ユーザー名\Downloads\screencaptures
PDFのファーマットサイズを【】から選択可能。【米国の手紙、米国の法務、A4、画像全体】
「Save　as」にチェックを入れると、スクリーンショットをダウンロードするときに、「名前を付けて保存」ダイアログを自動的に表示。
「Auto-download files (beta)」にチェックを入れると、スクリーンショットを新しいウィンドウで開くことなく、自動的にダウンロード！
「Fit copies to Google Docs limits」にチェックを入れることで、スクリーンショットをクリップボードにコピーするときに、Googleドキュメントの制限に合わせることができる。

Webページ上の要素のサイズをpx単位で測定する「Page Ruler Redux」

「Page Ruler Redux」拡張機能の使い方

自由に選択したい時に『任意モード』

計測したいWebページ上で「Page Ruler Redux」のアイコンクリックまたは、ショートカット「Alt + P」で有効にする。
マウスカーソルが十字の状態で計測したい部分をドラッグ。
Webページ上部の測定ツールバーにドラッグで選択した範囲のサイズが表示されます。
測定が終わったら、測定ツールバー右上の〔×〕をクリックして終了。

要素のサイズを知りたい時に『Element Mode（要素モード）』

計測したいWebページ上で「Page Ruler Redux」のアイコンクリックまたは、ショートカット「Alt + P」で有効にする。
Webページ上部の測定ツールバーの1番左〔＜＞〕をクリックしてElement Mode（要素モード）に変更。
計測したい部分をマウスオーバー。マウスオーバーした部分の要素を自動で認識、サイズを測定してくれます
Webページ上部の測定ツールバーにサイズが表示されます。
測定が終わったら、測定ツールバー右上の〔×〕をクリックして終了。

「Page Ruler Redux」拡張機能の特徴

要素のWidth、Heightのサイズを測定、要素の左上：Left、Top、要素の右下：Right、Bottomの位置を取得することができる。
測定ツールバー〔Color〕から選択した範囲のカラー変更可能。
選択した範囲のカラーと要素のカラーが同系色で見づらい時に利用できます。
測定ツールバー〔Show Guides〕を「ON」にすることで、ガイドを表示することができます。
要素の縁に沿って、垂直線と水平線が表示されることで、正確に計測できます。
測定ツールバーの表示位置を変更可能。
測定ツールバー右上〔下向き矢印〕をクリックで下部に、〔上向き矢印〕をクリックで上部に表示位置の変更が可能になります。
測定ツールバー右上〔？〕をクリックでキーボードショートカットキーや最新のアップデート情報などを確認できます。

「Page Ruler Redux」拡張機能のオプション

「Page Ruler Redux」のアイコン右クリックし、拡張機能の管理から「ファイルのURLへのアクセスを許可する」をチェックするとローカルにあるファイルもブラウザ上でサイズを測ることができるようになります。
ショートカットキーの活用で、選択した範囲の拡張、縮小が1pxまたは、10px単位で調整可能になります。