WEBサイト模写に超便利なchrome拡張機能7選

2020年10月16日

おはようございます。はんざきです。

WEBデザインの勉強方法の一つにWEBサイト模写というのがあります。

僕も時間があるときにちょこちょこと模写をやったりするのですが、結構時間が掛かるので割とめんどくさい

デベロッパーツールで随時確認しながら模写をすると結構手間なので、なるべく負担を軽くするためにグーグルの拡張機能を使ってみて、その中で便利だったものを7つ紹介しようと思います

拡張機能7選

  • CSS Pepper
  • Image Downloader
  • Awesome Screenshot
  • ColorPick Eyedropper
  • Page Ruler Redux
  • Responsive Viewer
  • Perfect Pixel

CSS Pepper

CSS Peeper – Chrome ウェブストア

CSS Pepperはフォントやボタンなどの要素のWEBサイト内の要素を調べることができる拡張機能です

使い方によってはどこがブロック要素なのかなど調べられるので、レイアウトの組み方も参考にも使えます

Image Downloader

Image Downloader – Chrome ウェブストア

WEBサイト内の画像を一括でダウンロードできる拡張機能です
背景画像はダウンロードできないので、デベロッパーツールからダウンロードしましょう

Awesome Screenshot

Awesome Screenshot スクリーンショットと画面録画 – Chrome ウェブストア

WEBサイトのスクリーンショットを撮ることができます
ページ全体のスクリーンショットを撮影して、デザインソフトからのトレースでデザインの勉強にも重宝します

ColorPick Eyedropper

ColorPick Eyedropper – Chrome ウェブストア

WEBページの任意の場所からスポイトで色を取得できます

Page Ruler Redux

Page Ruler Redux – Chrome Web Store

要素間の長さを測れる、定規系の拡張機能

あるとすごく便利です

Responsive Viewer

Responsive Viewer – Chrome ウェブストア

レスポンシブに対応したときに検証につかいます

様々なサイズでのレスポンシブ表示ができます

Perfect Pixel

PerfectPixel by WellDoneCode (pixel perfect) – Chrome ウェブストア

完成した模写サイトが実際のサイトと、どのくらいズレがあるのか調べられます

完璧ではなくても良いですが、なるべくズレがおこらないようにしましょう

まとめ

今回は、WEBデザインの模写コーディングをする際に便利なGoogle拡張機能を紹介しました

模写コーディングをすると、実際のコーディングはどうなのか、ここはこういうタグを使っているのかなど参考になることは多いので少しずつでもやっていきましょう