Web制作勉強方法

【2024年最新】Web制作を完全独学で極める最強ロードマップ【現役エンジニア監修】

Web制作完全独学ロードマップ
本ページにはプロモーションが含まれています。

こんにちは、現在web制作フリーランスとして6年ほど活動しているしょーご(@samuraibrass)です。

フリーランスながら、Web制作会社の中でコーディング以外に、新人教育係や品質保証業務などをしています。

この記事を見てくれる方はWeb制作を独学してフリーランスになったり、 Web業界に就職転職をしたい方が多いかと思います。

私も駆け出し期にWeb制作を仕事にするにあたって、

しょーご

分かりやすいWeb制作独学ロードマップがあったらいいなぁ

そう思っていたので、作りました!

この記事では「スクールを使わない完全独学でWeb制作の実務までこなせるようになるロードマップ」を紹介していきます。

完走すれば、月20〜万を安定して稼げるスキルレベルに到達できます。

しょーごログ-ロードマップのアプデ情報
  • 2023.07.20 オリジナルポートフォリオが準備できるようになりました!
  • 2023.09.09 ”HTMLサイトをWordPressにする本”を追加しました
  • 2024.02.14 実案件レベルのエクストラコースが追加されました!
  • 2024.03.18 コーディング課題-上級編が完全リニューアル!!新デザインになりました。

こちらの記事はクオリティを保つため定期的にアップデートしています

しょーご

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

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

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

目次
  1. Web制作完全独学ロードマップ-動画版-
  2. 2023年7月にアップデート!!
  3. このロードマップをこなすことで何ができるようになるの?
  4. この記事の信憑性(権威性)について
  5. このWeb制作独学ロードマップの強み
  6. このWeb制作独学ロードマップの評判
  7. 前提:独学はいばらの道です
  8. Progate終了後に学習すべき重要な点
  9. Web制作独学のおおまかな流れ
  10. Progate後のWeb制作独学ロードマップ公開
  11. 営業・就職に十分なポートフォリオが手に入る
  12. 過去に取り組んだ先輩たちからのメッセージ
  13. Web制作独学ロードマップ-序盤
  14. Web制作ロードマップ-中盤
  15. Web制作ロードマップ-終盤
  16. Web制作ロードマップ-エクストラコース(任意)
  17. ポートフォリオサイトの作成
  18. ここでゴール、おめでとうございます!!
  19. 注意:勉強方法”収集家”になるな!
  20. Web制作の案件獲得方法
  21. メンターサービスの活用で挫折を防ぐ
  22. 実案件の進め方
  23. Web制作学習でのよくある質問

Web制作完全独学ロードマップ-動画版-

2023年7月にアップデート!!

みんなオリジナルポートフォリオが準備できるように!

このロードマップでこなしていく「コーディング実践演習課題」ですが、この度「オリジナルポートフォリオ化無料支援」を行うことになりました。

これによって、「ロードマップをこなすだけで、他人と被りにくいポートフォリオが準備できる」ようになり、営業や就活の成功率が上がることが予想されます。

オリジナルポートフォリオコーディング課題

このロードマップをこなすことで何ができるようになるの?

【2023年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】
まさひろくん

Web制作の学習手順を調べてるんですが、この記事のロードマップをこなせば”何ができるように”なって、”どういう進路”に進めるんですか?

  • Web制作の案件の大半に対応できる力がつきます。
  • Web制作会社への就職・転職はもちろん
  • フリーランスとして案件獲得を行うこともできるレベルに到達できます
しょーご

その後の案件獲得に必要な営業に関しても記事の後半で解説しているので、この記事一本で“Web制作を学んで稼ぐまで”を理解していただけます!

この記事の信憑性(権威性)について

【2023年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

ありさちゃん
ありさちゃん
そういうならしょーごさんの情報は参考にできるだけの何かがあるんですか?
まさひろくん
まさひろくん
テキトーな情報で遠回りしたくないのですが
しょーご
しょーご
じゃあ信憑性担保のために僕についての参考情報をまとめるよ!

web制作歴5年、納品数は200件以上
2019年からメンター業に関わることが増え、述べ100人以上フリーランスとしての独立成功をみてきた

デイトラWeb制作コース
引用:https://www.daily-trial.com/career_support

今回のロードマップをこなすことで

クラウドソーシング、制作会社でコーディング案件をいただくことができる、またはコーダー・ディレクターとして就職転職ができる

このWeb制作独学ロードマップの強み

案件獲得や就職転職が十分可能です【実績あり】

とにかく常に最新の状態を保つように、頻繁に追記修正を行っています。

ロードマップを完走して営業した結果、制作会社からかなりの高評価を貰えた人もいます。

営業と就活を初めて15日目 0→1 達成しました! クラウドソーシングにて受注し納品、評価完了です😆 しょーごさん( @samuraibrass )の三種の神器のおかげです。 自身契約のサーバーにテスト公開し、デイリー進捗報告。この流れも経験済みで助かりました! 感謝です😊

また、就職転職に成功された方もいます。

しょーごさん
@samuraibrass
のロードマップを見てweb制作を始めて1年。1ヶ月サボったりしたけど、新卒で入った銀行を辞めてフルリモートのコーダーとして転職できました。フリーランスの道は一回閉ざしたけど、フリーランスを目指してやってなかったらこの結果すら出てなかった。
#web制作

被らないポートフォリオが準備できます

このロードマップでこなしてくコーディング課題は、2024年に大きくリデザインをしております。

例えば上級課題は以下のようにデザインが変わりました。

デザインカンプからのコーディング課題 上級
しょーご

これは非常に大きなメリットで、これでポートフォリオの被りを減らすことができます。

このWeb制作独学ロードマップの評判

しょーごさん( @samuraibrass )のロードマップをついに完走! 途中何度も躓くことはありましたが、何とか最後までたどり着くことが出来ました! 力をつけられた実感がしっかりとあるので、Web制作のスキルをつけたい方は本当にオススメです!

前提:独学はいばらの道です

私個人の考えとしては、「良質なスクール」を活用してほしいというのが率直な考えです。

Web制作はサーバーサイドプログラミング(RubyやPHPエンジニア)に比べて独立しやすいと言われますが、

それでもフリーランス独立するには相当な数の壁がそびえ立っています。

それを乗り越える最良の手段の一つは私は「デイトラ」の「Web制作コース」だと考えています。

しかし、スクールにはそれなりのお金がかかります(Web制作コースはメンター付きスクールの中でも相当安いですが…)

まさひろくん

Web制作学習にお金はできるだけかけたくないんですよ。

そういう人もいるだろうと思い、今回は私が考える「最強のWeb制作学習ロードマップ」を公開しようと思いました。

しょーご

このロードマップをやり遂げていただけたら、スクールに数十万を出さなくても実案件レベルに到達することができます!それぐらい内容にはかなり自身があります。

Progate終了後に学習すべき重要な点

  1. ローカル環境での開発
  2. デザインデータからのコーディング
  3. webサイトの公開方法
  4. WordPressの自作テーマ開発

やるべきことは多いですが、このあと解説していきます。

そもそものProgateの進め方

まさひろくん

Progateはどこまで進んでから取り組めばいいのですか?

しょーご

そうだね、HTML.CSSの初級、中級、上級、Flexbox編が終わってるといいかな。道場コースはやらなくてもいいかなと!(私は駆け出し期にやりませんでした)

しょーご

Progateを効率よく進める方法は以下の記事で解説しています!

Web制作独学のおおまかな流れ

これから具体的なWeb制作のロードマップを紹介しますが、おおまかなWeb制作の流れをここで先に頭に入れておいてください。

自分の学習進度や立ち入りがわかりやすくなります。

Web制作独学ステップ解説

Progate後のWeb制作独学ロードマップ公開

オリジナルポートフォリオ化する課題については、2日程度余分に追加しています。

前半一般的な目安期間フルコミットできる人の目安期間
(課題レビュー待ち時間1日含む)
1冊で全て身につくHTML&CSSとwebデザイン入門講座7日間3日
初級&初級その230日以内10~14日間
中間課題:【初級Ex】 XDデザインからのコーディング練習8日間5日間
中盤
jQueryの学習14日間7日間
Sassの学習7日間2日間
CSS設計4日間2日間
コーディング教材中級編2つ24日程度12日間
ポートフォリオとして公開1日間1日間
閑話休題
WordPressに慣れる5日間3日間
後半
ProgateでPHP11週間2日間
WordPress本かudemy7日間~14日間5日間
WordPressの教科書14日間~21日間5日間
【上級】XDデザインからのコーディング実践演習14日間10日間
エクストラコース【取り組みは任意】
【即戦力編】Photoshopデザインからのコーディング演習7日間5日間
【超実践編】納期厳守の模擬コーディング案件8日〜12日間8日間
合計期間5~6ヶ月程度3ヶ月程度
web制作 ロードマップ  2023年
2024年も大きくは変わっていないです。

前半は静的サイトコーディング、後半はWordPress制作を身につけていきます。

またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。

フルコミットできる人は毎日12h程度を想定しています。私が駆け出し期の最初の2ヶ月間で実務レベルまで身につけた進度がこれぐらいでした。

個人的には短時間で一気に身に付けるのがいいと考えますが、

本業のある方は平日3h/休日6h」を目安に頑張ってみてください。

しょーご
しょーご
ちなみに、「めちゃ長い道のりだな…」と思われるかもです。長く見積もって5ヶ月ですが、2ヶ月足らずで完走してしまう人もいるので、重要なのは結局はコミットした時間量だったりします。

Web制作ロードマップ先人たちのペース

【2023年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】
✅ここまでの遍歴  【2022年】 1/22 学習開始 2/7 しょーごさん( @samuraibrass  )ロードマップ 4/30 ロードマップ終了 5/7 知り合いから初案件受注 6/7 Web制作会社へ営業開始 7/4 制作会社から初案件受注 7/7 制作会社9社とパートナー登録 7/24 月10万円達成  こんな感じです 参考になれば嬉しいです☺️
しょーごさん(
@samuraibrass
)上級課題、2回目の提出で無事に合格出来ました。いつも迅速なフィードバックありがとうございます!  中級〜上級まで110日かかりましたが、全て完走出来て本当に自信になりました。  課題を通して得たスキルを土台に戦っていきます!
しょーごログ
しょーご

しょーごログのロードマップで成果が出ている人たちの特徴は以下です!

ロードマップで成果が出せる人
  1. 目安期間をもとに、学習スケジュールを立てる
  2. 勢いよく駆け抜けて行く人が成果が出やすい
  3. できるだけ毎日コードを書く
  4. コーディング課題の期間を「実案件の期間」というマインドで緊張感を持って取り組む
  5. どんなロードマップでも「必ずコーディング課題はプロの添削を受ける

技術的にどうしても分からない場合は

MEMTAも活用しよう

MENTA 

MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。

プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。

しょーご

一旦は、「技術的に分からない部分を現役エンジニアに質問できるサービス」という認識で大丈夫です!いざという時にご活用ください。

営業・就職に十分なポートフォリオが手に入る

デザインカンプからのコーディング演習課題

このロードマップでは複数教材を紹介していますが、その中でも私が出しているコーディング教材は基本的に「コーディングのポートフォリオ」として利用することが可能です。

なので、このロードマップを完走すれば、自然と十分なポートフォリオが揃っていて、即案件獲得や就職転職の行動に移せる状態となります。

コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
デザインカンプからのコーディング課題
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
初級編イメージ
初級編その2
初級Exイメージ
中級イメージ
中級編【蓼科ごとう農園】
中級Exイメージ
中級Ex採用サイトイメージ
【2024年改定】上級イメージ
Photoshop編イメージ
previous arrow
next arrow
 

過去に取り組んだ先輩たちからのメッセージ

しょーごログ コーディング教材
まさひろくん

そうは言っても、このWeb制作独学ロードマップで結果出せた人はいるの?

という疑問があるかと思います。

すでにこのロードマップ内で紹介している教材をクリアした方が「どんな結果を出せたのか」

またこれから取り組む方への激励のメッセージ・アドバイスを頂いています(順次更新中)

就職転職や案件獲得をされた方も多数います!

Web制作独学ロードマップ-序盤

Web制作ロードマップ

1冊で全て身につくHTML&CSSとwebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

まずは一冊ですべて身につくHTML&CSSとwebデザイン入門講座で学ばれるのがいいかと思います。

ポイント①網羅的に学べる

まず出版年度が2019年で内容的にも新しいです。flex-boxからCSS Gridにも対応し、内容にも過不足がありません。

ポイント②内容が優しく挫折しない

個人的に一番いいと思ったポイントで、おすすめできる所以です。

著者のManaさんはWebクリエイターボックスで情報発信されているのですが、とにかく初心者向けに優しい解説をされており、一冊ですべて身につくHTML&CSSとwebデザイン入門講座に置いても文体や表現が機械的でなくあったかみがあるのがよきだなと。

ポイント③作っていても楽しい

従来のHTML本だと、作る完成物のデザインが微妙でモチベーションが上がりづらいという問題があったのですが、

一冊ですべて身につくHTML&CSSとwebデザイン入門講座では作るサイトもデザインが今時なのと、ゆるふわな感じなので、作っていてモチベーションが上がります。

目安期間;一週間〜二週間

完璧に覚える必要はない

プログラミングを本で学習する際に気をつけてほしいのは「一度で完璧に理解できなくても良い、それよりまずは一周しよう」ということです。

例えばCSS Gridがいまいち理解できなくても、実際にこの先の課題で手を動かして使ってみて、やっと理解できた、ということもあり得るので、この先の課題をやりつつ

まさひろくん

あ、ここはこの前本で学んだ部分だ!

辞書的に活用できればかなり良いです。

HTML/CSSの本、無事5日間で終えることができました✨自分で実務までの学習過程を決めるのが難しかったので、しょーごさんのロードマップを参考にして、これからやっていこうと思います!

補助教材:イマイチHTML,CSSの理解に自信が無いなら

HTML/CSS + JavaScript

もし上記の本だけでは理解が怪しい、動画で学びたい!という場合なら、「ちゃんと学ぶ、HTML/CSS + JavaScript」をおすすめします。

しょーご

人によってはこちらの動画の方が分かりやすいかもです!

学ぶ場所は以下の部分。Bootstrap,JSは飛ばして、一旦赤枠内をやってみてください。

Web制作の独学勉強法【現役エンジニアが語る準備から案件受注レベルまで】

本ではわからなかった部分も、動画で見てみると理解できたりします!

JavaScriptの部分は、また中級編の時に活用できるので、活用範囲が広い「ちゃんと学ぶ、HTML/CSS + JavaScript」はおすすめですね。

以下の記事でもここのセクションを詳説しています。

ようこちゃん
ようこちゃん
終わりました!
しょーご
しょーご
よーしいいぞー!次行こうか!

コーディング教材初級編3つ

【2023年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

ここから「デザインカンプからのコーディング」に挑戦していきます。

コーディング教材は1つ目が肝心!

しょーご
しょーご
一番最初から難易度が合わないものをコーディングするとモチベーションが下がりやすいからね、最初に取り組むもののレベル感が大切だよ!

❶コーディング課題入門編

まずは【入門】デザインカンプからのコーディング練習で実力試しをしてほしいです。

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】

入門編が難しいと感じた場合は?

少し難易度が下がる、模写コーディングを挟むのがおすすめです。

模写コーディングのやり方を解説しているので、こちらで練習しておくと入門編にも挑めるかと思います。

❷コーディング課題初級編

模写コーディング教材

デザインカンプからのコーディング課題

最初は「初級編」からやってみて、どうしても厳しければ「入門編」からやってみてください。入門編は無料提供してます。

私のコーディング教材はnote版とブログ版がありますが、ブログ版でまとめて購入頂くと一番お得です!

\最もお得な全部盛りマガジンでまとめて購入/

コーディング教材2つ目以降は少し難しいものを

最初に行ったものより少し難易度の高いものをやるといいです。

しょーご

初級編より難しいものを用意しました!

❸コーディング課題初級編その2

【初級その2】 デザインカンプからのコーディング練習」では「架空のホームページ制作会社トップページ」の制作を通じて、レスポンシブに慣れていただきます。

ピクセルパーフェクトを頑張る!

教えてくれたりコードレビューが存在しない独学の場合、デザインデータを忠実に再現するのが代々大前提になります。

実務でデザインデータ通りにコーディングを行えないと、普通に差し戻しを受けます。

使用できるなら、拡張機能「PerfectPixel」を使用しましょう。

以下の記事で使い方を徹底解説しています。

完璧に合わせるのは難しいので、ファーストビューを中心に見ていけばいいかなと思います。

しょーご

良く適当になりがちなのは、余白やフォントの大きさ、太さ、色、あとそもそもフォントが適用されてないとかありますね。

コーディングを3つ行ったころに慣れてくる

HTML,CSSはとにかく書きまくって試行錯誤することが一番成長の近道です。

3つほどこなすことで、だいぶ定着してくると思います。このあとのSassやjQueryをスムーズに身に付けるために、ここでHTML,CSSを固めておくことが重要です。

目安期間;1ヶ月以内

初級コンテンツ、模擬回答を確認し、すべて完了しました。入門、初級とやっただけだけど、だいぶ理解が進みました。 次の初級Exが楽しみです。  しょーごログさんの完全独学ロードマップ

HTML,CSS総復習

慣れてきたところで、中間課題です!

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

コーディング教材

HTML.CSSのみで、現状のレベル感でぎりぎりできて、かつポートフォリオにできるぐらい実践形式の課題を作成しましたので、こちらに挑戦してみてください。

正直結構難しいと思います。

ただ基礎が徹底していないと、この先のJavaScriptやSassも満足に身につかないので、コーディング力を底上げして初級ラストを飾りましょう。

恐らく、多くの方がここで初めて

  • サーバーアップロード
  • ドメイン
  • Basic認証
  • シートに則った厳格なセルフチェック
  • プロからのレビュー

こういったものを経験することになると思います。

しょーご

この初級Ex課題から私のレビューが入ってきます!頑張りましょう!

\本当に理解できた?HTML.CSSの基礎を総復習!/

目安期間:6日

ゆうすけくん
ゆうすけくん
できましたー
しょーご
しょーご
よし!ここまででHTML,CSSの基礎は身についたね!次に行こうか
しょーごさん( @samuraibrass )の初級Ex課題、一発OKもらいました❗️ 悩むところも多かったですが、学びの多い課題でした。 「綺麗にできていると思います」とコメントいただき、自信になりました。 Javascriptの復習をしたら中級に取り組んでいきます 楽しみ〜😊

中盤前に…

補助教材:プロの「引き出し」を増やす HTML+CSSコーディングの強化書

プロの「引き出し」を増やす HTML+CSSコーディングの強化書を二冊目におすすめしています。

この本はデザインカンプからのコーディングをいくつかこなした後に読むと発見が多いため、中盤を進めながら辞書的に使用してもらうといいかと思います。

お疲れ様です🐃 しょーごさん( @samuraibrass  )の初級EXカンプを無事突破できましたので、今日からテキスト学習に入っていきます。 まずはこちらから↓  ひたすらコーディング練習とありますね。 本当にその通りだと思います。 ひたすら書くべし!腕前よ上がれ!

Web制作ロードマップ-中盤

Web制作独学ロードマップ

jQueryの学習

Web制作学習ロードマップ

ここでサイトに動くをつけていくためのjQueryの学習を進めていきます。

jQueryを使わずにこなせる案件は非常に限られてくるため、案件をとるために必須になります。

①まずはProgateで学習する

Web制作独学 ロードマップ

上級編までさらっとやることで大まかに理解をすることができます。

https://prog-8.com/

しょーご

ちなみにjQueryで初めてプログラミングらしいプログラミングに触れる人が大半だと思います。

途中でわからない部分があっても、とりあえず「なんとなくこんなことができるんだな」ぐらいの認識で大丈夫です。

このあとの書籍でしっかり身につきます。

②jQuery標準デザイン講座

https://amzn.to/3Gi5KgU

jQueryで何ができるのかというのと、書き方に慣れることを目指します。

書き方を暗記するというより、思考の流れに慣れるという感じです。

jQuery標準デザイン講座はwebサイトでよく使われるコンポーネントを中心に学習することができるので、モチベ高く続けられて一押しの本です。

しょーご

実際に頻出のパーツを作りながら学べるので、モチベ高く学習できる本です!

完璧を目指さない

すべてを完璧に理解することは不可能なので、全体的に眺めて書いてみたら次に進んでOK。

ただ見るだけではなくて、書くことが大事です。

ポイント

jQueryをどこまで理解すればいいかは、ゴールがありません。目安としては教本に書いてある流れが自分で一からかけなくとも、「見て全て理解できる」なら先に進んでいいかと思います。
書く練習はこのあとします。

目安期間;二週間程度

@samuraibrass  さんがおすすめされていたこちらの書籍で勉強をはじめました📚 jQueryは最初仲良くなれないと思いましたが、この本のおかげで少し好きになってきました🐥 #プログラミング勉強中  #駆け出しエンジニア
しょーごさん(
@samuraibrass
)のロードマップを進めてますが、やっとjqueryの教材1冊終わりました!  子育て中なので、時間を捻出するのが難しいですが、ちゃんと前には進めています!!

Sassの学習方法

Web制作独学ロードマップ

次にSassの学習を行っていきます。令和以後ほとんどのコーディング案件でSassが活用されているため、学習はほぼ必須となっています。

Sassは簡単に言うと「めちゃめちゃ便利になったCSS」という感じです。

正直私が駆け出し期の頃も「なぜ生のCSSではだめなのか」がいまいちわからなかったのですが、Sassを学ぶとその便利さに納得することになります。

しょーご
しょーご
また、仮に自分が使う気がなくても、ほとんどのプロジェクトに採用されているので理解はしておかないといけないということです。いきなりSass環境に放り込まれる案件がほとんどなので…

注意点 LibSassとDart Sassの違いを理解する

実はSassには3種類存在しています。

  • Ruby Sass:一番最初に作られたRubyベースののSassの実行環境。2019年3月に公式のサポートは終了
  • LibSass:まだまだ多くの現場で現役で使われているであろうC/C++ベースの実行環境、非推奨だが使用はできる。
  • Dart Sass:Dart言語で書かれた最新の実行環境。現在の公式推奨環境。

現在は開発現場も「LibSass→Dart Sassの移行期」ですが、これからSassを学ばれる方はDart Sassを学び使うのが良いと思います。

①まずはProgate

Sassコースで結構基礎的なことが網羅できるため、Progateで学習をしてください。

@importを使用する場面がありますが、現行のDart Sassでは使えなくなっています(@useを使用するように)

②Sassの環境構築を行う

VSCodeに

を導入し、Sassをコンパイルできるようにしてください。

以下の記事が参考になるはずです。

Sassはそのままだとブラウザが読み込めないため、CSSにコンパイルしたものを読み込む必要があるのです。

しょーご

現状Live Sass CompilerでもDart Sassをコンパイルできるようですので、大丈夫です。

【任意】cssをSassに置き換えてみる

最初に模写コーディングしたもののcssをSassに置き換えてみてください。

その際に絶対に利用して欲しいSassの機能があるので紹介します。

web制作でよく使うSassの機能

【任意】Sassを本で学ぶ場合

Sassはあまり本が出ていない上にDart Sass対応のものはなかったのですが、最近出た「【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル」が内容が最新でいいです。

また、この本はCSS設計なんかも学べるので、この後のパートが楽になります。

目安期間:7日間

CSS設計を学ぶ

web制作 独学 ロードマップ CSS設計

Sassを学んだら、次にCSS設計を学びます。

CSS設計ができると、良いCSSが書けるようになります。

良いCSSとは?
  1. 予測しやすい
  2. 再利用しやすい
  3. 保守しやすい
  4. 拡張しやすい

この4つを併せ持ったもの。

ここまでCSSを書いてきて

駆け出しさん

ここ、もう少し効率化してかけそうかも。このコード使いまわせるかも。この命名は他とバッティングしそう。

など様々感じたかと思います。それらへの答えはCSS設計を学ぶことで解消されます。

この後のパートで実戦レベルのコーディングを連戦で行っていただくので、CSS設計の考えをなんとなくでいいので、ここで入れておいてください。

なぜ良いCSSを書かないといけないのか?

ここでこう思った方がいるかもしれません。

まさひろくん

別にまだ練習の段階なんだから、きれいなCSSなんてこの段階で書かなくても問題ないのでは?

しょーご

いや、この段階から概念だけでも理解しておいたほうがいいよ!

しょーご

CSS設計は基本的に実践を通してしか使いこなせるようにならない上に、実案件では”コーディング規約“で指定されていたりもするので、

徐々に慣れておかないとパニクって大変なことになるんだ…(泣)

基礎的な考えをまずは以下の記事で理解してください。

CSS設計の学び方としては、本2冊を読むと、知識がだいぶ定着します。

まずは、Web制作者のためのCSS設計の教科書を読んで、CSS設計の根幹にある考えを理解します。

少し古い本ですが、考え方を学べるので十分です。

その次に、「CSS設計完全ガイド ~詳細解説+実践的モジュール集」を必ず読んでください。

CSS設計完全ガイド

これは「CSS設計」を本格的に学ぶ本です。

こちらの方が難しい分、具体例が多いです。

特にこの「CSS設計完全ガイド」は頻出のパーツの実装例が多く登場するので、言葉でわからなくなったら、具体例を見ればわかりやすいかなと思います。

created by Rinker
¥3,536 (2024/04/17 12:51:17時点 Amazon調べ-詳細)

目安期間:4日間

内容的にはまあまあの厚さがあります。
作者発案の設計思想の”PRECSS”が出てきますが、最低限「BEM」を理解し使えれば、ひとまず大丈夫です。

コーディング教材中級編2つ

ではここまでで学んだSassとjQuery、CSS設計を活用してコーディングしてみましょう!

以下の紹介のもの以外をされる場合は、jQueryを活用する教材を選んでください。

❶コーディング課題中級編

デザインカンプからのコーディング課題 中級

中級から(一部課題は)オリジナルポートフォリオ化まで行う

中級課題からは、ただ単純にデザインカンプからコーディングを行うのではなく、「オリジナルポートフォリオ化」までを行っていただきます。

これによって、ロードマップを通して「戦えるポートフォリオ」が自動で準備できるようになっています。

オリジナルポートフォリオコーディング課題
デザインカンプからのコーディング課題

中級編は課題を一つ選ぶ

デザインカンプからのコーディング課題

中級課題では「複数課題から一つを選択」してもらいます。

  • 架空農園サイト
  • 架空サービスサイト

両方ともコーディングしていただけますが、無料レビューは「一つのみ」になります。二作品目レビューを受けたい場合は、別途有償で賜ります。

デザインカンプからのコーディング 中級
サービスサイト
デザインカンプからのコーディング 中級
農園サイト
しょーご

個人的に「サービスサイト」は難しいですが、ポートフォリオとしては良質でおすすめです。

\jQueryのライブラリで動きのあるサイトを制作する/

❷コーディング課題中級Ex

デザインカンプからのコーディング課題の中級Exに課題を追加しました

中級Exもオリジナルポートフォリオ化まで行っていただきます。

中級Ex編も課題を一つ選ぶ

デザインカンプからのコーディング課題 中級Ex

中級Ex課題では「複数課題から一つを選択」してもらいます。

  • 新卒採用サイト
  • 旅館サイト

両方ともコーディングしていただけますが、無料レビューは「一つのみ」になります。二作品目レビューを受けたい場合は、別途有償で賜ります。

しょーご

個人的には「新卒採用サイト」の方が新しいのでおすすめします。

\和風サイトで高度なCSSアニメーションに挑戦する/

【2021年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

しょーご
しょーご
開始一ヶ月でここまで到達したツワモノも!

しょーご
しょーご
この方も早いですね
昨日提出したしょーごさん( @samuraibrass  )の中級EX課題1発合格いただきました,1月7日から初めて1ヶ月と1週間でここまで来れたのもしょーごさんの独学ロードマップが最強だからです。この課題とも相性抜群なのでWeb制作やり始めの人には特におススメです

css命名規則を実践する

css命名規則は保守性の面から大事です。

css命名規則はBEMがわかりやすい&一番使われているということから、BEMが最初は良いかと思います。
FLOCSSも結構好きですが。

先程紹介したcss設計完全ガイドが特に参考になります。全コーダーがいますぐ買うべき神本なので、

まさかいないと思いますが、まだ購入していない人はぜひ購入ぜひしてください。

テクニカルSEOを実践する

SEO

SEOはSearch Engine Optimization(サーチ・エンジン・オプティマイゼーション)の略で、日本語にすると「検索エンジン最適化」のことを意味します。

発注者視点だと

発注者

ソースコードぱっと見てみたら、divだらけでタグも適切に使えてないっぽいな…サイトもかなり読み込み遅いし、画像圧縮してないのかな?うーん…

となるケースが多いです。

しょーご

これらがなぜ問題なのかは、後述する「SEO内部対策」のパートを見てもらえれば分かります。

とにかくこの時点では下記の最低限の対応を行えるようにしてください。

そこで、中級、中級Ex課題を行う上で以下の3点を意識してください。

テクニカルSEO
  1. セクショニング・コンテンツ
  2. 見出し構造
  3. 画像の軽量化

①セクショニング・コンテンツ

解説は以下の動画にまかせます。

簡単に言えば「sectiion/article/aside/navを適切に使おう」ということになります。

セクショニング・コンテンツ

②見出し構造

見出し構造については、様々なサイトを検証ツールで見てみることをおすすめします。

hタグ 見出し構造

③画像の軽量化

ポートフォリオを確認していると、かなり思いサイトに遭遇します。その多くは以下が原因です。

  1. 画像が巨大なサイズ
  2. 圧縮をしていない(MacならImageOptim使う)
  3. jpgとpngの使い分け(写真をpngのままにしない)

ボトルネックは検証ツールのネットワークを参照すれば見つけることができます。

検証 ネットワーク
極端に長いラインがあれば対処する

jQuery,JSのライブラリ(プラグイン)を使ってみる

実務ではプラグインを利用して機能実装することが非常に多いです。ほぼ毎回です。

それをコーディングの段階から取り入れてみましょう。

例えば先ほど紹介させていただいた私のコーディング教材では「swiper」というプラグインを利用前提にしています。

jQuery スライダー
swiperで実装する部分

swiperは実務でスライダーを実装する際にはほぼ毎回使用することになります。制作会社の友人もこれしか使っていないと言っているほどですw

ここで作ったものは実績公開する前提なので、公開許可が出ているものを選定してください。

目安期間:三週間程度

ポートフォリオとして公開する

シンレンタルサーバー
https://server.xfree.ne.jp/

ポートフォリオとして機能させるにはネットで動く状態で見せる必要があります。

ここまで作成した静的サイトをサーバーにあげて公開していきます。

しょーご

おすすめは「シン・レンタルサーバー 」もしくは「ConoHa WING 」です。

レンタルサーバー各社公式サイト

シン・レンタルサーバー
https://server.xfree.ne.jp/
ConoHa WING
https://www.conoha.jp/wing

シン・レンタルサーバーとConoHa WINGどちらがいい?

シン・レンタルサーバーでのWordPressサイト公開方法を画像で解説【ブログ・ポートフォリオサイト両方いける】

個人的には「シン・レンタルサーバー 」のほうが今はおすすめかなと思います。

安くて高速で実案件でも使える業界No.1高コスパサーバー」という最強のポジションにいるためです。

シン・レンタルサーバーでのWordPressサイト公開方法を画像で解説【ブログ・ポートフォリオサイト両方いける】
ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

この後のWordPress編でも活躍します。

しょーご

一応両者とも頻繁にセールを行っているので、公式サイトで価格を比較してみて安い方を選ぶでもいいかなと思います。

どちらも高性能なのは同じなので。

レンタルサーバー各社公式サイト

シン・レンタルサーバー
https://server.xfree.ne.jp/
ConoHa WING
https://www.conoha.jp/wing

どちらのサーバーを選んでも、「サーバーの契約→サイト公開」を以下の記事で「たくさんの画像」を用いて丁寧に解説したので、サイト公開まで一気に行うことが可能です。

しょーご
しょーご
ちなみに、私のコーディング教材をしてくれた方は基本的にアップロード&表示確認できているはずなので、特に支障ないかなと思います(note内にも案内があります)

目安期間;一日

しょーご

ここまでで静的サイトを構築するスキルは身につきました。早い人だと1ヶ月と少し、遅くとも3,4ヶ月で来れると良いペースかなと。

閑話休題:WordPressブログかポートフォリオサイトを公開しよう

閑話休題:WordPressブログかポートフォリオサイトを公開しよう

ブログやポートフォリオサイトをアップする狙い

実務では公開までを代行する

例えば美容室のサイトを作ることになったとして、オーナーさんにコーディングしたデータを渡して「あとよろしく!!」なんてことにはならないわけです。

当然こちら側で公開までしなければなりません。

その場合に「自分でサイトを公開した経験」がないと苦戦することになります。

  1. 独自ドメインを取得し
  2. サーバーを契約して取得したドメインと紐付け
  3. 全世界にwebサイトを公開して
  4. コンテンツを投稿する

特にWordPressは難解です。

そのため自分でブログやポートフォリオサイトをアップロードすることでその練習をします。まさに実験場です。

WordPressの勉強がかなり楽になる

ラーメンを食べたことがない人が、ラーメンを作れるのでしょうか?

これはWordPressにも言えることです。

WordPressには様々な機能がありますが、自分で使う前に開発の勉強に入ると、結構きついです…

更に、Web制作者がブログを運営することにはメリットしかありません。

ここから少し、ブログ立ち上げ方法の解説をしますので、ぜひ挑戦してみてから、次のWordPress課題に入ってみてください。

おすすめのブログ立ち上げの流れ
  1. シン・レンタルサーバーでサーバー・ドメイン取得
  2. WordPressテーマ「SWELL」をダウンロード
  3. 初期設定を行う

ブログ公開までの流れ

シン・レンタルサーバーでのWordPressサイト公開方法を画像で解説【ブログ・ポートフォリオサイト両方いける】

シン・レンタルサーバー 」や「ConoHa WING 」ならとても簡単にWordPressサイトを公開することができます。

以下の記事で爆速で構築しておきましょう。

WordPress環境を作ったら、次はテーマ選びです。

WordPressブログのテーマは「SWELL」が一番おすすめです。

しょーごログのテーマはJINですが、ぶっちゃけ「SWELL」に乗り換えたい。。。

ブログ立ち上げ後の初期設定については、以下の記事が参考になるので、色々WordPressを触ってみて、どんな機能があるのか確認しておいてください。

しょーご

ここまでできれば、かなりWordPressテーマ制作の勉強が楽になります!

web制作完全独学ロードマップ

目安期間:5日

[補足]SEO内部対策をきちんと理解する

SEO

ここまで学習してこのような要素を利用してきませんでしたか?

  • title
  • meta description
  • h1~h4
  • リンク
  • パンくず
  • img

これらはサイトの検索結果の一覧上位に表示するための「SEO」に非常に大事になってくるものです。

Webサイトはお客さんを集客するために制作します。そして検索上位にサイトを乗せるために行わるのが「SEO」です。

特にWeb制作会社などと仕事をすると高確率で「SEO内部対策シート」のようなものを共有されます。

そこでコーディングを行いつつSEO内部対策を行うことになるのです。

SEO内部対策はWeb記事閲覧でOK

とりあえず下記の記事を見てもらえれば問題ないかなと思います。

SEOの内部対策とは?基本15のチェックリスト!外部対策との違いも解説

検索エンジンに正しく情報を伝える重要性

これがわかればとりあえずOKです。

SEOの内部対策は、特にこのあとの「WordPressでのサイト制作」にも深く関わってくるため、この段階で概要を掴んでおくと学習がしやすくなります。

しょーご

さて、いよいよおまちかねのPHP、WordPressに入っていきます!プログラミング色が強くなってきます!

Web制作ロードマップ-終盤

web制作 独学 ロードマップ CSS設計

準備:WordPress学習前にやっておくこと

WordPressはこれまでと比べて、プログラミングの要素が強くなってくるので、理解できない部分が多くなってくるかと思います。

なので、まずはこちらの記事を呼んで、前提知識をつけておくといいです。

その後、WordPressの学習前に環境構築をしておくとスムーズです。

おすすめはLocalで、構築方法は全て以下の記事で解説しています。

しょーご

ここで紹介していない教材の中では、MAMPも使ってたりしますが、絶対Localの方が便利なので、Localを使って開発するべきです。

補足:WordPress学習はこちらも

ここからWordPress学習方法を解説していきますが、以下の記事でも詳しく解説しているので(特に各学習教材の具体的な進め方)こちらも一緒に見てみてください。

【Web制作案件レベルへ】WordPressのおすすめ勉強方法のルートを徹底解説【本・動画・コーディング課題】

WordPressのおすすめ勉強方法のルートを徹底解説

❶本と動画でWordPressの基礎を押さえる

早速WordPressを学んでいきます。

PHPに関しては、分からない時に都度ググる程度でいいので、載せていません。

もしPHPで分からない部分が出てきたら、ProgateのPHPⅠだけやればいいと思います。

web制作 ロードマップ wordpress

これから紹介する本と動画は2つとも利用することで、基礎を理解しやすくなっています。

❶HTMLサイトをWordPressにする本

https://amzn.to/47qSBjq

まずはWordPressの全体像を掴む

WordPressの基礎や全体像を学ぶのに、まずは「HTMLサイトをWordPressにする本」をおすすめします。

https://amzn.to/47qSBjq

著者はWebデザインスクールで教えている3人の講師で、WordPress化に挑戦する人の悩みや意見をしっかりとヒアリングして執筆しているので、つまずきやすいポイントを把握したうえで丁寧に解説しています。

この本で、「HTMLコーディングしたものをWordPressテーマにする方法」を学んでください。

注意点として、本に書かれているコードは一部初学者向けで、実際には使わないコードが使われています。

例:本来はfunctions.phpでCSSは読み込むが、header.phpでCSSを読み込んでいたりする。

ただその当たりはこの後紹介する動画教材で回収できるので、気にせず進めてください。

応用動画素材もありますが、この後紹介する動画講座と代替してもいいと思います。

created by Rinker
¥2,399 (2024/04/17 14:13:07時点 Amazon調べ-詳細)

❷「ちゃんと学ぶ、WordPressテーマ開発講座」(Udemy動画)

動画で学びたいあなたへ

WordPressの基礎を動画で解説してくれている教材があります。

それが「ちゃんと学ぶ、WordPress テーマ開発講座」です。

作成者はたにぐちまことさんというPHPの教材を十年以上出されている方なのですが、この方の解説はめちゃくちゃわかりやすいため、

動画で学びたい人は「ちゃんと学ぶ、WordPress テーマ開発講座」を選ぶといいかなと思います。

内容的にも「全くの初心者から基礎をまんべんなく」といった理想のカリキュラムとなっており、

  • サイトのバックアップ方法まで学べる
  • カスタム三兄弟まで含んでいる

と言った点が、既存教材とは一線を画しています。

また、定期的にアプデを行ってくれるので、最新の内容を買い切りで学べるのは大きいと思います。

udemyでは頻繁にセールを行っており、「ちゃんと学ぶ、WordPress テーマ開発講座」もセール時には¥2,000程度で購入することが可能です!

しょーご

動画だけだと少し難しいと思うので、本と併用してほしいですね。

目安期間:一週間〜二週間

動画で学ぶならこれ!/

❷ビジネスサイトを作って学ぶ WordPressの教科書Ver6.x対応版

https://amzn.to/3MbLLq6

しょーご
しょーご
この本なんですが、、WordPress開発国内リーディングカンパニーのプライムストラテジーが監修しています!

WordPressの応用まで

WordPressの教科書では、基本的なテンプレートタグの使い方だけではなく、PHPの知識も結構使うので、なかなか鍛えられます。

前者2つの教材より明らかに解説されるソースコードも実務最前線の実態に近くなっています。

どうしてもPHPの知識がないとコピペ&応用が聞かない人材になってしまうので、プログラミングチックではありますが、ここで慣れておきましょう。

しょーご

普通に実務を行うレベル感なので、結構難しく書籍のレビューも評価が別れています。それぐらい骨のある本です。

ビジネスサイトという題材のよさ

ビジネスサイト(コーポレートサイト)が案件としては一番多いのと、プライムストラテジーが実勢に仕事で制作しているレベル感のものができると公言されているので、

非常に実用的と言えます。

かなり難しいので、少しずつ進めていきましょう。ここは時間をかけて大丈夫です。

WordPressの教科書」の詳しい取り組み方については、以下の記事に詳細を解説していますので、見てみてください!

この記事を読むことで、挫折率が大幅に減ります!

目安期間;二週間〜三週間

ゆうすけくん
ゆうすけくん
やっとここまで、来た…
しょーご
しょーご
よくここまできたね!あとはラストスパートだ!

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

デザインカンプからのコーディング課題 上級

2024年に完全リニューアルした、上級編コーディング教材に取り組んでもらいます。

デザインを更にブラッシュアップさせ、ポートフォリオとして大活躍間違いなしです!

作成に当たり工夫したポイント
  • カスタム投稿やカスタムフィールドの実務レベルの力が身につく
  • ポートフォリオとして受けの良い「コーポレートサイト型
  • 表示確認特典付き
  • 下層ページ12枚程度
  • 実案件なら20万くらいの難易度
コーディング課題 上級
デザインカンプからのコーディング課題 上級

難易度は実案件レベルです。

さきほど紹介したUdemyの講座とも相性が非常に良いです。

WordPressは本で学習した後は実践で鍛えるしか無いのですが、上級編では実案件を想定しておりますので、

仕様書を添付しそのとおりにコーディングしていただきます。

模擬案件のように取り組むことが可能です

しょーご
しょーご
めちゃくちゃ頑張って作ったのでおすすめです!!👍

しょーご
しょーご
この教材をこなすことで、WordPress実案件に安心して望めるようになります。

目安期間:10日

2月7日からしょーごさん( @samuraibrass  )の独学ロードマップを開始して今日で2ヶ月経ちます。それまでは何一つサイトを作れず、Progateを周回するだけでした。今ではサイトを作れるようなり、現在は上級課題に取り組んでいます。Web制作独学ならこのロードマップ1択です
2ヶ月で上級課題まで来られた方のツイート

WordPress課題をアップロード

ポートフォリオになるので、絶対アップロードしておく

ローカル環境で開発したものを本番にアップロードします
(方法など詳しくは【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】に記載)

できれば自分のサーバーに上げてほしい

All in one WP Migrationというプラグインで簡単にできます。

実務ではこれから頻繁に行うことになるため、自分のサーバーでできれば、勉強になります。

最近のサーバーは「WordPress簡単インストール機能」などを備えているので、あまり身構える必要はないです。

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

超簡単にWordPressサイトを公開する方法

まだサーバーを取得していない人は、以下記事を参考にWordPressサイトを公開してください。

目安期間;1日

ここまでで実案件レベルに到達することができました!

ここからはエクストラ課題で取り組みは任意になります。

Web制作ロードマップ-エクストラコース(任意)

web制作 独学 ロードマップ

このロードマップのエクストラコースは必ずしも案件獲得で行う必要はありません。

ただ、最近はWeb制作を始める人も増え、確実にライバルが増え、ライバル自身のレベルが上っているのも事実。

このエクストラコースは、「ここまでやってたら、実案件でも安心して挑戦できる」というレベルを目指せます。

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

ここまででFigmaとAdobe XDデザインからのコーディングを練習してきました。

しかし、実案件では大半のデザインがPhotoshopかIllustratorでくることになります。

私は職業柄多くの駆け出しフリーランスをサポートしていますが、多くの方が苦戦しているのを見て、Photoshop編の課題をリリースすることにしました。

取り組みは任意で、Photoshopの準備が必要になりますが、デザインも仕様も実践仕様なため、ポートフォリオの強化にも繋がります。

難易度が高いため、ライバルとのポートフォリオの被りはだいぶ減らせるのではないかと思います。

作成にあたり工夫したポイント
  • Photoshopに成熟したデザイナーによるデザイン
  • スマホカンプも用意
  • 実案件志向のデザイン
しょーご

任意と言いつつ、昨今のWeb制作は駆け出しがかなり多いので、差をつけるためにぜひ取り組んでほしいなと思います。

営業も実案件も大きく楽になると思います。

営業と就活を初めて15日目 0→1 達成しました! クラウドソーシングにて受注し納品、評価完了です😆 しょーごさん( @samuraibrass )の三種の神器のおかげです。 自身契約のサーバーにテスト公開し、デイリー進捗報告。この流れも経験済みで助かりました! 感謝です😊

\難解なHTMLコーディングを経験し差をつける!

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】

超実践編は、納期厳守の模擬案件を経験できる課題です。

ここまでのコーディング課題は、納期とか無かったですよね?

自分の好きなタイミングでコーディングしていたと思いますが、案件には納期があります。

また、実際の案件ではスキル以外に「コミュニケーションが気持ちよく行えるか?」でも、継続と紹介で仕事が回るか決まります。

迫りくる納期の中、本当に進捗報告品質管理を徹底できますか?初稿から綺麗に提出できますか?

ここができず、デザインカンプからコーディングできるようになった後、安定して案件が獲得できていない人が多いのが現状です。

【超実践編】納期厳守の模擬コーディング案件で実務への自信を身につける!【学習沼からあなたを卒業させます】

これを解決するために、超実践編をリリースしました。

超実践編では、極限まで実案件に近い環境を用意しています。

ただし、参加条件があります。

  1. しょーごログのコーディング課題「中級Ex」「上級」「Photoshop編」のどれか1つ以上、またはそれに相当する別の課題
  2. その月の受け入れ人数に余裕がある

毎月数人しか募集せず、初回も10分で枠が埋まったので、興味のある方はLINEへ登録し、お知らせを待つようにお願いします。

超実践編はLINEでしか募集をしていません。

LINE登録はこちらから

超実践編への応募以外に、しょーごログLINEにはたくさんのプレゼントがあります。以下の記事でご確認下さいませ。

しょーごログの公式LINEアカウント登録はこちらから

しょーごログ公式LINEを開設【友だち登録で豪華特典を無料プレゼント!】

ポートフォリオサイトの作成

全員が作る必要はないかもしれませんが、「ポートフォリオサイト」も準備しておくと、自分をアピールしやすくなるので、営業や就職・転職活動が捗ります。

しょーご

簡単に言うと、“自分のポートフォリオをまとめたサイト”になります。

詳細については以下の記事で解説しています。

しょーご

私はポートフォリオサイトを作る過程で、実案件の流れをインスタントに経験できたので、かなり助かりました!

ここでゴール、おめでとうございます!!

あとは営業するだけ

ここまでで月30万稼げるスキルは身につきました。

しかしここからが真のスタートなのです。

ありさちゃん
ありさちゃん
終わりましたー!!
まさひろくん
まさひろくん
これで私も一人前のフリーランスに!
しょーご
しょーご
まった!月30万稼げるスキル=月30万稼げるじゃないんだよ!案件がない限り、収益は0円なんだから仕事取らないと
ようこちゃん
ようこちゃん
私は勉強と並行してfacebookで勉強報告してたので、知り合いからすでに案件受注しています(ドヤ)
しょーご
しょーご
いいっすね〜、方法は様々あるけど、とにかく営業活動しよう!

また、フリーランスでなくコーダーとして就職転職目的の方でも、ここまででコーディングやWordPressでの開発ができるわけなのです。

注意:勉強方法”収集家”になるな!

ここまでのロードマップをこなしていただければ問題ないのですが、結構な確率で以下の思考ループに陥る方がいます。

まさひろくん

う〜ん、本当にこのロードマップで大丈夫?他にもっと効率の良い学習方法があるんじゃないの?

まさひろくん

もっと効率の良いロードマップどこだ!いや、もうスクール行っちゃおうかな…どうしよう〜〜!!分かんない!!

残酷ですが、これがWeb制作学習をやめていく人たちの特徴です。

もう一度「しょーごログのロードマップで成果が出ている人」の特徴を見ていきましょう。

ロードマップで成果が出せる人
  1. 目安期間をもとに、学習スケジュールを立てる
  2. 勢いよく駆け抜けて行く人が成果が出やすい
  3. できるだけ毎日コードを書く
  4. コーディング課題の期間を「実案件の期間」というマインドで緊張感を持って取り組む
  5. どんなロードマップでも「必ずコーディング課題はプロの添削を受ける

やるべきことは、明確なはず。

しょーご

ここからは学習後の案件獲得の話をしていきます!

Web制作の案件獲得方法

学習を終えたら、まずは案件獲得活動に入っていきましょう。

Web制作のおすすめ案件獲得方法は全て以下の「Web制作フリーランスの営業方法大全」にまとめましたので、これを読めばOKです。

あなたが本気なら、この記事の方法全部すぐにやってほしいです!

しょーご

これだけやれば絶対結果が出るので、絶対やってほしい!

ここでは、これらの営業の中から、私の制作会社への営業支援について紹介します。

制作会社への営業の現実

Web制作会社への営業は仕事を得る手段としては有名です。

その結果、

制作会社

毎日毎日営業メールだらけ。。。

こうなっているのも事実。

私も多くの制作会社と取引や交流の機会がありますが、毎回言われます。

最近は、ネットで見つけた文章をテンプレで送っても正直ゴミ箱に行ってます。。。

永遠に仕事にならない営業文を、出し続けますか?

私は制作会社サイドも十分理解しているので、営業文に対して適切なアドバイスをすることができます。

そこで!!営業を受ける制作会社や営業をかけるWeb制作者両者のWin-Winとなるように、「営業文の徹底添削サービス」を始めました!!

【添削します】Web制作会社に特化した最強の営業法の解説と実践課題【あなたの文章と作品を鬼レビュー】
✅営業活動報告 今日で営業開始して1ヶ月経ちます。 現状、制作会社250社に営業して、うち8社とパートナー登録できました。 ポイントは追い電話と下記の記事です。しょーごさん信者は即買いです☺️ まだ追い電話できてないところもあるので、さらに突き詰めていきます。

こちらの「営業文の徹底添削サービス」で制作会社と提携できると、下請けとして安定的にコーディング案件を得ることができます。

しょーご

めちゃくちゃ真剣に営業文をガッツリ添削しますので、営業の成約率を大きく上げることができます!!

これから営業をかける人にはおすすめです!!

メンターサービスの活用で挫折を防ぐ

MENTAのススメ

Web制作の独学をしている人に全力でMENTAというサービスを進めたい【使い方と評判まとめ】

ここまででロードマップは頭に入ったかと思いますが、しかし実際に完走するのは苛烈を極めるでしょう。

独学で学習していると、以下の悩みが絶対出てきます。

ありさちゃん
ありさちゃん
どうしてもWordPressのインスタンスやサブループの概念が分からない…
まさひろくん
まさひろくん
なんか自分に合ったのが本当にWeb制作なのか分からなくなってきた
ゆうすけくん
ゆうすけくん
中だるみしてきた、誰かに管理されたい…厳しくしてほしい…
ようこちゃん
ようこちゃん
自分に実務ができるのが、日に日に不安になる…

こういった悩みを解説してくれるのが「MENTA」です。

Web制作の独学をしている人に全力でMENTAというサービスを進めたい【使い方と評判まとめ】
個人的におすすめしている「いちくん」さんのMENTAページ

MENTA」はエンジニア、デザイナーなどのメンターに月額数千円から相談・質問ができるスキルシェアサービスです。

プログラミング学習、ポートフォリオ、エラー解決方法などを学べます。登録しているメンターは4000人程度です。

しょーご

先程の問題も「MENTA」でこのように解決できます。

MENTAを使うことで…
  • どうしてもWordPressのクラス・インスタンスの概念が分からない…→「いちくん@Webエンジニア」にチャット、zoomで話しながら解説してもらえる
  • 自分に合ったのが本当にWeb制作なのか分からなくなってきた→「めがねん」さんに方向性を相談する
  • 中だるみしてきた→「平尾誠@ARUTEGA.Inc」の元でカツを入れる
  • 自分に実務ができるのが、日に日に不安になる→実務サポートをしているメンターがいるので、解決可能

ぜひ、学習継続が困難なときは「MENTA」を活用して乗り越えてほしいです!

\MENTAのメンターや使い方、評判・口コミをまとめています/

\詰まっている部分をMENTAで質問してみる/

実案件の進め方

以下記事では、実際の案件はどう進むのかを解説しています。

  • 実案件の進め方
  • 実案件前に準備しておいたほうがいいこと

準備することとして特に大事なのは、実案件ではフォトショイラレでデザインデータをもらうことが大半なので、Adobe CCは必須だということです(特に制作会社)

こちらの記事を一読しておくといいです。知らないとパニクりますからね笑

Web制作学習でのよくある質問

このWeb制作独学ロードマップは、全部こなさないと案件はきついですか?

正直最後の上級編WordPress課題までは終わらせてほしいですね。今は駆け出しが多いので、ポートフォリオがめちゃくちゃ見られるのと、WordPressを十分に触れる力がないと、かなり限定的な案件しか受けられず、不利すぎるかなと(2018年とかまでならHTML,CSS,jQueryだけでもいけましたが)
評価されるポートフォリオの条件はこちら→https://shogo-log.com/good-portfolio/
その意味でいうと、任意のエクストラ課題とはなっていますが、Photoshop編があると、逆に有利になると思います(Photoshopをそもそも用意するハードルがあり、挑戦者も少ないがデザインの受けがかなり良い)

要所要所でロードマップ以外の教材を入れてもいいですか?

問題ないと思います。中間課題として各レベル体に「初級Ex」「中級Ex」「上級」などのコーディング課題を設定しており、それらが十分にこなせるのであれば、過程は問いません(スクールではないので、もとより自由に行ってもらうものですが)
ですが、このロードマップは私が数年かけて熟考している最新のものなので、効率は良いと思います。

コードが汚いのですが、これでもポートフォリオは問題ないですか?

「セクショニング・コンテンツ」「hタグ階層」などHTMLタグの方がCSSよりはるかに気になるので、気をつけるならそこかなと。CSS設計思想まで見る余裕は判断側にはないですが、HTMLはすぐ目につくのと、明らかな間違いは存在するので(一面divしかない場合は要確認かも)

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!