HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【レベル別】模写コーディングにおすすめのサイトまとめ9選

約13分
【レベル別】模写コーディングにおすすめのサイトまとめ9選
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • HTML/CSSの学習をするのに「模写コーディング」がオススメらしいけど、何のサイトを模写すればいいの?
  • 模写コーディングってどうやるの??
  • おすすめの模写サイトをレベル別に教えて欲しい!

今回はこのようなお悩みを解決します。

以前の記事では初心者は模写コーディングするのが最も実践的なスキルがつくことをお話ししました。

↓YouTubeで模写コーディングのやり方や使えるツールを解説してます!↓

世界には数え切れないほどのWebサイトがあり、どれを模写コーディングすればいいか迷っている方も多いかと思います。

そこで今回の記事では、レベル別(初級・中級・上級)に模写コーディングするべきサイトをご紹介します。

HTML/CSS初心者の方はこれからご紹介する初級〜上級の全てのサイトを模写することができれば、HTML,CSSの学習は卒業して簡単なWeb制作の案件は受注できるレベルになるかと思います。

HikoPro
HikoPro

本記事では模写コーディングサイトの紹介以外にも、実務で使うツールの紹介や、様々なテクニックの紹介もしているので、模写学習しながら沢山のスキルが身につきます!

✔︎こんな人におすすめ

  • 模写コーディングするサイトを探している方
  • 効率のいいHTML,CSSの学習方法を探している方
  • Web系のフリーランスエンジニアを目指している方

模写コーディングのやり方をまだご存知ない方は、下記の記事からご覧ください!

▶︎【初心者向け】模写コーディングがオススメな理由とやり方を解説

※模写コーディングする場合は著作権に注意し、あくまで練習用としてください。

まずはこれから!模写コーディング 初級レベル

まず初級レベルに挑戦する前に自分が模写コードができるレベルに達しているか確認しましょう!

ある程度学習が進んでしないと必ず挫折するので、目安としてProgateのHTML,CSSを全て受講済みの方は初級レベルの模写コーディングにチャレンジしてみましょう。

Progateは「プログラミング学習の入り口」とも言えるサービスで、スライド学習と実戦学習を通じて、効率よくプログラミングの基礎を学べるサイトです!

【実体験】Progate(プロゲート)でどこまでスキルが身につくの?【HTML,CSS編】

✔︎模写コーディングにチャレンジできるレベル

  • ProgateのHTML,CSSコースを全て受講済みの方
  • HTML/CSSの基本的な書き方が分かる
  • エディタを使ってコーディングができる

ネコ君
ネコ君

エディタって何?

何のエディタを使えばいいの?

HikoPro
HikoPro

僕がオススメするエディタはVSコードがオススメです!

エディタ選びに迷っている方は、オススメのエディタを厳選して3つご紹介しているので、ぜひ参考にしてください!

エンジニアの僕がオススメする最強のエディタ3つ【初心者向け】

無料の学習教材を作りました!▶︎【独学でWeb制作】月5万稼ぐための学習マップ【0円!未経験でもOK】

【LP型】Progateの道場コース 上級編

出典:Progate

まずファーストステップとして、Progateの学習がしっかりとできているかの確認として、「HTML & CSS 道場コース 上級編」の完成版を見ながら模写してみましょう。

おそらくProgateを終わったばかりの方はかなり難しいかと思います。

ポイントとしては

  • ナビゲーションの固定
  • 要素の横並びの配置
  • hover時のカラー変更

このような、今後Web制作で必ず使う技術の基礎を学ぶことができるので、その点を重点的に理解を深めましょう。

ネコ君
ネコ君

Progateでは簡単に作れてたのに、いざ自分のエディタで作るとなると、とっても難しい〜〜!!

【LP型】デイトラの無料練習素材

次に、デイトラの無料練習素材を使って模写コーディングをしてみましょう!

こちらは、練習用の画像素材をダウンロードして模写コーディングをするので、より実践的な練習ができます。

また、PC版とスマホ版のコーディングをする必要があるので、CSSの構造をしっかりと考えてコーディングする必要があります。

コーディングの手順と、見本のソースコードもデイトラにて公開されているそうなので、答え合わせもできますね!

✔︎この模写から学べる点

  • PC版とスマホ版のコーディング
  • 画像素材を使ってのコーディング
  • レスポンシブデザイン

【コーポレート型】はにわまんさん

こちらは、はにわまんさんの作成されたサンプルをお借りしました!

ナビゲーションの横並びの配置、サイドバー、メインの配置がとても難しく、いきなりコーディングしてもつまずくと思うので、始める前にHTMLの構造を予め紙などに書き出してみると良いですね!

シンプルそうに見えますが、要素の配置がとても難しくfloatやflexboxを使って頑張ってみましょう。

✔︎この模写から学べる点

  • ナビゲーションの横並び設置
  • メニュー、サイドバー、メインの要素の配置
  • Flexboxの使い方
  • borderの使い方

✔︎挫折しそうならスクールに通うのもアリ

プログラミング学習の設計は、プロに任せた方が「最速最短」で走り抜けることができます。

独学だとつい無駄なことや、脱線した学習をしてしまいがちなので、TechAcademy のような比較的安いスクールでもいいので、プロに学習のサポートをしてもらった方が効率よく学習できます。

TechAcademyは1週間の無料体験があるので、これを利用して自分の学習計画を見直してみるのもありですね。

▶︎ TechAcademyの公式サイト

かなり難いぞ!模写コーディング 中級レベル

このレベルをクリアできれば脱初心者かなというレベルです。

初級レベルをクリア出来た方なら、時間をかければ必ず模写できるレベルになっています。

このレベルではレスポンシブデザイン(ブレイクポイント1つ)、熱意がある方はjQueryの勉強もしつつ簡単なアニメーションも実装してみましょう。

中級編からは、よりクオリティーの高いサイトを模写していくので、BootstrapGoogleChromeの検証ツールを使って効率よくコーディングしていく必要があります。

GoogleChromeの検証ツールは実務でも頻繁使用するWeb制作には欠かせない、便利なツールなので、中級編のコーディングを通じて使い方をマスターするようにしましょう!

HikoPro
HikoPro

この中級編からが、本当のスタートです!

かなり難しいですが「必ず最後まで作る!」事を意識して頑張りましょう!

【コーポレート型】建設会社のデザインカンプ

こちらは、だんさんが作成された、無料の建設会社のデザインカンプからのコーディングです。(解説記事はこちら

非常にシンプルそうなサイトに見えますが、レスポンシブデザインも対応する必要があります。

こちらの模写コーディングは、実績としてポートフォリオに掲載OKなので非常にありがたいですね!

✔︎この模写から学べる点

  • レスポンシブデザイン
  • 画像素材を用いてのコーディング
  • hoverの使い方
ネコ君
ネコ君

このサイト画像が沢山使われているけど、どうやって画像を取り込むの?

HikoPro
HikoPro

サイトに使われている画像を一気に保存するには、Chromeの拡張機能の「Image Downloader」を使えば一瞬で保存できます!

【コーポレート型】データマーケティング支援ツールの紹介サイト|KROWLさん

こちらは、KROWLさんが作成された、コーディング課題です。

Webサイトデザインを作るときによく使われるXDのデザインカンプからの、コーディングなのでより実務に近い形で、模写コーディングの練習ができます!

この模写コーディングのポイントとしては、お問い合わせフォームを作る部分と、positonをうまく利用して、ボタンを配置する点です!

また、要素の配置もかなり複雑になっているので、まずはしっかりとHTML構造を意識してコーディングするようにしましょう!

この模写コーディングができれば、flexboxの使い方はマスターです!

✔︎この模写から学べる点

  • XDデザインカンプからのコーディング
  • positionの使い方
  • flexboxのマスター

【コーポレート型】Xeory


こちらもWordpressのテーマであるXeoryを模写してみましょう。

こちらの模写の特徴として、Googlemapの挿入、facebookの埋め込みなどコーポレートサイトには欠かせない機能を学習することができます。

デザインはとてもシンプルなので、Boostrapを使えばサクッと作れると思います!

✔︎この模写から学べる点

  • Googlemapの埋め込み方
  • Facebookの埋め込み方
  • CSSで三角形の作り方

これができれば実務レベル 模写コーディング 上級レベル

中級レベルまでクリア出来た方は動的なサイトでなければ、ほとんどのサイトは模写できるスキルは身につきます!

さて、上級レベルでは初級中級で学んだことを全て詰め込んだサイトを模写していただきます。

HikoPro
HikoPro

上級編では、クライアントに納品する気持ちとクオリティーのサイトを作りましょう!

上記の記事を参考に、なるべくピクセルパーフェクトに近い完成度を目指しましょう!

【LP型】ISARA

出典:https://isara.life

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

多くのフリーランスエンジニアの方がこのLP模写をおすすめしています!

かなりボリュームのあるLPですが、このサイトを模写コーディングできれば、よく使うHTML/CSS/jQueryのスキルは習得できます!

また、ISARAの模写は条件を守れば、自分の実績としてポートフォリオに乗せてもいいので、この模写サイトを実績にWeb制作の案件を受注することもできます!

ネコ君
ネコ君

ポートフォリオって何?

HikoPro
HikoPro

フリーランスやエンジニア就職する際に、自分の実績を示すためのものです!

エンジニアはポートフォリオが無いと、仕事がもらえないので、必ず作るようにしましょう!

僕がISARAの模写後に作ったポートフォリオ

フリーランスとして活動する際のポートフォリオ

【現役エンジニアが教える】ポートフォリオの作り方【プログラミング初心者でも簡単】

✔︎この模写から学べる点

  • 最近のLPに使用されている技術全般
  • ボリュームのあるコーディング技術

【中規模サイト】クリスタさん

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

こちらも、XDからの模写コーディング練習なので、より実務に近い環境で学ぶことができます。

さありがたいことに、こちらの模写コーディング、、、なんと、ポートフォリオに掲載できるんです!

ここまで、コーディングスキルがあれば、簡単な案件なら受注できると思うので、ぜひチャレンジしてみてください!

ブレイクポイントが3つあるのが、ポイントですね!!

HikoPro
HikoPro

ここまで模写ができれば、WordPressにチャレンジしてみるのもオススメです!

WordPressの案件は非常に単価が高いので、フリーランス志望の方はぜひ習得しましょう!

WordPressで10万円の案件を受注できるまでの学習全行程まとめ

【初心者向け】WordPressでブログの作り方全行程まとめ【サーバー・ドメイン・設定など】

✔︎この模写から学べる点

  • カルーセルの実装方法
  • 高度な要素の配置
  • WordPressサイトのデザインの特徴

【中規模サイト】架空のWeb制作会社のサイト

最後に、トップページを含めて8ページある、サイトの模写コーディングをしてみましょう!

ここまで来れた人は、すんなりとコーディングできると思います!

この課題は、時間を意識しながら進めるといいでしょう。

実際の案件では、自分の時給を気にしながらお仕事をするのが大事です。(なるべく早く納品して、時給単価をあげましょう!)

完成版コーディングデータも、配布してくれているので、できたら答え合わせをするとさらに学びを深めれると思います!

かなりボリューム満点のページとなっていますが、頑張って完成させましょう!

HikoPro
HikoPro

お疲れ様でした!

模写コーディングの学習が終わったら、「実際に案件を受注する」もしくは「PHPやRuby」などのWeb系のプログラミング言語にチャレンジしてみましょう!

まとめ:模写コーディングでHTML,CSSをマスター!

いかがでしたでしょうか!

どのサイトを模写すればいいか迷っている方はこの記事を参考に、どれが適切か理解できたかともいます。

まずは自分の今いるレベルを確認し、自分にあったレベルからスタートしてみてください!

模写コーディングが終わったら、Webアプリケーションの開発や、WordPressにも挑戦してエンジニアとしてできることを広げるといいでしょう!

▶︎Webアプリケーションについてはこちら!
▶︎WordPressについてはこちら!

HikoPro

最後までご覧いただきありがとうございました!

YouTubeTwitterInstagramやってますのでぜひフォローお願いします!!

▼合わせて読みたい!
未経験からエンジニア転職できるプログラミングスクール3つ【現役エンジニアおすすめ】
プログラミングで副業する方法と10万円稼ぐための学習まとめ

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)