未分類

【全て無料】Web制作初心者が最初に入れるべきChrome(クローム)拡張機能4選

投稿日:

こんにちは、マサヒロです。

Web制作を始めると毎日使うことになるChrome。

そのChromeに簡単に便利な機能を追加できることをご存知ですか?

人間の能力、特に語学や専門技能は、一朝一夕ではなかなか向上しませんが、こうしたツールを効果的に活用することによって、使い出した瞬間から日々の生産性や利便性を高めることができます。

今回は、

  • Web制作初心者が入れておくと便利なChrome拡張機能を知りたい
  • Web制作実務で役立つChrome拡張機能にはどんなものがあるの?

といった疑問にお答えしていきます。

Chrome(クローム)拡張機能とは

拡張機能とは、Chromeのようなブラウザや、VScodeのようなエディタ等のツールに新しい機能を追加してパワーアップしてくれるもので、プラグインとも呼ばれます。

これらの拡張機能はJavaScript等のWeb技術で記述されており、これを使うことで本来Chromeにはなかった機能を簡単に使えるようになります。

しかも、この拡張機能、その殆どが無料で提供されています。そして、本記事で紹介しているものはすべて無料です。

さあ、早速あなたのWeb制作をサポートしてくれるChrome拡張機能を見ていきましょう!

Window Resizer

Web制作をする際には、PC、タブレット、スマートフォン等、いろいろなデバイスごとのサイズに対応したコーディングをすることが求められます。

各サイズでの画面表示を確認する時に便利なChrome拡張機能がこのWindow Resizerです。

↑の画像のようにデフォルトで用意されているサイズならクリック一つ、それ以外のサイズにしたい時でも下の入力欄に数字を入れてEnterを押すだけで、ブラウザのサイズを指定した値に即時変更してくれます。

ただ、デザインカンプ(デザインデータ)での指定サイズでの表示だけでなく、PCからスマートフォン(iPhone SEの320pxくらい)まで実際に画面を小さくしていって、表示に崩れが出ないかは必ず確認しておきましょう!

Full Page Screen Capture

Full Page Screen Captureは、Chromeで表示しているページ全体のスクリーンショットを撮ることができる拡張機能です。

通常、スクリーンショットを撮る際には、表示されている画面全体か、指定した一部分のみを撮影していますよね。

しかしこれでは、画面に収まりきらない縦長のLP(ランディングページ)やサイト全体のスクリーンショットを誰かと共有したい時や、自分のポートフォリオサイトに作成したページを掲載したい時に不便です。

そんな時にこのをFull Page Screen Captureを使うと、簡単に縦長ページ全体のスクリーンショットを取得できます。

先に紹介したWindow Resizerで適切な画面サイズに変更し、この拡張機能で画像を取得する、という使い方が特に便利です。

僕自身はこちらのポートフォリオページに、この拡張機能で撮影した縦長の画像を掲載しています。

PerfectPixel

Web系のコーダーとして働く場合、能力を測る一つの指標としては、デザインカンプ(デザインデータ)からの再現性の高さが挙げられるかと思います。

レスポンシブ(スマートフォン対応)が当たり前となった現代では、ピクセルパーフェクト(デザインカンプと1mmも違わずコーディングすること)が求められることは少なくなっていますが、それでも仕上がりがデザインデータと大きく違っていれば、仕事の質が高いとは言い難いでしょう。

そんな時、PerfectPixelという、そのものズバリな名前のブラウザ拡張ツールを使えば、かなり高い精度でデザインカンプの再現度を担保することができます。

具体的には、ブラウザの上に透過させたデザインデータを重ねて、ズレを確認することができます。

例えば↑は僕がつい最近コーディングしたページでPerfefctPixelを使用したもの。どこがズレているか一目瞭然ですね(苦笑)

より詳しくは、はにわまんさんの下記ブログをご参照ください。

PerfectPixelを使えばデザインカンプを完全再現したコーディングができる!

ColorPick Eyedropper

参考にしたいような綺麗なサイトを見つけたり、コーディング練習のためサイト模写をしていたりすると

この部分のカラーコードを調べたい!

ということがありますよね。

そんな時に役立つChrome拡張機能がColorPick Eyedropperです。

これを使えばホンの数秒で目当てのコンテンツのカラーコードを取得することができます。

導入後は、クリックするだけで対象のカラーコードとRGB値が表示され、そのままコピーすることができます!

↑上記はスタバのロゴで実際にColorPick Eyedropperを使用しているところです。

より詳しい使い方はこちらのようなページが詳しいです。

オマケ: 長時間PC作業する人にはPCスタンドがおすすめ

長時間ノートPCで作業すると、誰もが肩こりや首の痛みに悩まされますよね。

それを大きく経験してくれるのがこのPCスタンド。最近買って大正解だったのでついでに紹介します。

値段も約1,800円とお手頃で、折りたたむと↓のように小さく、持ち歩きにも便利です(袋も付いてきます)。

 

水平でないキーボードを打つのは慣れるまで若干苦労しますが、それも長期ユーザーに言わせると「これに慣れると水平キーボードに戻れなくなる」とのことです。

こうしたツールにも効果的に投資して、作業効率を上げていきましょう!

まとめ

  • Chromに簡単に便利な機能を追加できるのが拡張機能(プラグイン)
  • Window Resizerで自由自在に画面サイズを調整しよう!
  • Full Page Screen Captureで縦長なページのスクリーンショットも簡単取得!
  • PerfectPixelでデザインデータを完全再現!
  • ColorPick Eyedropperで気になるカラーコードを簡単取得!
  • PC作業の疲労軽減にはPCスタンドも試してみよう!

関連記事

iSara(バンコクのプログラミングスクール)6期に参加してきた

Let's Enjoy Better Life !

-未分類

Copyright© Let's Enjoy Better Life ! , 2020 All Rights Reserved Powered by STINGER.