皆さん、こんにちは！GLASSのWebデザイナー中澤です。
日々デザイン業務に奮闘する中で、作業効率をアップしてくれるツールは欠かせませんよね。
今回は、特にWebデザインやディレクション関係など、サイト制作やデザインの業務で役立つGoogle拡張機能を10個厳選して紹介したいと思います。
どれもすぐに使えるものばかりなので、ぜひ試してみてください！
※拡張機能によっては、無料版と有料版があるものがあります
デザインツール
1.WhatFont: Webサイトのフォントを瞬時に識別
https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
「このサイトで使われているフォント良いな。どのフォントだろう？」
こう思う事、よくありますよね。
しかし、毎回検証ツールでコードを見て、フォントを探すのは大変です。
そんなときにおすすめなのが、このWhatFontです。
Webサイト上のあらゆるフォントを瞬時に判別できる拡張機能です。
拡張を有効にして、気になるフォントにマウスを乗せるだけで、使用されているフォント名がわかります！
2.ColorZilla: Webサイトの色を抽出しコピー
https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja
ColorZillaは、Webサイト上の色をスポイトで拾い、カラーコードや諧調色を調べられる拡張機能です。 スポイトをクリックするだけでコードをコピーできるのも便利です。
3.Wappalyzer: Webサイトの使用技術を解析
Webサイトで使用されているCMS、フレームワーク、ライブラリなどを解析できる拡張機能です。
競合、参考サイトの技術選定を調べたり、デザインの参考にする際に便利です。
画像編集ツール
4.thisShot: Webページを高品質でキャプチャ
https://addonx.net/ja/thisshot
Webページ全体や一部を切り取って画像（スクリーンショット）として保存できる拡張機能です。
似た拡張機能は多くありますが、ヘッダーや、固定された要素が何度も同じ画像内に取り込まれてしまう、スマートフォンのスクリーンショットは特に長くなりやすいので上手く取り込めないなどの不具合がある拡張があります。
同じ機能の拡張を併用してみて、thisShotが一番キレイに画像を取り込んでくれる印象でしたのでおすすめです。
5.Pika: スクリーンショットをカスタマイズしてモックアップ作成
capture tabもthisShot同様画面のキャプチャー機能なのですが、更にカスタマイズ性のある拡張機能です。
スクリーンショットからモックアップを素早く作成が出来、背景をカスタマイズすることも出来ます。
キャプチャを即座にイメージとして使用したい場合、加工まで行えるので便利です！
※機能をすべて利用するには有料登録する必要があります。
レスポンシブ検証ツール
6.Responsive Viewer: 複数デバイスサイズでプレビュー
https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ja
Webサイトを様々なデバイスサイズでプレビューできる拡張機能です。
スマートフォンやタブレットでの見え方を確認し、レスポンシブデザインの調整に役立ちます。
複数のサイズで確認できるので、ブラウザサイズを切り替えを行う必要がなく、効率的です！
※あまり多くの画面を一気に開くとブラウザがとても重くなる点はご注意ください！
7.Chrome UA Spoofer: ユーザーエージェントを変更してクロスブラウザ検証
ブラウザのユーザーエージェントを変更できる拡張機能です。
異なるブラウザやOSでの表示を確認し、クロスブラウザ対応の検証に役立ちます。
UIやリンク先をユーザーエージェントで変えたい場合、確認が簡単に行えます！
※固有のバグなど、場合によってデバイスの表示通りにならない事があります
開発者ツール
8.Web Developer: 多機能な開発者向けツール
https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja
Webページのソースコードやスタイルシートなどを確認できる拡張機能です。
ひとつの拡張機能に以下の内容など、かなり豊富な機能が備わっています！
- JavaScript・Cookie・CSS・画像表示をそれぞれ無効化切替え
- HTML・CSS・リンクなどのバリデーションチェック
- ページ内の情報や要素を表示
- ブロック・フレーム・テーブル・外部リンク箇所を枠で表示
Webサイト制作時の確認ツールとして、とても便利でおすすめです！
その他
9.TabCloud: タブをグループ管理して一括操作
https://chromewebstore.google.com/detail/tabcloud/npecfdijgoblfcgagoijgmgejmcpnhof?hl=ja
開いているタブをグループ分けして管理できる拡張機能です。
ルーチンで開くページの集まりや、プロジェクトの内容がまとまっているタブの集まりなど、グループにまとめておけば一気に開くことができます！
グループは保存できるので、一度タブを閉じても再度開くことが可能です。
※使用するにはGoogleアカウントにログインしている必要があります
10.Hide WordPress Admin Bar: WordPressツールバーの表示切替
https://chromewebstore.google.com/detail/hide-wordpress-admin-bar/danmihlgkcfibipepahkikifhocamdli?hl=ja
こちらはWordPressで制作を行っている方向けに便利な機能ですが、WordPress編集画面のツールバーの表示・非表示を切替できる拡張機能です。
ツールバーがあることでデザインが崩れることもあるので、より本番環境に近い状態でWordPressにログインしたままページを確認することが可能です！
最後に
今回は、デザイン業務に役立つGoogle拡張機能10個を紹介しました。
これらの拡張機能をうまく活用することで、作業効率を大幅に向上させることができます。
ぜひ、今日から試してみてくださいね！
illustration by Icons8
WEBデザイナー。2020年からは出版社のフロントエンジニア兼ディレクターとしてメディアの企画・運用改善に従事し事業成長に貢献。2023年に株式会社GLASS入社。
