【おすすめのツール有！】模写コーディングの流れを初心者向けに解説

はじめまして。文系大学生のコバヤシミヅキです。

サイト模写、模写コーディングは、Web制作をする人は誰しも一度は通る道だと思います。
Progateなどの基礎学習を終え、いきなり実務をこなすというのはとてもじゃないけど難しいと思います。

やはり、Progateでインプットだけしていては実際の案件や簡単なページですら作ることも出来ませんので、まずはサイト模写を何個かやってみてインプット→アウトプットのループを続けることが大切だと思います。

今回は、Progateを卒業してサイト模写に取り組もうとしている方向けに記事を書いていこうと思います。

サイト模写のメリット・デメリット

まずはメリットを挙げてみたいと思います。

ざっと挙げられるのはこのような感じでしょうか。
これだけメリットが有るのにやらないのはもったいないですよね。

一応デメリットも上げておきます。

というところですかね。（実際僕も挫折しかけました笑）
でも、時間がかかるのは当たり前で、挫折しちゃう人もいるって考えながらやれば難しそうだけど、達成できれば超すごくないですか？

模写するサイトの完成度も最初から100点を目指さなくていいんです。どんどんやれば、自ずと完成度は上がっていきます！

模写コーディングの流れ

まずはおおまかな流れを紹介します。

こんな流れですね。

これだけではわからないと思うので解説していきます。

模写するサイトを決める

まずは模写するサイトを決めなければいけません。
僕は、Airbnb（https://www.airbnb.jp）とiSara（https://isara.life）のページを模写しました。あまりサイト決めに時間を掛ける必要はないと思います。

何より、そんなことで迷うよりコードをたくさん書いて調べての繰り返しのほうがスキルは上がります。

レイアウトの構造を考える

早くコードが書きたいのに！って思った人ちょっと待って下さい。
これをすることで理解度や効率、スピードが変わってきますよ！

分かる範囲でいいので、header、main、aside、section、footerなどの主要なブロックに分けてみましょう。
紙に書き出しても良いと思います。
とにかく、今から模写するサイトの大まかな構造を理解しましょう。

ツールを用意する

模写する上で要素の色や幅、高さは見ただけでは難しいと思います。

あとは、画像の抜き出しですね。1枚1枚ダウンロードしているのでは時間も労力もかかります。

なので以下のGoogleの拡張機能を使うことをおすすめします。

とりあえず以上の拡張機能があれば、模写を始められると思います。
是非活用してみてくださいね！

基礎学習の内容を思い出しながら模写

多分、Progateを終えていざ模写だという人はHTMLの1行目から迷うと思います。

あれなにから書き始めればいいんだ。って

まずはDOCTYPE宣言ですね。
こんな感じで分からなければ自分で考えるのもすごく大事ですが、すぐ調べるというのを心がけましょう！
プログラミングはカンニングOKです！！

その後は書き出したレイアウト構造をもとにコーディングしていきます。細かい部分は先ほどのツールを使用し、徐々に完成に近づけていきます。

わからないところが出てくる→ググる！！

なんだかんだここが一番大事です。

わからないとこを調べる（インプット）
実際にコードを書く（アウトプット）

インプットとアウトプットの高速周回なのでめちゃめちゃ力が付きます。
HTML、CSSの初歩的な内容であれば、少しググればだいたい解決します。

やはり自分で解決する力は何に関しても大事だと思います。

どんどんGoogleに頼りながら、スキルアップしていきましょう！

それでも分からなければ、ソースコードをチラ見しちゃいましょう。
注意ですが、そのまま写すのはNGです。
意味を考えないと、ただの文字列になってしまいます！

最後にソースコードを見て答え合わせ

HTML、CSSでの表現は本当にたくさんあるので一概にこの表現の仕方がいいとは言えないので、ソースコードと完全に一致していることを目指さなくて大丈夫です。

ですが、大まかな構造や自分でも使えそうな表現を参考にする程度で良いと思います。

まとめ

いかがでしたか？

今回はサイト模写のメリットや、流れを具体的に説明させていただきました。

サイト模写は初心者が誰しも通る道であり、大きな壁でもあります。でもここで挫折するのはもったいないですよね。
最初は時間がかかって当たり前、完成度は60％ぐらいでOKなどあまり難しいことは考えずに出来なければ調べ直す。
こんな感じで進めていきましょう！

頑張ってください！
それでは！