コーディング練習ができるおすすめ教材ってないかな?
この記事では、しょーごログさんの「コーディング演習課題全部盛り」をレビューしていきます。
私は2024年にこの教材を買いました。
コーディング力の底上げになり、実力に自信が持てるようになったので購入して良かったです!
累計販売数が700部を超える人気教材です。
初級〜上級とレベル別に分かれているので、HTML初心者だけでなく、さらに実力を高めたい現役コーダーにもおすすめです!
\ 即戦力が身につく!実践型の人気教材 /
この記事を書いた人
あおい(@aoidesign)
2018年からWebデザインを学習。
副業時代を経て現在はフリーのLP専門デザイナーとして活動。
LP制作実績は200件以上。
メンターや講師の仕事も行う。
しょーごログのコーディング演習課題全部盛りとは?
デザインカンプからのコーディング練習ができる教材です。
デザインカンプとは、PhotoshopやAdobe XD、Figmaなどのデザインツールで作られたデータを指します。
例えばこちら↓
コーダーの実案件では、まずデザイナーからデザインカンプが提出されます。
それを基にコーディングを行い、最終的にサーバーにデータをアップロードする流れになります。
この教材は、まさに実践現場で求められる「デザインカンプからのコーディング」の一連の流れを練習できる内容になっています。
ひたすらコードを書くので、大変ではありますが、その分実力が一気に向上しますよ!
全部盛り(全7種類)が10,000円以上お得
この演習課題は、初級から上級までのレベルに分かれています。
自分のレベルに合った教材だけ購入することもできますが、全ての課題が含まれている「全部盛り」を強くおすすめします!
その名の通り、全7種類の課題がすべて含まれたパッケージ教材です。
私も全部盛りを買いました。
単体購入より10,000円以上お得なので、断然こちらがおすすめです。
全部盛りの概要
受講形式 | 個人でコーディング練習を行う買い切り型の教材 |
---|---|
期間 | 特になし |
内容 | デザインカンプからのコーディング(初級1、初級2、初級Ex、中級、中級Ex、上級、JS特訓編、Photoshop編) |
対象者 | ・一からHTML/CSSを習得したい ・実践に近い課題をこなしたい ・コーディングの実力レベルを上げたい |
サポート・特典 | ・現役エンジニアから各課題最大2回の表示確認特典 ・オリジナルポートフォリオの作成 |
購入ページ | しょーごログ実践課題演習 |
\ 即戦力が身につく!実践型の人気教材 /
私がこの教材を購入した理由
コーディングを一からしっかり学び直して、自信をつけたかったからです。
私は専門のコーダーではないですが、普段の仕事でコーディングもやっています。
制作会社の場合、デザインとコーディングは分業が一般的ですが、私のようなフリーランスは両方請け負った方が単価も高くなるので、私もそうしてます。
もともとデザインが好きでこの仕事を始めたので、コーディングは最低限のスキルだけ身につけた感じです。
なので自分のコーディングスキルにはずっと自信がありませんでした。
そんな中、今年になってTwitterで何度か見かけたこの教材が気になり、購入を決意!
添削付きの濃い内容でありながら、値段が安いのも魅力的でした。
この教材は、こんな方におすすめです!
- 一からHTML/CSSを習得したい
- お金をなるべくかけずに独学したい
- 案件獲得で使えるポートフォリオ(作品集)を作りたい
- とにかく手を動かしてコードを書く練習がしたい
- 実践に近い課題をこなし実力レベルを上げたい
- もっとコーディングレベルを向上させたい
私のようにすでにWeb制作を仕事にしている人にもおすすめの教材です。
なんとなくで済ませていた知識を、もう一度しっかり学び直すことができますよ。
\ 即戦力が身につく!実践型の人気教材 /
しょーごログ実践課題練習の3つのメリット
ここからは、この教材のメリットや各課題についてレビューしていきます!
- 実案件と同じプロセスでコーディング練習ができる
- 他人と被らないオリジナルポートフォリオが作れる
- しょーごさん(現役エンジニア)から添削してもらえる
実案件と同じプロセスでコーディング練習ができる
この実践演習は「デザインカンプからのコーディング」という、実際の現場で行われるプロセスに沿ってコーディングの練習ができます。
特にコーダーとして活躍したい方にとって、次のようなメリットがあります。
- 実務における作業プロセスを一通り理解できる
- コーディングで使うツールや便利な機能、サービスについて学べる
- 発注者がどのようなポイントを見て評価するのかが分かる
- 納品前にチェックすべき項目や注意点が理解できる
上級までこなせれば、即戦力としてかなりハイレベルな案件を受注できます!
実際に、しょーごログさんもブログで「月に20万円以上の納品ができるレベルのスキル」を獲得できるコーディング練習課題だと述べています。
課題を完走できれば、初心者でも自信を持って案件獲得に乗り出すことができますよ!
他人と被らないオリジナルポートフォリオが作れる
自分だけのオリジナルポートフォリオを作れるのも、大きな魅力の一つです。
「オリジナル」と付いているのは、他人と被らないデザインでサイトを作れるからです。
多くの場合、スクールなどで作るポートフォリオは受講生全員が同じものを作ることが多く、発注者によっては、
あれ?このサイト、前に別の応募者のポートフォリオでも見たことがある…
となることがあります。
この演習課題では、課題で作ったサイトを自分オリジナルに色味やレイアウトを変更し、ポートフォリオとして活用できます!
例えば、私はこんな感じで作りました↓
仕事を獲得する際には、ポートフォリオが必須です。
この演習課題では、クオリティの高いサイトを作成できるので、仕事に応募する際にも高い評価を得られると思います。
課題だけでなく、ポートフォリオ作成にも添削指導が付いているのも嬉しいポイントですね!
- ポートフォリオ化は、中級以上の一部課題のみになります。
しょーごさん(現役エンジニア)から添削してもらえる
販売者であるしょーごさんから、各課題の添削もしてもらえます。
しょーごさんは現役のエンジニアで、Web制作を長年手掛けてきた方です。そんな経験豊富な方から添削してもらえる機会はとても貴重ですね!
すごいのは、返信が非常に早いことです!
私は毎回、24時間以内に返信が来ました。
修正箇所については「あうん」という修正指示アプリを使い、コメント付きで具体的に指摘してもらえました↓
添削があると、セルフチェックで見逃していたミスに気づいたり、アドバイスをもらってやる気がさらに湧いてきます。
しょーごさんはとても気さくで優しそうな方なので、緊張せずに添削指導を受けてみてくださいね!
\ 即戦力が身につく!実践型の人気教材 /
- 初級Ex以上、一つの課題につき2回まで添削
- ポートフォリオの添削も対応(1回のみ)
- 添削は任意なので、必要ない場合は提出しなくてもOK
【しょーごログ実践課題】各課題のレビューと感想
各課題について、簡単にレビューと感想をまとめています。
- 初級1
- 初級2
- 初級Ex
- 中級
- 中級Ex
- 上級
- JS特訓編
- Photoshop編
初級1、初級2
初級1、初級2の概要
学習内容 | 基礎的なHTML/CSS |
---|---|
難易度 | |
対象者 | デザインカンプからのコーディング初心者 |
初級編は、HTML/CSSの入門書を1〜2冊終えたレベルの方に適しています。
ただし、初級とはいえ、コーディング初心者にとってはやや難しく感じるかもしれません。
私が初心者だった頃は、初級レベルのページを作るのに30時間くらいかかっていました(笑)
なので、最初は時間がかかっても全然大丈夫です。
ちなみに、初級が難しいと感じる場合は、よりやさしい入門編も用意されています。
こちらは無料で利用できるので、まずはそちらを試してみるのもおすすめです!
初級1、初級2の感想
私はコーディング初心者ではないので、30分ほどで完成しました。
実務でもよく使われるコーディング手法が満載で、初心者にとっては非常に勉強になると思います。
例えば
- ナビゲーションメニューの作成
- flexboxを使った横並び
- 要素を上下左右真ん中に配置
- ボタン作成
- レスポンシブなど…
この課題には、コーディングにおける重要な考え方や注意すべきポイント、便利なツールの解説も含まれています。
私自身、これまで「検証ツール」を使ったエラーの確認や、PerfectPixelを使ったピクセル単位の精密なデザイン再現の考え方を知りませんでした。
この教材で学ぶことができ、とても良かったです!
初級Ex
初級Exの概要
学習内容 | HTML/CSSの基礎総復習 |
---|---|
難易度 | |
対象者 | デザインカンプからのコーディングをいくつかこなした方 |
初級Exでは、レイアウトがやや複雑になり難易度が一気に上がります。
しかし、つまずきやすい箇所については解説動画が用意されているので、それを参考にすればクリアできると思います。
また、この段階から表示確認(添削)をしてもらえます。
一発合格を目指して、提出前にしっかりとチェックを行うと良いですね!
初級Exの感想
私は半日くらいかかりました。
実際に作ったページを公開しています↓
- ユーザー名:coding2024
- パスワード:coding2024
作成後に提出すると、以下の返信メールをもらいました↓
反応をもらえるのは、やはり嬉しいです^ ^
やる気も俄然湧いてきます!
ページの公開について
作成したHTML/CSSをオンライン上で見れるようにするには、サーバーやドメインの用意が必要です。
その方法については、購入者限定の「課題一覧ページ」に解説があります。
中級
中級の概要
学習内容 | jQueryやJSの導入 |
---|---|
難易度 | |
対象者 | jQueryやJSの実装を初めて行う方 |
中級からは、2つの課題の中から1つを選んで取り組みます。
両方やっても構いませんが、無料で添削を受けられるのは1つだけです。
また、この段階からはjQueryやJSの実装が入ってきます。
購入者限定の「課題一覧ページ」に、勉強におすすめの本やサービスが紹介されているので、そのロードマップ通りに進めれば、問題なく使えるようになりますよ。
ちなみにjQueryやJSは、一からコードを書けるようになる必要はありません。
基本的な考え方を理解し、既存のコードをカスタマイズできる力があれば大丈夫です。
私の場合は、ChatGPTに大枠のコードを書いてもらい、細かい部分だけ調整を加える感じでやっています。
中級の感想
こちらが私が作ったページです↓
- ユーザー名:coding2024
- パスワード:coding2024
正直、けっこう難しかったです…
レイアウトが複雑なので、position
プロパティをうまく使えるといいですね!
また、この段階から「オリジナルポートフォリオ化」が可能になります。
テーマを自分で決めて、色味や雰囲気を変えるだけでOKです。
ただし、レイアウトを大きく変えるとダサくなりがちなので、あまり変更しない方が良いですね。
中級Ex
中級Exの概要
学習内容 | 高度なCSSとJavaScriptライブラリの使用 |
---|---|
難易度 | |
対象者 | 高度なCSSアニメーションやJSのコーディング経験を積みたい方 |
中級Exも2つの課題から1つを選べます。
私は「採用サイト」を選びましたが、2024年に課題が刷新され、現在は「建築会社サイト」が新たに登場しています。
これから取り組むなら、建築会社サイトの方が今風でおすすめです。
中級Exでは、中級よりさらに高度なCSSアニメーションやJSの実装が加わります。
また、これまでは1ページだったのが、下層ページが複数含まれるため、作業時間も増えるはずです。
このレベルの課題をこなせれば、実務で扱うページにも十分対応できると思います!
中級Exの感想
こちらが私が作ったページです↓
- ユーザー名:coding2024
- パスワード:coding2024
3〜4日かかりました。
モーダルやローディングなど、普段あまり使わない要素だったので、本やネット記事で調べながら何とか完成させました!
オリジナルポートフォリオ化ですが、私は「マネーセミナー」をテーマに作成しました。
文章はほとんどChatGPTに作成してもらいました(本当にありがたい!)
上級
上級の概要
学習内容 | WordPressを活用したメディア型企業サイト |
---|---|
難易度 | |
対象者 | WordPressの基礎学習を終えた方 |
上級編では、WordPressを使った制作になります。
初心者にはWordPress自体の理解が難しいし、JSの実装もかなり高度です。
さらに、全部で12ページもあるので、相当な時間がかかると思います…
上級の特徴
- 下層の複数ページのコーディング
- 高度なCSSアニメーションとJSの実装
- WordPressの構築、プラグインの導入
- カスタム投稿とカスタムフィールドの実装
上級課題には、実案件を想定した「納期チャレンジ」があります。
2つの条件があり、24日以内に一回目の提出を行い、かつ修正点が10箇所以内である必要があります。
ただ、あくまでチャレンジなので、多少期限を過ぎても添削してもらえるし、合否に関係なくポートフォリオとして使えます。
上級の感想
こちらが私が作ったページです↓
- ユーザー名:coding2024
- パスワード:coding2024
正直、めちゃめちゃ大変でした…20日くらいかかり、ようやく提出。
提出後は、3〜4箇所の修正を経て合格に至りました!
新しい課題に刷新されてからは、私が3人目の合格者だったようです。
WordPress自体の理解があいまいだったので、まずは課題内でおすすめされていた動画講座や本を購入して勉強し、その後に挑みました。
特にトップページのJS実装が難しく、ここだけで5〜6日かかりました。
スライダーの実装やパンくずリストで沼にハマり、知恵熱で途中寝込むかと思ったほどです(笑)
ありがたいことに、過去に完走した方のページが載っていたので、それを参考にしながら実装を進めました。
結論として、かなりの実力アップが図れるので、コーダーとして仕事をしたい方はWordPress実装を絶対にマスターしておくべきです。
また、私のようなLPデザイナーでも、WordPress実装を依頼される機会は多いです。
この課題ほど複雑なサイトはまず無いですが、WordPressの仕組みと実装の流れを理解しておくことは確実に役立ちますよ。
JS特訓編
JS特訓編の概要
学習内容 | jQuery,JSでよくある実装を学習 |
---|---|
難易度 | |
対象者 | jQuery,JSの基礎学習を終えた方 |
こちらは、Web制作に特化したjQueryとJavaScriptが学べる教材になります。
作成するもの
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング
- スムーススクロールでページトップに戻るボタン
- アコーディオン
- モーダル
- タブ
中級以降の課題を進める中で出てきた実装もあるので、必ずしもこの課題をやる必要はないかもしれません。
ただし、よく使われるものばかりなので、この機会に作成してみて、そのまま実案件でコピペして使うこともできます。
jQueryやJavaScriptを毎回一から書くのは非効率です。
よく使うコードはコピペ用に保存しておくと、作業の時短になりますよ!
Photoshop編
Photoshop編の概要
学習内容 | デザインカンプ(Photoshop)からのコーディング |
---|---|
難易度 | |
対象者 | Photoshopからのコーディングを試したい方 |
しょーごログのデザインカンプは、FigmaやAdobe XDで提供されますが、実案件ではPhotoshopの使用率がいまだに高いです。
そのため、番外編として「Photoshop編」が用意されています。
トップページのみの課題とはいえ、仕様書の注文が複雑で多いので、難しいと思います。
これからコーダーを目指す方はPhotoshopに慣れておくことが必要になるので、この課題には取り組んでおくべきです。
私はフォトショからのコーディングは普段から慣れているので、この課題は一旦スルーしました。
この課題を試すには、Photoshopの用意が必要です。
Photoshopを始めとするAdobe製品は有料で、サブスクリプションの契約が必要になります。
これからコーダーとして活躍したい場合は、Adobeの契約は必須ですので、この課題を機に契約するのがおすすめです。
まとめ:即戦力になるコーディング力を身につけよう!
しょーごログの演習課題は、即戦力として活躍できるコーディング力を身につけるのに最適な教材です。
何より、実案件と同じプロセスでコーディング練習できるのが大きな魅力です。
私もそうでしたが、コードは頭で理解するよりも、ひたすら手を動かして書くことで覚えられます。
ぜひこの教材を活用して、コーディングスキルを飛躍させ、自信を持って案件に臨めるように準備しましょう!
\ 即戦力が身につく!実践型の人気教材 /