こんにちは、現役エンジニアのしょーごです。
このページをご覧の方の多くは「コーディングを学習中」だと思います。
ですが、学習中にこんな悩みを持ったことはないでしょうか？
今回ご紹介する「コーディング課題」は、この悩みを全て解決します。
ちなみに、この課題を作成している私自身は以下の実績があります。
- Web制作会社と5年以上一緒にコーディングしている(最近は新人教育も一部)
- これまで初学者50人以上の学習&案件獲得をサポート
- Web制作スクールのメンター数年
- Webシステムのフロント開発(Rails&Nuxt)
私の場合、ただ単に業界経験があるだけではなく、初学者のフリーランス独立をサポートしてきた経験から、業界で求められている人材も十分に理解しています。
今回紹介する課題は、そこから逆算してつくっているので、クオリティに自身ありです∠(｀・ω・´)
この記事ではしっかり納得した上で買ってほしいので、購入リンクまで記事が非常に長いです笑
すぐに購入リンクまで行きたい方は、以下からどうぞ！
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
デザインカンプからのコーディング練習課題とは？
デザインカンプからのコーディング練習課題は、実案件と同様のプロセスを経て、サイトを完成品として公開するところまで行っていただく、本格的なコーディング実践演習式課題です。
実案件では実装後に担当者のチェックが入るのが基本です。
そこで、この課題では現役エンジニアによる「2回の表示確認特典」をつけています。
また、全課題ポートフォリオとして利用OKです！！
元々はnoteで出していましたが…
このコーディング課題はこれまでnoteでのみ販売を行っていましたが、今後より一層コンテンツの質に注力していくために、このブログでも販売を開始しました。
noteのコーディング課題とこのブログのコーディング課題では何が違うの？
という疑問にお答えします。
結論としては、課題の内容はまるっきり一緒です。しかし、このサイトから購入していただいた場合は追加で特典をプレゼントしています！
詳しくはこのあと解説していきます。
デザインカンプからのコーディング課題の中身
デザインカンプからのコーディング課題では、以下のスライドにあるような課題を作成していきます。
同梱されている課題の違い
このサイトで販売している商品は大きく3つあります。
実はnoteの方では各課題のバラ売りもしています。しかし、こちらでまとめて購入していただくことで
- バラ買いよりも大幅に安くなる（最大25%）
- 限定特典がつく（この後解説）
こういったメリットを提供しています。
個人的には、まとめて購入して一気に最後まで完走していただきたい気持ちがあります。
各課題に2回の表示確認特典付き！！
このコーディング課題最大の特徴と言ってもいいのが「２回受けられる表示確認特典」です。
以下の流れで課題は進んでいきます。
表示確認は現場で使われているAUNを利用しています。
サイトの公開方法について
サイトを公開したことが無い方が多いかもしれませんが、課題の中でかなり優しく解説していますので、大丈夫です。
基本的にはレンタルサーバー上でBasic認証をかけた上で、課題をアップロードしていただきます。
実務でも使えるセルフチェックシートプレゼント！！
各教材ごとにチェック項目を指定しているので、セルフチェックの手法を学ぶことができます。
セルフチェック→表示確認の二段構えでクオリティの高いポートフォリオを準備することが可能になります。
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
月20万を稼げる&転職可能なレベルに到達できる
この課題の中の
- 中級Ex
- 上級
- Photoshop編
これらをクリアできれば、スキル的には月20万を稼げるスキルです。
Web制作コーディング独学のロードマップを参考に
各課題のレベルと、どのタイミングでやれば良いかが分かる
しょーごログでは「Web制作独学ロードマップ」を無料公開しています。
各コーディング課題はロードマップと照らし合わせて利用していただければ、
自分はこのレベルだから、この課題に取り組もう！！
というのが分かりやすくなります。
当サイトからの購入者限定プレゼントあり【追加あり】
第一弾：実案件の”上手い”納期設定の方法をプレゼントします！
各コーディング課題には目標納期を一応設定しています。
これは実案件より少しゆるくした納期設定となっていますが、実際の案件ではどのように納期を設定すれば良いのでしょうか？
具体例を元に限定動画で解説していきます。
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
即戦力編に同梱されているコーディング課題の紹介
中級Ex編
中級Exでは「石井花壇」という「架空の温泉旅館」のサイト構築を行います。
この課題から難易度がぐっと上がります(；・∀・)
この課題は「複数ページ」で構成されています
実際の案件では複数ページをコーディングすることがほとんどなので、本課題では下層ページを3枚つけました。
その他の特徴も合わせて一覧で書き出します。
- 複数ページで構成
- CSSアニメーションでの画像切替
- JavaScriptでモーダルやタブ、header制御
- JavaScriptのライブラリ使用（カレンダー）
- 頻出の和風レイアウト（縦書きCSS、ブロークングリッドなど）
- パンくずの構造化マークアップ
仕様が非常に実案件に近いので、こちらの課題を完走された方は、
「問題なくHTML,CSS,JSの案件に望める」
と思ってもらって大丈夫です👍
中級Ex以降は実績として強い
中級Ex以降はデザイン性も高いので、営業や就職・転職の際にコーディングスキルの大きなアピールになります。
ぜひみなさんにはこの先のPhotoshop編まで到達してほしいと思っています。
表示確認例
実案件レベルのHTML,CSS,JSの実装ができるようになる
上級編
上級編は英語資格のスクール(TOEFL)のサイトをWordPressで制作していきます。
今回は8ページあります。
ページの構成としては以下の感じで、実案件でよくある基本的なコーポレートサイトの要素を備えています↓
上級課題の特徴
- サイトの複数ページの構築方法が分かる→実案件の大半は複数ページのWordPressサイト
- WordPressサイトの構築を、プラグイン含め一通り学べる
- テスト方法を学べる（テーマユニットテスト）
特に、
・関連記事一覧の実装
・サブループ
・おすすめ記事の実装
・カスタム投稿、カスタムフィールド
・お問い合わせフォームの実装
など、初見だと詰まりやすい部分を凝縮させた課題になっています。
表示確認例
上級はページ数が多いのでかなりチェックが大変ですが、頑張ります(；・∀・)
多くの案件である「WordPress製コーポレートサイト」の実装ができるようになる
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
Photoshop編
Photoshop編は、その名の通りPhotoshopデザインカンプから「製造業・土木系サイト」をコーディングしていただきます。
WordPress化はなくトップページのみですが、デザインの難易度は最難関です。
なぜPhotoshopなのか？
このデザインカンプだけPhotoshopで作られていますが、これは意図的にそうしています。
実案件ではまだまだFigmaやXDではなく、Photoshopでデザインカンプが来ることが多いです。
しかし、Photoshopはいまいち直感的でないので、FigmaやXDに慣れていると、初見のときにコーディングする際にパニックになります(；・∀・)
そこで、この課題で練習できるようにしておきました。
注意点：Photoshopが必要です
AdobeのPhotoshopが必要になります。
最安で手に入れる方法は別途解説しているので、そちらから準備いただきます。
実務でも多くの場合使うことになりますからね。
特にポートフォリオとして大活躍します
このデザインはあらかたコーディング経験のある方で、しかもPhotoshopが必要だったり、取り組み自体のハードルがかなり高いので、
営業先でポートフォリオが被ることはまず無いのではと思ってます笑
また、「中級Ex」「上級」「Photoshop編」の３つで「三種の神器」と勝手に呼んでいます笑
実際この３つはかなりポートフォリオとして効いてくると思います。
ぜひ完走してほしいです。
今回は、普段から制作会社とPhotoshopメインでお仕事をされているWebデザイナーの方にデザイン作成をお願いしました。
また、今回は「スマホカンプ」を用意しておりますので、「スマホサイズもスマホカンプ通りにコーディング」する経験を積んでいただけます。
Photoshopデザインから複雑な実装ができるようになる
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
コーディング課題完走者の口コミ・成果
こちらではこれまでコーディング課題を完走した人の口コミを掲載しています。
クライアントにクオリティを褒められる!!
コーディング課題→クラウドソーシングで案件受注→納品
学習開始3ヶ月でPhotoshop編まで完走！！
銀行員→フルリモートの正社員コーダー
コーディング課題→Web制作会社と提携
制作会社の社員さんも活用！！
また、過去に完走された方の感想を以下の記事にまとめています。
- 制作会社に転職
- フルリモートコーダーとして就職
- フリーランスとして制作会社と提携
など実績を出した方も多いですが、多くの挑戦と苦戦があったのがよくわかります。
リアルな感想がたくさん見れます！苦戦する課題たちですが、その分結果に繋がります。
よくある質問
可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です
通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。
模範回答はありませんが、完走者の実装例を複数掲載しているので、参考にしていただくことが可能です。また、難関ポイントは動画解説を加えています。
質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております（初級Exより）。また解説動画を用意しており、今後より一層挫折を防ぐ仕組みづくりを構築していきます。
本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
noteでは販売していますが、こちらのサイトでは単体販売の予定はありません。また、こちらのサイトで購入頂いた場合は限定特典をプレゼント予定です。
noteも動画解説など同様に更新していきます！違いは「限定コンテンツの有無のみ」です。
価格について
この即戦力セットは¥10,320で販売しています。
この一連のコーディング課題の、例えば中級Exがもしコーディング実案件であれば¥50,000~¥70,000で受注でき、すぐにコスト回収ができます。
上級のWordPressまでいけば、一発で¥200,000も硬いです。
つまりこの一連のコーディング課題をクリアすることで「月収20万を稼げるスキル」は確実に身につきます。
正直”各課題毎にレビューを2回まで受けられる“という特典があって、この金額は破格すぎるのですが、学習中の方はお金の無い方も多いだろうと思い、この価格で頑張って販売しています。
ただ、今後コンテンツの追加やFigam化などで値上げする可能性は大いにあるので、お早めにご検討ください。
全ては「自分が駆け出しのときに欲しかったもの」を「今必要な人に」という思いで、サービス運営しています。
＼案件獲得に必要な実績とスキルが効率よく手に入る！／
最後に、購入前のメッセージ(ご購入前にご確認ください)
実務志向なので、少し厳しい課題になります
このコーディング課題群は「実案件レベルまで鍛え上げる」ことを目的に作成しているので、最初はかなりきついと思います。
課題の一回目提出前のセルフチェックも、チェック項目や頻出のミスポイント情報を提供した上で、徹底して行ってもらいます。
実務では先方に実装を確認して貰う前に、こちらでセルフチェックを行うのが基本になります。
イメージしにくいかもしれませんが大丈夫。失敗可能なここで練習しておきましょう！！
質問対応には未対応です
申し訳ありません。このサービスは表示確認含めて外注せず完全に私一人で運営しており、
質問対応まで行うと私のキャパシティオーバーになってしまうので、質問対応は行っておりませんm(_ _)m
それゆえこの価格で提供できています。その代わりに、
- 過去の完走者の実装例を掲載
- 難関ポイントの解説動画の準備
これによって、皆さんの挫折を極力防いでいきます。
解説は随時増やしていきます！！
頑張る意志の強い、あなたを応援したい
ここまで読んで検討してくださるあなたは、きっと頑張る意志の強い人なのでしょう。
このコーディング課題は確かに手強く、実際楽ではありません。
しかし、その分コーディング力がみるみるうちに上がっていくのを確実に感じられます。
ここで過去の受講生のリアルなメッセージをご紹介させていただきます（原文はこちら）
あなたの課題の提出を楽しみにしております！！
即戦力編の購入はこちら
即戦力編は以下のボタンよりご購入ください！
＼購入はこちらから!!／
ボタンを押すと、Stripeでの支払いページに遷移するので、支払い情報を入力お願いします。
「支払う」を押すと、サンクスページにリダイレクトします。
その後自動返信メールで課題ページのURLとパスワードが来ますので、学習を始めてください。
皆さんのレビュー依頼をお待ちしています！！
売り手側の都合ですが、ブログでの購入はnoteに取られる販売手数料がない分、買ってくださった方に還元しやすいです。