ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

プログラミング
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回のお悩み

HTML/CSSの学習をするのに「模写コーディング」がオススメらしいけど、何のサイトを模写すればいいか分からない。

オススメの模写サイトをレベル別に教えて欲しい!

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

↓まだ読んでない方は初めにこちらの記事をご覧ください↓

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

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

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

HikoPro
HikoPro

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

こんな方におすすめ
  • 模写コーディングするサイトを探している方
  • 効率のいいHTML,CSSの学習方法を探している方
  • Web系のフリーランスエンジニアを目指している方
稼げるWebエンジニになる為のオススメの教材

フルスタック・Webエンジニア講座「稼げるエンジニア」なる事に特化した、動画学習コンテンツで、今なら24,000円が1,560円とかなりお得な教材です!
HTML,CSSだけではなく、高単価な案件が豊富なWordPressやJavaScript、PHP、Pythonなどこれ1本でWeb開発における学習が全てできてしまいます!

「起業したり、フリーランスとして仕事をしたい方」「ウェブサイトを作りたい方」「新しい収入源を得たい方」「経済的自由を得たい方」こんな方にオススメです!

スポンサーリンク

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

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

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

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

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

模写コーディングにチャレンジできるレベル
  • ProgateのHTML,CSSコースを全て受講済みの方
  • HTML/CSSの基本的な書き方が分かる
  • エディタを使ってコーディングができる
ネコ君
ネコ君

エディタって何?

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

HikoPro
HikoPro

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

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

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

LP型

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

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

ポイントとしては

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

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

ネコ君
ネコ君

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

ブログ型

今後WordPressの学習をすることを考慮するとブログ型の模写コーディングも欠かせません。

まず初めにWriteというとってもシンプルなテーマを模写してみましょう。

ポイントとしては、横幅が一定の幅で統一されている点です。ヘッダー、メイン、フッターの横幅を綺麗に全て揃えてみましょう!

また画像を丸くするメソッドの指定、FontAwsomeを使ってSNSのアイコンも表示させてみましょう。

この模写から学べる点
  • 横幅の統一(ヘッダー、メイン、フッター)
  • 画像を丸くするCSSの方法
  • FontAwsomeの使い方

コーポレート型

https://haniwaman.com/sample/part3/template_08/

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

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

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

この模写から学べる点
  • ナビゲーションの横並び設置
  • メニュー、サイドバー、メインの要素の配置
  • Flexboxの使い方
  • borderの使い方

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

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

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

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

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

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

HikoPro
HikoPro

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

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

LP型

比較的シンプルなLPで、ボリュームも少ない 侍エンジニア塾 のホームページを模写してみましょう!

非常にシンプルそうなサイトに見えますが、要素の重なりがあったり、tabelタグを使って料金表を作ったりと、Web制作でよく使う少し難易度の高いコーディングの練習ができます!

その他にはCSSのtransformを用いて、線を斜めに表示させたい細かい技術を学ぶこともできます!

この模写から学べる点
  • ヘッダー部分の追従
  • 要素の重なり(positionを使用)
  • tableタグで料金表の作成
ネコ君
ネコ君

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

HikoPro
HikoPro

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

ブログ型

日本で大人気のWordpressテーマJINのテーマの1つを模写してみましょう。

この模写コーディングのポイントとしては、2カラムのサイトとなっており、メインカラムとサイドカラムの2つの構成を意識してコーディングする必要があります!

メインカラムは問題なく作れると思いますが、サイドカラムを作るのに時間がかかると思います。

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

この模写から学べる点
  • カードの作り方
  • 要素の上に要素をかぶせる配置
  • positionの使い方
  • flexboxのマスター

コーポレート型


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

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

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

この模写から学べる点
  • Googlemapの埋め込み方
  • Facebookの埋め込み方
  • CSSで三角形の作り方

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

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

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

HikoPro
HikoPro

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

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

LP型

元フリーランスエンジニアのマナブさんが運営するISARAのLP模写です。

マナブさんを初め、多くのフリーランスの方がこのLP模写をおすすめしています!

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

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

ネコ君
ネコ君

ポートフォリオって何?

HikoPro
HikoPro

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

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

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

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

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

この模写から学べる点
  • 最近のLPに使用されている技術全般
  • ボリュームのあるコーディング技術

ブログ型

大人気のWordPressテーマSTORKの模写コーディングをしてみましょう!

かなりオシャレなデザインで、細かい場所までコーディングする必要があります。

また、最近のブログでよく見かけるカルーセル(投稿がスライドする)も需要が高いので、この模写の過程で習得しておくと良いでしょう。

HikoPro
HikoPro

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

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

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

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

この模写から学べる点
  • カルーセルの実装方法
  • 高度な要素の配置
  • WordPressサイトのデザインの特徴

コーポレート型

今まで学習してきたHTML/CSS/jQueryの総まとめとして、【TECH::EXPERT】 のサイトの模写コーディングをしてみましょう!

このサイトを模写コーディングすることができれば、「デザインカンプからコーディングの案件」は難なくこなすことができるでしょう!

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

HikoPro
HikoPro

お疲れ様でした!

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

まとめ

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

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

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

もし、この記事が役に立ったら、周りのプログラミング学習をしている方にシェアしたり、Twitterでシェアをお願いします!

HikoPro
HikoPro

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

↓合わせて読みたいプログラミングの記事↓

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
プログラミング
HikoPro Blog

コメント

タイトルとURLをコピーしました