5.使用するグーグルクロームの拡張機能とFigmaのプラグイン

デザイン制作の際にはChromeの拡張機能とFigmaのプラグインを使用して制作します。

以下の3つのChromeの拡張機能は非常に使用頻度が高いので、使い方を覚えておきましょう。

Windowresizer

ブラウザの幅を指定した横幅に設定できる拡張機能です。

作成したテスト環境が指定した幅でどのように見えるのか確認したり、参考サイトを指定の幅でスクリーンショットを撮ったりする時に使用します。

デザインカンプは1920px、1440pxで作成することが多いので、ブラウザの幅を1920pxや1440pxにしたい時に主に使用します。

使用する場合は拡張機能のアイコンをクリックし、表示された画面幅をクリックするだけで画面サイズを変更することができます。

Windowresizer（chromeWebストア）：https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja_1

Go Full Page

開いているページのスクリーンショットを撮りたい場合に使用します。

Windowresizerでブラウザの幅を設定した後に使用すると、設定した幅でスクリーンショットを撮ることが可能です。

Go Full Page（chromeWebストア）：https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

SEO META in 1 CLICK

すでに公開されているサイトの見出しタグの情報や、メタ情報を確認することができる拡張機能です。

競合・同業サイトの見出し構成がどのようになっているのかを確認する時に使用します。

見出しは目視でも確認できるため使わなければ制作ができない拡張機能という訳ではありませんが、見出し構成が目視で確認しにくいサイトのデザインの場合は使用すると便利です。

SEO META in 1 CLICK（chromeWebストア）：https://chromewebstore.google.com/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc?hl=ja

Figmaのプラグイン：Insert Big Image

高さもしくは横幅が4096px以上の大きな画像の画質を荒らさずにFigmaにインポートすることができるプラグインです。

クライアントから共有された画像が高さもしくは横幅が4096px以上より大きいことは度々あるので、大きな画像をFigmaにインポートする際に使用します。

Figmaのプラグイン：html.to.design

リニューアルの時に主に使用するプラグインです。

公開されているサイトをFigmaにインポートすることができます。

テキストや画像もインポートされるため、既存の画像やテキストを使いたい場合に使用します。

有名なものの意外と使わないFigmaのプラグイン

HPやLPではよく使うプラグインでも、ECサイトのデザインでは以下のプラグインはそれほど使いません。

• Remove BG
• Downsize
• Blobs
• Skew Dat
• ABC-Bend your type!
• Wave&Curve

画像から物体を切り抜くことができる「Remove BG」は一見よく使いそうなプラグインですが、無料版だと画質が荒くなりやすいためオブジェクト（物体）を切り抜きたい場合は「Remove BG」は使わずにPhotoshopで切り抜きを行います。