リモートワークで、周りの方のPC画面を見る機会が減っている（というかほぼない）方が多いのではないでしょうか？
私は新卒一年目の時、隣のデスクの先輩の作業を横目で見たり、出社したときの雑談などからも効率的に仕事をするコツのようなものを拾っていました。（意図的ではなく、振り返ると拾える環境があったなぁと思います）
環境的に周りが見えない今世ですが、少しでも効率的にデザイン作業ができるGoogle拡張機能をご紹介してみなさんのお役に立てたらと思います。
是非、参考にしてみてください。
目次
①GoFullPage｜Webページのスクリーンショットを撮る
ダウンロードはこちら→GoFullPage
- Webページのスクリーンショットが撮れる拡張機能です。
- ワンクリックでスクショができるので、さっとスクショしたいときに重宝しています。
②Window Resizer｜windowの幅を変更
ダウンロードはこちら→Window Resizer
- windowの幅を変更できる拡張機能です。
- 私はよくこの拡張機能を使ってwindowの幅を指定してから、先ほどのGoFullPageでスクショしています。
③CSS Peeper｜フォント/カラー/マージンの確認、使用画像のダウンロード
ダウンロードはこちら→CSS Peeper
- フォント、カラー、マージンの確認ができ、使用されている画像が一括でダウンロードできる拡張機能です。
- もちろん個別でもダウンロードできます◎
④Page Ruler Redux｜ピクセル単位でいろいろ測れる
ダウンロードはこちら→Page Ruler Redux
- Webページ上のサイズをピクセル単位で測ることができる拡張機能です。
- イケてると思ったwebのマージン、余白感を参考にしたいときなどに使います。
⑤WhatFont｜使われているフォントが確認できる
ダウンロードはこちら→WhatFont
- Web上のフォントが確認できる拡張機能です。
- CSS Peeperでもフォントは調べられますが、こちらは調べたフォントを残しておけるというのもあるため使い分けています。
↑GoFullPageにも反映される◎
⑥Colar Zilla｜カラーコードを確認できる
ダウンロードはこちら→Colar Zilla
- Webページの色を抽出できる拡張機能です。
- ピンポイントで色を抽出でき、CSS Peeperで抽出できなかった色も抽出できます。
私の使い方
基本的には①GoFullPage、②Window Resizer、③CSS Peeperを中心に使っており、③CSS Peeperで確認できない箇所やピンポイントで調べたい箇所があるときに④Page Ruler Redux、⑥Colar Zilla、といったような感じで使い分けています。
おまけ
その本、図書館にあります
ダウンロードはこちら→その本、図書館にあります
- amazonで見ている本が近所の図書館にあるか調べられる拡張機能です。
- 図書館設定をしておくと、amazonのページ内に検索結果を表示してくれます。
絵文字ジェネレーター
ダウンロードはこちら→絵文字ジェネレーター
- 言わずもがな！Slackの絵文字作るサービスです。
- 社内のスタンプ職人さんは入れておきましょう。
Toggle
ダウンロードはこちら→Toggle
- 工数管理で使います。
- 詳しくはこちらの記事をご参考ください▼
さいごに
いかがでしたでしょうか？
「知ってて当たり前」と思う方も多いような定番の拡張機能たちですが、新人の頃は「こんな便利な拡張機能があるのか…！」と驚きました。（それまでデベロッパーツールをいちいち開いていた…）
みなさんのクリエイティブライフが少しでも快適なものになりますように！
佐久間UIデザイナー
多摩美術大学卒業後、DeNAで新規アプリサービスの設計,UIデザインに携わる。2020年にセブンデックスに入社し、アミューズの新規事業UXUIデザインなど、企画段階から、UIデザインまで、様々なフェーズの支援を行っている。