プログラミング

web制作におすすめの拡張機能トップ10【生産性アップ】

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

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

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

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

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

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

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

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

この記事で学べること

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

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

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

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

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

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

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

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

おすすめ拡張機能 第10位 DeepL Translator

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

https://chrome.google.com/webstore/detail/deepl-translator-translat/ihcbgmjkcnghahgdngmflcomcikccbml

DeepL Translatorは選択した外国語を自動翻訳してくれる拡張機能です。

DeepLは2017年8月にリリースされた高精度翻訳ツールで、Google翻訳以上に自然に翻訳してくれます。

例えば2つのツールに「Do not cut corners(手を抜かない)と入力してみると、以下のように訳されました。

  • Google翻訳:角を切らないでください
  • DeepL:手を抜いてはいけない、手を抜いてはならない

このように慣用句もGoogleより自然に翻訳してくれます。

エンジニアは最新情報は英語でキャッチアップしたほうが早いのと、公式ドキュメントは基本的に英語しか無いので、必須の拡張機能です。

公式サイトに行って翻訳してもいいのですが、拡張機能を入れておくとすぐに文章を入力することができます。

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

翻訳したい文章を選択して拡張機能をクリックするだけなので、かなり簡単ですね!

おすすめ拡張機能 第9位 Google Analytics オプトアウト アドオン

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

https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh?hl=ja&

Google Analyticsと連携して、サイトのアクセスをアナリティクスにカウントさせなくする拡張機能です。

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

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

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

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

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

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

ブログをやっていなくても、お客さんのサイト作成でも自分の頻繁なアクセスが余計にGoogleに集計されてしまうので、入れて覗いておくべきです(正確な分析の邪魔になる)

おすすめの拡張機能 第8位 ato-ichinen

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

https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja&

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

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

おすすめ拡張機能 第7位 JavaScript Errors Notifier

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

https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd?hl=ja&

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

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

ちなみにコンソールを知らない方もいると思うので解説しますが、検証ツールのコンソールのことをここでは言ってまして、

フロントで何かエラーが起きてないか見るときはまずコンソールを見たほうがいいです。

検証ツール コンソールエラー

例えばこのエラーはjQueryでよく見かけるエラー文ですが、こういったエラーがそもそも起こっているか検証ツールを見ずとも確認できるのが、

このJavaScript Errors Notifierというわけですね。

おすすめ拡張機能 第6位 Keyframes

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

追記:こちら公開終了しました。残念。

おすすめ拡張機能 第5位 ColorPick Eyedropper

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

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja&

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

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

おすすめ拡張機能 第4位 WhatRuns

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

https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=ja&

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

エンジニア

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

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

Chrome 拡張機能 web制作

このWhatRunsで一番見る部分は「CMSの部分」です。

特にWordPressに関しては秀逸で

  • 使用テーマ
  • 使用プラグイン

を表示してくれるので、「このサイトはどういうテーマやプラグインを使用しているんだろう」という場合に大いに役立ちます。

ただ、WordPress意外は精度が微妙な部分もあるので、後述の拡張機能でその部分は補っていきます。

番外編① おすすめ拡張機能 Strict Workflow

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

https://chrome.google.com/webstore/detail/strict-workflow/cgmnfnmlficgeijcalkgnnkigkefkbhd?hl=ja&

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

そもそもポモドーロ・テクニックってなんですかという方に説明しますと、「集中力を維持するための時間管理術」の一つで

  1. タイマーで25分を設定する
  2. タイマーが鳴るまでタスクに集中する
  3. 少し休憩する(5分程度)
  4. ステップ2~4を4回繰り返したら、少し長めに休憩する(15分~30分)

というステップを踏みます。

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

そしてこの「Strict Workflow」最大の特徴は、

25分は指定したサイト・SNSを開くことができないことです。

開こうとすると…

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

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

番外編② おすすめ拡張機能 GoFullPage – Full Page Screen Capture

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

https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja&

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

サイトを画像として保存して使いたい場合、特にポートフォリオとしてサイト全体を画像で取得したい場合や、webデザインでXDに参考サイトを並べたい時によくこれを使います。

webデザイナーやディレクター向きかもしれませんね。

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

番外編③ おすすめ拡張機能 Image Downloader

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

https://chrome.google.com/webstore/detail/image-downloader-plus/ogibmiacmkpcjihjdfifealmfphamfja?hl=ja&

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

使い所として例えばこういう状況が考えられると思います。

クライアント

サイトリニューアルしたいんだけど、既存サイトの素材そのまま使っていい感じにデザイン整えてくれる?

となった場合、画像をサイトから取り出す必要があるのですが、サーバーから手動ダウンロードはめんどくさすぎるので、この拡張機能が活躍します。

ぶっちゃけ使う機会は多くないですが、こういうものがあると知っておくのは重要ですね。

おすすめ拡張機能 第3位 Wappalyzer

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

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja&

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

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

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

拡張機能
おすすめ拡張機能

特にフレームワークやライブラリ系に強くて、Vue,jsやReact、Railsなどを調べることができます。

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

おすすめ拡張機能 第2位 Fonts Ninja

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

https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=ja&

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

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

「このフォントおしゃれだな」と思った時にすぐ調べられるのもいいんですが、

  • line-heightが本当にあっているのか
  • サイズは正しいか
  • 色はどうか

など制作上見落としがちなフォント周りの確認を一括でできるのも便利でいいですね。

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

おすすめ拡張機能 第1位 PerfectPixel

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja&

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

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

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

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

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

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

外した拡張機能 WPSNIFFER – WordPress Themes Sniffer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コーディング課題 XD PSDデザインデータ配布
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

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

しょーご

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

さらに、まとめて購入していただくとかなりお得になります。

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

あなたに是非読んでほしい記事です!