【コーディング課題の評価！】しょーごログの全部盛り初級〜上級やってみた感想

この記事では、しょーごログさんの「コーディング演習課題全部盛り」をレビューしていきます。

累計販売数が700部を超える人気教材です。

初級〜上級とレベル別に分かれているので、HTML初心者だけでなく、さらに実力を高めたい現役コーダーにもおすすめです！

しょーごログのコーディング演習課題全部盛りとは？

デザインカンプからのコーディング練習ができる教材です。

デザインカンプとは、PhotoshopやAdobe XD、Figmaなどのデザインツールで作られたデータを指します。

例えばこちら↓

コーダーの実案件では、まずデザイナーからデザインカンプが提出されます。

それを基にコーディングを行い、最終的にサーバーにデータをアップロードする流れになります。

この教材は、まさに実践現場で求められる「デザインカンプからのコーディング」の一連の流れを練習できる内容になっています。

全部盛り（全7種類）が10,000円以上お得

この演習課題は、初級から上級までのレベルに分かれています。

自分のレベルに合った教材だけ購入することもできますが、全ての課題が含まれている「全部盛り」を強くおすすめします！

その名の通り、全7種類の課題がすべて含まれたパッケージ教材です。

全部盛りの概要

受講形式	個人でコーディング練習を行う買い切り型の教材
期間	特になし
内容	デザインカンプからのコーディング（初級1、初級2、初級Ex、中級、中級Ex、上級、JS特訓編、Photoshop編）
対象者	・一からHTML/CSSを習得したい ・実践に近い課題をこなしたい ・コーディングの実力レベルを上げたい
サポート・特典	・現役エンジニアから各課題最大2回の表示確認特典 ・オリジナルポートフォリオの作成
購入ページ	しょーごログ実践課題演習

私がこの教材を購入した理由

コーディングを一からしっかり学び直して、自信をつけたかったからです。

私は専門のコーダーではないですが、普段の仕事でコーディングもやっています。

制作会社の場合、デザインとコーディングは分業が一般的ですが、私のようなフリーランスは両方請け負った方が単価も高くなるので、私もそうしてます。

そんな中、今年になってTwitterで何度か見かけたこの教材が気になり、購入を決意！

添削付きの濃い内容でありながら、値段が安いのも魅力的でした。

この教材は、こんな方におすすめです！

私のようにすでにWeb制作を仕事にしている人にもおすすめの教材です。

しょーごログ実践課題練習の3つのメリット

ここからは、この教材のメリットや各課題についてレビューしていきます！

実案件と同じプロセスでコーディング練習ができる

この実践演習は「デザインカンプからのコーディング」という、実際の現場で行われるプロセスに沿ってコーディングの練習ができます。

特にコーダーとして活躍したい方にとって、次のようなメリットがあります。

上級までこなせれば、即戦力としてかなりハイレベルな案件を受注できます！

実際に、しょーごログさんもブログで「月に20万円以上の納品ができるレベルのスキル」を獲得できるコーディング練習課題だと述べています。

他人と被らないオリジナルポートフォリオが作れる

自分だけのオリジナルポートフォリオを作れるのも、大きな魅力の一つです。

ポートフォリオとは、簡単に言うと実績をまとめた作品集のことです。
過去の実案件で作ったサイトや、練習用に作った架空のサイトを掲載します。

「オリジナル」と付いているのは、他人と被らないデザインでサイトを作れるからです。

多くの場合、スクールなどで作るポートフォリオは受講生全員が同じものを作ることが多く、発注者によっては、

となることがあります。

この演習課題では、課題で作ったサイトを自分オリジナルに色味やレイアウトを変更し、ポートフォリオとして活用できます！

仕事を獲得する際には、ポートフォリオが必須です。

この演習課題では、クオリティの高いサイトを作成できるので、仕事に応募する際にも高い評価を得られると思います。

しょーごさん（現役エンジニア）から添削してもらえる

販売者であるしょーごさんから、各課題の添削もしてもらえます。

しょーごさんは現役のエンジニアで、Web制作を長年手掛けてきた方です。そんな経験豊富な方から添削してもらえる機会はとても貴重ですね！

修正箇所については「あうん」という修正指示アプリを使い、コメント付きで具体的に指摘してもらえました↓

添削があると、セルフチェックで見逃していたミスに気づいたり、アドバイスをもらってやる気がさらに湧いてきます。

【しょーごログ実践課題】各課題のレビューと感想

各課題について、簡単にレビューと感想をまとめています。

初級1、初級2

初級編は、HTML/CSSの入門書を1〜2冊終えたレベルの方に適しています。

ただし、初級とはいえ、コーディング初心者にとってはやや難しく感じるかもしれません。

ちなみに、初級が難しいと感じる場合は、よりやさしい入門編も用意されています。

こちらは無料で利用できるので、まずはそちらを試してみるのもおすすめです！

入門編はこちら 

初級1、初級2の感想

私はコーディング初心者ではないので、30分ほどで完成しました。

実務でもよく使われるコーディング手法が満載で、初心者にとっては非常に勉強になると思います。

この課題には、コーディングにおける重要な考え方や注意すべきポイント、便利なツールの解説も含まれています。

私自身、これまで「検証ツール」を使ったエラーの確認や、PerfectPixelを使ったピクセル単位の精密なデザイン再現の考え方を知りませんでした。

初級Ex

初級Exでは、レイアウトがやや複雑になり難易度が一気に上がります。

しかし、つまずきやすい箇所については解説動画が用意されているので、それを参考にすればクリアできると思います。

また、この段階から表示確認（添削）をしてもらえます。

一発合格を目指して、提出前にしっかりとチェックを行うと良いですね！

初級Exの感想

石井総合内科クリニック 

作成後に提出すると、以下の返信メールをもらいました↓

中級

中級からは、2つの課題の中から1つを選んで取り組みます。

両方やっても構いませんが、無料で添削を受けられるのは1つだけです。

また、この段階からはjQueryやJSの実装が入ってきます。

購入者限定の「課題一覧ページ」に、勉強におすすめの本やサービスが紹介されているので、そのロードマップ通りに進めれば、問題なく使えるようになりますよ。

ちなみにjQueryやJSは、一からコードを書けるようになる必要はありません。

基本的な考え方を理解し、既存のコードをカスタマイズできる力があれば大丈夫です。

中級の感想

こちらが私が作ったページです↓

蓼科ごとう農園 

また、この段階から「オリジナルポートフォリオ化」が可能になります。

テーマを自分で決めて、色味や雰囲気を変えるだけでOKです。

ただし、レイアウトを大きく変えるとダサくなりがちなので、あまり変更しない方が良いですね。

中級Ex

中級Exも2つの課題から1つを選べます。

私は「採用サイト」を選びましたが、2024年に課題が刷新され、現在は「建築会社サイト」が新たに登場しています。

これから取り組むなら、建築会社サイトの方が今風でおすすめです。

中級Exでは、中級よりさらに高度なCSSアニメーションやJSの実装が加わります。

また、これまでは1ページだったのが、下層ページが複数含まれるため、作業時間も増えるはずです。

中級Exの感想

こちらが私が作ったページです↓

IgattaGroup新卒採用サイト 

オリジナルポートフォリオ化ですが、私は「マネーセミナー」をテーマに作成しました。

文章はほとんどChatGPTに作成してもらいました（本当にありがたい！）

上級

上級編では、WordPressを使った制作になります。

初心者にはWordPress自体の理解が難しいし、JSの実装もかなり高度です。

さらに、全部で12ページもあるので、相当な時間がかかると思います…

上級課題には、実案件を想定した「納期チャレンジ」があります。

2つの条件があり、24日以内に一回目の提出を行い、かつ修正点が10箇所以内である必要があります。

上級の感想

こちらが私が作ったページです↓

TETOTE採用サイト 

新しい課題に刷新されてからは、私が3人目の合格者だったようです。

WordPress自体の理解があいまいだったので、まずは課題内でおすすめされていた動画講座や本を購入して勉強し、その後に挑みました。

特にトップページのJS実装が難しく、ここだけで5〜6日かかりました。

ありがたいことに、過去に完走した方のページが載っていたので、それを参考にしながら実装を進めました。

結論として、かなりの実力アップが図れるので、コーダーとして仕事をしたい方はWordPress実装を絶対にマスターしておくべきです。

また、私のようなLPデザイナーでも、WordPress実装を依頼される機会は多いです。

この課題ほど複雑なサイトはまず無いですが、WordPressの仕組みと実装の流れを理解しておくことは確実に役立ちますよ。

JS特訓編

こちらは、Web制作に特化したjQueryとJavaScriptが学べる教材になります。

中級以降の課題を進める中で出てきた実装もあるので、必ずしもこの課題をやる必要はないかもしれません。

ただし、よく使われるものばかりなので、この機会に作成してみて、そのまま実案件でコピペして使うこともできます。

Photoshop編

しょーごログのデザインカンプは、FigmaやAdobe XDで提供されますが、実案件ではPhotoshopの使用率がいまだに高いです。

そのため、番外編として「Photoshop編」が用意されています。

トップページのみの課題とはいえ、仕様書の注文が複雑で多いので、難しいと思います。

これからコーダーを目指す方はPhotoshopに慣れておくことが必要になるので、この課題には取り組んでおくべきです。

まとめ：即戦力になるコーディング力を身につけよう！

しょーごログの演習課題は、即戦力として活躍できるコーディング力を身につけるのに最適な教材です。

何より、実案件と同じプロセスでコーディング練習できるのが大きな魅力です。

私もそうでしたが、コードは頭で理解するよりも、ひたすら手を動かして書くことで覚えられます。

ぜひこの教材を活用して、コーディングスキルを飛躍させ、自信を持って案件に臨めるように準備しましょう！