【これで完璧】Webサイトの模写に必須の無料ツール5選【Chrome拡張機能】

※本サイトはアフィリエイト広告を利用しています。

【Webサイトの模写に必要なツールが知りたい人】

 

こういった方向けの記事です。

この記事を書いている僕は、
過去にWeb制作会社に
エンジニアとして勤めていて、
これまで [Airbnb] や [ノートン]
[慶應義塾大学病院] などの
色々なWebサイトの模写を経験してきました。
 
その過程で「これさえあればOK」という
Webサイトの模写に必要なツール
が分かったので、今回はそれをお伝えします。

記事を読み終わる頃には、
Webサイトの模写をするに当たって
最低限必要なツールから、
あると便利なツールまでが
分かる状態になっていますよ。

Webサイトの模写に必須の無料ツール5選【Chrome拡張機能】

さっそく結論ですが、サイト模写に必須のツールが下記の5つ。

• その①：ColorPick Eyedropper
• その②：Page Ruler Redux 　→　 ※2022年9月現在、使用不可に😭
• その③：WhatFont
• その④：Image Downloader
• その⑤：UI Build Assistant

ちなみにタイトルの通りですが、
これらは全てGoogle Chromeの拡張機能です。

これからWeb制作をするに当たって
まさかChrome以外のブラウザを
使っている人はいないと思いますが、

もし今ギクッとした方は
このタイミングでの切り替えをオススメします。

その①：ColorPick Eyedropper

まずはじめにこちらは
使われている色を知るための拡張機能です。

使い方はとても簡単で、
画面右上の拡張機能一覧の中から
ColorPick Eyedropperの
アイコンをクリックして起動させます。

そしたらあとは
色を知りたい要素をクリックするだけ。

超簡単ですよね。
 
≫『ColorPick Eyedropper』の追加はコチラ

その②：Page Ruler Redux

こちらは幅や高さなど、
要素の長さを取得する拡張機能です。
 
≫『Page Ruler Redux』の追加はコチラ
※2022年9月現在、使用不可。

その③：WhatFont

文字のサイズや太さ、書体などの
文字に関する情報を取得する拡張機能です。

こちらのツールも①の
『ColorPick Eyedropper』と同様、
拡張機能を起動させた状態で
フォントの情報を知りたい文字をクリック
するだけで使用することが出来ます。
 
≫『WhatFont』の追加はコチラ

その④：Image Downloader

模写するサイトに使われている
画像をダウンロードできる拡張機能です。
 
≫『Image Downloader』の追加はコチラ

その⑤：UI Build Assistant

こちらは、
しまぶーさんという
元Yahoo!のエンジニアの方
が作られた拡張機能です。

正直こちらは
無くても模写自体は出来るのですが、
あるととても便利なので
紹介させていただきました。
 
≫『UI Build Assistant』の追加はコチラ

使い方は、こちらのご本人の動画をどうぞ。

 

以上の5つが、
サイト模写をする際に必須のツールです。

とはいえWeb業界の流れは早いので、
上記で紹介したものより便利なものが
最近新しく出ているかもしれません。

もし、
「もっと便利なこんなツールがあるよ」
といったものがあれば、
TwitterのDMで教えていただけると嬉しいです。

サイト模写のツールが準備できた後にやるべきこと

とりあえずは今回紹介した
5つのツールがあれば
問題なくサイト模写が出来るので、
ここまで準備が出来た方は
さっそく実際にサイトの模写をしてみましょう。

具体的なやり方は
下記の記事で解説しているので、
こちらをぜひ参考にしてください。

≫【Web制作】サイト模写のやり方を徹底解説【スキル向上におすすめ】

【Web制作】サイト模写のやり方を徹底解説【スキル向上におすすめ】

サイト模写の具体的なやり方・手順を知りたいですか？ この記事では、サイト模写のやり方や手順だけでなく、必要な（役立つ）ツールや注意点などについても解説しています。サイト模写にどこから手をつけたら良いか分からない方は必見です。