【初心者必見】web制作でおすすめの模写サイトを紹介します

• Web制作の勉強初めて、Progateやドットインストールの基礎学習は終わったんだけど、その後に何したらいいかわからない
• おすすめの模写サイトを知りたい

今回はこういった疑問について解説していきます。

フロントエンドの学習をするにあたって模写サイトについて一度は耳にしたことがあると思います。模写コーディングは初学者にとって非常に有効な学習方法です。

このような利点が模写サイトのコーディングにはあります。今回は模写に向いているおすすめのサイトを解説していきます。

自分のレベルに合わせてサイトを選ぶ

サイトを選ぶ時に気をつけることとしては現在の自分のスキルより少し難易度の高いサイトを選択することです。簡単すぎると、いつまでもそこに安住してしまい学習効率が下がります。逆に難しすぎると理解ができないままコードだけを写してできた気になってしまうリスクがあります。どちらも知らず知らずのうちに陥ってしまうことがあるので注意て必要です。

では具体的に自分のレベルを判断する基準をいくつがご紹介します。

このようなものが挙げられます。実際にコーディングができずとも「こうやればサイトが作れるのか」という理解ができていれば問題ありません。

例えば、レスポンシブに対応させるならメディアクエリという記述方法があったり、2カラムレイアウトにする場合、flexboxというCSSのプロパティを使用したりします。

こうした土台の知識がある状態で模写コーディングができると効率的に学習可能です。ここの土台がない状態でコーディングをすると、ただ答えを移すだけの作業になってしまうので学習効率が下がってしまいます。

自分のレベルをまずは見極め、それにあったサイト選定をしていきましょう。

初学者におすすめな模写サイト

僕がおすすめする模写サイトは結論この2つです。
1つ目のCode Stepさんは入門から上級までレベルに合わせた模写サイト用のデモサイトを提供してくれています。正直このサイトにあるデモサイトをひたすら練習していけばほとんどのWebサイトを制作することができると言っても過言ではありません。

基本的なレイアウトのサイトから、複数カラム、グリッドレイアウト、JavaScriptを実装したサイトなど、様々なサイトを作ることができます。

ソースコードも展開されているためとてもわかりやすく学習ができます。

2つ目のiSaraさんは今やweb制作初学者の登竜門となっているような存在です（※あくまで筆者の主観です。）
今まで学習した知識をフル動員させて完成させるようなサイトの作りになっています。このサイトの作りは他のサイトの作りに通ずるところが多数あるので模写コーディング練習にはうってつけのサイトです。

どちらも初学者が挑戦するには申し分ないサイトのため、ぜひこの2つにチャレンジしてみましょう。

まとめ

今回はProgaやドットインストールなどの基礎学習を終えた人におすすめの模写コーディング練習サイトを紹介しました。実際の効率的なコーディングの練習方法に関しては別記事で解説してますのでよければそちらも参考にしてみてください。