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

有料の教材として模写修行をスタートし、2025年1月に全教材無料化しました。

あまり知名度がない状態ですが、無料のコーディングの教材の中では1番質が良いと自負しています。この記事では書籍や他の教材と何が違うのか説明します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 基礎学習後に何をしたら良いかわからない...
• 自分のコードやデザインが正しいかわからない...
• 転職や副業・フリーランスのアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターやってます 👆

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

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

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

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

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

おすすめの学習フロー

1. デザインを見ながらコーディングに挑戦
2. 解説とサンプルコードで深く学ぶ

このフローで学習していただくことで、コーディングのスキルアップに必要な、『実践的な練習(書くこと)』と『答え合わせ(良い書き方を学ぶこと)』が出来るような設計になっています。

詳しい学習手順については、下記の記事もご覧ください。

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

模写修行は『実践的な書き方や考え方』にこだわりました！

模写修行は、下記のような方を対象に作ったサービスです。

• コーディングの基礎学習を終えたばかり
• 良いコードの書き方を学びたい

模写修行では『初心者にとって分かりやすいこと』よりも『初心者にとって難しくても実践的なこと』を重視しました。

多くの書籍や他の教材では、『初心者にとって分かりやすいこと』を優先しています。それに対して、模写修行では『難しくても実践的なこと』はゆずらす、その上でなるべく分かりやすく解説することを意識しています。

独学では気づきにくい点もカバー

この記事の筆者は、10年以上前に書籍でコーディングの勉強を始めました。そして、勉強を始めて1年後には、わかった気になっていました。

しかしあるきっかけで、有名な制作会社で働いている方のコードを見て、自分の書き方と全く違うことを知りました。

👇 当時の自分のコード

• 最適化されていない画像
• id を使ったスタイリング
• 完全自己流のSCSSファイル設計
• ...

画像はsrcset属性やpictureタグを使って最適化します。スタイリングにidは使わない方が良いです。SCSSファイルは細かく分割すると良いです。

これらは、書籍や他の教材では、触れられていないことも多いです。この辺りを模写修行では、なるべくカバーしました。

模写修行の中身をちょい見せ

模写修行の特徴やこだわったポイントがわかるように、中身を少し紹介します。

スタイルガイドや指示書も用意

実務ではデザイナーにスタイルガイドや指示書を共有してもらう場合があります。コーダーやフロントエンドエンジニアは、それに従ってコーディングをします。

模写修行でも本番を想定して、簡単なスタイルガイドと指示書を用意しました。

実際の制作手順に従い解説を行う

コーディングの手順に唯一の正解はなく、人それぞれな部分も多くあります。

模写修行では、上の赤枠の順に進めています。サイト内共通の設定？コンポーネント？と思った方も大丈夫です、それが何を意味するのかも解説しています。このような順番でコーディングすることで、どんな恩恵を受けれるかも解説しています。

👇 質問をいただいたので記載しておきます

CSS設計を意識した書き方

CSS設計は初心者の方には難しい内容ですが、なるべくわかりやすく解説しました。また、CSS設計手法も有名な方法をカスタマイズして、わかりやすくしています。

CSS設計について詳しく解説した模写修行メディアのリンクを入れてあるので、記事を読みながら勉強できるようになっています。

難しくても必要なことには触れる

中級編以上では、難しい内容にも触れるようにしています。

• ピクセルパーフェクト
• 画像の最適化
• アクセシビリティ対応
• SCSS

詳しい解説はしていませんが、教材内の『注意点と本来やるべきこと』で、上の内容を扱っています。

模写修行メディアの記事を使って深く解説

模写修行の教材は、サイトのコーディングを1からするものなので、各教材で共通する部分もあります。

何度も同じ解説を見なくて済むように、模写修行メディアで記事を用意し、詳しく知りたい方だけ飛んで見れるようにしました。また、中級者・上級者向けの内容も模写修行メディアの記事で対応しています。

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

教材の質にはかなりこだわったので、多くの方に使っていただきたいです。

こんな方におすすめです！

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

さらに効率的に学習を進めたい方は...