今回は「WEB制作で便利なChrome拡張機能まとめ」について紹介します。
便利なChrome拡張機能を使いこなすことで、制作を効率的に進めることが出来るので、是非気になる拡張機能があれば導入してみてください。
WEB制作で便利なChrome拡張機能まとめ【16選】
数が多いので、実務で使いそうな拡張機能だけ導入してもらえたらなと思います。
1、Google翻訳
Google翻訳は、選択した箇所をリアルタイムで翻訳してくれるChrome拡張機能です。
特にエンジニアだとドキュメントやライブラリのような英訳サイトを見ることが多いので、その際にかなり重宝しています。
わざわざ翻訳サイトにテキストをコピペする必要が無くなるので、かなり便利です。
2、ato-ichinen
ato-ichinenは、Googleの検索結果を1年以内に限定してくれるChrome拡張機能です。
IT業界は技術の移り変わりが激しいので、出来るだけ新しい記事を参照したい時に使えます。
他にも1時間、１週間、１ヶ月や期間を自由に指定して検索することが出来ます。
3、Copy All Urls
Copy All Urlsは、現在Chromeで開いているタブのURLを一括でコピーすることが出来るChrome拡張機能です。
いちいちタブごとにURLをコピペする必要がなくなるので、かなり時短になります。
参考記事を検索してまとめてコピペしたい時に便利ですね。
4、WhatFont
WhatFontは、Chromeで開かれているページに使われているフォントをマウスクリック１つで調べることが出来るChrome拡張機能です。
気になったWEBサイトのフォントを調べたいと思った時に便利です。
フォント情報の他にも、フォントサイズや色、濃さも合わせて調べることが出来ますよ。
5、The QR Extension
The QR Extensionは、PCのChromeで開いているWEBサイトをスマホの実機でも確認することが出来るChrome拡張機能です。
拡張機能のアイコンをクリックし、出てきたQRコードをスマホで読み取ったら、簡単にPCでみているWEBサイトをスマホでも閲覧することが出来ます。
こちらはコーディングのレスポンシブ化が完了した時に、スマホの実機でちゃんと表示されているのかを確認する際によく使います。
6、Alt & Meta viewer
Alt & Meta viewerは、現在見ているWEBサイトのaltタグやタイトル。メタ情報を簡単に調べることが出来るChrome拡張機能です。
WEBサイトのコーディングが終わり、納品前にちゃんとaltタグが設定されているのかチェックする際によく使います。
アクセシビリティ的にも、altタグの抜け漏れはチェックしておきたいところですね。
7、CSSpepper
CSSpepperは、WEBサイトで指定されているフォントや色、余白などの値を簡単に取得することが出来るChrome拡張機能です。
気になるWEBサイトの値を取得したい場合に便利ですね。
8、Page Ruler Redux
Page Ruler Reduxは、WEBサイトに表示されている要素の幅や高さを調べることが出来るChrome拡張機能です。
気になる要素の数値を調べたい時に便利ですね。
9、Responsive Viewer
Responsive Viewerは、スマホ・タブレット・PCのそれぞれの端末で表示を確認することが出来るChrome拡張機能です。
様々なブラウザで検証でき、且つ同時に閲覧することもできます。
納品前の表示チェックに使えそうですね。
10、HTMLエラーチェッカー
HTMLエラーチェッカーは、HTMLの閉じタグや記述ミスをチェックしてくれるChrome拡張機能です。
HTMLチェックをしたい方は是非こちらを導入してみてください。
11、Window Resizer
Window Resizerは、ブラウザ幅を自由に変更することが出来るChrome拡張機能です。
様々なブラウザ幅でWEBサイトの表示を確認したい時に便利です。
12、Create Link
Create Linkは、リンク付きのテキストをコピペ出来るChrome拡張機能です。
ブログでリンク付きのテキストを貼り付けたい時に便利ですね。
13、WhatRuns
WhatRunsは、WEBサイトで使われている技術を調べることが出来るChrome拡張機能です。
他社のWEBサイトでどんな技術が導入されているのか調べたい時に便利です。
14、Web Maker
Web Makerは、簡易的にコードをメモ書きして表示することが出来るChrome拡張機能です。
試しにコードをメモしておきたい場合に使えそうですね。
15、PerfectPixel by WellDoneCode (pixel perfect)
PerfectPixel by WellDoneCode(pixel perfect)は、ピクセルパーフェクトを実現する際に便利なChrome拡張機能です。
納品前にピクセルパーフェクトにコードを近づける際に使用します。
16、Check My Links
Check My Linksは、WEBサイトのリンク切れを簡単にチェックしてくれる便利なChrome拡張機能です。
リンク切れをチェックしたい時に便利ですね。
まとめ
以上が「WEB制作で便利なChrome拡張機能まとめ」でした。
Chrome拡張機能を導入して、作業効率を上げていきましょう。
