【WEB制作】実践済みのサイト模写の方法を紹介する！

こんにちはYes鍵です。

今日はWeb制作において一番勉強になるサイト模写についてお話ししたいと思います。

• Progateを終えたけど次に何をしていいかわからない…。
• 一通り基礎は学んだけど、いまいちよくわかっていない…。
• サイトの模写はいいけどやり方がわからい…。

と悩んでいる方の参考になればと思います！

では、さっそく行きましょう！

そもそもサイト模写とは

そもそもサイトの模写ってなに？というところから始めます。

サイトの模写とは実際にWeb上で公開されているサイトを、自分のPC上で再現することです。

つまり、手本を見ながら、自分でサイトを作ってしまおう！ということです。

えぇ…、そんなことできるん…？

と思うかもしれませんが、割とできます。やりかたを紹介していきます。

準備するもの

1. テキストエディタ
2. GoogleChrome
3. 模写したいサイト

これだけです。

全部タダです。すばらしい。

テキストエディタ

ぼくはAtomを使っていますが、動けば正直なんでもいいと思います。

世の中にはいろいろなエディタがありますから自分に合ったものを試してみるといいと思います。

GoogleChrome

これは意外と大事です。

何がいいかというとCromeの「検証モード」というのがあるんですが、これを使ってサイトのコードを知ることができたりします。

試しにテキトーなサイトを開いてF12キーを押してみましょう。すると右側になんか出てきますよね。

それが「検証モード」です。詳しくはこちらをどうぞ↓

saruwakakun.com

模写したいサイト

これも正直なんでもいいですが、ランサーズの参考URLを模写してみましょう。

これができれば、もうその案件は取れてもおかしくないです。

模写ルール

ぼくはルールとして

1. できるだけ見本サイトのコードを見ない
2. 画像はダウンロードしてよし
3. 文字の大きさとかフォントにはこだわらない

の3つを決めました。

なかでも「できるだけ見本サイトのコードを見ない」は結構大事だと思っていて、

これをしっかり守るか守らないかで成長スピードが違うと思います。

基本的には目で見て「ここはたぶんこういう構造なんだろうな…。」と推測しながらやっていくことになります。

こうすることでProgateではできなかった、「自分で考えてコーディングする」ということができます。

どうしてもわからなかったらググりましょう。

ぼくは周りにプログラミングできる友人がいなかったので、どうしようもなかったらグーグル先生だけが頼りでした。

考えたけど思いどおりにならない…。ググっても出てこない…。となったら先ほど紹介した「検証モード」で見本サイトのコード（答え）を見てみましょう。

知らなかったらぜひメモするなりググってみるなりしましょう。そうすることで知識を深められます。

まとめ

準備するものは

・テキストエディタ

・GoogleChrome

・模写したいサイト

だけ！

模写のルールは

・できるだけ見本サイトのコードを見ない

・画像はダウンロードしてよし

・文字の大きさとかフォントにはこだわらない

でした。

ルールも守って楽しい模写ライフを送りましょう！！

以上です。最後まで見てくれてありがとうございました。