プログラミング

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

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

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

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

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

しょーご

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

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

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

今回の記事で得られるもの

Web制作実務までの最新&完全な独学ロードマップを把握することができる(ロードマップ添付)

しょーごログ-ロードマップのアプデ情報
  • 2021.04.02 おすすめサーバー追加
  • 2021.05.31 エクストラ課題(Photoshopからのコーディング課題)を追加しました。
  • 2021.06.01 FTPについて追加、過去完走者の記事追加
  • 2021.08/31 SassやCSS設計パート修正追加
  • 2021.10.15 テクニカルSEOパートを追加
  • 2022.01.14 フルコミットできる人向け目安期間追加

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

しょーご

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

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

目次
  1. Web制作完全独学ロードマップ-動画版-
  2. この記事の信憑性(権威性)について
  3. このWeb制作独学ロードマップの強み
  4. このWeb制作独学ロードマップの評判
  5. 前提:独学はいばらの道です
  6. Progate終了後に学習すべき重要な点
  7. Progate後のWeb制作独学ロードマップ公開
  8. 営業・就職に十分なポートフォリオが手に入る
  9. 過去に取り組んだ先輩たちからのメッセージ
  10. リスケになっても諦めなければ勝ち(マインド面)
  11. Web制作独学ロードマップ-序盤
  12. 1冊で全て身につくHTML&CSSとwebデザイン入門講座
  13. コーディング教材初級編3つ
  14. HTML,CSS総復習
  15. 中盤前に...
  16. Web制作ロードマップ-中盤
  17. jQueryの学習方法
  18. Sassの学習方法
  19. CSS設計を学ぶ【CSS設計完全ガイド】
  20. コーディング教材中級編2つ
  21. ポートフォリオとして公開する
  22. 閑話休題:ブログかポートフォリオサイトを公開しよう
  23. Web制作ロードマップ-終盤
  24. ProgateでPHP1(2~4はできれば一周*任意)
  25. WordPressレッスンブック5.X対応版
  26. もしくは「ちゃんと学ぶ、WordPressテーマ開発講座」
  27. ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版
  28. 【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】
  29. WordPress課題をアップロード
  30. エクストラ課題【取り組みは任意】
  31. ポートフォリオサイトの作成【任意】
  32. ここでゴール、おめでとうございます!!
  33. モチベーションの管理の手法
  34. 未経験からWeb業界で働きたい方へ
  35. 穴場案件の獲得サービスたち
  36. 実案件の進め方
  37. Web制作会社への営業講座出しました!
  38. Web制作学習でのよくある質問

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

しょーご

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

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

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

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

そもそものProgateの進め方

まさひろくん

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

しょーご

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

しょーご

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

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

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

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

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

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

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

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

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

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

ロードマップ
✅ここまでの遍歴  【2022年】 1/22 学習開始 2/7 しょーごさん( @samuraibrass  )ロードマップ 4/30 ロードマップ終了 5/7 知り合いから初案件受注 6/7 Web制作会社へ営業開始 7/4 制作会社から初案件受注 7/7 制作会社9社とパートナー登録 7/24 月10万円達成  こんな感じです 参考になれば嬉しいです☺️
しょーごログ

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

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

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

コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
初級編イメージ
初級Exイメージ
中級イメージ
中級Exイメージ
上級イメージ
Photoshop編イメージ
previous arrow
next arrow
 

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

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

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

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

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

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

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

リスケになっても諦めなければ勝ち(マインド面)

具体的なロードマップに入る前に、ちょっと気持ちの持ち方について。

具体的なスケジュールを立てる方もいるかと思いますが、それ通りに行かない場合に

まさひろくん

自分はなんてダメな人間だ…(泣)

となる必要は全くありません。初めて学ぶ分野を計画通りに進めるのは非常に大変なことです。でも、諦めなければ勝ちですよ。

私もプログラミングスクールで同期16人中最下位でしたが、今も働けてるのはその後周りが止めていく中、愚直に続けたからに他なりません。

その代わりに、達成できたら自分を目一杯褒めてあげてくださいね。

では中身に入っていきましょう。

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

Web制作ロードマップ

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

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

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

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

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

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

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

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

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

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

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

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

完璧に覚える必要はない

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

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

まさひろくん

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

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

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

補助教材:VSCodeをちゃんと設定するなら

VSCodeが圧倒的にスタンダードなエディターですが、もう少しカスタマイズしたい方には以下の本がおすすめです。

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

Web制作に特化したVSCode本ということで、まさにぴったりですね。

https://amzn.to/3vTXty1

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

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

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

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

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

コーディング課題入門編

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

コーディング課題初級編

模写コーディング教材

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

私のコーディング教材はマガジンでまとめて購入頂くと更にお得です!
https://note.com/samuraibrass/m/mad296098d928

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

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

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

https://crestadesign.org/cording-first/

クリ★スタ【コーディング課題】XDからコーディングをしよう【初級編】

https://note.com/chizumi_/n/n43e918e99656

コーディングの練習をしよう〜その2〜

https://code-step.com/portfolio1-menu/

【HTML/CSS コーディング練習】初級編:ポートフォリオサイト/LP

ピクセルパーフェクトを前提にする!

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

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

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

しょーご

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

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

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

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

目安期間;1ヶ月以内

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

HTML,CSS総復習

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

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

コーディング教材

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

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

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

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

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

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

しょーご

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

目安期間:6日

ゆうすけくん
ゆうすけくん
できましたー
しょーご
しょーご
よし!ここまででHTML,CSSの基礎は身についたね!次に行こうか

しょーごさん( @samuraibrass )の初級Ex課題、一発OKもらいました❗️ 悩むところも多かったですが、学びの多い課題でした。 「綺麗にできていると思います」とコメントいただき、自信になりました。 Javascriptの復習をしたら中級に取り組んでいきます 楽しみ〜😊
【2021年版】Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】

中盤前に…

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

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

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

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

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

Web制作独学ロードマップ

jQueryの学習方法

Web制作学習ロードマップ

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

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

①まずはProgateで学習する

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

https://prog-8.com/

②jQuery標準デザイン講座

https://amzn.to/3Gi5KgU

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

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

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

しょーご

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

完璧を目指さない

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

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

ポイント

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

目安期間;二週間程度

@samuraibrass  さんがおすすめされていたこちらの書籍で勉強をはじめました📚 jQueryは最初仲良くなれないと思いましたが、この本のおかげで少し好きになってきました🐥 #プログラミング勉強中  #駆け出しエンジニア

Sassの学習方法

Web制作独学ロードマップ

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

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

しょーご
しょーご
仮に自分が使う気がなくても、ほとんどのプロジェクトに採用されているので理解はしておかないといけないということです。

注意点 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に

  • DartJS Sass Compiler and Sass Watcher
  • またはLive Sass Compiler

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

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

しょーご

現状DartJS Sass Compiler and Sass Watcherの方が、Dart Sass対応していて、メンテナンスされていて将来性があるのでおすすめです(情報がまだ少ないですが)

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

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

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

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

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

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

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

目安期間:7日間

CSS設計を学ぶ【CSS設計完全ガイド】

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

これは「CSS設計」を本格的に学ぶ本です。CSS設計ができると「良いCSS」が書けるようになります。

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

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

ここまでCSSを書いてきて

駆け出しさん

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

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

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

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

目安期間:4日間

学習154日目 (2h)✳️しょーごさん( @samuraibrass )課題 初級EX レスポンシブの続き。学習以外にやることが多すぎて、集中力途切れがち😓ですが、、、「CSS完全設計ガイド」が届いた〜♪すごいボリュームだけど、ちょっとずつ読み進めたいです🧐 #プログラミング独学 #しょーごログ #CSS設計完全ガイド

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

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

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

コーディング課題中級編

模写コーディング教材

コーディング課題中級Ex

コーディング教材

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

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

しょーご
しょーご
この方も早いですね

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

css命名規則を実践する

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

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

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

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

テクニカルSEOを実践する

発注者視点だと

発注者

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

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

そこで、中級、中級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

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

目安期間:三週間程度

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

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

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

2種類の公開方法
  1. xfreeを使用する(手軽で無料だが…
  2. レンタルサーバーでアップロード(実務と同様、有料だがおすすめの手法

個人的にはレンタルサーバー(ConoHa WING )を契約してポートフォリオを上げる方法を推奨したいです。

無料サーバーはサイトが飛ぶ可能性があったり、広告が入ったりすることがありますし、

何より実案件では無料サーバーではなく、レンタルサーバーにアップロードすることが大半なためです。

一つサーバーを持てば、いくつもポートフォリオを公開することが可能です(Conohaでは無料ドメインが2つもついてきます)

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

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

「サーバーの契約→サイト公開」までを以下の記事で丁寧に解説したので、サイト公開まで一気に行うことが可能です。

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

目安期間;一日

しょーご

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

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

実験場&練習場として活用する

webサイトを世界に公開・運用する手順を皆さんはご存知でしょうか?

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

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

実務では公開までを代行することがあるため

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

当然こちら側で公開までしなければなりません。その場合に「自分でサイトを公開した経験」がないと苦戦することになります。

特にWordPressは難解です。

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

しょーご
しょーご
ここまで自分はブログやらないし関係ないやって思ってる方も、WordPressって基本的に『ブログ構築システム』なので、使ったことない人がいきなりサイト制作の勉強始めると、独特なシステムの前にかなり難航すると思います…
しょーご
しょーご
私はこのしょーごログを通して「投稿」や「固定ページ」「プラグイン」などのシステムに慣れることができました。「ラーメンを食べたことがない人がラーメン作りを学ぶ」より、「ラーメンを食べたことがある人がラーメン作りを学んだほうが理解しやすい」のと一緒です。

ブロックエディタなどWordPressのシステムに早めに慣れておく

WordPressのブロックエディタは仕様に慣れが必要です。

当然非ITのお客様にお渡しする場合、説明書を添付したり説明する必要があるわけです。

また昨今はブロックエディタを活用した開発が盛んで、ブロックでページを組み上げていく流れができています。

web制作者としてもブロックエディタを自分で活用しておくことはとても重要です。

このブログも最近クラシックエディタではなくブロックエディタで書いていますが、執筆が非常に早くなりました。

Google Analyticsやサーチコンソール導入までできると良い

お客さんのサイトを納品する場合、大抵の場合はGoogle Analyticsやサーチコンソールを利用したサイトマップの送信までやることが多いです。

自分のブログで練習できますし、どうせ導入するなら分析しがいのある自分のブログに入れてPDCA回せば、マーケティングも学べて一石二鳥です。

web制作をする上で、自分のサーバー上でテスト環境を用意することがままあるため、Web制作フリーランスとして活動するなら、1つレンタルサーバーを契約しておくことが重要です。

おすすめはConoHa WING

ConoHa WING ならとても簡単にWordPressサイトを公開することができます。

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

しょーご
しょーご
さあ、ここから後半戦です!

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

目安期間:5日

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

Web制作ロードマップ

ProgateでPHP1(2~4はできれば一周*任意)

PHPはWordPressの基礎部分

WordPressはPHPの基礎を知らないと完全に呪文と化してしまうため、Progateをまず軽く回しておくといいです。

PHP2以降のオブジェクト指向は雰囲気だけでいい

クラスやコンストラクタ、インスタンスなど出てきますが、雰囲気だけでいいです。

完全に理解は無理なので、つまずいたら先に進んだ方がいいです。

また、道場コースも行う必要はありません。

私もProgateのPHPコースで結構時間を使ってしまいました。確実に抑えて欲しいのは「PHPコースの1」だけですので、その後は流してください。ただWordPressはPHPのクラスの概念がわかると理解が容易になるため余裕があればでいいです。

目安期間:一週間

しょーご
しょーご
この先は本で学ぶか動画で学ぶかで教材が変わってきます。おすすめは後者の動画教材の方になります。

WordPressレッスンブック5.X対応版

WordPressの基礎を一番優しく

WordPressの書籍を10冊以上みてきましたが、WordPressレッスンブックを導入にするとわかりやすくていいです。

周りのフリーランスに聞いても、評判がいいですし、5.X版になってから内容もブラッシュアップされ、カバー範囲が広くなりました。

グーテンベルク対応教材

WordPress本は2019年より前の出版のものはブロックエディタに未対応なのですが、この本は2019年11月に出ているので、

内容も新しいです。

WordPress本購入時はグーテンベルク対応か要確認

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

もしくは「ちゃんと学ぶ、WordPressテーマ開発講座」

動画で学びたいあなたへ

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

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

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

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

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

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

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

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

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

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

動画で学ぶならこれ!/

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

弊コーディング教材と一緒にツイートしてくださる方が多いです。ありがたい限りですし、両者ともおすすめです!笑

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

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

WordPressの応用まで

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

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

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

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

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

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

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

最初のWordPress環境構築でVagrant&kusanagiで環境構築させてきますが、結構難しいので、普通にLocalで環境構築でいいと思います。

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

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

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

私が作成した上級編コーディング教材に取り組んでもらいます。

コーディング教材
作成に当たり工夫したポイント
  • 実案件ライクでありながら、完走できる難易度
  • ポートフォリオとして受けの良い「コーポレートサイト型
  • 最後の表示確認特典付き
  • 下層ページ6枚程度
  • 実案件なら12~20万くらいの難易度

すでにマガジンでご購入くださった方はマガジンに含まれております。

難易度的には、WordPressレッスンブックが終わった後から取り組むことができます。

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

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

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

模擬案件のように取り組むことが可能です。詳細はnoteを御覧ください。

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

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

目安期間:10日

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

WordPress課題をアップロード

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

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

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

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

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

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

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

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

目安期間;1日

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

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

エクストラ課題【取り組みは任意】

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

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

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

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

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

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

作成にあたり工夫したポイント
  • Photoshopに成熟したデザイナーによるデザイン
  • スマホカンプも用意
  • 実案件志向のデザイン
【即戦力編】Photoshopデザインカンプからのコーディング合格! ついにしょーごさん( @samuraibrass )のロードマップ完走!今年の1月から本格的に始めたWeb制作の学習ですが、挫折せずに独学で乗り切りました! さあついに営業開始! #駆け出しエンジニアと繋がりたい
しょーご

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

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

ポートフォリオサイトの作成【任意】

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

あとは営業するだけ

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

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

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

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

制作会社への就職転職も十分に可能です。

案件の中で成長していくだけ

web制作独学ロードマップ

ここまでで必要最低限のスキルは揃っています。

今回解説しなかった

  1. JavaScript
  2. gulpやwebpack
  3. git

これらは実案件で必要とされたときに学習すればいいです。遅延評価学習法で十分間に合います。

勉強はいったんやめて、案件をまずはとりましょう!

案件のとり方はこの下で紹介している記事にまとめています。

制作を効率化させるGulp,Webpackを学べる教材

Gulp おすすめ教材

最近はGulpも勉強される方が増えたので、おすすめ教材を紹介しておきます。

作りながら学ぶGulp4!Web制作で使い回せる初期ファイルを作ろう!【回答付きだから安心】は私と同じくフリーランスエンジニアを数年されている友人が出したGulp.Webpack教材ですが、一番内容が充実していると思います。

完成度が高すぎて、自分で出すのを諦めたレベルです笑

コーディングの効率がめちゃくちゃ上がるので、かなりコスパいいです、是非!

モチベーションの管理の手法

唐突に現れる、勉強しているしょーごログ運営人の写真

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

諦めないことが重要

プログラミング学習は苦難の連続です。特に環境に左右されます

  1. やらなければならない環境に自分を追い込む(メンター付きスクールなど)
  2. やる気のある人たちと頑張れる環境に飛び込む(もくもく会を企画する参加する)

いずれにせよ諦めないことが一番重要です。

ここを考えて最善の道を取れるようにしましょう!!

自分の場合はiSaraというスクールでみんなで頑張った期間に一気に成長することができた過去があります。

過去の挑戦者たちの感想・激励のコメント

まさひろくん

やる気が出てきました!でも、過去に取り組まれた方が具体的にどう取り組んで、どういった結果を出したのかとか、参考にしたいので、詳しく知りたいです!

しょーご

そんな方には、ぜひ以下の記事を見てほしいです。実際に転職したり案件獲得された方が多数おります。

プロに相談しよう[テックアカデミーの無料メンター相談]

ここでみなさん、以下のような悩みを持っていないでしょうか?

まさひろくん

学習ロードマップはわかったけど、いまいちWebエンジニアとしてまだ稼げるのか、自分の将来への展望は現実的なのか、そもそも勉強方法が合っているのか、色々不安です、プロに相談したい…

それを解決してくれるサービスをテックアカデミーが出しています。

それが「無料メンター相談」です。

プロのエンジニアに、なんと「無料」でプログラミングや仕事のことについて、相談することができます。

メンター陣は現役エンジニアなので、実際の案件のことについても聞くことも可能です。

また、スクールへの過度な勧誘もないので、気楽に相談することができます。

相談した人の声
しょーご

プロのエンジニアに無料で相談できる機会はほとんどないので、この機会をぜひ有効活用してください!

無料でプロに相談できる!/

なおこの無料メンター相談ですが、テックアカデミーの無料体験もついてくるようです。二度美味しいですね(≧▽≦)

未経験からWeb業界で働きたい方へ

看護師とWeb制作の両立

看護師として働きつつ、副業でWeb制作を行うさたかさんにインタビューしてきました。

「副業としてWeb制作を行いたい」方に参考になると思います。

公務員からフリーランスデザイナーに

元々公務員として働きつつフリーランスWebデザイナーに転身されたコウダイさんにインタビューを行いました。未経験からフリーランスになりたい方は参考になると思います。

コウダイさんはコーディングを最初に学びつつも、厳しいと感じデザインに舵取りを変更したようです。

穴場案件の獲得サービスたち

クラウドソーシング系は激戦と言われていますが、完全に穴場となっているサービスをまとめて紹介しています!

クラウドソーシングも様々ありますし、マッチングサービスなどのフル活用も必要です。

私も駆け出し期から使っており、最近案件を取っている駆け出しの方も「ここで紹介しているサービスから案件獲得できた」という報告を受けており、非常におすすめです!

実案件の進め方

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

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

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

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

Web制作会社への営業講座出しました!

満を持してついに出しました。ノウハウ面が強いため、売れすぎた場合は競合を防ぐために販売制限をかけようと思います。

✅営業活動報告 今日で営業開始して1ヶ月経ちます。 現状、制作会社250社に営業して、うち8社とパートナー登録できました。 ポイントは追い電話と下記の記事です。しょーごさん信者は即買いです☺️ まだ追い電話できてないところもあるので、さらに突き詰めていきます。
しょーご

制作会社の採用担当にインタビューを行い、最新の内容に都度リライトしているので、かなり制作会社にも響く営業ができるようになると思います。

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実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

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

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

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

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

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

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

\課題の詳細はこちらから/

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