コーディング演習教材を出しました【HTML初心者からWordPress実案件レベルまで】

こんにちは、フリーランスのエンジニアとして3年ほど活動しているしょーごと申します。

今回はHTML初学者からWordPress実務案件レベルまで対応したコーディング教材をリリースしましたので、ご紹介させていただきます。

この教材で何ができるようになるのか
ほかの教材と何が違うのか

こういった点に絞ってお話をしていこうと思います。

リリースしている教材一覧

画像にすると、こんな感じです。

前提：実務コーディングは99%がデザインカンプから行う
デザインデータからのコーディング手順
模写コーディング教材紹介
実務レベルを体感してほしい
おまけ：完全無料の入門編出しました

前提：実務コーディングは99%がデザインカンプから行う

コーディング教材と行っても、世の中には二種類あります。

サイトを検証ツールで見ながら再現していく
デザインカンプからコーディングを行う（厳密には模写ではない）

この内、「①サイトを検証ツールで見ながら再現していく」は私が独立した当初に流行していた方法でした。

私もこの方法で当初学習していましたが、しかしこれは実務とはかけ離れた学習方法でした。

デザインデータからのコーディングができないと仕事にならない

実際にコーディング案件を見てみるとわかりますが、

クラウドソーシング「ランサーズ」

大半がデザインデータからのコーディングです。制作会社も開発会社もどこも全部そうです。

Q:デザインデータ、デザインカンプとは？
A:PhotoshopやIllustrator、XDなどのデザインツールで作られたもの

私も周りも当時誰も、それがスタンダードだと知らなかったので、阿鼻叫喚だったのを覚えています笑

だから、将来は限りなく実務に近い形で学習できる教材を作ってあげたいと、当時から思っていたのでした。

デザインデータからのコーディング手順

デザインデータから画像や素材を書き出す
余白やフォントサイズ、フォントの種類、色、影、line-height,letter-spacingまで確認する
仕様書に挙動やコーディングガイドラインなどの記述があるので、それに沿ってコーディングする

こんな感じだと思います。これをいきなり実務でやるのは怖いですよね^^;

なので、この教材でたくさんトライアンドエラーをしてもらえたらと思います。

しょーご

今の自分が駆け出し期の自分に与えたい理想の教材を目指しました

模写コーディング教材紹介

今回紹介する教材は全部で

となっておりますので、上から順番に軽く解説してきます（教材詳細はリンク先のnoteよりお願いします＼(^o^)／）

各教材がどれぐらいのレベル感のときに取り組めばいいのかは、以下の独学ロードマップの記事を参照いただければわかりやすいかと思います（このロードマップに本教材は全部組み込まれております）

表示確認特典の価値

大事なことなので、教材説明の前に述べさせてください。

私の教材では初級編など一部を覗き、基本的にすべて「表示確認特典」をつけています。

これには明確な理由があります。

ポートフォリオ表示崩れ多すぎ問題

私と同時期にフリーランスになった方々の多くはディレクターになったか、デザイン・コーディングチームを率いているか、マーケターになるか、

はたまた起業するなどして、各々コーダーへの「発注者」に回ることも多いわけですが、

最近駆け出しの方から営業メールが来る機会が増えているようです。

その中で多く聞くのが「ポートフォリオがひと目見てずれてるのが大半」という言葉です。

確かにその傾向はある気がする一方、勉強を始められたばかりの方々には自分では気づきにくいのも事実。

そこでこの教材に「表示確認特典もつけちゃおう！」ということで、お値段そのままに「表示確認特典」をつけているのです。

詳細はnoteを御覧ください。

【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）

コーディングを始めたばかりの方にむけて出しているnoteになります。

こだわりと特徴

初学者の頃はわからないことだらけで、挫折する確率が最も高いレイヤーになります。
この教材ではとにかく
「私にもできそう！」を経験してもらうために優しく作っており、模範解答もつけております。

【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）

【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】

こだわりポイント

初級編より難しく、HTML,CSSだけでも「ポートフォリオ」として使っていただけるようなレベル感のものを作成しました。結構難しいですが、その分鍛えられます。

【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】

【中級】XDデザインからのコーディング練習【JavaScript導入】

ある程度HTML.CSSに習熟した方が、次のステップとしてJavaScriptのライブラリや、jQueryを練習できるように作成した教材になります。

こだわりと特徴

ポートフォリオとしても活用いただけるレベル感を目指したため、初級編と比べても難しめにしております。
その分「完走後に表示確認特典」をつけており、実案件レベルで細かくチェックしますので、ここで鍛えられます。

中級編の教材は無料でライブコーディング動画も出しておりますので、ぜひ見てみてください。

【中級】XDデザインからのコーディング練習【JavaScript導入】

しょーご

ちなみに中級編は「めちゃ鍛えられました！」とよく言われます笑

【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】

HTML，CSS，JSを駆使し、和風な温泉旅館サイトを構築していきます。

こだわりと特徴

とにかく「HTML,CSS,JSの実案件ってこんな感じだよな」となるものを作ったので、こちらを完走された方は、即HTML,CSS,JSの実案件に挑戦することができます。
それぐらいの難易度感ですが、やりきった自分への大きな自信もつけることができます。

【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】

【上級】XDデザインからのコーディング演習【WordPress実案件レベル】

私がおすすめしている完全独学ロードマップに含めている「WordPressレッスンブック」を完走したぐらいから取り組めるもので、実案件レベルの難易度になります。

こだわりと特徴

とにかく発注者視点から評価されるポートフォリオを目指して全力で作成しました。
題材と構成は、評価されやすいコーポレート型にし、実装仕様書もつけて、10~20万のWordPress実案件レベルのものを作成しました。
これで実際の案件のレベル感を体感して頂けたらと思います。
また、営業する際の機能アピールポイントもつけてますので、自信満々にポートフォリオとして活用いただけたらと思います。

しょーご

2週間ですでにこなされた方がいます

【上級】XDデザインからのコーディング演習【WordPress実案件レベル】

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

web制作に特化した「JavaScript,jQuery教材」を作成しました。

こだわりと特徴

とにかく「Web制作ですぐ役立つJS力をつける」ことを目標にしています。JSって何をどう勉強して使えばいいのか分かりづらいと思いますが、本教材では「web制作実案件でよくある実装」を体験することができます。
また、解答コードを準備しているため、そのまま実案件でもコードをお使いいただくことができます。
web制作でのJSに慣れていただけたらと思います。

実際に作るもの一覧