こんにちは、フリーランスのエンジニアとして3年ほど活動しているしょーごと申します。
今回はHTML初学者からWordPress実務案件レベルまで対応したコーディング教材をリリースしましたので、ご紹介させていただきます。
- この教材で何ができるようになるのか
- ほかの教材と何が違うのか
こういった点に絞ってお話をしていこうと思います。
- 前提：実務コーディングは99%がデザインカンプから行う
- デザインデータからのコーディング手順
- 模写コーディング教材紹介
- 教材全体の構成
- このコーディング演習課題作成の思い
- 高品質なポートフォリオを準備できる
- 表示確認特典の価値
- セルフチェック習慣の育成
- すでに課題をこなした方からのメッセージ・アドバイス
- 【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）
- 【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】
- 【中級】XDデザインからのコーディング練習【JavaScript導入】
- 【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】
- 【上級】XDデザインからのコーディング演習【WordPress実案件レベル】
- 【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
- 【即戦力編】Photoshopデザインからのコーディング演習
- マガジン紹介
- 実務レベルを体感してほしい
- おまけ：完全無料の入門編出しました
- 制作会社への最強の営業法出しました
前提：実務コーディングは99%がデザインカンプから行う
コーディング練習と行っても、世の中には二種類あります。
- サイトを検証ツールで見ながら再現していく（これがよく言われる模写というもの）
- デザインカンプからコーディングを行う（実務と同じ方法で模写ではない）
この内、「①サイトを検証ツールで見ながら再現していく」は私が独立した当初に流行していた方法でした。
私もこの方法、所謂「模写」で当初学習していましたが、しかしこれは実務とはかけ離れた学習方法でした。
デザインデータからのコーディングができないと仕事にならない
実際にコーディング案件を見てみるとわかりますが、
大半がデザインデータからのコーディングです。
制作会社も開発会社もどこも全部そうです。
私も周りも当時誰も、それがスタンダードだと知らなかったので、阿鼻叫喚だったのを覚えています笑
だから、将来は限りなく実務に近い形で学習できる教材を作ってあげたいと、当時から思っていたのでした。
デザインデータからのコーディング手順
- デザインデータから画像や素材を書き出す
- 余白やフォントサイズ、フォントの種類、色、影、line-height,letter-spacingまで確認する
- 仕様書に挙動やコーディングガイドラインなどの記述があるので、それに沿ってコーディングする
こんな感じだと思います。これをいきなり実務でやるのは怖いですよね^^;
なので、この教材でたくさんトライアンドエラーをしてもらえたらと思います。
模写コーディング教材紹介
となっておりますので、上から順番に軽く解説してきます（教材詳細はリンク先のnoteよりお願いします＼(^o^)／）
教材全体の構成
教材は「初級からPhotoshop編」まで複数リリースしております。
そして、基本的にマガジンとしてまとめ買いしてもらったほうがお得になるようにしております。
各教材がどれぐらいのレベル感のときに取り組めばいいのかは、以下の独学ロードマップの記事を参照いただければわかりやすいかと思います（このロードマップに本教材は全部組み込まれております）
このコーディング演習課題作成の思い
この教材は「教科書」というより、「問題集」になります。自分のコーディング力を高めるための演習教材としてご活用ください。
高品質なポートフォリオを準備できる
課題をこなしていく中で、高品質なポートフォリオを複数準備することができます。
表示確認特典の価値
大事なことなので、教材説明の前に述べさせてください。
私の教材では初級編など一部を覗き、基本的にすべて「表示確認特典」をつけています。
これには明確な理由があります。
ポートフォリオ表示崩れ多すぎ問題
私と同時期にフリーランスになった方々の多くはディレクターになったか、デザイン・コーディングチームを率いているか、マーケターになるか、
はたまた起業するなどして、各々コーダーへの「発注者」に回ることも多いわけですが、
最近駆け出しの方から営業メールが来る機会が増えているようです。
その中で多く聞くのが「ポートフォリオがひと目見てずれてるのが大半」という言葉です。
確かにその傾向はある気がする一方、勉強を始められたばかりの方々には自分では気づきにくいのも事実。
そこでこの教材に「表示確認特典もつけちゃおう！」ということで、お値段そのままに「表示確認特典」をつけているのです。
セルフチェック習慣の育成
実案件では提出前に『セルフチェック』を行うのが常識です。
この教材では『予めチェック項目を指定している』ので、セルフチェックの練習をすることができます。
実案件前に習慣づけておきましょう。
すでに課題をこなした方からのメッセージ・アドバイス
これからコーディング課題での学習を始められる方に向けてメッセージやアドバイスを頂いております。
ぜひみなさんの「少し先」を行く先輩方の言葉に目を通してみて下さい。
「課題終了後実案件をこなされた方」のメッセージもかなり参考になるかと思います。
【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）
コーディングを始めたばかりの方にむけて出しているnoteになります。
初学者の頃はわからないことだらけで、挫折する確率が最も高いレイヤーになります。
この教材ではとにかく
「私にもできそう！」を経験してもらうために優しく作っており、模範解答もつけております。
【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】
初級編より難しく、HTML,CSSだけでも「ポートフォリオ」として使っていただけるようなレベル感のものを作成しました。結構難しいですが、その分鍛えられます。
【中級】XDデザインからのコーディング練習【JavaScript導入】
ある程度HTML.CSSに習熟した方が、次のステップとしてJavaScriptのライブラリや、jQueryを練習できるように作成した教材になります。
ポートフォリオとしても活用いただけるレベル感を目指したため、初級編と比べても難しめにしております。
その分「完走後に表示確認特典」をつけており、実案件レベルで細かくチェックしますので、ここで鍛えられます。
中級編の教材は無料でライブコーディング動画も出しておりますので、ぜひ見てみてください。
【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】
HTML，CSS，JSを駆使し、和風な温泉旅館サイトを構築していきます。
とにかく「HTML,CSS,JSの実案件ってこんな感じだよな」となるものを作ったので、こちらを完走された方は、即HTML,CSS,JSの実案件に挑戦することができます。
それぐらいの難易度感ですが、やりきった自分への大きな自信もつけることができます。
【上級】XDデザインからのコーディング演習【WordPress実案件レベル】
私がおすすめしている完全独学ロードマップに含めている「WordPressレッスンブック」を完走したぐらいから取り組めるもので、実案件レベルの難易度になります。
とにかく発注者視点から評価されるポートフォリオを目指して全力で作成しました。
題材と構成は、評価されやすいコーポレート型にし、実装仕様書もつけて、10~20万のWordPress実案件レベルのものを作成しました。
これで実際の案件のレベル感を体感して頂けたらと思います。
また、営業する際の機能アピールポイントもつけてますので、自信満々にポートフォリオとして活用いただけたらと思います。
【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
web制作に特化した「JavaScript,jQuery教材」を作成しました。
とにかく「Web制作ですぐ役立つJS力をつける」ことを目標にしています。JSって何をどう勉強して使えばいいのか分かりづらいと思いますが、本教材では「web制作実案件でよくある実装」を体験することができます。
また、解答コードを準備しているため、そのまま実案件でもコードをお使いいただくことができます。
web制作でのJSに慣れていただけたらと思います。
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るのボタン
- アコーディオン
- モーダル
- タブ
JavaScript.jQuery両方を練習できるし、書き方の差異を見るだけでも参考になると思います！
【即戦力編】Photoshopデザインからのコーディング演習
上記課題で実案件レベルのコーディング力は身につきますが、実案件では多くのデザインデータがPhotoshopで来ることになります。
なので、
という方にご要望にお答えして、最高クオリティの課題をご用意しました。
Photoshopに成熟したデザイナーさんにお願いしました。
- ファーストビューCSSアニメーション
- スクロールでヘッダー変更
- ローディングアニメーション
- スクロールアニメーション
マガジン紹介
模写コーディング教材全部盛りセット【初級中級上級 JS】
こちらはマガジンで、これまで紹介した教材がすべてまとまったセットになっております。
まとめて買ったほうが、価格的にお得になるようにしています。
歴3年のマークアップエンジニアは「時給¥3.500〜」程度得ているのを考えると、
計10回（初級Ex以降）ものレビューを受けられる「全部盛りセット」は、レビューだけで1万円以上の価値があります。
フル活用しちゃってください(;_;)
模写コーディング教材 初級・初級Exセット
初級編と初級Exをまとめた教材になります。いきなり全部盛りを購入するより、一回様子を見たい方は、こちらをご購入ください。
中級・中級Exセット【HTML,CSS,JS実案件レベル】
中級と中級Exをまとめた教材になります。
このシリーズでは、HTML,CSS,JSの実案件レベルまでスキルと胆力を底上げすることができます。
模写コーディング教材 中級上級セット
こちらは中級上級をまとめたマガジンになります。すでに初級を持っているかたは、こちらで揃えたほうがお得になります。
実務レベルを体感してほしい
これをご覧の方には、ぜひ上級編まで完走して実務レベルを経験してから、仕事をとっていってもらいたいなと思います。
特に上級編は就職転職でも役立つはずです。
みなさまの学習を応援しております👍
おまけ：完全無料の入門編出しました
初級編でもちょっとむずかしいかも…
といったお声を拝見しましたので、無料にて「入門編」をリリースしました。
初級編より少し優しくしています。
こちらも合わせてご確認ください！
Q:デザインデータ、デザインカンプとは？
A:PhotoshopやIllustrator、XDなどのデザインツールで作られたもの