こんにちは。

夏に向けて運動をしたいと思いつつ行動に移せていない降籏です。

今回は、新人webディレクターの私が業務の中でリアルに使用している、便利なchromeの拡張機能をご紹介したいと思います！

Awesome Screenshot

https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja

Webページ全体や一部をキャプチャし、図形やテキストを追加することができます。

ページの一部をキャプチャするときはショートカットキーを使用してスクリーンショットをしていますが、ページ全体を丸々キャプチャしたいときありますよね。

そういった時にこの機能を使用しています。

キャプチャだけでなく、図形やテキストを追加することができるので、デザイナーやエンジニアにわかりやすく指示することができてとても便利です。

View Image Info (properties)

https://chrome.google.com/webstore/detail/view-image-info-propertie/jldjjifbpipdmligefcogandjojpdagn?hl=ja

web上に掲載されている画像の詳細情報を確認することができます。

この機能のいいところは、画像の上で右クリックをしてView Image Info (properties)をクリックするだけで簡単に情報が表示されて確認できるという点。

そして、画像のサイズがpxで表示されるところです！

例えば、日常の業務の中でデザイナーにバナーを作成して欲しい時があります。

「サイトのここに掲載されているバナーと同じサイズで作成して欲しい…。」

そういう時、この機能を使えばすぐサイズを確認することができます。

px単位でサイズを確認することができるので、作成してほしいサイズをすぐデザイナーに伝えることができます。

特にスマホ用の画像を作成する際、私は最初、スマホ用の画像は2倍のサイズで作成されているということを知りませんでした。

そんな私はスマホ上の画像サイズを確認したい時、検証モードで表示して画像サイズを確認していたのですが、これは間違いですね。

当たり前ですが、スマホは機種によって画面幅が異なります。

そのため、検証モードで確認しても、機種によって画像サイズも異なって表示されてしまいます。

「じゃあどうやって正しいサイズを確認すればいいの！？」

と思った時、この機能を発見しました。

サイズを知りたい画像の上で右クリックしてView Image Info (properties)を選択するだけで、スマホ用の2倍サイズが簡単に確認できるのです！

ちゃんとpx単位で表示してくれるので、そのままデザイナーにサイズを指定することができます。

とても便利！！

QRコード作成器 (Quick QR)

https://chrome.google.com/webstore/detail/quick-qr-code-generator/afpbjjgbdimpioenaedcjgkaigggcdpp?hl=ja

簡単にQRコードが生成できてしまう機能です。

PCで閲覧していたサイトを、スマホで確認したい時ありますよね。

ただ、スマホでわざわざURLを打つのはめんどくさい！

そういう時、この拡張機能を使えばクリックひとつでサイトのQRコードが生成され、そのQRコードをスマホで読み込んでしまえばあっという間に見ていたサイトをスマホで表示することができます。

この機能があれば日常の検収作業も楽になりますね！

私自身も一番使用している拡張機能です。

まとめ

いかがでしたか？

chromeの拡張機能を利用して、少しでも日常の業務が楽になったり、効率的になれば嬉しいですね！

みなさん、今日もお仕事頑張りましょう！！