【初心者】Chrome拡張機能おすすめ10選！_サクサクサイト制作をしよう！

模写コーディングをするのに時間がかかる！
効率よくWeb制作ができる機能がないのかな？
Web制作に時間がかかるのは自分のスキルが足りてないからかな？

などの悩みがある人もいると思います。




やる気があっても、練習できる環境がないために、中々スキルを上達させることができないということはあると思います。



僕も、サイト制作の練習がしたくても、正確な寸法を測ることができずに困っていた時期があります。




今回は、模写コーディングを行う前に必要となるGoogle Chromeのおすすめの拡張機能を紹介します。




拡張機能という言葉を初めて聞いた方もいるかもしれませんが、これらの機能を使うことにより劇的に作業効率が向上します。



知らずに使っている方もいるかもしれませんが、模写コーディングを行う前に再度確認しておきましょう。

おすすめのChrome拡張機能10選

おすすめのChrome拡張機能１：Awesome Screenshot

≫Awesome Screenshot

Webページ全体のキャプチャを撮影して、画像としてダウンロードできる拡張機能となっています。


模写コーディングで、全体の構成を把握する際に役に立ちます。




機能としては、GoFullPage-Full Page Screen Captureとほぼ同様ですが、こちらは画像のように撮影したキャプチャに線や文字で書き込めるようになっています。




一つ注意点としては、日本語対応をしていないことです。

おすすめのChrome拡張機能２：Image Downloader

≫Image Downloader



Webサイト内の画像を個別、一括問わずに瞬時にローカルに保存することができる機能です。




登録や別途ほかのアプリケーションをダウンロードする必要もなく手軽かつ高速になっています。



この後紹介するCSS Peeperと機能的には似ていますが、画像のダウンロードに特化しているので、それが目的の場合は最適な拡張機能となっています。

おすすめのChrome拡張機能３：CSSViewer

≫CSSViewer


CSSViewerはWeb上でCSSを手軽に確認することができる機能となっています。




CSSの確認は標準で搭載されているディベロッパーツールでも確認することができますが、CSSViewerは動作が非常に軽く、マウスオーバーで直感的にわかるのも魅力となっています。




ディベロッパーツールよりも効率的にCSSを確認したいときにおすすめの拡張機能となっています。

おすすめのChrome拡張機能４：ColorPick Eyedropper

≫ColorPick Eyedropper


ColorPick Eyedropperとは、Webページ上で使われている色が瞬時に正確にわかる拡張機能となっています。



ページ内の画像やフォントなど、任意の場所をピンポイントで指定してカラーコードを取得することができます。



模写コーディングなどで使われている色を正確に確認したいときに重宝します。

おすすめのChome拡張機能５：CSS Peeper

≫CSS Peeper


CSS Peeperは、サイト上のあらゆるデザインがわかるようになる拡張機能となっています。




画像のダウンロードだけでなく、配色やフォント、余白、クラス要素などがCSS Peeperだけで全て確認することができるようになっています。




どの拡張機能を追加しようか迷うと思いますが、Webサイトをコーディングされる場合はとりあえずCSS Peeperを追加すれば間違いないでしょう。

おすすめのChrome拡張機能６：Designer Tools

≫Designer Tools


サイト上で表示されている画像や任意の位置のサイズを正確に測ることができる拡張機能となっています。


ページ内の要素をクリック、マウスオーバーするだけでwidthやheightを計測することができます。

Designer Toolsより有名な拡張機能として、Page ruler reduxというものがありましたが、現在は使用不可となっています。

おすすめのChrome拡張機能７：GoFullPage-Full Page Screen Capture

≫Full Page Screen Capture


Webページ全体を撮影し、画像としてダウンロードすることができる拡張機能になります。



ポイントとしてはWebページ全体を撮影することができるため、プラウザに表示されていない部分もまとめて一枚にすることができます。



模写コーディング時に画像がバラバラですと作業がやりにくいのでおすすめとなっています。

おすすめのChrome拡張機能８：PerfectPixel by WellDoneCode

≫PerfectPixel by WellDoneCode


PerfectPixelはプラウザ上に任意の画像を配置することができるようになる拡張機能です。




ポイントとしては配置した画像を固定や透視することができるため、サイト制作時にデザインカンプを重ねることでピクセル単位の微調整が可能になります。




難しい操作がなく、直感的に使用することができるのでおすすめです。

おすすめのChrome拡張機能９：Clear Cache

≫Clear Cache


１クリックでブラウザのキャッシュを削除することができる便利な拡張機能です。




「サーバーにアップしたのになぜかCSSが反映されない…」というときはキャッシュを疑ってみましょう。



古いキャッシュが残っているせいで、Webページの表示が崩れるということはよくあります。




Clear Cacheはキャッシュの削除だけでなく、Cookieや閲覧履歴まで削除することができるようになっています。



初期設定としては１時間以内に作成されたキャッシュのみを削除するようになっているので、自分好みに調整することで便利になるでしょう。

おすすめのChrome拡張機能10：Responsive Viewer

≫Responsive Viewer

レスポンシブデザインを簡単にチェックすることができる拡張機能で、一つの画面でPC、タブレット、SPサイズを一覧で表示できるようになります。




画面幅はもともと用意されている代表的な端末サイズを使用することや、自分で任意のサイズに切り替えて使うことができるようになっています。




複数デバイスのレスポンシブデザインを同時にスクロールして確認することができるので、サイト制作などのおいて非常に便利になっています。

まとめ

今回はWebサイト制作で代表的なGoogle Chromeの拡張機能１０個を紹介してきました。




拡張機能には用途に応じて様々な拡張機能がありますので、作業に応じて自分好みにカスタマイズしてみてください。



スキルを向上させることはサイト制作において非常に重要ですが、便利な機能をどれだけ使いこなせるかも重要になってきます。




ぜひ、自分に合った拡張機能を使いこなし、サイト制作に役立ててください。