こんにちは、フリーランスのエンジニアとして3年ほど活動しているしょーごと申します。
今回はHTML初学者からWordPress実務案件レベルまで対応したコーディング教材をリリースしましたので、ご紹介させていただきます。
- この教材で何ができるようになるのか
- ほかの教材と何が違うのか
こういった点に絞ってお話をしていこうと思います。
前提：実務コーディングは99%がデザインカンプから行う
コーディング教材と行っても、世の中には二種類あります。
- サイトを検証ツールで見ながら再現していく
- デザインカンプからコーディングを行う（厳密には模写ではない）
この内、「①サイトを検証ツールで見ながら再現していく」は私が独立した当初に流行していた方法でした。
私もこの方法で当初学習していましたが、しかしこれは実務とはかけ離れた学習方法でした。
デザインデータからのコーディングができないと仕事にならない
実際にコーディング案件を見てみるとわかりますが、
大半がデザインデータからのコーディングです。制作会社も開発会社もどこも全部そうです。
私も周りも当時誰も、それがスタンダードだと知らなかったので、阿鼻叫喚だったのを覚えています笑
だから、将来は限りなく実務に近い形で学習できる教材を作ってあげたいと、当時から思っていたのでした。
デザインデータからのコーディング手順
- デザインデータから画像や素材を書き出す
- 余白やフォントサイズ、フォントの種類、色、影、line-height,letter-spacingまで確認する
- 仕様書に挙動やコーディングガイドラインなどの記述があるので、それに沿ってコーディングする
こんな感じだと思います。これをいきなり実務でやるのは怖いですよね^^;
なので、この教材でたくさんトライアンドエラーをしてもらえたらと思います。
模写コーディング教材紹介
今回紹介する教材は全部で
となっておりますので、上から順番に軽く解説してきます（教材詳細はリンク先のnoteよりお願いします＼(^o^)／）
【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）
コーディングを始めたばかりの方にむけて出しているnoteになります。
初学者の頃はわからないことだらけで、挫折する確率が最も高いレイヤーになります。
この教材ではとにかく
「私にもできそう！」を経験してもらうために優しく作っており、模範解答もつけております。
【中級】XDデザインからのコーディング練習【JavaScript導入】
ある程度HTML.CSSに習熟した方が、次のステップとしてJavaScriptのライブラリや、jQueryを練習できるように作成した教材になります。
ポートフォリオとしても活用いただけるレベル感を目指したため、初級編と比べても難しめにしております。
その分「完走後に表示確認特典」をつけており、実案件レベルで細かくチェックしますので、ここで鍛えられます。
中級編の教材は無料でライブコーディング動画も出しておりますので、ぜひ見てみてください。
【上級】XDデザインからのコーディング演習【WordPress実案件レベル】
私がおすすめしている完全独学ロードマップに含めている「WordPressレッスンブック」を完走したぐらいから取り組めるもので、実案件レベルの難易度になります。
とにかく発注者視点から評価されるポートフォリオを目指して全力で作成しました。
題材と構成は、評価されやすいコーポレート型にし、実装仕様書もつけて、10~20万のWordPress実案件レベルのものを作成しました。
これで実際の案件のレベル感を体感して頂けたらと思います。
また、営業する際の機能アピールポイントもつけてますので、自信満々にポートフォリオとして活用いただけたらと思います。
模写コーディング教材全部盛りセット【初級中級上級】
こちらはマガジンで、これまで紹介した教材がすべてまとまったセットになっております。
初級編中級編上級編全部盛りセット
まとめて買ったほうが、価格的にお得になるようにしています。
模写コーディング教材 中級上級セット
こちらは中級上級をまとめたマガジンになります。すでに初級を持っているかたは、こちらで揃えたほうがお得になります。
中級上級セット
実務レベルを体感してほしい
これをご覧の方には、ぜひ上級編まで完走して実務レベルを経験してから、仕事をとっていってもらいたいなと思います。
特に上級編は就職転職でも役立つはずです。
みなさまの学習を応援しております👍
Q:デザインデータ、デザインカンプとは？
A:PhotoshopやIllustrator、XDなどのデザインツールで作られたもの