- HTML/CSSの学習をするのに「模写コーディング」がオススメらしいけど、何のサイトを模写すればいいの？
- 模写コーディングってどうやるの？？
- おすすめの模写サイトをレベル別に教えて欲しい！
今回はこのようなお悩みを解決します。
以前の記事では初心者は模写コーディングするのが最も実践的なスキルがつくことをお話ししました。
↓YouTubeで模写コーディングのやり方や使えるツールを解説してます！↓
世界には数え切れないほどのWebサイトがあり、どれを模写コーディングすればいいか迷っている方も多いかと思います。
そこで今回の記事では、レベル別（初級・中級・上級）に模写コーディングするべきサイトをご紹介します。
HTML/CSS初心者の方はこれからご紹介する初級〜上級の全てのサイトを模写することができれば、HTML,CSSの学習は卒業して簡単なWeb制作の案件は受注できるレベルになるかと思います。
本記事では模写コーディングサイトの紹介以外にも、実務で使うツールの紹介や、様々なテクニックの紹介もしているので、模写学習しながら沢山のスキルが身につきます！
✔︎こんな人におすすめ
- 模写コーディングするサイトを探している方
- 効率のいいHTML,CSSの学習方法を探している方
- Web系のフリーランスエンジニアを目指している方
模写コーディングのやり方をまだご存知ない方は、下記の記事からご覧ください！
▶︎【初心者向け】模写コーディングがオススメな理由とやり方を解説
※模写コーディングする場合は著作権に注意し、あくまで練習用としてください。
まずはこれから！模写コーディング 初級レベル
まず初級レベルに挑戦する前に自分が模写コードができるレベルに達しているか確認しましょう！
ある程度学習が進んでしないと必ず挫折するので、目安としてProgateのHTML,CSSを全て受講済みの方は初級レベルの模写コーディングにチャレンジしてみましょう。
Progateは「プログラミング学習の入り口」とも言えるサービスで、スライド学習と実戦学習を通じて、効率よくプログラミングの基礎を学べるサイトです！
→ 【実体験】Progate（プロゲート）でどこまでスキルが身につくの？【HTML,CSS編】
✔︎模写コーディングにチャレンジできるレベル
- ProgateのHTML,CSSコースを全て受講済みの方
- HTML/CSSの基本的な書き方が分かる
- エディタを使ってコーディングができる
エディタって何？
何のエディタを使えばいいの？
僕がオススメするエディタはVSコードがオススメです！
エディタ選びに迷っている方は、オススメのエディタを厳選して3つご紹介しているので、ぜひ参考にしてください！
無料の学習教材を作りました！▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円！未経験でもOK】
【LP型】Progateの道場コース 上級編
まずファーストステップとして、Progateの学習がしっかりとできているかの確認として、「HTML & CSS 道場コース 上級編」の完成版を見ながら模写してみましょう。
おそらくProgateを終わったばかりの方はかなり難しいかと思います。
ポイントとしては
- ナビゲーションの固定
- 要素の横並びの配置
- hover時のカラー変更
このような、今後Web制作で必ず使う技術の基礎を学ぶことができるので、その点を重点的に理解を深めましょう。
Progateでは簡単に作れてたのに、いざ自分のエディタで作るとなると、とっても難しい〜〜！！
【LP型】デイトラの無料練習素材
次に、デイトラの無料練習素材を使って模写コーディングをしてみましょう！
こちらは、練習用の画像素材をダウンロードして模写コーディングをするので、より実践的な練習ができます。
また、PC版とスマホ版のコーディングをする必要があるので、CSSの構造をしっかりと考えてコーディングする必要があります。
コーディングの手順と、見本のソースコードもデイトラにて公開されているそうなので、答え合わせもできますね！
✔︎この模写から学べる点
- PC版とスマホ版のコーディング
- 画像素材を使ってのコーディング
- レスポンシブデザイン
【コーポレート型】はにわまんさん
こちらは、はにわまんさんの作成されたサンプルをお借りしました！
ナビゲーションの横並びの配置、サイドバー、メインの配置がとても難しく、いきなりコーディングしてもつまずくと思うので、始める前にHTMLの構造を予め紙などに書き出してみると良いですね！
シンプルそうに見えますが、要素の配置がとても難しくfloatやflexboxを使って頑張ってみましょう。
✔︎この模写から学べる点
- ナビゲーションの横並び設置
- メニュー、サイドバー、メインの要素の配置
- Flexboxの使い方
- borderの使い方
✔︎挫折しそうならスクールに通うのもアリ
プログラミング学習の設計は、プロに任せた方が「最速最短」で走り抜けることができます。
独学だとつい無駄なことや、脱線した学習をしてしまいがちなので、TechAcademy のような比較的安いスクールでもいいので、プロに学習のサポートをしてもらった方が効率よく学習できます。
TechAcademyは１週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。
かなり難いぞ！模写コーディング 中級レベル
このレベルをクリアできれば脱初心者かなというレベルです。
初級レベルをクリア出来た方なら、時間をかければ必ず模写できるレベルになっています。
このレベルではレスポンシブデザイン（ブレイクポイント1つ）、熱意がある方はjQueryの勉強もしつつ簡単なアニメーションも実装してみましょう。
中級編からは、よりクオリティーの高いサイトを模写していくので、BootstrapやGoogleChromeの検証ツールを使って効率よくコーディングしていく必要があります。
GoogleChromeの検証ツールは実務でも頻繁使用するWeb制作には欠かせない、便利なツールなので、中級編のコーディングを通じて使い方をマスターするようにしましょう！
この中級編からが、本当のスタートです！
かなり難しいですが「必ず最後まで作る！」事を意識して頑張りましょう！
【コーポレート型】建設会社のデザインカンプ
こちらは、だんさんが作成された、無料の建設会社のデザインカンプからのコーディングです。（解説記事はこちら）
非常にシンプルそうなサイトに見えますが、レスポンシブデザインも対応する必要があります。
こちらの模写コーディングは、実績としてポートフォリオに掲載OKなので非常にありがたいですね！
✔︎この模写から学べる点
- レスポンシブデザイン
- 画像素材を用いてのコーディング
- hoverの使い方
このサイト画像が沢山使われているけど、どうやって画像を取り込むの？
サイトに使われている画像を一気に保存するには、Chromeの拡張機能の「Image Downloader」を使えば一瞬で保存できます！
【コーポレート型】データマーケティング支援ツールの紹介サイト｜KROWLさん
こちらは、KROWLさんが作成された、コーディング課題です。
Webサイトデザインを作るときによく使われるXDのデザインカンプからの、コーディングなのでより実務に近い形で、模写コーディングの練習ができます！
この模写コーディングのポイントとしては、お問い合わせフォームを作る部分と、positonをうまく利用して、ボタンを配置する点です！
また、要素の配置もかなり複雑になっているので、まずはしっかりとHTML構造を意識してコーディングするようにしましょう！
この模写コーディングができれば、flexboxの使い方はマスターです！
✔︎この模写から学べる点
- XDデザインカンプからのコーディング
- positionの使い方
- flexboxのマスター
【コーポレート型】Xeory
こちらもWordpressのテーマであるXeoryを模写してみましょう。
こちらの模写の特徴として、Googlemapの挿入、facebookの埋め込みなどコーポレートサイトには欠かせない機能を学習することができます。
デザインはとてもシンプルなので、Boostrapを使えばサクッと作れると思います！
✔︎この模写から学べる点
- Googlemapの埋め込み方
- Facebookの埋め込み方
- CSSで三角形の作り方
これができれば実務レベル 模写コーディング 上級レベル
中級レベルまでクリア出来た方は動的なサイトでなければ、ほとんどのサイトは模写できるスキルは身につきます！
さて、上級レベルでは初級中級で学んだことを全て詰め込んだサイトを模写していただきます。
上級編では、クライアントに納品する気持ちとクオリティーのサイトを作りましょう！
上記の記事を参考に、なるべくピクセルパーフェクトに近い完成度を目指しましょう！
【LP型】ISARA
バンコクで開催されている、ノマドエンジニア育成講座のISARAのLP模写です。
多くのフリーランスエンジニアの方がこのLP模写をおすすめしています！
かなりボリュームのあるLPですが、このサイトを模写コーディングできれば、よく使うHTML/CSS/jQueryのスキルは習得できます！
また、ISARAの模写は条件を守れば、自分の実績としてポートフォリオに乗せてもいいので、この模写サイトを実績にWeb制作の案件を受注することもできます！
ポートフォリオって何？
フリーランスやエンジニア就職する際に、自分の実績を示すためのものです！
エンジニアはポートフォリオが無いと、仕事がもらえないので、必ず作るようにしましょう！
→ 【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】
✔︎この模写から学べる点
- 最近のLPに使用されている技術全般
- ボリュームのあるコーディング技術
【中規模サイト】クリスタさん
クリスタさんが作成された、未経験からWebデザイナーを目指している方向けのコーディング課題です。
こちらも、XDからの模写コーディング練習なので、より実務に近い環境で学ぶことができます。
さありがたいことに、こちらの模写コーディング、、、なんと、ポートフォリオに掲載できるんです！
ここまで、コーディングスキルがあれば、簡単な案件なら受注できると思うので、ぜひチャレンジしてみてください！
ブレイクポイントが3つあるのが、ポイントですね！！
ここまで模写ができれば、WordPressにチャレンジしてみるのもオススメです！
WordPressの案件は非常に単価が高いので、フリーランス志望の方はぜひ習得しましょう！
✔︎この模写から学べる点
- カルーセルの実装方法
- 高度な要素の配置
- WordPressサイトのデザインの特徴
【中規模サイト】架空のWeb制作会社のサイト
最後に、トップページを含めて８ページある、サイトの模写コーディングをしてみましょう！
ここまで来れた人は、すんなりとコーディングできると思います！
この課題は、時間を意識しながら進めるといいでしょう。
実際の案件では、自分の時給を気にしながらお仕事をするのが大事です。（なるべく早く納品して、時給単価をあげましょう！）
完成版コーディングデータも、配布してくれているので、できたら答え合わせをするとさらに学びを深めれると思います！
かなりボリューム満点のページとなっていますが、頑張って完成させましょう！
お疲れ様でした！
模写コーディングの学習が終わったら、「実際に案件を受注する」もしくは「PHPやRuby」などのWeb系のプログラミング言語にチャレンジしてみましょう！
まとめ：模写コーディングでHTML,CSSをマスター！
いかがでしたでしょうか！
どのサイトを模写すればいいか迷っている方はこの記事を参考に、どれが適切か理解できたかともいます。
まずは自分の今いるレベルを確認し、自分にあったレベルからスタートしてみてください！
模写コーディングが終わったら、Webアプリケーションの開発や、WordPressにも挑戦してエンジニアとしてできることを広げるといいでしょう！
▶︎Webアプリケーションについてはこちら！
▶︎WordPressについてはこちら！
▼合わせて読みたい！
未経験からエンジニア転職できるプログラミングスクール3つ【現役エンジニアおすすめ】
プログラミングで副業する方法と10万円稼ぐための学習まとめ
