おにちゃん塾の商品一覧*準備中

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

【徹底解説】模写コーディングにおすすめのサイト【ポートフォリオ可有り】
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が扱える
おにちゃん

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


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

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

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

  • 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は実績=ポートフォリオとしても掲載が可能なので、必ず挑戦しておきたいサイトです。


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

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

おにちゃん

弊サイトを模写してみてください。


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

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

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


読者におすすめの記事

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

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

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