こんにちは、クリエイターのTです。
みなさんはブラウザのGoogle Chromeを使う時「拡張機能」は活用されてますか？
Google Chromeの拡張機能は様々なものがあり、無料でも充分に使える機能を自分好みにカスタマイズすることができ、作業の効率化にも繋げられる優れものです。
私は便利機能が大好き人間でして(笑)SNSなどで紹介している記事を見つけてはダウンロードして試してみてます。
たまに社内で「えっそれなに？！めっちゃ便利じゃん！」と反応いただいたりして（自分が作った訳ではないのになぜかドヤ顔して 笑）「Chrome ウェブストアのリンク送りますね！」っと共有したり、逆に知らなかった拡張機能を教えてもらえたりするのも、ちょっとしたコミュニケーションですが何だか楽しいです！
私のアカウントのツールバーは今こんな感じです。スタメン置いています。
今回こちらのブログでは、日頃の制作やデザインアイデアのインプットを行う時などに役立てている拡張機能を紹介していきます。
デザイナーに限らず使える機能も織り込んでみましたので、ぜひ使ってみてお気に入りを見つけて見てください！
目次
あのタブどこだっけ…？と探す時間をなくして効率化！
同時に開いているタブ達をグループにまとめてスッキリさせても、グループの数自体がまた増えてくるのでウィンドウのタブが結局ごちゃついてきたり、別のデバイスでタブを呼び出すのがちょっと不便に感じたことってないでしょうか？
Tab Group Manager
Tab Group Managerは、タブグループを自動的にブックマークフォルダとして同期・保存してくれるので、仮にタブグループを閉じてしまったとしてもアイコンをクリックすれば、作成したタブグループを一覧で探してすぐに呼び出せます！
不要になったタブグループの削除も拡張機能のウィンドウ内で行えますし、グループの中から一つのタブだけを呼び出すこともできます。
気になるWEBサイトのプロパティを楽〜に確認！
Fonts Ninja
名前がかわいい…
アイコンをクリックして機能を有効にすると、今開いているWEBサイトのフォント、サイズ・文字間・行間、フォントのウェイト、配色が一目で確認できます。
1日に1度は使っているんじゃないか…っていうくらいヘビロテな機能です！
ColorZilla
開いているWEBサイトのカラーコードを確認できる、すっきりシンプルなUIの拡張機能です。
見たいカラーコードが表示されている状態でクリックするだけでカラーコードをコピーできます。
他にも色々な機能がついているようなのですが、正直この機能だけでいいってくらいカラーコードのコピーは使い倒してます！
CSS Peeper
OGP画像も表示される
デザイナー向けにカスタマイズされたというCSSの確認ツールです。
実はこの記事を書いている際にたまたま発見しました。
OGP画像やフォント・カラーについて確認できる他、ボタンなどの要素や選択したエリアのサイズ、余白についても直感的に（XDやfigmaなどのWEBデザインツールを触る感覚で）調べることができるところがT的イイね！ポイントです(笑)
画面上の使用カラーが一覧表示
検証ツールを開かずぱぱっと確認したいときに
また、ページ上で使われているアセットについても一覧で確認したり、エクスポートすることができるようですので、デザインのトレース練習をする時に使えるかと思います。
WEBサイトを複数の画面サイズで一覧表示！
Responsive Viewer
Chrome上で各デバイスの表示確認をする際、検証ツールで表示幅を切り替えて確認することが多いかと思います。
この機能であれば、１画面で一気に各デバイスでの見え方を確認することが可能です！
画面サイズは任意で追加することもできます。
そして、表示中の画面は１クリックでスクショできるので共有もスムーズにできるかなと思います。
Alt & Meta情報をパッと確認
Alt & Meta viewer
Altの内容がポップアップで表示される
Meta情報もすぐに覗ける
こちらは弊社のディレクターに教えてもらいました。
画面の通り、Altの設定やMeta情報を一気に確認できるので、デザイナー的にはOGPのデザインや実装上の勉強にいいな〜と思い、選出してみました！
画像保存機能は用途別で！
Awesome Screenshot
画面のスクショ機能は色々なものがあると思うのですが、これは特に便利！
まず、ブラウザのみならずモニタ上のスクショが撮れるのと、注釈をそのまま書き込めます。
それから、これが一番のポイントだと思っているのですが、スクリーンレコード（動画）撮影ができます！
例えばエフェクトやアニメーションが沢山ついた素敵なサイトの表現を見たまま参考として保存しておきたい時などに使えます。
静止画にしづらいサイトも近年では多くあるので、本当に助かっています。
SNSでWEBサイトの実績紹介したい時にもさらっと撮影できますね！
Image Downloader
先述のCSS Peeper同様アセットのエクスポートができる、トレース練習の時におすすめなツールPart.2です。
CSS Peeperと機能的には重複しているのですが、こちらは画像の幅・高さのサイズで素材を絞ることができます。
ウィンドウ上でサブフォルダやファイル名の設定（リネーム）をした上でダウンロードできるのも地味にポイント高いです。
Pintarest 保存ボタン
デザインのアイデアを探す際、ピンタレストを眺めることもあるのではないでしょうか？
こちらの拡張機能を使えば見た目の通り、WEBサイト上の気になった画像をピンタレストにアイデア保存することが簡単にできます！
（ピンタレストのアカウントを持っている人のための機能です）
アイコンをクリックするとサイト上に表示された画像を一覧にしてくれるので、アイデアストックしたい画像を選択するだけで自分のボードに共有できます。
ピンタレストをうまく使い、制作に対するムードボードを簡単につくることもできるので、こちらもたまに重宝しています！
Googleの便利機能・電卓・ChatGPTなど使える機能が詰まったツールバー
Manganum
こちらも今回のリサーチ中に発見…AI Chatがブラウザにツールバーとして表示できる拡張機能を探していて辿りつきました。
Chat GPTが使えるよということで知ったのですが、なんとタブ機能でGoogle Bardもセレクトできます！
AI Chatはどちらも使っているのですが、若干Google Bardのほうが翻訳が得意？（完全に私の所見です）な気がしているので、Bardも使えるのは嬉しい！
そして、このツールバーの機能はこれだけではありません。
Googleの様々なツール（翻訳・カレンダー・To Do リスト・メモ機能）と電卓の機能も携わっていて、ひとまとめにサイドバーとして表示してくれます。（ミニゲームも付いてます…）
どれもよく使うツールだし、どんな職種のビジネスマンにも刺さる機能なのではないでしょうか！
おわりに
いかがでしたでしょうか？
ぜひ自分好みの拡張機能を増やしていって、便利に楽しく仕事を進めていきましょう！
