デザインカンプからのコーディング練習課題！【HTML初心者からWordPress実案件レベルまで】

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

突然ですが、「プロのレビューが受けられる実戦形式のコーディング課題」があったら、やってみたいですか？

ありさちゃん

実案件が怖いので、腕試しをしたいです、欲を言えばプロに添削してほしいです…

まさひろくん

ただ練習するだけじゃなく、ポートフォリオを準備したいです

しょーご

自分も駆け出し期に感じてたのでその気持ち、分かります…!

しょーご

この記事ではそんな問題を解決するコーディング課題について解説していきます！

＼圧倒的にお得な全部盛りセットはこちら！／

全部盛りセットを見てみる

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

動画でも解説しています！

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

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

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

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

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

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

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

大半がデザインデータからのコーディングです。

制作会社も開発会社もどこも全部そうです。

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

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

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

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

なので、この一連の演習課題でたくさんトライアンドエラーをしてもらえたらと思います。

しょーご

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

デザインからのコーディング課題紹介

課題は「初級からPhotoshop編」まで複数リリースしております。

初級編イメージ

初級Exイメージ

中級イメージ

中級Exイメージ

上級イメージ

Photoshop編イメージ

 

「中級Ex、上級、Photoshop編」は三種の神器

Web制作を始める人が多い中でも、「中級Ex」「上級」「Photoshop編」のいわゆる「3種の神器」を終わらせた人は、2022年以後も調子よく案件を獲得していっています。

「3種の神器」は実際、制作会社からもかなり評価が高いです。

なので、ぜひここまで終えてほしいです！

早い人だと2ヶ月で最後のPhotoshop編まで終えられる方もいます。

マガジンがお得！

基本的にマガジンとしてまとめ買いしてもらったほうがお得になるようにしております。

ロードマップ(無料)とセットで活用

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

【2022年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】 こんにちは、現在web制作フリーランスとして5年ほど活動しているしょーご（@samuraibrass）です。 この記事を見てくれ...

しょーご

このあと解説しますが、おすすめはダントツ「全部盛りセット」になります

まさひろくん

スクールは高くて通えません…

こんな方でもできるだけ最前線で戦えるように道のりを整備したのが「ロードマップ&コーディング課題」です。

しょーご

「全部盛り」はたっぷり量がありますが、それでも一ヶ月で上級まで行く人もいて、驚きです。

＼圧倒的にお得な全部盛りセットはこちら！／

全部盛りセットを見てみる

このコーディング演習課題作成の思い

この教材は「教科書」というより、「問題集」になります。自分のコーディング力を高めるための演習教材としてご活用ください。

高品質なポートフォリオを準備できる

課題をこなしていく中で、高品質なポートフォリオを複数準備することができます。

しょーご

制作会社のコーダーさんにもご活用いただいております！

表示確認特典の価値

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

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

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

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

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

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

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

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

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

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

しょーご

ちなみにレビュー期限はないので、1年後とかでも全然レビューします

セルフチェックシート無料配布！！

実案件では提出前に『セルフチェック』を行うのが常識です。

この教材では

しているので、セルフチェックの練習をすることができます。

実案件前に習慣づけておきましょう。

PDFで実案件でも使えるチェックシートをプレゼントしています。

このコーディング課題の強みをまとめると

各コーディング課題の紹介

【入門】XDデザインからのコーディング練習【無料です】

初学者さん

初級編でもちょっとむずかしいかも…

といったお声を拝見しましたので、無料にて「入門編」をリリースしました。
初級編より少し優しくしています。

無料ですが、XDデザインからのコーディングなので、実務と工程はほとんど同じです。

こんな人に入門編は推したいです。

＼入門編は無料で見れます／

【入門編】を見てみる

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

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

入門から進んだ人なら割とすんなりいきつつも、入門にはない要素があるので、良い経験を積めると思います。

＼初級はこちらから／

『初級』を見てみる

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

「初級Ex」は少し難しいデザインで、HTML.CSSの基礎を総復習できるような課題になっております。

縦書きという、おそらくこの段階では「未知の要素」も出てきますので、かなりググり力が鍛えられ、やりごたえがあると思います。

＼初級Exはこちらから／

『初級Ex』を見てみる

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

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

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

＼中級でjQueryを取り入れる／

『中級』を見てみる

しょーご

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

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

「中級Ex」ではHTML，CSS，JSを駆使し、和風な温泉旅館サイトを構築していきます。

中級Exからは「複数ページのサイト」になります。

HTML,CSS.JSのみの静的サイト実案件レベルになります。

＼中級ExでHTMLサイトはバッチリ／

『中級Ex』を見てみる

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

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

しょーご

ダミーデータ入れさせたりプラグイン複数使用したり、自分の実務経験から来ています。

＼上級でWordPress力を底上げ／

『上級』を見てみる

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

「JavaScript,jQuery特訓編」はweb制作に特化した「JavaScript,jQuery教材」になります。

しょーご

JavaScript.jQuery両方を練習できるし、書き方の差異を見るだけでも参考になると思います！

＼jQuery,JSを克服する問題集／

『JS教材』を見てみる

【即戦力編】Photoshopデザインからのコーディング演習

「Photoshop編」はPhotoshopデザインカンプからのコーディング課題になります。

上級までの課題で実案件レベルのコーディング力は身につきますが、実案件では多くのデザインデータがPhotoshopで来ることになります。

なので、

ありさちゃん

事前に練習しておきたい！

という方にご要望にお答えして、最高クオリティの課題をご用意しました。

Photoshopに成熟したデザイナーさんにお願いしました。

しょーご

PhotoshopからのコーディングはXDと比べると間違いなく難しいです。でも実案件では大半がPhotoshopで来ますから、練習しておくとパニクらなくなります。

＼即戦力レベルを目指す／

Photoshop編を見てみる

マガジン紹介

デザインカンプからのコーディング教材全部盛り！

コーディング教材全部盛り！はマガジンで、これまで紹介した教材がすべてまとまったセットになっております。

まとめて買ったほうが、価格的にかなりお得になるようにしています。また、これから新たな教材が出ても自動的にこのマガジンに追加されます。

しょーご

新規教材も追加予定なので、全部盛りがダントツでおすすめです！この課題群をクリアできれば全然案件は獲得できますし、転職の協力な武器にもなります（新規教材が出た際は値上げします）

歴3年のマークアップエンジニアは「時給¥3.500〜」程度得ているのを考えると、

計10回（初級Ex以降）ものレビューを受けられる「全部盛りセット」は、レビューだけで1万円以上の価値があります。

フル活用しちゃってください(;_;)

＼コーディングを本気で仕事にするならこれ！／

全部盛りセットを見てみる

デザインカンプからのコーディング教材中級上級JSセット

コーディング教材中級上級JSセットは中級以上全てをまとめたマガジンになります。すでに初級、初級Exを持っているかたは、こちらで揃えたほうがお得になります。

＼デザインからのコーディング経験者向け／

中級上級セットを見てみる

しょーご

マガジン内の教材数が多いほど割引率も高めてるので、今から学習を初められるならマガジン購入がお得です。

実務レベルを体感してほしい

これをご覧の方には、ぜひ上級編まで完走して実務レベルを経験してから、仕事をとっていってもらいたいなと思います。

特に上級編は就職転職でも役立つはずです。

みなさまの学習を応援しております👍

過去の完走者の感想・コメント

このコーディング課題を購入した人の感想やその後をお聞きしました。

中には転職成功した人などもいるので、ぜひ購入前に参考にしてみてください。

課題につまづいた際に勇気をもらえるようなコメントも多数いただいています↓

デザインカンプからのコーディング練習・勉強をこなされた方からのメッセージWeb制作で先駆者のメッセージ・アドバイスをまとめています。ロードマップに沿って学習されている方、コーディング課題をされている方に参考になるかと思います。...

以下に一部抜粋します。

しょーご

「過去の自分を救う」を発信の信条としていますが、教材も同様です。有効活用していただければと思います！

一通り課題が終わったら

制作会社への「正しい」営業法を学ぼう

ポートフォリオを完成させても、正しい営業を行わないと制作会社からは返信すら返ってこない可能性があります。

そこでこの「Web制作会社に特化した最強の営業法」をリリースしました。

このコンテンツでは、

以上を掲載しています。

しょーご

どんどん値上げしていくのと、突然販売終了する可能性があるので（参考にする人が増えすぎるとライバルが増えるため）チェックはお早めに！

＼総販売部数に制限あり！お早めに／

営業法を見てみる

よくある質問

あなたを一歩前に進ませる課題

私はどちらかというと「ずっと勉強ばかりして、実践になかなかいけないタイプ」です。そんな人の気持がわかるからこそ、背中を押すような課題を作りたいと思い、企画・制作しました。

この課題があなたの人生を変えるものになる自信があります。

ここまでご覧いただき、ありがとうございました。応援しております＼(^o^)／

コーディング課題一覧ページへ

動画でも説明を見てみる↓