Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

この記事がおすすめな人

  • Progateが終わったから模写コーディングをしたい
  • 模写するサイトの選び方が分からない
  • 模写におすすめのサイトを教えて欲しい

注意ポイント

多くのブログで『模写サイト』と『デザインカンプ教材』がごっちゃになっていますが、ここでは『模写』におすすめのサイトのみご紹介しています。

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

あわせて読みたい
【初心者向け】今は不要?模写コーディングのやり方・手順とコツを徹底解説
【初心者向け】今は不要?模写コーディングのやり方・手順とコツを徹底解説

続きを見る

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

コーディングの時給アップにはこちら!

累計1100部突破!レビュー570件!

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

まずは初級編です。

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

 

初級編①:Progate

Progate公式サイト

Progate公式サイト

ここで、

またProgate?

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

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

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

ポイント

・固定ヘッダー
・hoverアニメーション
・カード型の横並び
・ulタグ、liタグ使用

Progate公式サイト

 

初級編②:クナイプ

クナイプ公式サイト

クナイプ公式サイト

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

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

ポイント

・背景画像の配置
・hoverアニメーション
・擬似要素でアイコン表示

クナイプ公式サイト

 

初級編③:デイトラ(note:無料練習素材)

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

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

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

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

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

ポイント

・横並び(スマホでは縦並び)
・検証ツールの利用不可(公開されてるサイトではないので)

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

 

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

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

あわせて読みたい
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】

続きを見る


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

続いては中級編です。

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

 

中級編①:FLOWER

FLOWER公式サイト

FLOWER公式サイト

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

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

ポイント

・背景画像の配置
・交互の配置
・スマホ時の縦並びと横スクロール

Instagramの埋め込みはただの画像でOKです

FLOWER公式サイト

 

中級編②:PAS-POL

PAS-POL公式サイト

PAS-POL公式サイト

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

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

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

ポイント

・FVのフェードスライダー(スライドショー)
・hoverアニメーション
・カード型の横並び
・ハンバーガーメニュー

PAS-POL公式サイト

 

中級編③:Xeory Extension

Xeory Extensionデモサイト

Xeory Extensionデモサイト

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

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

ポイント

・ハンバーガーメニュー
・三角形
・ページトップボタン
・会社情報の表、Googleマップの埋め込み
・お問い合わせフォーム(見た目だけでOK)

Xeory Extensionデモサイト


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

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

 

上級編:iSara

iSara公式サイト

iSara公式サイト

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

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

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

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

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

ポイント

・固定ヘッダー
・背景画像の配置
・擬似要素多様
・ページトップボタン
・アコーディオンメニュー

iSara公式サイト

まとめ

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

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

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

あわせて読みたい
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】
コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり!】

続きを見る

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

あわせて読みたい
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介!
【独学・未経験者向け】Web制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介!

続きを見る

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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

-Web制作
-