【簡単→難しい】模写コーディングおすすめサイト4選

こんにちは、よし（@yoshi120208）です。

web制作を学習している人にとって、模写コーディングは馴染みのある言葉ですよね。

しかし、基礎学習を終えた後に、どのサイトを模写コーディングすれば良いのかわからないと悩んでいる人は多いのではないでしょうか。

今回はそんな悩みを解決するために、効率の良いサイト、順番を解説する記事を書きました。

模写コーディングはただやればいい訳ではなく、サイト選びが重要です。

サイト選びを間違えると「挫折する」可能性が非常に高まりますので、ぜひこの記事の順番通りやってほしいです。

それではいきましょう！

模写コーディングとは

模写コーディングとはProgateやドットインストールでの基礎学習が終わり、一気に実務レベルまで上げる為の学習方法です。

基礎学習も重要ですが、実際にサイトを作りながらわからない所を調べて吸収していく事で圧倒的に成長できます。

【簡単→難しい】模写コーディングおすすめサイト

模写コーディングおすすめサイト「初級編」

プロゲイト上級編

Progate 上級編

プロゲイトの上級編をクリアした人は、アプリ内で一度作成しましたよね。

このレベルは簡単だよと思う人もいると思いますが、実際に0からコーディングするのは簡単な事ではありません。

まずは基礎学習→模写へ移る準備運動として、自分のパソコンで一から模写コーディングをしてみましょう。

などの超基礎を実際に使用しながら身につけていきましょう！

模写コーディングおすすめサイト「中級編」

FLOWER

FLOWER 　かわいいが届くお花便

FLOWERというサービスアプリのダウンロードに誘導するLPサイトです。

プロゲイト上級編を0から作成できたら、本格的に模写コーディングに入っていきます。

自信がある人はいきなり難易度の高いサイトや、後ほど紹介する「iSara」の模写に挑戦してもいいと思いますが、挫折の危険性があります。

難しいサイトで挫折するより、まずは達成感を得る事が大切なので、こちらのサイトがおすすめです。

プロゲイトなどの基礎学習を終え、模写コーディング初心者にちょうど良いレベルのサイトです。

こちらのサイトはデザイン性も高く、完成が近づくにつれかなり達成感が得られます。

PAS-POL

PAS-POL　旅のモノづくりブランド

次に模写コーディングしておきたいサイトは、こちらのPAS-POLというサイトです。

こちらも構造としては比較的簡単で、ボリュームもそれほど多くありません。

しかし、実務でもかなり出てくる技術を一気に学べるので、ぜひやっておきたいですね。

トップビューの下の丸みを帯びている部分は少し特徴的ですが、できれば調べながら実装しましょう！

レスポンシブまでしっかり実装しましょう。

この時点で実務に通用する技術はついています。

最後の模写コーディングは実務だと思って挑戦しましょう！

模写コーディングおすすめサイト「上級編」

イサラ

iSara

模写コーディング界で王道となっている「iSara」のLPです。

多くのweb制作系フリーランスの方が模写をおすすめしているLPなので、是非挑戦してみましょう。

レベル感やボリュームがこれまでのサイトとは異なり、かなり上級者向けです。

しかし、ここまでのサイトをしっかり模写できていれば、技術的には問題はないかとお思います。

この段階で挫折してします人はかなり多いですが、逆にここをクリアすればコーディング案件はこなせるレベルと言えるでしょう。

模写コーディングが難しいと感じたら

残念な事ですが、web制作の学習は挫折率がめちゃくちゃ高いです。

特に、あと少しで結果を出せる模写コーディングの段階で挫折する人は多いみたいです。

模写コーディングで難しすぎると感じたら、一旦基礎学習に戻るのも全然ありです。

焦らずにいきましょう。

模写コーディングが終わったら

模写コーディングが無事終わったら、実案件をこなす技術は身についているはずです！おめでとうございます。

しかし、いきなり営業しても案件を取ることは簡単ではありません。

他の初学者と差別化しながら、効率よく案件獲得を目指しましょう！

→模写コーディングが終わったら、自作サイトを作ろう！　

それでは！