こんにちは、フリーランスのエンジニアとして5年ほど活動しているしょーごと申します。
突然ですが、「プロのレビューが受けられる実戦形式のコーディング課題」があったら、やってみたいですか？
自分も駆け出し期に感じてたのでその気持ち、分かります…!
この記事ではそんな問題を解決するコーディング課題について解説していきます！
＼圧倒的にお得な全部盛りセットはこちら！／
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
| 課題の名称 | 学習内容 | 目安期間 | 価格 | 対象レベル | 更に詳しく |
| 【入門】XDデザインカンプからのコーディング練習 | 超基礎的なHTML.CSS | 3~5日程度 | 無料 | デザインカンプからのコーディングが初めての方 | 入門編の詳細はこちらから |
| 【初級】XDデザインからのコーディング練習 | 基礎的なHTML,CSS | 3~5日程度 | ¥500 | デザインカンプからのコーディングが初めての方 | 初級編の詳細はこちらから |
| 【初級Ex】 XDデザインからのコーディング実践演習 | HTML.CSSの基礎総復習 | 7日程度 | ¥1,480 | いくつか簡易なデザインカンプからのコーディングをこなされた方 | 初級Ex編の詳細はこちらから |
| 【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう | jQuery,JSでよくある実装を学習 | 3日程度 | ¥800 | jQuery,JSの基礎を本などで学ばれた方 | JavaScript,jQuery特訓編の詳細はこちらから |
| 【中級】XDデザインからのコーディング実践演習 | jQueryやJSの導入 | 5日 | ¥1,680 | jQueryやJSの基礎を学ばれて初実践な方 | 中級編の詳細はこちらから |
| 【中級Ex】 XDデザインからのコーディング実践演習 | 高度なCSSとJavaScriptライブラリの使用 | 7~10日 | ¥2,480 | 高度なCSSアニメーションやJSのコーディング経験を積みたい方 | 中級Ex編の詳細はこちらから |
| 【上級】XDデザインからのコーディング実践演習 | WordPressを活用したメディア型企業サイト | 10~14日 | ¥3,480 | WordPressの基礎学習を終えた方 | 上級編の詳細はこちらから |
| 【即戦力編】Photoshopデザインカンプからのコーディング練習 | 土木・製造業の静的トップページ | 5日 | ¥2,480 | Photoshop未経験&難易度の高いコーディング案件を試したい方 | Photoshop編の詳細はこちらから |
| Web制作会社に特化した最強の営業法 | 制作会社への営業マニュアル | 1日 | ¥4,980 | 上記課題を終えて営業する段階の方 | 詳細はこちらから |
動画でも解説しています！
前提：実務コーディングは99%がデザインカンプから行う
コーディング練習と行っても、世の中には二種類あります。
- サイトを検証ツールで見ながら再現していく（これがよく言われる模写というもの）
- デザインカンプからコーディングを行う（実務と同じ方法で模写ではない）
この内、「①サイトを検証ツールで見ながら再現していく」は私が独立した当初に流行していた方法でした。
私もこの方法、所謂「模写」で当初学習していましたが、しかしこれは実務とはかけ離れた学習方法でした。
デザインデータからのコーディングができないと仕事にならない
実際にコーディング案件を見てみるとわかりますが、
大半がデザインデータからのコーディングです。
制作会社も開発会社もどこも全部そうです。
私も周りも当時誰も、それがスタンダードだと知らなかったので、阿鼻叫喚だったのを覚えています笑
だから、将来は限りなく実務に近い形で学習できる教材を作ってあげたいと、当時から思っていたのでした。
デザインカンプからのコーディング手順
- まずは仕様書やデザインを見る
- デザインデータから画像や素材を書き出す
- デザインを確認しつつコーディングを行う
- Basic認証などをかけたテストサーバーにアップロードする
- セルフチェックを行う
- 初稿提出し、確認してもらう→大抵は再修正が起こる
- 再提出→納品
こんな感じだと思います。これをいきなり実務でやるのは怖いですよね^^;
なので、この一連の演習課題でたくさんトライアンドエラーをしてもらえたらと思います。
デザインからのコーディング課題紹介
課題は「初級からPhotoshop編」まで複数リリースしております。
| 初級 | 初級Ex | 中級 | 中級Ex | 上級 | Photoshop (スマホカンプ付き) | |
| HTML.CSS難易度 | ★☆☆☆☆ | ★★☆☆☆ | ★★★☆☆ | ★★★★☆ | ★★★☆☆ | ★★★★★ |
| JS.jQuery難易度 | なし | なし | ★☆☆ | ★★☆ | ★★☆ | ★★☆ |
| WordPress対応 | なし | なし | なし | なし | あり | なし |
| ページ数 | 1 | 1 | 1 | 4 | 7 | 1 |
| 料金 | ¥500 | ¥1,480 | ¥1,680 | ¥2,480 | ¥3,480 | ¥2,480 |
| 表示確認特典 | なし | あり | あり | あり | あり | あり |
「中級Ex、上級、Photoshop編」は三種の神器
Web制作を始める人が多い中でも、「中級Ex」「上級」「Photoshop編」のいわゆる「3種の神器」を終わらせた人は、2022年以後も調子よく案件を獲得していっています。
「3種の神器」は実際、制作会社からもかなり評価が高いです。
なので、ぜひここまで終えてほしいです！
早い人だと2ヶ月で最後のPhotoshop編まで終えられる方もいます。
マガジンがお得！
基本的にマガジンとしてまとめ買いしてもらったほうがお得になるようにしております。
ロードマップ(無料)とセットで活用
各教材がどれぐらいのレベル感のときに取り組めばいいのかは、以下の独学ロードマップの記事を参照いただければわかりやすいかと思います
以下のロードマップに本教材は全部組み込まれております。
ちなみに、ロードマップを完走していただければ、フルリモートでの就職転職も十分可能です。
Web制作を独学している方に届けたい…
スクールは高くて通えません…
こんな方でもできるだけ最前線で戦えるように道のりを整備したのが「ロードマップ&コーディング課題」です。
完走できれば、スクールに数十万払わなくても、十分即戦力レベルまで持っていくことができます！
「全部盛り」はたっぷり量がありますが、それでも一ヶ月で上級まで行く人もいて、驚きです。
＼圧倒的にお得な全部盛りセットはこちら！／
このコーディング演習課題作成の思い
この教材は「教科書」というより、「問題集」になります。自分のコーディング力を高めるための演習教材としてご活用ください。
高品質なポートフォリオを準備できる
課題をこなしていく中で、高品質なポートフォリオを複数準備することができます。
制作会社のコーダーさんにもご活用いただいております！
表示確認特典の価値
大事なことなので、教材説明の前に述べさせてください。
私の教材では初級編など一部を覗き、基本的にすべて「表示確認特典」をつけています。
これには明確な理由があります。
ポートフォリオ表示崩れ多すぎ問題
私と同時期にフリーランスになった方々の多くはディレクターになったか、デザイン・コーディングチームを率いているか、マーケターになるか、
はたまた起業するなどして、各々コーダーへの「発注者」に回ることも多いわけですが、
最近駆け出しの方から営業メールが来る機会が増えているようです。
その中で多く聞くのが「ポートフォリオがひと目見てずれてるのが大半」という言葉です。
確かにその傾向はある気がする一方、勉強を始められたばかりの方々には自分では気づきにくいのも事実。
そこでこの教材に「表示確認特典もつけちゃおう！」ということで、お値段そのままに「2回の表示確認特典」をつけているのです。
ちなみにレビュー期限はないので、1年後とかでも全然レビューします
セルフチェックシート無料配布！！
実案件では提出前に『セルフチェック』を行うのが常識です。
この教材では
- 実案件でも使えるセルフチェックシーを配布し確認
- 各課題毎によくある指摘ポイントを掲載
しているので、セルフチェックの練習をすることができます。
実案件前に習慣づけておきましょう。
PDFで実案件でも使えるチェックシートをプレゼントしています。
このコーディング課題の強みをまとめると
| デザインカンプからのコーディングである | 模写ではなく、実務と同様の「デザインカンプからのコーディング」を練習することができます。 |
|---|---|
| デザインがリアル | よくある「練習感のあるサイト」ではなく、実在していてもおかしくないデザインを心がけました。 |
| ポートフォリオとして使える | ポートフォリオとして使えない課題が多い中、この課題では「コーディングのポートフォリオ利用」をOKとしています。 |
| 現役プロのレビューが受けられる | 他のコーディング課題では行っていない、高品質なレビューが各課題最大2回受けられます。 |
| セルフチェックシートを配布 | 実務でそのまま利用できるセルフチェックシートを配布しており、提出前に徹底して行うことにより、限りなく実案件に近い環境を実現しています。 |
各コーディング課題の紹介
【入門】XDデザインからのコーディング練習【無料です】
初級編でもちょっとむずかしいかも…
といったお声を拝見しましたので、無料にて「入門編」をリリースしました。
初級編より少し優しくしています。
無料ですが、XDデザインからのコーディングなので、実務と工程はほとんど同じです。
- デザインからのコーディング経験がない
- まずは簡単なもので自信をつけたい
- 挫折経験がある
こんな人に入門編は推したいです。
＼入門編は無料で見れます／
【初級】XDデザインからのコーディング練習【HTML/CSS】（模範解答付き）
「初級」はコーディングを始めたばかりの方にむけて出しているnoteになります。
初学者の頃はわからないことだらけで、挫折する確率が最も高い場所になります。
この教材ではとにかく
「私にもできそう！」を経験してもらうために優しく作っており、模範解答もつけております。
入門はできそうな気がする、または行った
入門から進んだ人なら割とすんなりいきつつも、入門にはない要素があるので、良い経験を積めると思います。
＼初級はこちらから／
【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】
「初級Ex」は少し難しいデザインで、HTML.CSSの基礎を総復習できるような課題になっております。
初級編より難しく、HTML,CSSだけでも「ポートフォリオ」として使っていただけるようなレベル感のものを作成しました。結構難しいですが、その分鍛えられます。
- 少し難しいHTML,CSSのレイアウトに挑戦したい
- JSに取り掛かる前に、HTML.CSSを総復習したい
縦書きという、おそらくこの段階では「未知の要素」も出てきますので、かなりググり力が鍛えられ、やりごたえがあると思います。
＼初級Exはこちらから／
【中級】XDデザインからのコーディング練習【JavaScript導入】
「中級」はある程度HTML.CSSに習熟した方が、次のステップとしてJavaScriptのライブラリや、jQueryを練習できるように作成した教材になります。
ポートフォリオとしても活用いただけるレベル感を目指したため、初級編と比べても難しめにしております。
その分「完走後に表示確認特典」をつけており、実案件レベルで細かくチェックしますので、ここで鍛えられます。
- jQueryやJSを使用してサイトに動きをつけてみたい
- 実務でもよくあるフォームの実装を練習したい
中級編の教材は無料でライブコーディング動画も出しておりますので、そちらもぜひ見てみてください。
＼中級でサイトに動きをつける！／
【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】
「中級Ex」ではHTML，CSS，JSを駆使し、和風な温泉旅館サイトを構築していきます。
中級Exからは「複数ページのサイト」になります。
とにかく「HTML,CSS,JSの実案件ってこんな感じだよな」となるものを作ったので、こちらを完走された方は、即HTML,CSS,JSの実案件に挑戦することができます。
それぐらいの難易度感ですが、やりきった自分への大きな自信もつけることができます。
- 縦書きが多い和風サイトに挑戦してみたい
- CSSアニメーションを学びたい
- 複数ページの構築法を身につけたい
HTML,CSS.JSのみの静的サイト実案件レベルになります。
＼中級ExでHTMLサイトはバッチリ／
【上級】XDデザインからのコーディング演習【WordPress実案件レベル】
「上級」は私がおすすめしている完全独学ロードマップに含めている「WordPressレッスンブック」を完走したぐらいから取り組めるもので、実案件レベルの難易度になります。
とにかく発注者視点から評価されるポートフォリオを目指して全力で作成しました。
題材と構成は、評価されやすいコーポレート型にし、実装仕様書もつけて、10~20万のWordPress実案件レベルのものを作成しました。
これで実際の案件のレベル感を体感して頂けたらと思います。
また、営業する際の機能アピールポイントもつけてますので、自信満々にポートフォリオとして活用いただけたらと思います。
実案件レベルのWordPress力を身に着けたい
強いポートフォリオを準備したい
＼上級でWordPress力を底上げ／
【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】
「JavaScript,jQuery特訓編」はweb制作に特化した「JavaScript,jQuery教材」になります。
とにかく「Web制作ですぐ役立つJS力をつける」ことを目標にしています。JSって何をどう勉強して使えばいいのか分かりづらいと思いますが、本教材では「web制作実案件でよくある実装」を体験することができます。
また、解答コードを準備しているため、そのまま実案件でもコードをお使いいただくことができます。
web制作でのJSに慣れていただけたらと思います。
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るのボタン
- アコーディオン
- モーダル
- タブ
JavaScript.jQuery両方を練習できるし、書き方の差異を見るだけでも参考になると思います！
＼jQuery,JSを克服する問題集／
【即戦力編】Photoshopデザインからのコーディング演習
「Photoshop編」はPhotoshopデザインカンプからのコーディング課題になります。
上級までの課題で実案件レベルのコーディング力は身につきますが、実案件では多くのデザインデータがPhotoshopで来ることになります。
なので、
という方にご要望にお答えして、最高クオリティの課題をご用意しました。
Photoshopに成熟したデザイナーさんにお願いしました。
- ファーストビューCSSアニメーション
- スクロールでヘッダー変更
- ローディングアニメーション
- スクロールアニメーション
PhotoshopからのコーディングはXDと比べると間違いなく難しいです。でも実案件では大半がPhotoshopで来ますから、練習しておくとパニクらなくなります。
＼Photoshopをこなし即戦力レベルを目指す／
マガジン紹介
デザインカンプからのコーディング教材全部盛り！
コーディング教材全部盛り！はマガジンで、これまで紹介した教材がすべてまとまったセットになっております。
まとめて買ったほうが、価格的にかなりお得になるようにしています。また、これから新たな教材が出ても自動的にこのマガジンに追加されます。
新規教材も追加予定なので、全部盛りがダントツでおすすめです！この課題群をクリアできれば全然案件は獲得できますし、転職の協力な武器にもなります（新規教材が出た際は値上げします）
歴3年のマークアップエンジニアは「時給¥3.500〜」程度得ているのを考えると、
計10回（初級Ex以降）ものレビューを受けられる「全部盛りセット」は、レビューだけで1万円以上の価値があります。
フル活用しちゃってください(;_;)
＼コーディングを本気で仕事にするならこれ！／
デザインカンプからのコーディング教材中級上級JSセット
コーディング教材中級上級JSセットは中級以上全てをまとめたマガジンになります。すでに初級、初級Exを持っているかたは、こちらで揃えたほうがお得になります。
＼デザインからのコーディング経験者向け／
実務レベルを体感してほしい
これをご覧の方には、ぜひ上級編まで完走して実務レベルを経験してから、仕事をとっていってもらいたいなと思います。
特に上級編は就職転職でも役立つはずです。
みなさまの学習を応援しております👍
過去の完走者の感想・コメント
このコーディング課題を購入した人の感想やその後をお聞きしました。
中には転職成功した人などもいるので、ぜひ購入前に参考にしてみてください。
課題につまづいた際に勇気をもらえるようなコメントも多数いただいています↓
以下に一部抜粋します。
一通り課題が終わったら
制作会社への「正しい」営業法を学ぼう
ポートフォリオを完成させても、正しい営業を行わないと制作会社からは返信すら返ってこない可能性があります。
そこでこの「Web制作会社に特化した最強の営業法」をリリースしました。
このコンテンツでは、
❶営業概論
まずは営業全般についてお話し、制作会社への営業が全体の営業でどんな立ち位置にあるのかを解説します。
❷営業前準備
その後、営業ではめちゃくちゃ重要なポートフォリオについてお話します。
また制作会社の営業先の「効率のよいリストアップ方法」についてお伝えします。
❸営業
そしてメインの
・営業手法
・営業文作成（具体例付き）
・営業管理
・制作会社へのインタビュー/これから営業をかける人へのアドバイス
以上を掲載しています。
＼総販売部数に制限あり！お早めに／
よくある質問FAQ
はい、問題ございません。マガジンについては、個別購入より価格的に有利になるように設計しており、それが最大化されているのが「全部盛りマガジン」ということになります。
こちらの記事でマガジン内の記事の閲覧方法がわかります
https://shogo-log.com/note-magazine-way/
質問は対応しておりません。ヒントとして、過去完走者のサイトを初級Ex以降は掲載しており、初級は解答があります。中級はライブコーディングをYouTubeで出しています。入門に関してもライブコーディングを出す予定です。
わかりやすく解説した記事リンクを教材内で紹介しており、そちらを見ていただければまず問題ないです。XD自体はかなり直感的なので。入門編は無料なので、そちらで試してみるのもありです。
十分に可能です。個人的にはPhotoshop編まで終わらせていただくと、かなり良いかなと思います。課題の提出数もPhotoshop編まで来るとかなり少なくなるので、そこまでいかれる方は少ないですが、かなり結果を出している印象です。
あなたを一歩前に進ませる課題
私はどちらかというと「ずっと勉強ばかりして、実践になかなかいけないタイプ」です。そんな人の気持がわかるからこそ、背中を押すような課題を作りたいと思い、企画・制作しました。
この課題があなたの人生を変えるものになる自信があります。
ここまでご覧いただき、ありがとうございました。応援しております＼(^o^)／
動画でも説明を見てみる↓
| 課題の名称 | 学習内容 | 目安期間 | 価格 | 対象レベル | 更に詳しく |
| 【入門】XDデザインカンプからのコーディング練習 | 超基礎的なHTML.CSS | 3~5日程度 | 無料 | デザインカンプからのコーディングが初めての方 | 入門編の詳細はこちらから |
| 【初級】XDデザインからのコーディング練習 | 基礎的なHTML,CSS | 3~5日程度 | ¥500 | デザインカンプからのコーディングが初めての方 | 初級編の詳細はこちらから |
| 【初級Ex】 XDデザインからのコーディング実践演習 | HTML.CSSの基礎総復習 | 7日程度 | ¥1,480 | いくつか簡易なデザインカンプからのコーディングをこなされた方 | 初級Ex編の詳細はこちらから |
| 【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう | jQuery,JSでよくある実装を学習 | 3日程度 | ¥800 | jQuery,JSの基礎を本などで学ばれた方 | JavaScript,jQuery特訓編の詳細はこちらから |
| 【中級】XDデザインからのコーディング実践演習 | jQueryやJSの導入 | 5日 | ¥1,680 | jQueryやJSの基礎を学ばれて初実践な方 | 中級編の詳細はこちらから |
| 【中級Ex】 XDデザインからのコーディング実践演習 | 高度なCSSとJavaScriptライブラリの使用 | 7~10日 | ¥2,480 | 高度なCSSアニメーションやJSのコーディング経験を積みたい方 | 中級Ex編の詳細はこちらから |
| 【上級】XDデザインからのコーディング実践演習 | WordPressを活用したメディア型企業サイト | 10~14日 | ¥3,480 | WordPressの基礎学習を終えた方 | 上級編の詳細はこちらから |
| 【即戦力編】Photoshopデザインカンプからのコーディング練習 | 土木・製造業の静的トップページ | 5日 | ¥2,480 | Photoshop未経験&難易度の高いコーディング案件を試したい方 | Photoshop編の詳細はこちらから |
| Web制作会社に特化した最強の営業法 | 制作会社への営業マニュアル | 1日 | ¥4,980 | 上記課題を終えて営業する段階の方 | 詳細はこちらから |
Q:デザインデータ、デザインカンプとは？
A:PhotoshopやIllustrator、XDなどのデザインツールで作られたもの