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

模写修行を公開してから、約1年半が経ちました。

マイペースに運営しているので、現状知名度がない状態です。ただ、コーディングの教材の中では1番質が良いと自負しているので、この記事では書籍や他の教材と何が違うのか、お伝えしたいと思います。

興味を持っていただけましたら、まずは無料版で良いので、ぜひご活用ください。

👇 メンターやってます 👇

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

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

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

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

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

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

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

また、デザインツールは、FigmaとXDに対応しています。

---

💡 おすすめの学習フロー

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

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

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

詳しい学習手順については、👆 こちらの記事をご覧ください。

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

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

• コーディングの基礎学習中
• コーディングの基礎学習を終えたばかり

対象の方だけを見ると、書籍や他の教材と被っているかもしれません。ただ、模写修行では『初心者にとって分かりやすいこと』よりも『初心者にとって難しくても実践的なこと』を重視しました。

• 初心者にとって分かりやすいこと
• 初心者にとって難しくても実践的なこと

この2点はトレードオフで、両立は難しい問題です。

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

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

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

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

👇 当時の自分のコード

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

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

↑これらは、『初心者にとって分かりやすいこと』を優先している書籍や他の教材では、触れられていないことも多いです。この辺りも模写修行ではカバーしたいと思いました。7,8 年前の自分に教えてあげたいサービスになっています。

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

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

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

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

模写修行でもそのような場面を想定して、簡単なスタイルガイドと指示書を用意しました。

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

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

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

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

CSS設計を意識した書き方

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

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

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

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

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

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

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

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

複数購入してくださった方や既に知識がある方にとって、学習済みの内容を何度も解説する必要はありません。

上のスクショのように模写修行メディアで記事を用意し、詳しく知りたい方だけ飛んで見れるようにしました。また、中級者・上級者向けの内容も模写修行メディアの記事で対応しています。

💡 模写修行メディアで対応した内容

• 教材間で共通すること
• 中級者・上級者向けの内容

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

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

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

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

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

メンターもやっています！