web制作ではいろいろなツールを使いこなして作業することで時間短縮や正確な作業が行えるようになります。この記事ではおすすめのChrome拡張機能について紹介していきます！
という方に向けた記事です。
目次
Chrome拡張機能とは
Chrome拡張機能とはGoogle Chromeブラウザに追加機能を与えてくれるものです。
Chrome拡張機能の使い方
使い方を見ていきましょう。
試しに「The QR Code Extension」という、webサイトのQRコードを作成してくれる拡張機能を追加してみます。
まずは下記ページを開きます。
QR Code Extension
右上の「Chromeに追加」ボタンをクリックします。
これだけで追加完了です（拡張機能によってはもう少し設定が必要なものもあります。）
使い方は右上に「The QR Code Extension」のアイコンマークが表示されるのでクリックするだけです。
今開いているページのQRコードが表示されるので
これをスマホのQRコードで読み取ればこのページをスマホですぐに開けるというわけです。
オススメChrome拡張機能5選
ドメインを変更して読み込む 【Domain Switcher】
今表示しているサイトのドメインを変更して読み込める
Domain Switcher
web制作をしているとテスト環境と本番環境でドメインが違うことがあります。
テスト環境と本番環境を切り替えて表示したい場合、
いちいちURLを変更するのは結構めんどくさいです。
「Domain Switcher」を使うと簡単にドメインを変更して表示することができます。
webサイトのスクリーンショットを撮る【Full Page Screen Capture】
web制作ではページ全体のスクリーンショットが必要になることがよくあります。
そんなときにFull Page Screen Captureを使うと
ワンクリックでスクリーンショットを撮ることができます。
webサイトを翻訳する【Google 翻訳】
webサイト全体を翻訳できます。こちらは使っている人もかなり多いと思います。
プログラミング学習をしていると日本語サイトにいい情報がなく、
海外のサイトから情報を得たいという場面があるのでよく使用します。
カラーコードを調べる【ColorPick Eyedropper】
webサイトで使われている色のカラーコードを調べることができます。
CSSを書いている時などによく使います。
デザインカンプとwebサイトの比較【Perfect Pixel】
デザインカンプとwebサイトを重ねて比較できる
Perfect Pixel
デザインカンプをサイトのデザインのズレを確認したいときに便利です。
以前、別の記事で紹介したので詳しい使い方は読んでみてください。