• HTML,CSSの基礎が終わったけど実践的なスキルが身につかない。
• 模写コーディングのやり方を教えて欲しい！
• 模写コーディングは何から始めればいいの？

今回はこのような悩みを解決する記事です。

プログラミング初心者の一連の流れとして、

【Progate、ドットインストールで基礎学習→基礎勉強しまくる→実践スキルが身につかない→何をすればいいか悩む】

このようになる方が多いかと思います。

Progateなどで基礎学習はもちろん効率的で良いですが、学習後インプットした物を実践的なスキルに変えなければ何の意味もありません。

そもそもProgateだけではHTML,CSSの全てを網羅できておらず、100がプロとすると10にも到達していません。

→ 【実体験】Progate（プロゲート）でどこまでスキルが身につくの？【HTML,CSS編】

そこでオススメの学習方法がこれからご紹介する「模写コーディング」という方法です。

この模写コーディングをマスターすれば、クラウドソーシングにある簡単なLP案件くらいはこなせるレベルに到達するかと思います。

そこで本記事では、模写コーディングの具体的なやり方を解説するのでぜひ最後までご覧ください！

無料の教材作りました▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】

模写コーディングとは？

さて、これから学習していく「模写コーディング」とはそもそも何なんでしょうか？

読んで字の如く既存で存在するサイトを模写しコーディングするという事です。

もうご存知の方も多いかと思いますが、HTML,CSSはサイトの外枠（見た目）を作るプログラミング 言語でしたね！

つまりこのような（WordPres.com）サイトの見た目もHTML,CSSで作られています。

模写コーディングとはこのようにHTML,CSSですでに出来上がっているサイトを見ながら、全く同じサイトを作ることを言います。

模写コーディングとは、「既存で存在するサイトを見る」→「全く同じ見た目を0からコーディングして作る」この作業のことを言います。

模写コーディングのメリット

ではなぜ初心者の方に模写コーディングをお勧めするのかご紹介します。

ざっとまとめるとこれだけメリットがあります。

まず始めに参考にするサイトはプロのエンジニアが作ったものなので、今まで使ったこと無いメソッドや組み立て方を学ぶことができます。

コーディングの方法に正解はありませんが、綺麗なコーディングは存在します。

WordPress.comなどの有名なサイトのソースコードを見てみると、無駄のない綺麗なコーディングがされているのが分かるかと思います。

綺麗なコーディングができるようになると、コーディングの速度が上がる、CSSの書く量が減る、HTMLの組み立てが上手くなるようになります。

模写コーディングは個人で仕事を受注した時と同じ状況に近いので、将来フリーランスを目指す方にもオススメの学習です。

その理由として、、、

1. デザインカンプと呼ばれるサイトの見本を渡される
2. 見本を参考に同じサイトを作る
3. 納品

このような流れで作業を進めるので、この状況が模写コーディングと似ているからです。

仕事の際には色が違っていたり、配置がずれていると話にならないので、模写コーディングする際には誰が見ても同じ見た目にするようにしましょう。

LP案件はコーディング技術だけでは無理です【必須なスキル、理由を解説】

もう一点模写コーディングの魅力をお伝えすると、模写コーディングしたサイトを自分の実績として使えるようになります。（※著作権には注意してください）

初心者の方にはサイト制作の実績が無く仕事が取りにくいですが、模写コーディングしたサイトを自分の武器にして営業している駆け出しフリーランスの方も多いですよ！

✔︎挫折しそうならスクールに通うのもアリ

プログラミング学習の設計は、プロに任せた方が「最速最短」で走り抜けることができます。

独学だとつい無駄なことや、脱線した学習をしてしまいがちなので、TechAcademy のような比較的安いスクールでもいいので、プロに学習のサポートをしてもらった方が効率よく学習できます。

TechAcademyは１週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。

▶︎ TechAcademyの公式サイト

【初心者向け】模写コーディングのやり方

では早速、初心者の方向けに、模写コーディングのやり方を解説していきます。

これからご紹介するステップに沿ってやると、効率よく模写コーディングの学習ができるので、ぜひ参考にしてみてください。

初心者向けの模写コーディングのやり方は以下の5つのステップです。

これらの5つのやり方について詳しく解説します。

1.模写するサイトを決める

まず初めに、模写するサイトを決めるところから始まります。

模写するサイトを決めるのがとても重要で、レベルに合っていないサイトを選んでしまうと100%挫折します。

最初は無理せず自分のレベルに合ったサイト選びが重要です。

↓スキル別にオススメの模写サイトを選んでみました↓

【レベル別】模写コーディングにおすすめのサイトまとめ9選

まずは、上記のページの初級編から取り組んでみてください。

模写コーディング学習の途中に習得するべきスキルも同時に解説しているので、非常に有益な記事だと思います。

2.検証ツールは使わずに自力で完成させる

模写コーディングをしていると、必ずつまづくことが多々あると思います。

初めての方は必ずつまずいてGoogleChromeの検証ツール（答え）を見てしまいがちですが、我慢して自力で解決するようにしてください。

もしこれが仕事の場合は検証ツールで答えなんて見れません。

そのことを考えてこの学習の過程でググる力（調べる力）を身につけましょう。

HTML,CSSの事であれば必ず答えはGoogleに載っています。

分からない→自分で考える→ググる→実行する

検証ツールは使わずにこの流れで完成に近づけていってください。

3.レスポンシブデザインもCSSで実装する

最近ではモバイルファーストなので、レスポンシブ化も欠かせません。

初心者の方であれば、ブレイクポイントは1つでいいので、CSSの@mediaを使ってレスポンシブ対応にしましょう。

Webサイトをレスポンシブ対応にする方法は下記の記事をご覧ください。

→ CSSでメディアクエリ（@media）を使ってレスポンシブ（スマホ対応）にする方法

Webサイト制作の案件をするときでも、必ずと言っていいほどレスポンシブ対応を求められます。

模写コーディングでレスポンシズデザインのコーディングもマスターしておくと、効率よく仕事を進めることができるので、ぜひ何度も練習してみてください！

4.検証ツールを見て答え合わせ

完成物は見本に90%くらい近ければ、検証ツールを使って答え合わせをしましょう。

このステップが最も重要で、見本と自分でコーディングしたコードとどこが違うのか確認して見ましょう。

おそらく、divタグの使い方が全く違うかったり、classやidの指定、posisionの指定方法がかなり違うかと思います。

検証ツールを見て、知らないメソッドやタグがあった場合はメモして、使い方を調べて次回使えるようにしましょう。

→ 【Chrome検証ツール使い方】初心者が抑えておくべき便利な４つの機能の使い方

【Chrome検証ツール使い方】初心者が抑えておくべき便利な４つの機能の使い方

5.模写したサイトのデザインを参考にする

おそらく模写コーディングにチャレンジしている方は将来フリーランスやエンジニアを目指している方が多いかと思います。

フリーランスを目指す方ならなおさら、サイトの設計やWebデザインの能力も必要になってきます。

この学習の中でレイアウトやデザインの勉強も同時にするといいでしょう。

ここにはアイコンを使ったら見やすいとか、影やhoverさせると閲覧者にクリックしてもらいやすくなるなとか、デザイン例は無限にあるので、少しずつ吸収していきましょう。

HTML,CSSコーディングができて、Webデザインもできるとなると、エンジニアとしての市場価値も非常に高くなるので、余裕がある人は、Webデザインも同時に学ぶといいでしょう！

TechAcademyのWebデザインコースでは、Adobe Photoshopを使った画像加工やワイヤーフレームの使い方をプロに教えてもらえるので、ぜひ活用してみるといいでしょう！

▶︎Webデザインコース公式ページ

まとめ：模写コーディングのやり方をマスターしよう！

いかがでしたでしょうか！

この記事を参考に模写コーディングの学習効果や実践力がつくことがお分かり頂けたかと思います。

3サイトくらい模写コーディンすれば、かなりの実力がつくかともいます。

コーディングするだけ実力もつきますし、実績として使える武器も増えるので、基礎学習が終わった方はぜひチャレンジしてみてはいかがでしょうか！

↓合わせて読みたいプログラミングの記事↓

【入門 Bootstrap 使い方】初心者でも爆速でカッコいいサイトを作れる

どれがオススメ？プログラミング学習の環境選び【独学・留学・スクール・オンライン】