Web制作に使えるChromeの拡張機能

Webサイトの制作にあたっては、いろいろなサイトを参考にされると思います。その際に作業効率を上げる為にはブラウザーの用途に合った拡張機能を利用されることをお勧めします。今回は、ホームページ制作を行う上で使える「Google Chrome」の便利な拡張機能をご紹介します。

ブラウザーは「Google」及び「Brave」で拡張機能が使用できます。

いずれも「chromeウェブストア」から簡単に追加できます。

1.「GoFullPage-Full Page Screen Capture」

Webサイトのページ全体のスクリーンショットを取得することができます。

最近のホームページは、LP型の縦長構成のサイトが多いので重宝します。そのままコピーして「Figma(フィグマ)」などデザインプラットフォームに張り付けてサイト作成、編集にも活用できます。

▼「ココナラ」ページのスクリーンショットの場合

2.ウェブページ全体をスクリーンショット-FireShot

サイトのページ全体、表示部分、選択範囲とそれぞれキャプチャーメニューからスクリーンショットを選択でき、さまざまな形式で保存することが出来るツールです。

3.「UI Build Assistant」

画面上の全ての「HTML要素」に背景色とアウトラインをつけてくれる拡張機能です。

▼「ココナラ」のページをサンプルにすると

▼ページを表示した状態で「UI Build Assistant」をクリックすると

　　　　　　　　　　　　　　　　　⇩

上の図のように各要素の幅の取り方、マージンの取り方などが一目瞭然で確認できます。

4.「ColorPick Eyedropper」

Webサイト上のカラーコードを調べることが出来る拡張機能です。「ColorPick Eyedroppper」のアイコンをクリックすると十字のアイコンが表示されるので、調べたいところに十字のアイコンを合わせるとカラーコードが表示されます。

ホームページをカスタマイズする

---

最後までご覧いただきありがとうございます。今回ご紹介した以外にも、たくさんの拡張機能があります。参考になるサイトのページ構成など分析してみる際、色々と試してみてはいかがでしょうか。