模写修行メディア

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

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

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

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

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

gakuのアイコン

無料教材あり!

模写修行を見る

本気でプロを目指す方のための教材です

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

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

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

👆 メンターやってます 👆

この記事の目次

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

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

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

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

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

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


💡 おすすめの学習フロー

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

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

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

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

Point
コーディングを学ぶ全ての方に役立つように作りましたが、特にweb制作の勉強をしている方におすすめしたいです。

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

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

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

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

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

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

学習教材重視していること
書籍や他の教材初心者にとって分かりやすいこと
模写修行難しくても実践的なこと

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

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

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

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

👇 当時の自分のコード

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それができる方はそれで良いです。ただし、模写修行レベルのサイトをデザインを見ただけでHTML→CSSの順で一気に書ける方は多くないと思います。従って、模写修行ではパーツやページごとに区切って、HTML→CSS→HTML→CSSと繰り返して作っています。

PC→SPの順で書く方もいると思います。しかし、web制作のようにデザインが複雑な場合、PC→SPの順で書くとほぼ確実に上書きが多くなります。また、昨今はSPメインで見られるサイトが多いので、スマホファーストでSP→PCの順で書いています。

CSS設計を意識した書き方

CSS設計も意識した書き方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

模写修行

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

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

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

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

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

さっそく練習する

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

現役エンジニアによるメンタリングサービス作りました!

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

👇 こんな方のためのサービスです。

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

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク / 契約期間の縛りなし / 入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。無料相談もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

入会金/解約料/契約期間の縛りなし

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材