2022 年 2 月現在、模写修行を公開してから、約半年が経ちました。

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

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

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

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

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

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

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

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

💡 おすすめの学習フロー

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

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

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

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

模写修行は、コーディングの勉強をしている、下記の方々を対象に作ったサービスです。

• 基礎学習中
• 基礎学習を終えたばかり

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

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

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

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

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

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

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

👇 当時の自分のコード

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

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

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

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

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

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

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

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

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

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

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

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

CSS 設計を意識した書き方

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

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

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

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

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

教材内の『注意点と本来やるべきこと』で、上の内容を扱っています。詳しい解説はしていませんが、模写修行メディアの記事を用意したり、学びたい方は学べるような工夫はしました。

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

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

複数購入してくださった方や既に知識がある方に、学習済みの内容を何度も解説せず、上のスクショのように模写修行メディアで記事を用意しました。また、応用的な内容も模写修行メディアの記事で対応しています。

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

• 教材間で共通すること
• 応用的な内容

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

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

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

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

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