模写修行メディア

コーディング教材【模写修行】の効果的な活用方法を紹介!

模写修行はコーディングの練習ができるサービスです。

この記事では、より効果的な『模写修行の活用方法』について紹介します。興味を持っていただけましたら、無料教材もあるので、ぜひ覗いてみてください。

想像よりも多くの方にリピート購入していただけて嬉しいです。ありがとうございます。引き続きよろしくお願いいたします🙇‍♂️

gakuのアイコン

無料教材もあり!✌️

模写修行を見る

この記事の目次

模写修行はどんなサービス?

模写修行では下記を提供しています。

  • デザインデータ(XD/スタイルガイド/書き出したデザイン)
  • 素材(ロゴやアイコンなど)
  • サンプルコード
  • web 上で見れる解説

中級編の教材には SCSS で書いたサンプルコードも入っています。

基礎を 1 から解説する教材ではなく、実際にサイトを作りながらコーディングの練習と勉強ができるサービスです。

コーディング教材の【模写修行】は他の教材と何が違うのか?

他の教材との違いについては、👆 こちらの記事をご覧ください。

模写修行の学習手順

模写修行の効果的な活用方法を学習手順に沿って紹介します。

  1. 教材購入後にデザインをダウンロード
  2. デザインを見ながら自力でコーディングに挑戦!
  3. 完成したらコードと解説で答え合わせ
  4. 作ったサイトを拡張してみよう!
  5. さらに勉強!

こちらの順で紹介します。

Step1:教材購入後にデザインをダウンロード

教材購入後にデザインをダウンロード
  • デザインデータ(XD/スタイルガイド/書き出したデザイン)
  • 素材(ロゴやアイコンなど)
  • サンプルコード(SCSS もあり)

教材をご購入していただくと上記のダウンロードと web 上で解説を見ることができます。

Step2:デザインを見ながら自力でコーディングに挑戦!

デザインを見ながら自力でコーディングに挑戦!

サンプルコードや解説を見る前に、実践と同じように XD のデザインを見てコーディングに挑戦してみましょう。わからないことがあればその都度ググって解決すると良いです。

  • 1 週間後までに完成させる
  • 期限はなしでとにかく綺麗に書く

ご自身の今の課題に合わせて、上記のような条件や設定を決めて取り組むことをおすすめします。

一通り自分の力でサイトを完成させたら本番公開してみましょう。サーバーの契約をしていなくても、Netlify や Vercel を使えば無料で公開できます。

模写修行の全教材はポートフォリオにすることを禁止していますが、各ブラウザやデバイスで確認するために短期間(数時間程度)公開することは構いません。

Step3:完成したらコードと解説で答え合わせ

完成したらコードと解説で答え合わせ

完成したらサンプルコードと解説を見てみましょう。コードの書き方に絶対の正解はないので、一例だと思って参考にしてみてください。

配布素材の中には SCSS で書いたコードも入っています。コーダーやフロントエンドエンジニアにとって、SCSS は必須で覚えるべきスキルの 1 つなので、まだ勉強していない方はこの機会に勉強してみるのも良いと思います。

また、保守性の高いコードを書くには CSS 設計の勉強も必要です。

わからなかったことや知らなかったことは詳しく勉強してみると良いです。参考サイト(模写修行メディア)のリンクを載せている箇所も多いので、ぜひ目を通してみてください。

Step4:作ったサイトを拡張してみよう!

模写修行で作ったサイトを拡張したり、改修してみるのも良い勉強になります。そのときに『拡張しやすいコードだったか?』という点に注目してみましょう。

web サイトや web サービスは公開してからがスタートです。拡張や改修を重ねても、カオスになりにくいコードを書けると良いです。

💡 拡張・改修の例

  • 新しいページを作ってみる
  • 既存のページに何か機能やコンテンツを追加してみる
  • JavaScript で動きをつけてみる
  • WordPress で投稿機能をつけてみる

Step5:さらに勉強!

模写修行では HTML・CSS のコーディングの練習に特化しましたが、実際は JavaScript も書くことになります。WordPress を導入することもあります。web 開発を仕事にしたい方は React や Vue などのライブラリやフレームワークも勉強する必要があります。

IT 系の仕事をするのであれば、勉強に終わりはありません。今現役で活躍してる方々も日々勉強しています。無理はせずに楽しみながら続けることが大切です。

上達への近道はない!とにかく書く!悩みながらたくさん書く!

基礎学習の後は、とにかくたくさん書いて、その都度わからないことや知らなかったことを勉強するのが 1 番の近道です。

模写修行の初級編が全然分からなかった方は 1 から入門書をやり直しても良いと思います。しかし、いつまでも基礎的なインプットばかりだと自分の力で書けるようになりません。

  • 無料教材
  • 初級の教材
  • 中級の教材

できれば、これら 3 つに挑戦していただきたいです。この 3 つをしっかり理解するだけでも、現場の書き方は掴めるはずです。(本音を言えば、模写修行の全教材をやっていただきたいです...)

要望をいただいたのでメンターを始めました。模写修行の内容に限らず、なんでも質問 OK です。

多くの方に使っていただければ嬉しいです!

模写修行

教材の質にはかなりこだわったので、多くの方に使っていただきたいです。きっと価格以上の価値があったと思ってもらえるはずです。

改めてこんな方におすすめです!

  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 実践的な練習がしたい
  • 基礎学習中、もしくは終えたばかり
  • CSS 設計や SCSS を使った書き方も学びたい

※ 解説は SCSS を使わない前提でします
※ 配布するサンプルコードに SCSS が含まれるのは中級以上の教材です

模写修行で実践的な練習を✊

さっそく練習する

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴7年くらい / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材