【レベル別】模写コーディングにおすすめのサイト6選【初心者向け】

模写コーディングのサイトってどうやって選べばいいの？

Web制作の勉強はProgateが終わった後にサイトの模写をするのがおすすめですが、どのサイトをやればいいのか分からないと思います。

自分も模写するサイト選びでめちゃくちゃ苦労した記憶があります。

そこで今回は模写におすすめのサイトをレベル別にご紹介していきます。

また、模写コーディングの具体的なやり方については以下の記事を参照下さい。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

模写におすすめのサイト【初級編】

まずは初級編です。

初級編とは言えめちゃくちゃ苦戦すると思うので、時間かかっても全然大丈夫です。

初級編①：Progate

Progate公式サイト

ここで、

またProgate？

と思うかも知れませんが、Progateのトップページは模写におすすめです。

ボタンのhoverアニメーションは見ただけでは分からないと思うので、そこだけは検証ツールを見て実装してもいいでしょう。

それでhoverアニメーションを実装できれば楽しいと感じるかと思います。

Progate公式サイト

初級編②：デイトラ（note：無料練習素材）

これはWebスキル特化型オンラインスクール『デイトラ』がnoteで無料で配布している『模写コーディング素材・課題の一部』となります。

これは公開されているサイトではなく、ファイルをダウンロードしてその画像を見てコーディングしていきます（デザインカンプではありません）

なので検証ツールで調べることは出来ません。

検証ツールで調べられないので、要素の幅やフォント・色などはアバウトで大丈夫です。

内容的には難しいところはなく、パソコンでは横並びにしてる箇所をスマホでは縦並びにするくらいだと思います。

【無料練習素材】あなたはできる？模写コーディング腕試し！｜株式会社デイトラ｜note

また、デイトラはWeb制作を学ぶのであれば最適なオンラインスクールなので、独学が厳しいと感じたらこちらの記事を参照下さい。

いろいろとコースがありますが、コーディング・Web制作ならWeb制作コースがおすすめです。

また、デイトラのWeb制作コースは10万円台と格安ですが、

10万円台でも厳しい・・・

という人は、無料で30日間Web制作を学べるZeroPlus Gateがおすすめです。

模写におすすめのサイト【中級編】

続いては中級編です。

初級編よりかなり難しく感じるかも知れませんが、ググればなんとかやりきれるかと思います。

中級編①：FLOWER

FLOWER公式サイト

これは初級編よりちょっとボリュームが多いですが、hoverアニメーションなどもないのでコーディングの体力を付けるつもりでやってみましょう。

スマホでの縦並びや横スクロールがちょっと難しいかも知れません。

FLOWER公式サイト

中級編②：PAS-POL

PAS-POL公式サイト

これはhoverアニメーションがちょっと多く、FVのフェードスライダーで苦戦するかと思います。

スライダーの記事は当ブログにたくさんあるので、参考にしてみて下さい。

あとは画面幅を狭くしたときのハンバーガーメニューがあり、これは見ただけでは実装できないと思うのでググったり検証ツールを駆使して実装してみましょう。

PAS-POL公式サイト

中級編③：Xeory Extension

Xeory Extensionデモサイト

これはWordPress無料テーマのデモサイトになります。

デザインはシンプルですが、Googleマップの埋め込み・三角形・ページトップボタンなど、実務でよくある実装が多いので実践的な内容になります。

Xeory Extensionデモサイト

模写におすすめのサイト【上級編】

最後に上級編ですが、これが出来れば模写コーディングは卒業です。

上級編：iSara

iSara公式サイト

これはかなり昔から有名なサイトですが、とにかくボリュームが多いです。

私も2回ギブアップして3回目でクリアしましたが、実務ではこれくらい普通なのでこれがクリア出来れば模写は卒業です。

擬似要素を使う箇所が多く、この時点ではかなりの苦戦を強いられることになると思います。

またiSaraの模写は条件付きで実績としてポートフォリオなどに載せていいと代表のケースケさんが許可して下さっています。

せっかく多くの方が https://t.co/41tkKy1Ku7 のLPを模写してくださってるので、iSaraのLPを模写コーディングした場合、ご自身の制作ポートフォリオとして掲載することを許可しようと思います。
要は、「ご自身の制作実績として公開してOK」です。※ただし注意点があるので、添付画像をごらんください pic.twitter.com/kxamsjGTHK

— ケースケ🇹🇭バンコク (@Keisukexlife) December 1, 2018

ただし他のサイトは基本的に実績NGだと思っておきましょう。

iSara公式サイト

まとめ

今回は模写コーディングにおすすめのサイトをご紹介してきました。

ただし模写コーディングは現在やらなくていいという意見も多く、かわりにデザインカンプからのコーディングが推奨されています（私も同意）

こちらの記事でデザインカンプを配布しているサイトをご紹介しているので、模写が終わった人・模写をやっていない人も参考になると思います。

そして模写を卒業したら以下の記事でご紹介している教材も検討して良いかと思います。

教材を買うというのはお金と引き換えにワープするようなものなので、ここで一気に稼げるようになるまで駆け上りましょう！

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！