参考にしたいウェブページのスタイルを簡単に分析でき、色、フォント、サイズなどを直感的＆視覚的に確認できます。ページ全体の色が一覧で表示されたり画像も一括で入手できるので、開発者やデザイナーだけでなく、サイトを模写してみたい人にもおすすめです。

CSS Peeper起動時、左上にページ全体の情報を表示

要素を選択した状態

▼この拡張機能はこちらから
CSS Peeper – Chrome ウェブストア

ウェブデザインに役立つカラーピッカー。ピッカー機能なら上で紹介した「CSS Peeper」にもあるんですが、ショートカットキー「Cmd+Opt+（いずれかの半角アルファベット）」が使えるのが地味に便利なのです。カーソルを目当てのカラー上に持っていくとカラー情報が表示され、そのままクリックするとカラー情報がコピーされます。さらにグラデーションやパレット機能も備えているところも嬉しい。

▼この拡張機能はこちらから
ColorZilla – Chrome ウェブストア

ウェブサイトのレスポンシブデザインをテストするためのツール。さまざまなデバイスサイズでの表示をシミュレートし、デザインの調整が可能です。新しい機種でシミュレートするには月々料金がかかってきますが、欲張らなければ問題なく使えます。右上の✖️ボタンをクリックで元に戻ります。

▼この拡張機能はこちらから
モバイルシミュレーター – レスポンシブテストツール – Chrome ウェブストア

ウェブページ全体を簡単にキャプチャできる拡張機能。ボタン一つでスクリーンショットを取得し、PNGやPDF形式で保存可能です。長いページやスクロールが必要なサイトでも、手間なく全体を記録できる便利なツールです。※あまりにも縦に長いとこんな感じに28800pxごとに分割されます。

▼この拡張機能はこちらから
GoFullPage – Full Page Screen Capture – Chrome ウェブストア

開いているタブのURLをタイトルも含めて一括コピーできる拡張機能。複数のリンクをまとめて取得できるため、リサーチや共有が簡単になります。時間を節約できる便利なツールです。このブログを書く時も活用しました。リストは12種類のスタイルから選べます。画像のような形とか、下に貼っているリンクの形とか。

▼この拡張機能はこちらから
TabCopy – Chrome ウェブストア

複数のURLをまとめてタブで開けるツール。上で紹介したTabCopyとは真逆のような機能です。URLアドレスだけを拾ってくれるので、リストになっていない、テキスト混じりの状態でコピーしても大丈夫です。

▼この拡張機能はこちらから
Pasty – Chrome ウェブストア

ウェブページや選択したテキストを瞬時に翻訳できる拡張機能。多言語対応で、海外の情報を簡単に理解することが可能です。翻訳したいテキストを選択した状態で右クリックメニューで「Google翻訳」を選ぶだけ。高性能と評判のDeep Lと併用もいいですね。個人的にはタイ語対応なのがとてもありがたいです（たまに誤訳あるある）。

▼この拡張機能はこちらから
Google 翻訳 – Chrome ウェブストア

簡単にQRコードを生成できるツール。URLやテキストを入力するだけで、すぐにQRコードを作成し、共有可能です。PCで開いてるページをスマホでも見たい時、右クリックで表示されたQRをスマホのカメラで読み取るだけなので、手軽で便利！これで生成したsvgファイルがadobeソフトでなぜか開けないのが惜しい！

▼この拡張機能はこちらから
QR Code Generator – Chrome ウェブストア

ドメイン毎にタブをグループ化することで、タブを簡単に管理・整理できるツールです。視覚的にタブを整理できるため、作業がスムーズになります。好みは別れますが、Settingから「Filter tabs by subdomain（ドメインでなくサブドメインで分類する）」にチェックを入れると、「Googleの検索結果とGoogleフォントのページがまとめてグループ化されてしまった！」みたいなことが避けられます。ドメイン名なので日本語でグループ分けされないですが、そこまで望むのは贅沢というもの。

▼この拡張機能はこちらから
Mark tab manager – Chrome ウェブストア

One Tabは、開いているタブを一つのリストにまとめて整理するChrome拡張機能です。タブが多すぎてブラウジングが煩雑になるのを防ぎ、メモリ使用量を大幅に削減します。後で必要なタブを簡単に復元できます。しばらく設定しそびれていたのですが、この機会に再度使い始めました。上の「Mark tab manager」と併用すると、グループ毎にまとめてくれるのでさらにわかりやすくていい感じです。

▼この拡張機能はこちらから

どちらもAIサポートを提供する拡張機能です。質問に答えたり、情報を提供したり、翻訳や要約などさまざまなタスクをサポートします。作業効率を向上させるための頼もしいアシスタントです。どちらも似たようなUIと機能を持っているため、まとめて紹介しますね。試しに今回の紹介文のベースをMonicaに書いてもらいました。この項目に限っては自己紹介文ということですね。画像は前回書いた記事「舞台「Medicine メディスン」感想いう名の…？」をSiderに要約してもらったものです。

大まかな共通点は

• メインのAIツールが同じ
• 提供されている機能が大体同じ
• ショートカットで起動 / 起動アイコンを右下に常駐可能
• 右側にアシスタントウィンドゥが表示される
• １日の使用回数に上限があり、フル活用したいなら要課金

片方は一部機能が有料だったり、有料プランに差異があったりはするものの、どちらのユーザーからの評価もとても高いです。片方が上限に達してしまったので次はこっち…といった近い方や、有料プランを想定して使い比べるのもいいのではないでしょうか。
※使用中ブラウザが重たく感じることがあったら、どちらかに絞った方がいいかもしれません。

▼この拡張機能はこちらから
Monica – あなたの ChatGPT4 人工知能アシスタント – Chrome ウェブストア
Sider: ChatGPT サイドバー + GPT-4o, Claude 3.5, Gemini 1.5 & AIツール – Chrome ウェブストア

クリエイティブな素材を整理するためのアプリ『Eagle』へウェブ上の画像やリンクを簡単に保存し、管理できるツールです。有料アプリ『Eagle』のインストールが大前提のため、番外編としました。参考にしたいデザインやTIPS、プロジェクトのインスピレーションを効率的に簡単に集めることが可能です。
『Eagle』アプリについてはこちらをご覧ください。

Eagleの任意のフォルダに目当ての画像を保存するところ

Eagleアプリではこんな感じに整理されます

▼この拡張機能はこちらから
Eagle for Chrome – Chrome ウェブストア

Google Chrome 拡張機能をたくさんインストールすると、PCでアプリをたくさん使いすぎて動きが重たくなるように、ブラウザ本体の動作がもっさりしてしまうことがあります。快適さが感じられなくなったら、インストール済のツールを見直してみてください。
また、Google Chrome拡張機能も玉石混合。中には、よからぬ動作をするもの（例えば、不審な認証を求めてくるものなど）、バグを引き起こすものなどもあります。インストール前には、評価数の少ないものは避ける、レビュー内容をチェックするなどの確認するのをおすすめします。

削除したい時は、アドレスバーの右側にあるパズルアイコンから「拡張機能を管理」を開くとインストールした拡張機能一覧が表示されるので、その中から対象の機能を選んで〔削除〕をクリックでおしまいです。

ここで紹介したもの以外にも、便利なものや面白いものが幅広くあります。
自分に合った拡張機能を見つけてWeb環境をカスタマイズしてみてはいかがでしょうか。
Chrome ウェブストアはこちら