模写修行はコーディングの練習ができるサービスです。
この記事では、より効果的な『模写修行の活用方法』について紹介します。興味を持っていただけましたら、全教材無料なので、ぜひ覗いてみてください。
👇 メンターやってます 👇
模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。
- 独学に限界を感じている...
- 基礎学習後に何をしたら良いかわからない...
- 自分のコードやデザインが正しいかわからない...
- 転職や副業・フリーランスのアドバイスが欲しい...
このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。
👆 メンターやってます 👆
この記事の目次
模写修行はどんなサービス？
模写修行では下記を提供しています。
- デザインデータ(Figma/XD/スタイルガイド/書き出したデザイン)
- 素材(ロゴやアイコンなど)
- サンプルコード
- web上で見れる解説
中級編の教材には、SCSSで書いたサンプルコードも入っています。
基礎を1から解説する教材ではなく、実際にサイトを作りながらコーディングの練習と勉強ができるサービスです。
他の教材との違いについては、下記の記事もご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか？模写修行の学習手順
模写修行の効果的な学習手順を紹介します。
- デザインをダウンロード
- デザインを見ながら自力でコーディングに挑戦！
- 完成したらコードと解説で答え合わせ
- 作ったサイトを拡張してみよう！
- さらに勉強！
Step1：デザインをダウンロード
- デザインデータ(Figma/XD/スタイルガイド/書き出したデザイン)
- 素材(ロゴやアイコンなど)
- サンプルコード(SCSS もあり)
ユーザー登録していただくと、上記の資料ダウンロードとweb上で解説を見ることができます。
Step2：デザインを見ながら自力でコーディングに挑戦！
サンプルコードや解説を見る前に、実践と同じようにFigmaやXDのデザインを見てコーディングに挑戦してみましょう。わからないことがあればその都度ググって解決すると良いです。
ご自身の今の課題に合わせて、下記のような条件や設定を決めて取り組むことをおすすめします。
- 1 週間後までに完成させる
- 期限はなしでとにかく綺麗に書く
一通り自分の力でサイトを完成させたら本番公開してみましょう。サーバーの契約をしていなくても、Vercelなどを使えば無料で公開できます。
Step3：完成したらコードと解説で答え合わせ
完成したらサンプルコードと解説を見てみましょう。コードの書き方に絶対の正解はないので、一例だと思って参考にしてみてください。
配布素材の中には SCSS で書いたコードも入っています。コーダーやフロントエンドエンジニアにとって、SCSS は必須で覚えるべきスキルです。まだ勉強していない方は、この機会に勉強してみてください。
また、保守性の高いコードを書くには CSS 設計の勉強も必要です。
わからなかったことや知らなかったことは詳しく勉強してみると良いです。参考サイトを載せている箇所も多いので、ぜひ目を通してみてください。
Step4：作ったサイトを拡張してみよう！
模写修行で作ったサイトを拡張したり、改修してみるのも良い勉強になります。そのときに『拡張しやすいコードだったか？』という点に注目してみましょう。
web サイトは公開してからがスタートです。拡張や改修を重ねても、カオスになりにくいコードを書けると良いです。
💡 拡張・改修の例
- 新しいページを作ってみる
- 既存のページに何か機能やコンテンツを追加してみる
- JavaScript で動きをつけてみる
- WordPress で投稿機能をつけてみる
Step5：さらに勉強！
模写修行では HTML・CSS のコーディングの練習に特化しましたが、実際は JavaScript も書くことになります。WordPress を導入することもあります。web 開発を仕事にしたい方は React や Vue などのライブラリやフレームワークも勉強する必要があります。
IT 系の仕事をするのであれば、勉強に終わりはありません。今現役で活躍してる方々も日々勉強しています。楽しみながら勉強を続けましょう。
近道はない！とにかく書く、悩みながらたくさん書く！
基礎学習の後は、とにかくたくさん書いて、その都度わからないことや知らなかったことを勉強するのが 1 番良いです。
模写修行の初級編が全然分からなかった方は 1 から入門書をやり直しても良いと思います。しかし、いつまでも基礎的なインプットばかりだと自分の力で書けるようになりません。
できれば、模写修行の全教材に挑戦していただきたいです。そうすれば、サイトの作り方がかなり掴めるはずです。。
多くの方に使っていただければ嬉しいです！
教材の質にはかなりこだわったので、多くの方に使っていただきたいです。きっと価格以上の価値があったと思ってもらえるはずです。
改めてこんな方におすすめです！
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 実践的な練習がしたい
- 基礎学習中、もしくは終えたばかり
- CSS 設計や SCSS を使った書き方も学びたい
※ 解説は SCSS を使わない前提でします
※ 配布するサンプルコードに SCSS が含まれるのは中級以上の教材です
模写修行で実践的な練習を✊
さっそく練習する
さらに効率的に学習を進めたい方は...
模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 基礎学習後に何をしたら良いかわからない...
- 自分のコードやデザインが正しいかわからない...
- 転職や副業・フリーランスのアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニア・デザイナーのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク&入会金・解約料なし&契約期間の縛りなしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(4期目)。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミングなど、幅広くやってます！
当メディア運営メンバーでメンターやってます！👉
詳しく見る
0からweb制作の勉強を始める方はもちろん、12ヶ月以上独学している方や既に制作会社等でお仕事をしている方にもご利用いただいています！