サイト模写する際に知っておくべきツール

プログラミングのスキルを上げたい場合は、模写コーディングが手っ取り早いですよね。

この記事では、サイト模写に必要なツールとそれらの使い方を紹介していきます。

サイト模写をこれからしようと考えている方は、これらのツールは「必須」なのでぜひ導入してから模写をしてみてください！

まずは、Progateで基礎を学ぼう

まずは、Progateの方で基礎を固めてから模写の方に移ってもらえたらと思います。

Chromeデベロッパーツール

デベロッパーツールは、web開発者にとっては非常に便利なツールです。

デベロッパーツールでは色んなことができます。Styleの確認、デバッグ・エラーの確認、スマホ表示での確認、CSSを編集し色を変えたり、またHTMLを編集することなど色んな機能が備わっています。

Chromeのデベロッパーツールが使いやすいので、オススメです。

Chromeデベロッパーツールの使い方【基本】

①調べたい部分にマウスを当てます。

②次に、右クリックします。

②次に、「検証」をクリックします。

③デベロッパーツールが出てきます。（コードがバーっと左側に出てきている部分がそうです。）

導入すべきツール

サイトを模写する上で、Chromeで導入しておくべきツールはこの４つです。

今回は、Progateのサイト使ってこれらのツールの使い方を紹介していきます。一度Progateの方のサイトを見ておいてください。

What Font

マウスを重ねるだけで、何のフォントを使っているか分かるツールです。

Progateのサイトのロゴのフォントを調べてみます。

①What Fontのアイコンをクリック！

②調べたいフォントにマウスを持っていきます。今回は、Latoと出てきていますね。

Image Downloader

Image Donwloaderは模写したいサイトの画像を一括でダウンロードできます。一つ一つ画像を取ってこなくていいので、すごく便利なのでオススメです！

Chromeのアドレスバーの右側にあるImage Downloaderのアイコンをクリック！

アイコンをクリックするとこんな画面が現れます。

①Select allのチェックボタンをクリックするとサイト全体の画像をダウンロードできます。（＊全ていらない場合は、ダウンロードしたい画像だけ選択してください。）

②Downloadのボタンをクリックすれば完了です！

Image Downloaderで画像を取得できない場合

時折、Image Downloaderでは画像が取得できない場合があります。

なので、その場合はChromeのデベロッパーツールを使って取得します。

今回は、例としてProgateのサイトにある画像をデベロッパーツールで取得していこうと思います。

①まずは、取得したい画像のサイトを開きます。

②次に画像の近くにマウスを持っていき、右クリックします。

←すると、このような画面が出てきます。

③表示された中で、「検証」をクリックします。

④デベロッパーツールが表れます。

←このようにコードがバーっとたくさん書いてあるようなのが表れるかと思います。

⑤デベロッパーの左上にあるこのマークを押してください

⑥調べたい部分（画像）をクリックします

⑦クリックされた部分が青く左側に表示されます。

⑧青く表示された部分を右クリックします。

←このようなのが表示されます。

⑨Copy link addressを押します

コピーされたアドレスをコードに埋め込んであげれば完了です！

Page Ruler

Page Rulerはサイトの要素を測ることができます。Height:〇〇px　Width:〇〇pxみたいな感じで出てきます。

①Chromeのアドレスバーの右側にあるPage Rulerのアイコンをクリック！

今回は、Progateの無料会員登録ボタンのサイズを測ってみます。

②測りたい要素を囲みます。するとWidth:161px 、Height:56pxみたいに出てきます。

Color Picker

Color Pickerは色のカラーコードを教えてくれるプラグインです。グラデーションが効いている時はちょっと使えなかった経験がありますが、それ以外はすぐ分かるので便利ですよ！

①Chromeのアドレスバーの右にあるColor Pickerのアイコンをクリック！

②Progateの無料会員登録ボタンにマウスを当て色のコード調べます。

←色のコードは、#FCB767だそうですね！

これらのツールをダウンロードして、サイト模写してプログラミングのスキル上げちゃいましょう！