おにちゃん塾の商品一覧

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

【徹底解説】模写コーディングにおすすめのサイト【ポートフォリオ可有り】
URLをコピーする
URLをコピーしました!
本記事の想定読者
  • 本格的にWeb制作でお金を稼いでいきたい
  • スキルを身につけるためにおすすめの模写コーディングサイト
  • 模写コーディングサイトをポートフォリオとして掲載したい

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

おにちゃん

執筆者:初心者の方にも分かりやすいように解説していますので、安心して御覧ください。


本記事の概要

  • 模写コーディングとは
  • 【初級編】おすすめの模写コーディングサイト
  • 【中級編】おすすめの模写コーディングサイト
  • 【上級編】おすすめの模写コーディングサイト
  • 模写コーディングする際に役立つツール

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

合計模写コーディングサイト数:6個

おにちゃん

また、ぼくが実際に模写した際に難しいと感じたポイントなども掲載していく予定なので、かなり有益な内容です。

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

目次

模写コーディングとは

模写コーディングとは

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

模写コーディングの種類
  1. 既に実在しているLPやサイトなどを見ながら、全く同じサイトをコーディングで作り上げる
  2. デザインカンプ(=データ)をコードに置き換えていく

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

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

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

おにちゃん

僕自身もHTML・CSSの基礎知識を身に着けてからデザインツールの知識を身に着けました。


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

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

  • スキルが向上する
  • 答えがある
  • 色々な書き方が学べる

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

おにちゃん

僕は模写コーディングを行うようになってから、かなり技術的なレベルが向上しました。

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


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

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

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

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

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

模写コーディングを乗り換えた僕
  • HTML・CSSに悩むことがほぼない状態
  • JavaScriptのライブラリReactが扱える状態になる
  • WordPressのカスタマイズができる(=PHP)
  • PHPのフレームワークLaravelが扱える
おにちゃん

こんな感じになれますので、諦めずに頑張ってみてください。


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

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

模写コーディングの手順

  • 前提:サーバーと契約する
  • 手順1:おすすめサイトを選定する
    →本記事で紹介しています
  • 手順2:模写コーディングのルール設定
  • 手順3:模写コーディングをする
  • 手順4:答え合わせをする
おにちゃん

この手順で模写コーディングを行うと、かなり案件対応に近づきます。


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

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

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

  • コーディングのみ
    →コーディングに加えてアップロードも含まれている
おにちゃん

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

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

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

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

おにちゃん

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


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

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

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


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

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

おにちゃん塾の例

  • フォントは調べる
  • 画像はインストール
  • ブロック幅は調べる
  • 色の取得
  • ソースコードの閲覧は禁止
  • ブレークポイントは似た位置
おにちゃん

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


手順3模写コーディングする

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

おにちゃん

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


手順4答え合わせをする

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

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

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

完全に模写サイトのコード通りにはならないです。そのため、書き方が違っても落ち込む必要はないです。

『こんなCSSの書き方ができるんだ』みたいな感じで問題有りません。

おにちゃん

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


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

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

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

  • progate道場コース上級編
  • WordPressテーマ「Write」
おにちゃん

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


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

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

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

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

  • スムーズに模写できる→基礎知識がある状態
  • ググれば解決できた→もう少しで基礎がしっかりする
  • ググっても解決できない→基礎知識が足りない

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

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


Progate模写模写で学べること

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

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

  • 要素を横に並べる技術(floatかflexbox)
  • hoverした時の挙動
  • アイコンを出力する方法
  • cssを使って背景に画像を表示させる
おにちゃん

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

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


おすすめサイト②WordPressテーマ「Write」

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

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

難しいポイント

  • ハンバーガーメニュー
  • 全体的なデザイン感

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

おにちゃん

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


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

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

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

  • デイトら
  • Xeory


おすすめサイト③デイトら

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

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

おにちゃん

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


おすすめサイト④Xeory

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

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

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

おにちゃん

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


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

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

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

  • iSara
  • おにちゃん塾


おすすめサイト⑤iSara

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

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

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


おすすめサイト⑥おにちゃん塾

模写コーディングおすすめサイト⑥はおにちゃん塾です

おにちゃん塾を模写する際は下記の手順で挑戦してみてください。

  1. HTML・CSSで模写コーディング
  2. HTML→WordPress化してみる
  3. サーバーにアップロードしてみる
おにちゃん

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

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

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


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

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

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

本記事のまとめ:模写コーディングにおすすめのサイト
  1. Progate
  2. Write
  3. デイトら
  4. Xeory
  5. Irasa
  6. おにちゃん塾
おにちゃん

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


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

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

おにちゃん

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


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

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

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる