ホームページ制作に役立つ、おすすめのGoogle Chrome拡張機能
投稿日：2020.02.26.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
執筆記事：記事一覧ページ
GoogleのブラウザGoogle Chromeには、ホームページ制作の現場で大変役に立つ拡張機能が沢山用意されています。
今回は実際に使っている拡張機能を幾つか紹介します。
Full Page Screen Capture
「Full Page Screen Capture」はWEBサイトの全体のスクリーンショットをpngやjpgの画像形式やPDFで保存することができる拡張機能です。
特にスクロールが必要な縦長のサイトのスクリーンショットをが必要な場合に便利です。
Lighthouse
「Lighthouse」は今見ているWEBサイトのウェブサイトのパフォーマンスを測定してくれます。特に検査項目のSEO項目は「検索エンジン最適化（SEO）スターター ガイド」に基づいてチェックをしているので、重宝しています。
モバイルフレンドリーテストと併用して制作したホームページをチェックするといいかもしれません。
・実際に利用した時の記事
■Full Page Screen Capture
Wappalyzer
WEBサイトで使われているCMS、Javascrip、カートシステム、アクセス解析ツールなどを調べることができるGoogle Chrome拡張機能です。
打ち合わせなどの時に事前に対象となるWEBサイトの知ら調べをする時に便利です。
■Lighthouse
ColorPick Eyedropper
画面に表示しているWEBサイトの色コードを調べることができます。
ヘッダーやロゴ等、参考にしたいサイトの色コードを調べる時に便利です。
使い方も簡単で調べたい色の個所にマウスを合わせると色コードが表示されます。
■ColorPick Eyedropper
まとめ
今回紹介したの拡張機能は、ほんの一部でGoogle Chromeの拡張機能はまだまだ沢山あります。
上手に拡張機能を利用することで効率のいい作業をして、クオリティーの高いホームページ制作を目指しましょう。
一つ注意事項として、たくさん拡張機能を使うとメモリを沢山消費するので、Google Chromeが重くなってしまいます。
自分必要な拡張機能を見極めて、不必要な拡張機能はオフにするか削除することを忘れないようして下さい。
おすすめ記事
大阪のホームページ制作会社TREVOでは、最短2日で仮サイトを公開できるスピード対応や、SEO対策に強いオリジナルデザインの制作サービスを提供しています。
関連の記事
-
youtubeのデザインに特化したGoogle Designチャンネルが面白い
TREVOスタッフ
-
ページの表示速度を計測できるサービス
- 板浪雅樹
-
- 板浪雅樹
-
- 板浪雅樹
-
- 板浪雅樹
-
- 板浪雅樹
