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

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

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

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

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

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

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

まずは初級編です。

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

初級編①：Progate

Progate公式サイト

ここで、

またProgate？

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

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

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

Progate公式サイト

初級編②：クナイプ

クナイプ公式サイト

ぱっと見はちょっと難しそうに見えますが、ほとんど画像なので難しくありません。

これは画像が多いので、画像の配置の練習になるかと思います。

クナイプ公式サイト

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

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

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

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

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

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

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

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

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

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

続いては中級編です。

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

中級編①：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公式サイト

まとめ

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

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

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

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

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

2023年12月31日まで！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら