【画像付きで解説】web制作に役立つChrome 拡張機能おすすめ5選
目次
今回は主にweb制作に取り組んでいる方向けに、普段私がよく使用しているChrome 拡張機能を紹介していきます。
もちろんweb制作を行う方以外にもおすすめできる拡張機能も紹介していますので、是非ご覧ください。
そもそもChrome 拡張機能とは何か？
Chrome拡張機能とは、Chromeに追加して様々なことが追加機能として利用できるものです。必要な機能のみをブラウザに追加して、Chromeをカスタマイズして効率的、生産性向上に使うことができます。
おすすめのChrome 拡張機能5選
Alt & Meta viewer
まず最初に紹介したいのが、この拡張機能「Alt & Meta viewer」です。
Alt & Meta viewer は、ページ内の設置されている画像のalt属性や画像のサイズ、meta情報を確認することができ、Web開発者やデザイナーにとって非常に便利なChrome拡張機能です。
alt属性やmeta情報などはソースコードを直接確認すれば見ることができますが、htmlなどの知識がないと、どこを見たらいいのか分からないといったデメリットがあり、都度ソースコードを確認する手間も生じます。
そういった重要なWebページ情報を手軽に視覚的に確認できるのが、この拡張機能を使うメリットになります。
Alt & Meta viewerの使い方
①Alt & Meta viewerをインストール
②chromの拡張機能を開いてAlt & Meta viewerをクリック
③画像のAlt情報を見たい場合は、「画像のAlt表示」をクリック、meta情報を見たい場合は「Title Meta表示」をクリックしてください。
今回は画像のAltを見てみるので、「画像のAlt表示」をクリックします。
③Altを見たい画像にカーソルを乗せると、その画像のAltやサイズを確認できます。
alt属性やmeta情報はSEOにも影響が大きい要素なので、拡張機能などで確認するようにしましょう。
Copy All Urls
続いて紹介するのが、「Copy All Urls」です。
皆さんは、大量のURLを1つ1つクリックしたり、コピーペーストしてブラウザで開いたりしたことはありませんか？
そんな時に便利なのが、この拡張機能「Copy All Urls」。
この拡張機能を使うと、複数の羅列されたURLをまとめてブラウザで開くことができたり、逆にブラウザで開いている複数のページリンクを全て一括コピーして、URLとしてテキストに貼り付けたりできる機能があります。
Copy All Urlsの使い方
ブラウザで開いているリンクを一括コピーする手順
①Copy All Urlsをインストール
②chromの拡張機能を開いてCopy All Urlsをクリック
③Copy をクリック
③メモ帳などで貼り付けをすると、添付のようにブラウザで開かれているリンクが全てコピーペーストされます。
URLの一覧を一括でブラウザで開く手順
①URLの一覧をコピー
②ブラウザでchromの拡張機能を開いてCopy All Urlsをクリック
③Paste をクリック
④ブラウザでコピーしたリンクが一括で開かれます。
クライアントや社内で、URLが複数送られてきた際などに使ってみてください。
Vis Bug
続いて紹介するのが、「Vis Bug」です。
クライアントや社内で、webサイトを画面共有しながら意見交換などをする際、ここの文字を赤くしてみてはどうか、などの意見が出た際に、すぐにその場で画面上で実装できる拡張機能です。
Vis Bugの使い方
①Vis Bugをインストール
②chromの拡張機能を開いてVis Bugをクリック
③変更したい箇所をクリック（今回はボタンの色を変更してみます）
④左側のエリアにある部分が編集できる項目になります。
⑤今回はボタンの色を赤色に変更するので、右下のカラーを選択して、赤色にすれば変更完了です。
他にもフォントの種類や余白、影をつけるなど、Vis Bugの拡張機能でさまざまなcssの変更を画面上で操作することができるので、是非打ち合わせの時などに使ってみてください。
FireShot
続いて紹介するのが、「FireShot」です。
この拡張機能はサイトページのスクリーンショットに関する拡張機能です。
ページ全体をスクリーンショットとして保存したい時などに重宝します。
他にもページ全体をスクリーンショットできる拡張機能はありますが、このFireShotは使い方が分かりやすく、初めて使う方にも分かりやすい仕様になっています。
FireShotの使い方
①FireShotをインストール
②chromの拡張機能を開いてFireShotをクリック
（ウェブページ全体をスクリ‥ と記載がありますので、それがFireShotです）
③該当するスクリーンショット方法を選択（今回はページ全体をクリーンショットしてみます）
④スクリーンショットが完了後、右側のアクションで希望する保存方法を選択したら保存完了です。
css peeper
最後に紹介するのが、「css peeper」です。
css peeperはサイト内の各要素に当たっているcssを視覚的に確認できる拡張機能です。
フォントの大きさや種類、色などをコードが分からない人でも理解できるような仕様になっています。
css peeperの使い方
①css peeperをインストール
②chromの拡張機能を開いてcss peeperをクリック
③cssを見たい要素をクリックすると、右側にクリックした要素のcss情報が視覚的に分かるようになっています。
検証ツールなどでhtml、cssのソースコードを見るのが難しい方でも、この拡張機能を使うことで簡単に各要素のcss情報を確認できます。
Chrome 拡張機能の注意点
非常に便利なChromeの拡張機能ですが、利用する際にいくつか注意点があります。
- 拡張機能の信頼性が不十分で、セキュリティに問題がある可能性がある
- メモリが圧迫され、ブラウザの動作が重くなる恐れがある
それぞれの解説と対応策を解説します。
セキュリティに問題がある可能性がある
拡張機能は特定の機能を追加するためのプログラムのため、ウイルス感染をする可能性も少なからず発生します。
特にアップデートや改良がされていない古い拡張機能はサポートが終了している可能性もあり、よりセキュリティに脆弱性を抱えている可能性があります。
拡張機能を追加する際には、ある程度調べてから問題のないと判断したものだけ機能追加することをおすすめします。
メモリが圧迫される
仕事を効率化する上では欠かせない拡張機能ですが、不要なものを削除などせずにいると、どんどんメモリを圧迫してブラウザが重くなる原因になります。
ブラウザが重くのは、タブの開きすぎやキャッシュなど様々な原因が考えられますが、拡張機能を入れすぎている場合は、不要なものは削除することをおすすめします。
不要なChrome 拡張機能の削除方法
①ブラウザで拡張機能の「拡張機能を管理」をクリック
②ブラウザに追加している拡張機能の一覧が見れるので、不要な拡張機能はここで削除することができます。
まとめ
今回はおすすめのchrome拡張機能を5選紹介しました。
自分にとって最適な使いやすい拡張機能を追加することで、普段の仕事のパフォーマンスが向上するため、積極的に使ってみることをおすすめします。
今後も便利な拡張機能がありましたら、記事にしたいと思います。
