プログラミング

web制作におすすめの拡張機能14選【現役エンジニアが語る】

web制作におすすめの拡張機能14選!

こんにちは、現在フリーランスのweb制作者として2年ほど活動しているしょーごと申します。

皆さん、Chromeの拡張機能は何を使われてますでしょうか?

ありさちゃん
ありさちゃん
いくつか入れてますが、ごっちゃになって使ってないのばかり…
ゆうすけくん
ゆうすけくん
拡張…機能?なにそれ?

な方まで、幅広くお役に立てるかと思います。

また私自身この二年間、様々な拡張機能を試して最終的に今回紹介する拡張機能に落ち着きましたので、

皆さんは最初から、今回紹介する最適化されたものをお使いいただければと思います笑

しょーご
しょーご
作業快適になること間違いなしです!

この記事で学べること

web制作におすすめの拡張機能を導入できる

そもそもChromeの拡張機能って何?

拡張機能(アドオン)の起源はFirefoxなのですが、簡単に言えば「ブラウザの機能を拡張するもの」です。

とりあえず導入するだけで、様々な便利なことができます。実際に設定する必要すらほとんどありません。入れるだけです。

拡張機能はChrome ウェブストアよりダウンロードする

web制作におすすめChrome拡張機能

拡張機能は以下のURLより検索してダウンロードしていってください。

https://chrome.google.com/webstore/category/extensions?hl=ja&

おすすめ拡張機能1 GoFullPage – Full Page Screen Capture

web制作におすすめChrome拡張機能

開いているwebページの全体をスクロールしてpng形式で取得します。これは縦長なLPなどで特によく使います。

サイトを画像として保存して使いたい場合は、これを使います。

png形式なので圧縮必須です

おすすめの拡張機能2 ato-ichinen

web制作におすすめChrome拡張機能

検索結果を一年以内の記事に絞ります。

検索結果が古いとweb業界では話にならなかったりするので、最新の情報のみ欲しい場合に重宝します。

おすすめの拡張機能3 Image Downloader

web制作におすすめChrome拡張機能

サイトで使われている画像を取得ダウンロードします。

おすすめの拡張機能4 ColorPick Eyedropper

web制作におすすめChrome拡張機能

サイトの色を調べられます

「この色なんだろう?」とわざわざ検証ツール開くのはめんどくさいので、ColorPick Eyedropperで調べちゃいます。

おすすめの拡張機能5 WhatRuns

web制作におすすめChrome拡張機能

サイトに使われているweb技術を調べます。

エンジニア

このサイトなんの言語使ってるんだろう

というのがわかります。ほぼ毎日使っています。

なお、精度はぶっちゃけ微妙です笑

おすすめの拡張機能6 WPSNIFFER – WordPress Themes Sniffer

web制作におすすめChrome拡張機能

WordPressの使用テーマを丸裸にします。

ただ理由は不明ですが、取得できないサイトも多いです。

おすすめの拡張機能7 Wappalyzer

web制作におすすめChrome拡張機能

サイトに使われているweb技術を丸裸にする拡張機能です。

最強の拡張機能で、特にwebサービスに使用して眺めたりすると面白いです。大好き。

前述のWhatRunsの精度がいまいちなので、こちらと併用で使っています。

しょーご
しょーご
ちなみに僕は見るサイト全部にこのWappalyzerかけて使用技術チェックしてます

おすすめの拡張機能8 Keyframes

web制作におすすめChrome拡張機能

CSSアニメーションのKeyframeを検証することができます。

CSSアニメーションは直感的には分かりづらいので、ブラウザで実際に動かしてみると、とても実装しやすくなります。

おすすめの拡張機能9 JavaScript Errors Notifier

web制作におすすめChrome拡張機能

webサイトでのJavaScriptのエラーを検知して、サイトの右下に表示させます。

実際はコンソールのエラーを表示しているようなので、JavaScript以外のエラーも検知されます。

おすすめの拡張機能10 Google Analytics オプトアウト アドオン

web制作におすすめChrome拡張機能

Google Analyticsと連携して、ブログなどの自分のアクセスをカウントさせなくする拡張機能です。

ブログをしているとあるあるなのが、「PV数に自分の閲覧も入ってしまっている」ということ。

特にブログの閲覧数が少ない頃は、大半が「実は自分のアクセスだった!」なんて悲しい話もあります。

従来は「自宅のIPアドレスをGoogle Analyticsに登録して除外する」手法が取られてますが、

これは作業場所を変えてしまうとまた一からの設定になり面倒です。

この拡張機能を入れておけば常に自分のブログのアクセスを集計しなくなるので、とても便利です。

しょーご
しょーご
ブログやってるなら必須だね!

おすすめの拡張機能11 Koala Inspector – Inspect Shopify Shops

web制作におすすめChrome拡張機能

Koala InspectorはShopifyの使用テーマやアプリを丸裸にする拡張機能です。

Shopify開発者には必須の拡張機能です。

私はShopify開発を行いませんが、閲覧したサイトがShopifyの場合はこの拡張機能をかけるようにして、使用アプリなどを見たりしています。

おすすめの拡張機能12 PerfectPixel

透過した画像を重ねてデザインカンプとコーディングのズレを確認することができます。

微妙にずれているのがわかりますね…

web制作においてどこまで厳密にするかは定期的に論争になりますが(特にline-height)

個人的にはファーストビューはマストで合わせるように癖をつけておくといいかなと思います。

ピクセルパーフェクトは駆け出し期に癖をつけないと適当が癖になって悲惨なことになるので(普通に切られる)

知った時(今)が、採用するときです。

おすすめの拡張機能13 Fonts Ninja

web制作におすすめChrome拡張機能

使われているフォント周りを一括で調べることができます。

よく似た拡張機能に「What Fonts」がありますが、こちらのほうがフォント周りを一括で調べられるしUIもいいので、こちらを使っています。

しょーご
しょーご
デザイナーさんにもおすすめ!

おすすめの拡張機能14 Strict Workflow

web制作におすすめChrome拡張機能

25分集中、5分休憩の「ポモドーロ・テクニック」を支援する拡張機能になります。

クリックするだけで25分間の計測を始め、 25分立つとアラームがなり、5分の休憩時間に入ります。

この時間は指定したサイト・SNSを開くことができません

開こうとすると…

「仕事に戻れ!」と叱られます

ポモドーロ・テクニックは「超集中!」をして生産性爆上げしたい方にはぴったりの拡張機能になります。

追記:おすすめの拡張機能15 MarkUp For Chrome

コーディングのレビューができるツールです。

詳しい使い方を別途記事にまとめました。

ディレクターやデザイナーさん、コーダーさんでデザインコーディングを外注される方におすすめの拡張機能です。

詳しくは記事に別途まとめました。

拡張機能で生産性をあげよう

ここまで紹介した拡張機能を入れれば、このように並んでいるはずです。

うまく活用して、効率よく仕事をこなしていきましょう。

合わせて「VSCodeのおすすめプラグイン」の記事も参考になるはずです。

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材noteで公開しています。

XDからの模写コーディング教材

XDデザインデータからのコーディング経験を積むことができ、ポートフォリオとして活用していただくことも可能です

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

マガジンでまとめて購入していただくとお得になります。

書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!