どうも、ダイチです。
今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。
開発環境がしやくなる拡張機能がたくさんあるChromeですが、たくさんあってどれを選べばいいか分からないと悩んでる方もいるかと思います。
今回紹介するものは僕が実際に使用しているものの中から、自分的に便利だと感じたポイントを絞ってお伝えしているので参考になるのでは無いかと思います！
新しい情報が入り次第どんどん更新していってますので、定期的にチェックしていってもらえると嬉しいです！
chrome拡張機能とは
Chromeの拡張機能を一文で説明するなら、「Chromeの機能を増やしたり強化したりする専用の追加プログラム」と表現できるでしょう。プログラムの実体は、JavaScriptやHTML、CSSといったWebの技術によって記述されています。Chromeにインストールされた拡張機能は、その上で実行され、Chrome提供のAPI（アプリケーションプログラムインタフェース）を使いつつ、本来のChromeにはないさまざまな機能を提供します。
ITmedia アイティメディア 「Chrome拡張機能とは」 より
ということで、ソフトなどインストールせずにブラウザ上で便利な機能が利用できるのが拡張機能です。
こちらのchromeウェブストアから拡張機能を検索してインストールできます。
コーディング・Webデザインの制作時に使える拡張機能
CSS Peeper
CSSクラス名やフォント名、Webサイト内の配色、要素サイズなどが確認できる拡張機能です。
以前Twitterにて動画つきで紹介しています。
Webページ内のデザイン要素を分析するうえで必要な内容の多くをこれ一つでカバーできます。
UI的にも優れており、個人的にもかなりお気にな拡張機能です。
また、ページ内に使用されている画像を一覧で確認できるうえに、個別・一括それぞれの方法でローカルへダウンロードもできる機能もあります。
ColorPick Eyedropper
カラーコードの抽出に使用する拡張機能です。
ページ内のフォントや画像など、任意の箇所をピンポイントで指定してカラーコードを取得できます。
Page Ruler Redux
ページ内の要素をクリック、もしくはマウスホバーするだけでwidthやheightを取得できる拡張機能です。
また、タグ毎にクリックしながら要素を選択していくことも可能です。
ウェブページ全体をスクリーンショット – FireShot
Webページ内の一部、もしくはページ全体のキャプチャを撮影し、画像としてダウンロードできる拡張機能です。
僕はサイト模写なんかでコーディング練習する時とかに、全体のレイアウト構成を掴む時に使用していました。
Awesome Screenshot
撮影や画像取得機能自体はFireShotとほぼ同様ですが、こちらは画像のように撮影したキャプチャに線や文字で書き込みできる機能があります。
日本語対応してない点はネックですが、全体キャプチャ取得だったらAwesome Screenshotの方がいいかもしれません。
全体キャプチャを取得し、レイアウト構成やクラス名をデータ上に書き込むことで、即席のデザインカンプとするような使い方もできると思います。
Image Downloader
Webサイト内の画像を個別、一括でローカルに保存することができる拡張機能です。（CSS Peeperでも代用可）
画像ダウンロードに特化しているので、それだけが目的であれば手軽なのでオススメです。
WhatFont
起動させてページ内の文字をクリックするだけでfont-familyやフォントサイズなどが手軽にチェックできる拡張機能です。
こちらもCSS Peeperで代用できますが、とにかく軽いので扱いやすいです。
フォント情報の確認だけだったらWhatFontで十分でしょう。
UI Build Assistant
ワンクリックでページ内の要素にbackground-colorとoutlineがつけられる拡張機能です。
コーディング時にCSSが上手く効かない時などの対策として、background-colorをつけるなどは僕もやっていましたが、この機能を使えばいちいちCSSに記述しなくてもよくなりコーディングの効率化が図れます。
サイト模写する時なんかはこの機能でレイアウト構造を把握しつつ、Awesome Screenshotなどで撮影したキャプチャを見てclass名をつけていく、というやり方で効率化が図れると思います。
PixelParallel by htmlBurger
デザイン画像をサイト上に透過させて表示することができる拡張機能です。
実際にコーディングしたサイトに重ねることでズレをチェックするために使うもので、いわゆる「ピクセルパーフェクト」を実現させるためのツールです。
この拡張機能では、透過画像を白黒反転させて要素のずれを視認させやすくしたり、仮想のグリッドラインを引いて微妙なズレを認識させやすくできたりと、かゆいところに手が届く多機能ツールとなっています。
ちなみに、ピクセルパーフェクトのための拡張機能だと、こちらよりもPerfectPixel by WellDoneCode (pixel perfect)のほうが有名です。
上で紹介したような機能が不要で、シンプルに使いたい方はこちらでも良いかと思います。
コーディング後に使用したい拡張機能
Responsive Viewer
レスポンシブデザインのチェックをできる拡張機能で、一つの画面でPC・タブレット・SPサイズと一覧で表示状況を確認できます。
画面幅は自身で指定もできますが、用意されている端末サイズを選択することもできます。
複数デバイスの表示をまとめてスクロール確認することもでき、使い勝手もいい拡張機能です。
User-Agent Switcher for Chrome
コーディングの課題の一つであるクロスブラウザ対応状況を確認するための拡張機能です。
クリック一つで仮想ブラウザを切り替えて表示状況を確認することができます。
※コーディング時点でブラウザ対応しているかのチェックは、「Can I Use」でしておきましょう。
Clear Cache
1クリックでブラウザキャッシュの削除ができる拡張機能です。
「サーバーアップしてもCSSが反映されてない！？」なんて時はキャッシュが悪さしてる事が多いです。
いちいちブラウザ設定から削除するのメンドウだな、と感じていたのでこれで楽になります。キャッシュだけでなく、設定からCookieや閲覧履歴などもワンクリックの削除対象にできます。
こちらも、コーディング中にも使います。
HTMLチェッカー
ワンクリックでサイト内の閉じタグ漏れがないかチェックしてくれるツールです。
エディタから目視しても見落としは起こりますので、サイト納品をする場合などは必須で使用した方がいいです。
漏れがある場合は下写真のように行数とタグまで教えてくれます。
Webサイト分析に便利な拡張機能
Quick source viewer
ワンクリックでページ内のソースを確認できる拡張機能です。
ブラウザのページソース表示機能にCSSとJavaScriptが加わったようなもので、ソース確認するだけならデベロッパーツールよりも見やすいかと思います！
Window Resizer
端末毎に合わせて、Webサイトのレイアウト表示を確認できる拡張機能です。
端末サイズを選択するとブラウザのサイズがパッと切り替わるだけはあるんですが、非常にシンプルでわかりやすいです。
Wappalyzer
ワンクリックで画像のようにサーバーやCMS、プログラミング言語やライブラリなどの情報が一覧で表示される拡張機能です。
サイトによって表示される情報にばらつきがあります。
気になるWebアプリやサービスのページがどのような構成になっているかを調べることができるので、エンジニア志望の方が何を学ぶべきか知るための指標にも使えるかと思います。
Web制作関係なく個人的にオススメな拡張機能
The QR Code Extension
ワンクリックでWebページのQRコードが生成できる拡張機能です。
PCで見ているページをスマホからも見たいという時、これでさっとかざせば一発です。あとはクライアントにスマホ表示を確認してもらう時、これでさっと表示させて読み取ってもらうやり方なんかもスムーズですね。
「The QR Code Extension」をchromeに追加
→現在Chromeのデフォルト機能でQRコードが生成できるようになったので、こちらの拡張機能は不要になりそうです！
アドレスバーをクリックすると画像のようなアイコンが表示されるので、そこをクリックするとQRコードが生成されます！
Black Menu for Google
GmailやGoogle翻訳などの各種サービスをワンクリックでアクセスできるように集約された拡張機能です。
Googleサービスを複数使用している僕なんかはこれに出会ってかなり効率化が測れるようになりました。
UI的にも分かりやすく、とりあえず入れておいて損はないと思います。
僕は英語が壊滅的にダメなので、ここからGoogle翻訳いってcssのclass名を決めたりなんかもよくします。
ato-ichinen
ワンクリックでGoogle検索結果を1年以内のものに限定させることができる拡張機能です。
機能のActive、非Activeはアイコンをクリックするだけで切り替えられます。
Web関連の情報やエンジニアの技術は日々進化していく訳なので、効率的に最新の情報をキャッチしやすくなるこの機能はオススメできます。
※ブログカードだと文字化けするためテキストリンクにしています。
SearchPreview
検索結果画面にサイトのキャプチャを表示させることができる拡張機能です。
直感的に見たいサイトがどうかを判断するには役立ちますし、検索結果に同じサイトが複数並んでる場合に重複してクリックしてしまうことも防ぎやすくなるので、ブラウジングの効率化を図れます。
OneTab
複数開いてるタブを一つのタブにまとめることができる拡張機能です。使い方はアイコンをワンクリックするだけです。
まとめたタブは元に戻す（復元）、削除できるのはもちろん、QRコードにしてリンク共有できたり、URLとサイトタイトルを書き出すこともできます。
これのいいところは大量に開いたページを一覧管理できることで検索が効率的になることですが、それに加てメモリ消費量を軽減できるのでブラウザが軽くなります。
僕は調べ物でググった情報をとりあえず開いてタブにしておいて、あとで消してしまう前にこれで一旦まとめて別のメモに残しておくWebクリップような使いかたをしています。
※ブログカードだと文字化けするためテキストリンクにしています。
Create Link
こちらは表示しているサイトのタイトルとURLをワンクリックでコピーできる機能です。
これの便利なところはHTMLやマークダウンの形式でのコピーもできるため、ブログでの記事紹介リンクやWebページ制作時に捗ります。
いちいちサイタイトルをチェックして、URLとそれぞれコピーする必要が無くなりますね！
まとめ
僕が現在使用しているものから紹介してみましたがいかがでしたでしょうか？
メインブラウザをchromeにしている方も多いと思いますので、まだ拡張機能を使ったことが無い方もまずはオススメされたものから試してみるだけで作業が捗るようになるかと思います。
また、この記事を見てる方の中にはWeb制作初学者の方もいるかと思いますが、エディタの環境構築は済んでいますか？僕がオススメするVSCodeの拡張機能をまとめた記事もあるので良かったらこちらもご覧ください！
また、サイト模写やデザインカンプコーディングに行き詰まっている方は一度基礎から体系的におさらいすることをお勧めしています。
あとは動画教材のUdemyもオススメが沢山あるので、こちらの記事でまとめています。
それでは今回はこのへんで！
コメント