Webデザインスキルアップに最適！ 模写コーディング練習教材オススメ5選
「Webデザインのスキルアップには模写コーディング(※)がオススメ」
そんな声は良く耳にするけど、実際は何をどうするのがいいの？
と思ったWebデザイン学習者は結構多いのでは？
※模写コーディングとは
既存サイトのデザインを自身のコーディングにより再現すること
私自身も実際、どんな方法で模写コーディング練習をするのが効果的なのか、
今の自分にとってどんなサイトを見本にすると良いのか、など、
いまいちわからず悩んだ経験があります。
でも、ここ最近は、そんな悩みに応えてくれる良質な教材がWeb上にいくつも提供されていたりして、Webデザイン学習者にとっては非常に恵まれた状況だと感じます。
ということで、今日は、模写コーディング学習に最適な教材5選をご紹介いたします。
1. ドットインストール
『ドットインストール』は、プログラミング学習者なら知らない人はいないくらい定番・有名なオンライン学習サイト。基礎力養成に適したレッスンが多い印象の学習サイトでしたが、今年に入って以下実践的レッスン（プレミアム会員向け）が追加されましたのでご紹介いたします。
『実践！ポートフォリオサイトを模写しよう』dotinstall.com
『実践！アプリのランディングページを模写しよう』
dotinstall.com
『実践！ECサイトを模写しよう』
dotinstall.com
動画で模写コーディングの基本を学ぶことができるため、初学者にもオススメのレッスンです。
2. 無料コーディング練習所
webdesigner-go.com『無料コーディング練習所』は、XDデザインデータ付きコーディング教材を無償提供してくれている、ありがたいサイト。
コーディング基礎スキル習得方法の解説に始まり、以下６サイト分の教材が揃っているため、Webデザイン初学者のスキルアップには充分な内容でオススメです！
【入門編】カフェサイト
【初級編】企業サイト
【中級編１】セミナーサイト
【中級編２】ジムサイト
【中級編３】ゲームサイト
【上級編】企業サイト
3. WP-LOAD
wp-load.in『WP-LOAD』とは、『WordPressエンジニアロードマップ』をテーマとブログサイト。
こちらで初級者向けのLPコーディング教材(XDデザインデータ付き)が公開されていたので、ご紹介いたします。
丁寧な解説あり。初学者の方には非常に有益な記事だと思いますので、ぜひチェックしてみることをオススメします。
4. 模写修行
moshashugyo.com『模写修行』は、一部(2サイト分のみ)無料コーディング教材ありの、コーディング教材販売サイト。
前述の『無料コーディング練習所』同様、教材は初級、中級とスキル別になっており、XDデザインデータ付き。
自分のニーズに合う教材を選んで購入するスタイルです。
実際にサイトを作りながらコーディングの練習と勉強ができるサービス
という点でも貴重、
Webデザイン基礎学習後、より実践的コーディング練習がしたい！
という方にはオススメです。
5. Codejump (旧 Codestep)
『Codejump』とは、「作って学ぶコーディング学習サイト」です。こちらでは、以下２種類のコーディング練習に挑戦できるのが特徴の一つ。
①デモサイトから模写コーディング
②デザインカンプからコーディング
また、豊富な無料コーディング教材の他、『Codejump Pro』という12ヶ月完結月額制有料サービスもあって、こちらの有料コースでは、実案件をモデルとしたかなり実践的教材が提供されています。
『Codejump』『Codejump Pro』いずれも、すべての教材でXDデザインデータ付き。実案件の受託制作を擬似体験するのに非常に有益なサービスなので、本当にオススメです。まずは無料教材からでも、ぜひお試しあれ！
以上、ご参考まで。
