【超便利】模写コーディングで使える、Chromeの拡張機能3つ【簡単に実装】

模写コーディングで使える、Chromeの拡張機能3つ

[code_balloon position=”right” name=”悩んでる人” text=”プログラミング学習をしていて、現在模写コーディングのをしているんだけど、その際に便利なツールがあったら教えてほしいです!
” img=”https://yuuuugablog.com/wp-content/uploads/2020/10/101_color-1-e1602070838224.jpg”] [code_balloon position=”left” name=”ゆうが” text=”こういった疑問に答えます!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

記事を読むメリット

  • 模写コーディングをする際に便利なツールがわかる
  • 作業が効率化し、プログラミングの理解が早くなる

模写コーディングってなにかと手間がかかりますよね。

たとえば、

  • 画像のダウンロード
  • フォントサイズや、デザインの確認
  • コーディング画面のスクショ など…

割と手間がかかりますよね。
しかし、今回はそんな手間が省けて、便利なChromeの拡張機能を紹介してきます。

本記事のもくじ

  • 模写コーディングで使える、Chromeの拡張機能3つ
  • Image Downloader
  • Full Page Screen Capture
  • PerfectPixel

記事の信頼性として、僕はプログラミングを学習していて、LP制作のお仕事をもらえるレベルなので、信頼性は担保されていると思います。

それでは、前置きはこれくらいにして、さっそくいきましょう!

スポンサーリンク

模写コーディングで使える、Chromeの拡張機能3つ

模写コーディングで使える、Chromeの拡張機能3つ

結論は下記の3つです。

  1. Image Downloader
  2. Full Page Screen Capture
  3. PerfectPixel

それぞれ、「特徴」「使い方」を解説していきます。

これら拡張機能のダウンロード方法

紹介する前にそれぞれの拡張機能のダウンロード方法を紹介しておきます。

それが下記です。

  1. 右上にある縦3つの・・・をクリック
  2. 「その他のツール→拡張機能」を選んでクリック
  3. 左上にある横に三本線のアイコンをクリック
  4. 下の方にある「Chromeウェブストアを開きます」をクリック
  5. ダウンロードしたい拡張機能を検索して選択する
  6. Chromeに追加をクリックすれば完了です。

それでは、これから解説していきます。

スポンサーリンク

Image Downloader

Image Downloader

特徴

こちらは言葉の通りで、模写したいサイトの画像を一括でダウンロードしてくれます。

いちいち画像を選んで保存してなくていいので、めっちゃ楽です。

使い方

まずは、自分が模写したいサイトを開きます。

つぎに、右上にあるパズルみたいなアイコンをクリックして、「Image Downloader」をクリックします。

すると画像がすべて選択されるので、「Select all」にチェックマークを入れて、「DOWNLOAD」をクリックすれば、ダウンロードが開始されます。

Image Downloader

上記の画像のようになればOKです。

[code_balloon position=”left” name=”ゆうが” text=”超簡単に画像をダウンロードできるので、模写コーディングにはもってこいの拡張機能です!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

スポンサーリンク

Full Page Screen Capture

Full Page Screen Capture

特徴

こちらは、開いているページのすべての画面をスクショしてくれて、

たとえば、一枚の長いLPをスクショして、実績として見せたい場合に使えます。

他にも、つぎに紹介するPerfectPixelにも使えます。

[code_balloon position=”left” name=”ゆうが” text=”僕も実際にGoogleDriveに、LPのスクショを撮って保存しています。” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

使い方

先程と同様に、右上にあるパズルみたいなアイコンをクリックして、「Full Page Screen Capture」をクリックします。

そしたらクリックした瞬間に、スクショが始まるので少し待ちます。

スクショが終わったら、下記の画像のような画面になるので、ダウンロードすれば完了です。

Full Page Screen Capture

[code_balloon position=”left” name=”ゆうが” text=”これだけで画面全体のスクショができるので、超便利です!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

PerfectPixel

PerfectPixel

特徴

こちらは、模写コーディングした際に、自分の模写作品と本家の作品をピクセル単位で計測して、

フォントサイズやデザインのズレなどがないかを確認できます。

[code_balloon position=”left” name=”ゆうが” text=”シンプルに自分の模写作品が、どれだけ再現できるかを確認できます。” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

使い方

先程と同様に、右上にあるパズルみたいなアイコンをクリックして、「pixel perfect」をクリックします。

そしたら、「最初のレイヤーを追加してください!」とあるので、そこに自分がFull Page Screen Captureで撮ったスクショを貼り付けます。

PerfectPixel

あとは、自分の模写作品と本家の作品を照らし合わせてみて、どれくらいデザインの差があるかを確認できます。

[code_balloon position=”left” name=”ゆうが” text=”もし、合ってなかったところがあったら修正しましょう。” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

以上、模写コーディングで使える、Chromeの拡張機能3つでした!

最後まで見てくださり、ありがとうございました。