【徹底解説】模写コーディングにおすすめのサイト【ポートフォリオ可有り】

上記の方に向けて、記事を執筆させていただきます。

---

本記事の概要

本記事では、LP型とサイト型の2つを初級編、中級編、上級編に分けてご紹介しています。

合計模写コーディングサイト数：６個

注意点：模写コーディングしたものをサーバーにアップしてしまうと著作権違反になるケースがあります

おすすめの前に｜模写コーディングとは

模写コーディングとは、既に実在しているLPやサイトと全く同じサイトをコードで作り上げていく事を言います。

HTML・CSSのスキルをレベルアップしたい方は①番の模写コーディング方法を行いましょう。

というのも、②はデザインツールの簡単な使い方なども含まれてくるので、難易度が高くなります。

案件を獲得するフェーズの方であれば、デザインツールの基礎知識は必須ですが、最初の頃はデザインツールのことは気にしなくても問題ありません。

模写コーディングのメリット

模写コーディングを行うメリットは下記のとおりです。

模写コーディングは圧倒的にスキルが向上します。

また、サイトによって、コードの書き方に癖があったりするので、そういったことを学べるのも楽しいです。

残念な話：模写コーディングではほぼ確実に挫折します

HTML・CSSの初学者の９割が模写コーディングに挫折するはずです。

理由は、圧倒的にコーディングの知識が不足しているから。

ただ、この大きな壁を乗り換えられると、『HTML・CSSを駆使して完成度の高いサイト』を構築できるレベルまでコーディング技術は上がります。

ですので、諦めずに分からないところはググるorツイッターで質問するなどして乗り越えてみてください。

おすすめサイトで模写コーディングする際の流れ

おすすめサイトを紹介する前に、模写コーディングする手順を解説します。

模写コーディングの手順

前提：サーバーと契約する

模写コーディングをする前に、サーバーと契約しておきましょう。

なぜなら、実際の案件ではサーバーにアップロードが含まれているからです。

クラウドワークスやランサーズの案件を見ると、コーディングのみと書いてあるにも関わらずサーバーにアップロードするまでが含まれています。

サーバーのお値段：初期費用＋3ヶ月プランで5000円程度

正直、サーバーの知識がないと案件対応が難しいので、模写コーディングのタイミングで、サーバーについても学習しておきましょう。

案件対応でよく使われるサーバー

本記事で紹介するサーバーにアップロードする方法はエックスサーバーを使っています。

手順1おすすめサイトを選定する

模写コーディングの手順1はおすすめサイトを選定するです。

この手順に関しては、本記事で紹介しているので安心してください。

手順2模写コーディングルール設定

模写コーディングの手順2はルール設定です。

当サイトの例

模写のルールに関しては、ご自身のスキル感に合わせて設定しましょう。

手順3おすすめサイトを模写コーディングする

模写コーディングの手順3は実際にコードを書くことです。

躓くポイントなどを本記事で詳しく解説していますので安心してください。

手順4答え合わせをする

模写コーディング手順4は答え合わせをするです。

答え合わせをする際は、Chromeの拡張機能を使いましょう。

Chrome拡張機能を活用しながら、自分が模写したコードと模写サイトのコードを見比べて見ましょう。

模写コーディングの手順を理解できた方は、手順1のおすすめサイト選定へと移りましょう。

【初級編】模写コーディングにおすすめのサイト

初心者の方がまずやるべき模写コーディングサイトは下記のとおりです。

【基礎がしっかり学べる＋記述量が多くない】模写コーディングサイトを選抜させていただきました。

おすすめ模写サイト1：progate道場コース上級編

模写コーディングおすすめサイト①は『progate道場コース上級編』です

progateやドットインストール学習の後に、ぜひ挑戦してもらいたいサイトです。

基礎知識が足りないと、ググることもできません。

progateの模写はググれば必ず解決できる技術ですので、躓いてしまった方は、一度基礎を振り返りましょう。

Progate模写コーディングで学べること

progate模写サイトではレスポンシブは意識せず、パソコンサイズで表示されているデザインを模写してみてください。

レスポンシブはかなり重要なのですが、最初にするべきは「超基礎」です。

初心者が難しい技術としては、要素を横に並べる技術だと思います。個人的にはflexboxを推奨していますが、好きな方を選びましょう。

ググリヒント：「flexbox 横並び」「hover css」「fontawesome 使い方」「background-image」

おすすめ模写サイト2：WordPressテーマ「Write」

模写コーディングおすすめサイト②は『Write』です

progateの基礎知識があればかならず模写できる内容です。

正直、Writeの模写コーディングに求められる技術レベルはかなり低いです。

ただ、自分の力でサイトを作成したことがない方にとって、サイト構築(レスポンシブ対応)をするのはかなり難易度が高いことです。

そのため、最初はWriteというシンプルなサイトで模写コーディングすることをおすすめします。

難しいポイント

ハンバーガーメニューはcssでも実装可能ですが、難易度がかなり高いです。

ただ、ハンバーガーメニューのないサイトなどほぼほぼないので、最初のうちからコードはかけるようにしておきましょう。

Write模写コーディングで学べること

プログラミング初心者がWrite模写コーディングで躓きそうなポイントは下記の通りです。

正直、Writeの模写コーディングに求められる技術レベルはかなり低いです。

ただ、自分の力でサイトを作成したことがない方にとって、サイト構築(レスポンシブ対応)をするのはかなり難易度が高いことです。

ググリヒント：「flexbox 横並び」「flexbox レスポンシブ」「ハンバーガーメニュー css」「fontawesome 使い方」

【中級編】模写コーディングにおすすめのサイト

初心者向けの模写コーディングをスムーズに終えた方は次のサイトを模写してみてください。

おすすめの模写コーディングサイト

ここからは実務でも使用するスキルが頻繁に出てくるので、覚悟を決めて一歩踏み出しましょう。

おすすめ模写サイト3：デイトら

模写コーディングおすすめサイト３つ目は『デイトら』です。

難易度自体はそこまで高くないのですが、初学者が躓きやすい技術がありますので、ぜひ挑戦してみてください。

デイトら模写は挑戦者が多いので、情報が探しやすいです。

おすすめ模写サイト4：Xeory

模写コーディングおすすめサイト4つ目は『Xeory』です

バズ部が運営するワードプレステーマです。

バズ部とは：SEO、コンテンツマーケティング会社

かなり大きい企業が提供しているテーマです。

【上級編】模写コーディングにおすすめのサイト

上級者向けに模写コーディングのおすすめサイトをまとめておきました。

おすすめの模写コーディングサイト

おすすめ模写サイト5：iSara

模写コーディングおすすめサイト⑤は『iSara』です

iSaraはLPの模写コーディング最終試験にうってつけです。

また、iSaraは実績=ポートフォリオとしても掲載が可能なので、必ず挑戦しておきたいサイトです。

おすすめ模写サイト6当サイト

模写コーディングおすすめサイト6つ目は『当サイト』です

当サイトを模写する際は下記の手順で挑戦してみてください。

かなり難易度が高くなりますが、HTML→WordPress化の部分は実際の案件で5万円ほど稼げる所など避けては通れません。

また、サーバー内にWordPressをインストール、作成したWordPressテーマファイルをアップロードする方法など難易度がかなり高いです。

ただ、実案件になれば、ほぼ確実に触る所なので、この機会に挑戦してみてください。

まとめ：おすすめの模写コーディングサイト

ここまでで『【徹底解説】模写コーディングにおすすめのサイト【ポートフォリオ可有り】』の解説をしてきました。

最後までご覧下さり、ありがとうございました。

模写コーディングのおすすめサイトに挑戦する前のレベル：HTML＆CSS

模写コーディングに挑戦する前に、ある程度のHTML＆CSSの技術力を身につけるようにしましょう。

私が実際に勉強した手順などが気になる方は下記の記事を参考にしてみてください。

模写コーディングのおすすめサイトに挑戦する前のレベル：WordPress

今回の模写ではWordPressの知識も必要です。

WordPressのスキル感に自信がない方は下記の記事を参考にしながら、ご自身のスキルをアップさせてみてください。