【模写コーディング】難しいと感じる理由と対処方法

最終更新日

模写コーディングが難しいと感じる理由と、その対処方法についてご紹介します。

模写コーディングが難しいと感じる理由

模写コーディングが難しいと感じる理由は、下記2つのうちいずれかが原因である可能性が高いです。

  1. ①:模写コーディングが正しい手順で行えていない
  2. ②:模写しようとしているサイトが自分のスキルにあっていない

①:模写コーディングが正しい手順で行えていない

模写コーディングが難しいと感じる1つ目の理由として、正しい手順で模写を行えていない可能性が考えられます。

おそらく模写につまづいている人の多くは、模写しようとしているサイトを一通り眺めたら、すぐにコーディングを始めてしまっているのではないでしょうか。

模写するサイトをしっかりと把握できていない状態でコーディングをはじめると、途中で混乱をまねく原因になります。

模写コーディングは適切な手順にそって進めることで、格段にやりやすくなりますので後ほど対処方法でその手順を紹介させていただきます。

②:模写しようとしているサイトが自分のスキルにあっていない

模写コーディングが難しいと感じる2つ目の理由について、そもそも模写しようとしているサイトが自分のスキルにあっていない可能性が考えられます。

HTMLとCSSの基礎学習を終えた後、初めて模写を行うサイトはどのように決めていますか?

おそらく、多くの方がネットやSNSなどで紹介されているおすすめの模写サイトを参考にしているのではないでしょうか。

確かに模写することで勉強になるサイトは沢山ありますが、そのサイトが必ずしも初めて模写を行うサイトに適しているかどうかはわかりません。

初めて模写を行う時点でのスキルは皆ばらばらですので、ある人にとっては簡単でもある人にとっては難しかったりします。
もしそのサイトが自分のスキルにあっていなければ、当然「模写」を難しいと感じてしまいます。

模写コーディングに挫折しないための対処方法

模写コーディングに挫折しないための対処方法を紹介させていただきます。

その方法は、下記の2つです。

  1. ①:正しい手順で模写コーディングを行う
  2. ②:自分のスキルにあったサイトから模写する

①:正しい手順で模写コーディングを行う

おすすめの模写コーディングの手順は下記の通りです。

特に初心者の方は、下記の手順で模写コーディングを行うことで模写が断然やりやすくなります。

  • 手順①:模写のルールを決める
  • 手順②:模写するサイトを把握する
  • 手順③:レイアウト構成をメモする
  • 手順④:全体のHTMLとCSSをコーディングする
  • 手順⑤:各パーツのHTMLとCSSをコーディングする
  • 手順⑥:JavaScriptのコーディングを行う(※ある場合のみ)
  • 手順⑦:確認(デザインとソースコードのチェック)

特に手順②手順③が大切です。
ここがしっかりできていると、以降のコーディングが進めやすくなります。

上記の、模写コーディングの手順の詳細については下記の記事で詳しく解説していますので、ぜひ参考にしてみてください。

②:自分のスキルにあったサイトから模写する

模写コーディングを行う際は、自分のスキルにあったサイトからはじめることがすごく大切です。

自分のスキルに合わせて徐々に模写するサイトの難易度を上げていくことで、挫折することなく楽しみながらスキルアップしていくことができます。

基礎学習を終えた後、一番最初に取り組む模写サイトは簡単すぎるくらいがちょうどよいです。自分で1つのサイトを作りあげたという実績が、その後の自信とやる気にもつながっていきます。

今回は、基礎学習を終えたばかりの方ではじめて模写に取り組む人向けの【入門編】の練習サイトをご紹介させていただきます。

【入門編】ウォーミングアップ用の模写サイト

HTMLとCSSの基礎学習を終えたばかりで、はじめて模写コーディングにチャレンジする方はこちらの【入門編】の練習サイトがおすすめです。

プロフィールサイト(1カラム / レスポンシブ) 【入門編】プロフィールサイト

デモはこちらです。

コーディング量が少なく構成もシンプルなので、はじめて模写をする人は最後までやりきることができて、模写のウォーミングアップにはぴったりの練習サイトです。

学べる内容は下記の通りです。

  • header、footer、main、navの使い方
  • sectionの使い方
  • リストタグ(ul、li)の使い方
  • inline-blockの使い方
  • Flexboxを使用した横並びの配置
  • CSSで画像を丸く表示
  • レスポンシブ対応

こちらの練習サイトには、レイアウト構成の組み立ての解説コーディング解説がついていますので、模写で手が止まってしまった場合は参考にしてみてください。

模写コーディングに挫折しないための対処方法は以上です。

自分のスキルにあったサイトを、適切なコーディング手順にそって模写する

これが模写コーディングに挫折しないための1番の対処方法です。

上記の対処方法で解決しない場合は、もしかするとHTMLとCSSの基礎学習がまだ十分にできていない可能性がありますので、もう一度基礎を見直してみてください。

基礎学習にはプロゲートという学習サイトがおすすめです。HTML&CSS、JavaScript、jQueryの基礎が一通り学習できます。プロゲートでの学習範囲については、以下の「【Web制作編】プロゲートはどこまで学習すればよいか?」という記事で詳しく解説していますのでぜひ参考にしてみてください。

模写コーディングのレベル別の練習サイトについては下記で紹介しています。自分のスキルにあったものから順に取り組むことで、ぜひコーディング学習を楽しみながら継続してみてください!

模写コーディング練習 課題一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

おすすめの記事

関連記事