Web制作

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

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

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

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

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

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

この記事がおすすめな人

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

注意ポイント

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

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

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

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

まずは初級編です。

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

 

初級編①:Progate

Progate公式サイト

Progate公式サイト

ここで、

またProgate?

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

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

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

ポイント

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

Progate公式サイト

 

初級編②:クナイプ

クナイプ公式サイト

クナイプ公式サイト

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

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

ポイント

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

クナイプ公式サイト

 

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

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

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

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

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

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

ポイント

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

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

 

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

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

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

続きを見る

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

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

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

あわせて読みたい
ZeroPlus Gateの口コミや評判と特徴やメリットを徹底解説【無料のプログラミングスクール】
ZeroPlus Gateの口コミや評判と特徴やメリットを徹底解説【無料のプログラミングスクール】

続きを見る


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

続いては中級編です。

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

 

中級編①: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制作で稼ぎたい人におすすめの教材をジャンル別に厳選紹介!

続きを見る

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作
-