【難易度別】初心者にもオススメな模写コーディングにうってつけな無料サイト9選

模写コーディングをこれから始めようと思うのですが、おすすめのサイトってありますか？
初心者から脱初心者まで網羅して、難易度別に模写用のサイトを教えて欲しいです！

こんな悩みに答える記事になっています。

HTML・CSSの基礎が終わったら模写コーデイング！というのは、かなりオススメされている手順です。

しかし、世界には数え切れないほどのWebサイトがあり、模写コーディングをするには難しすぎるものまで含まれています。

そこでこの記事では、初心者・中級者・上級者の3段階に分けておすすめの模写コーディングサイトを紹介していきます。

最初は初級 or 中級に取り組み、最後に上級の模写に取り組めばHTML,CSSの学習は卒業です。

上級の模写も終えた辺りで簡単なWeb制作の案件は受注できるレベルになるかと思います。

この記事はこんな人におすすめ

HTML・CSSの基礎学習を終えて、実践的な練習がしたい人
模写コーディングをしたいが、良いサイトが見つからない人
効率よくHTML・CSSの学習を進めていきたい人

なお、模写コーディングのための準備編として、『【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】』も参考にしつつ進めてみてください！

maipyon

公開しない場合は自由ですが、公開する場合は著作権などに十分注意して、練習として取り組んでください！

この記事の目次

不安な人はここから！初心者向け模写コーディング
- クナイプのLP
- デモサイトWAKABA
ちょっと難しいかも！中級者向けの模写コーディング
これができれば最高！上級者向け模写コーディング
ある程度学べたら、オリジナルのサイトも作って公開してみよう

不安な人はここから！初心者向け模写コーディング

初心者向けの模写コーディングでは、以下の2サイトを紹介していきます。

クナイプのLP
当サイトぴょんなことから for programmerにて配布中のデモサイト

対象者としては、HTMLとCSSの基礎を終えた人ですね。

例えば私はProgateで基礎を学習したのですが、道場コースにはまだ挑戦していない or 道場コースを1周したくらいの人が対象者になるかと思います。

上記どちらのコーディングができるようになれば結構なアドバンテージがあるのでたとえスクールに通っても挫折率はかなり少ないでしょう。

オススメスクールについては『【未経験者向け】プログラミングスクールの10社比較ランキング【転職、副業、就職の3つの目的別】』の記事にて紹介しています。

クナイプのLP

まず最初に紹介するのはクナイプのLP(ランディングページ)ですね。

参考クナイプバスソルトユズ&ジンジャーの香り

ランディングページって？

ランディングページとは、簡単に言えば「商品を売るためのページ」ですね。

その商品だけに特化したページでして、シンプルなものも多いです。
「売るためのデザイン」についての勉強にもなりますね。

こちら、素材を入手するのが多少大変(右クリック→名前をつけて画像を保存)なのですが、ページのほとんどが画像でできていまして、難易度も低いです。

ボタンや背景も画像で表現していますし、ボーダーさえも画像で表現。

一応PC/スマホで切り替わるようにレスポンシブなサイトなのですが変化も少なく取り組みやすいですね。

要素の配置など、定番の技術をサクッと学べる初心者向けのサイトです！

デモサイトWAKABA

こちらは初心者向けに私が作成した架空のLP(ランディングページ)です。

参考 WAKABA(練習用デモサイト)

とにかく簡単にデザインできるように、最低限必要な要素のみを詰め込みました。

トマトの画像の部分がレスポンシブに対応しており、2列→1列への変化を学べるので、レスポンシブの基礎を学習するならうってつけかと思います。

このデモサイトはXDでのデザインカンプも配布しており、『模写コーディング』としても『デザインカンプからのコーディング』としても活用できます。

maipyonのnoteにて完全無料で配布しておりますので、是非ご確認ください。

maipyon

別デザインで初級編もありますので、読んでみて下さい！

ちょっと難しいかも！中級者向けの模写コーディング

続いて中級者向けの模写コーディングを紹介していきます。

ここからスタートしてもいいのではないかと思います！

時間はかなりかかってしまいますが、練習量は多くなります。

ぴょんなことから for programmerのポートフォリオデモサイト

当サイトで公開中のポートフォリオデモサイトです。

maipyon

当サイトのもので申し訳ないのですが・・・無料公開中ですし、結構わかりやすい構造になっているので紹介します。

レスポンシブデザインとなっているので、中級編としてもぴったりかと。

参考ぴょんなことから for programmerのポートフォリオデモサイト

Bootstrapを使用しているので、Bootstrapでのコーディングに慣れたいという人にはピッタリかなと思います！

Bootstrapとは

レスポンシブデザインに対応したフロントエンドのフレームワーク。

例えば以下のようなコードを書くだけで2:8:2のレスポンシブなデザインができます。

<div class="row">
  <div class="col-sm-2">左列</div>
  <div class="col-sm-8">中央</div>
  <div class="col-sm-2">右列</div>
</div>

いちいちCSSを書かずとも実装できるのが最高。

フレームワークの中でもダントツで使われているもので、コーディングをスピーディにできるものなので是非模写コーディングしつつ学習するのがオススメです。

「フレームワークってなんやねん」というのを体験することで(今後使うか使わないかは置いといて)理解も深まります。

なお、ソースを『ポートフォリオサイトテンプレート(シンプル)無料配布とカスタム方法』の記事で無料DLできるなので、答えつきというのも大きな利点。

Javascriptについては難しい部分があるのでDLするなどして、HTMLとCSSを自力でやってみてください。

maipyon

模写ついでにポートフォリオサイトトップページにしちゃうのもOKです！
公開の際はデザインをできるだけ変更した状態での公開をオススメします。(バレるので)

以下の記事でポートフォリオサイトを実際に公開する手順について分かりやすく解説しています！

参考ポートフォリオを公開するならConoHa WINGで30分で完了！【HTMLやWordPressも】

PAS-POL(コーポレート型)

こちらは企業サイトとなっていまして、ホバーしたときの挙動なども学習できます。

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

一点、ハンバーガーメニューにはJavascriptが用いられています。

しかし、nav要素のclass名を変更しているだけでして、jQueryをちょろっと学べば実装可能です。

maipyon

画像が自動で変わるのもJavascriptでの実装ですが、練習の際は固定で良いかと思います！

難しくないので、挑戦してみてください。

コーディング内容としては非常にシンプルでして、中級者向けの中でも簡単な方ですね。

デイトラの無料の模写コーディング練習(LP型)

オンラインWebスクールのデイトラの「Web制作コース」での課題が無料で紹介されていまして、こちらも取り組みやすいです。

参考【無料練習素材】あなたはできる？模写コーディング腕試し！

素材も上記リンク先からDLできまして、とっつきやすいのもポイントですね。

紹介されているページのキャプチャに沿ってコーディングしていく形となるので、真っ白な状態から構成していく力が求められます。

PCでの見た目とスマホでの見た目2種類が用意されていまして、レスポンシブになるように構成していく必要があります。

maipyon

サイトを参考にすると、デベロッパーツールで答えを見れちゃうのですが、こちらはキャプチャなので不可能。
0からのコーディング力が試されるので、かなりの学習になりますね！

まさに実践形式になり、オススメです。

なお、デイトラの「Web制作コース」では、129,800円(税込)で上記のような課題に取り組みつつ稼げる人材を目指せるスクールになっています。

詳しくは『デイトラの評判は悪い？コスパ最強のスクール間違いなし【運営者インタビュー】』の記事にて紹介しています。

スクールに行こうか迷っているという人は候補の1つに入るスクールかと思いますので、記事を読んで判断してみてください。

くりのすけさんのnote－デザインカンプからのコーディング練習(LP型)

完全無料でデザインカンプからのコーディング練習ができる内容になっています。

参考【完全無料-回答コード有り-】デザインカンプからのコーディング練習【超初級編】

ここから多少変更して自分なりのサイトに仕上げるのも良いでしょうし、素材も揃っているので取り組みやすいですね。

そしてなにより、デザインカンプからの模写コーディング(AdobeXDを使用)なので、より実務に近い環境で学ぶことが可能です。

maipyon

Web制作をしていきたい方は、ここでAdobeXDを使う練習をするのもいい機会になると思います！

デザインカンプからのコーディングをする際は・・・

デザインカンプからのコーディングと書いてあるものは、どれもAdobeXDが必須となります。

まずAdobeXDをダウンロードする必要がありますので、AdobeXDの公式サイトからDLしておきましょう。

AdobeXDでの模写を進める際に知っておきたいポイント

画像を取得する際は、画像を選択した状態でCtrl+E
要素を選択すると、文字の大きさや色、要素の幅など各種値を取得できる。
要素を選択した状態でAltを押しながら他の要素にホバーすると、余白の幅を取得できる。

ざっくりと上記の内容だけ覚えておけば進められるハズ。

デザインカンプからのコーディングは当然サイトを見ながら模写するのとは全然違った知識も必要となるので、中級者向けとしてみました。

参考Adobe XDからのコーディング方法を具体的に解説【無料インストールから】

これができれば最高！上級者向け模写コーディング

中級者向けの模写コーディングができた人は、大抵のコーディングはできるようになっているかと思います。

上級者向けの模写コーディングでは、さらに難しい内容であったり、コーディング量が多いものを紹介していきます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

模写コーディングするならうってつけの本ですね。

参考 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

内容的には中級レベルなのですが、1冊を通すと量が膨大になるので上級と中級の架け橋というレベルでしょうか。

maipyon

入門書、という立ち位置の本ではありますが、一旦簡単な模写コーディングをやったあとで挑戦した方がよさそうなレベル感です。
レビューでも「始めて間もない時に読んでもわからない」という声もありました。

最終的に、以下の画像のようなページを作ることができます。

解説アリで学習できるので、模写コーディングで苦手意識を持っている人にとってもよさそうです。

初級編のコーディング終わりに、こちらの本の内容を学んで上級編への架け橋とするのが良いかと思います！

クリスタさんの課題(中規模サイト)

デザインカンプから、中規模サイトのコーディング練習ができます。

参考【コーディング課題】XDからコーディングをしよう【上級編】

クリスタさんが作成された未経験からWebデザイナーを目指している方向けのコーディング課題です。

こちら、ポートフォリオの掲載も許可されています！(詳しくはクリスタさんのサイトをご確認ください)

解答・解説もついていまして、不安な人でも安心して取り組める形式になっています。

難しいポイントはいくつかあるのですが、このレベルのコーディングができるようになれば簡単なコーディング案件くらいであれば受注できるレベルと判断してもいいでしょう！

なお、WordPress型のサイトという事もあるので、ここまで出来たらWordPressでのデザイン作成を学習するステップに入っても良いと思います。

参考WordPressのテーマ自作は難しい？独学で学習した方法【ステップ別】

ISARA(LP型)

バンコクで開催されているノマドエンジニア育成講座のISARAのLPです。

参考 ISARA

圧倒的なボリュームがあり、かなりの学習量になります。

模写サイトは探すのでさえ大変なのですが、ISARAであれば1ページで数サイト分の学習に匹敵するのではないかと・・・。

また、ルールに従えばポートフォリオとしての掲載も許可されています。

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