コーディング練習教材の模写修行は、Web制作初学者に超おすすめ。

どうも、くまだです。

私は2021年に開業して1年程度のフリーランスです。

Web制作の勉強をするために、初学者のころにいろいろな教材を勉強してきました…。

いろいろな教材を勉強してきましたが、今だからこそ自分がWeb制作の勉強をしていた初学者のころにこんな教材があったらいいな、というの3つあります。

  • コストがかからない(教材が安い)
  • 実践的(案件に転用できそう)
  • 解説が分かりやすい

そのあたりの願いを叶えてくれたのが「模写修行」という教材です。

個人的にはWeb制作初学者にとてもおすすめな教材です。

コーディング練習教材の模写修行とは

コーディング練習教材の模写修行のサイトはこちらです。

私が模写修行の教材でやってみたのは、以下の2つです。

やってみた感想としては、先程も述べたこの3つの願いを叶えてくれたので、良かったです。

  • コストがかからない(教材が安い)
  • 実践的(案件に転用できそう)
  • 解説が分かりやすい

以下、解説していきます。

模写修行は価格帯が安い

模写修行の教材は、1本あたりの価格帯が非常に安いです。

模写修行の教材価格

2022年5月現在では、

  • 無料1本
  • 初級編1本:1本980円
  • 中級編5本:3本1980円/2本2980円

価格帯は高くても3000円以内で購入することができます。

3000円ぐらいであれば、「スクールに通うほどのお金はないけど、とりあえずWeb制作の勉強はしたい」という人でも気軽に購入できます。

模写修行は内容が実践的

内容は非常に実践的だと思います。

Web制作初学者が独学だと陥りがちなことが、自己流で記述したり、間違ったまま・もしくは最適ではないコーディング方法のまま続いてしまうケースが多いです。

そしてその状態を後から矯正するのはなかなか困難です。なにせ、すっかりその書き方に慣れてしまっているから(経験済み)…笑

その辺りは模写修行をやれば、是正されるし、最初から適切な記述法を学習できるので解決できます。

  • 最適なコーディング方法
  • 適切なファイル設計
  • 具体的な命名規則など

さらに、教材にはスタイルガイド指示書付きで、実際の制作でそれに従って制作することがあるので、その流れを学ぶことができます。

headタグの構成は、基本的なものは網羅されています。ファビコンやOGP、Twitterカードなどの設定も網羅されています。

正直、構成はそのままコピペで使い回せます笑

コーディングの教材で多いのは、コンテンツ部分の制作ですが、意外とheadタグのところは抜けているものが多いです。模写修行ではWeb制作案件でそのまま使えそうなheadタグの構成になっているので、助かると思います。

無料と有料の違いをざっくり述べるとすれば、以下の2つです。

  • Sassがあるかないか(※初級編もSassはない)
  • 作るサイトのボリューム

有料のものは、無料と比べると以下の内容が学習できます。

  • Scssのファイル設計が、そのまま案件でも使える
  • Dart-Sass用に構成済み
  • 複数ページあるときの効率的な書き方

Sassの@importが2022年10月ごろ廃止になる予定で、その対応としてDart-Sass仕様にしなければなりません。

ネットに転がっている教材の中には、@importを使って解説しているものもなくはないですが、それも結局Dart-Sass仕様に書き換えたほうがいいので二度手間です。

模写修行では最初からDart-Sass仕様になっているので安心です笑

なお、Dart-Sassについては下の記事でもざっくり解説しているのでよかったらどうぞ。

ちなみにカスタムプロパティは、Sassの変数のように使用することができるものです。

カスタムプロパティは無料でも有料でも設定されているので、無料教材であっても参考になります。

模写修行は解説が分かりやすい

内容が非常に実践的であり、分かりやすいと感じる点は、フローで学習できることです。

上からコーディングする人もいるかもしれませんが、模写修行の教材では無料でも有料でも同じく、以下のようなフローで作成していきます。

  1. デザイン確認
  2. 画像とサイト内共通の設定準備(画像書き出しやカスタムプロパティの設定、雛形ファイル作成など)
  3. 共通パーツ作成(コンポーネント作成)
  4. 各ページ作成

最初にどういった流れでサイトを作成していくかわからない人は、めちゃくちゃ参考になると思います。どういったサイトを作るのであれ、基本的な流れは模写修行の教材を学べば身につきます。

上から順につくるよりも、コンポーネント単位で作っていき、それらを組み合わせて(組み立てるように)作っていったほうが結果的に早く作成することができます。

なので解説のほうでも、コンポーネント作成の部分が充実しています。

模写修行の教材だけでなく、模写修行のメディアのほうでも知識を補完できます。

まとめ

模写修行は、価格帯に対して内容が非常に実践的です。なのでWeb制作初学者にはめちゃくちゃおすすめです。

特にファイル設計やメタタグ、命名規則などそのままWeb制作案件で使うことができます。有料のもの1本学ぶだけで、今後ずっと使えるスキルを身につけることができるので、コスパがめちゃくちゃ良いです。

自分がWeb制作初学者のころに、模写修行があれば良かったなあと素直に感じました笑

ただ1点、デメリット挙げるとすれば、他の教材より内容が難しいところもあります。なので、基礎的な部分に関しては自分で学習してから挑戦したほうがいいですね!

ここまで読んでくださりありがとうございました。

この記事を書いた人