こんにちは、現在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設計パート修正追加
- 2022.01.14 フルコミットできる人向け目安期間追加
- 2022.10.05 SEO内部対策について追記
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
- Web制作完全独学ロードマップ-動画版-
- このロードマップをこなすことで何ができるようになるの？
- この記事の信憑性（権威性）について
- このWeb制作独学ロードマップの強み
- このWeb制作独学ロードマップの評判
- 前提：独学はいばらの道です
- Progate終了後に学習すべき重要な点
- Web制作独学のおおまかな流れ
- Progate後のWeb制作独学ロードマップ公開
- 営業・就職に十分なポートフォリオが手に入る
- 過去に取り組んだ先輩たちからのメッセージ
- リスケになっても諦めなければ勝ち（マインド面）
- Web制作独学ロードマップ-序盤
- 1冊で全て身につくHTML&CSSとwebデザイン入門講座
- コーディング教材初級編3つ
- HTML,CSS総復習
- 中盤前に...
- Web制作ロードマップ-中盤
- jQueryの学習方法
- Sassの学習方法
- CSS設計を学ぶ【CSS設計完全ガイド】
- コーディング教材中級編2つ
- ポートフォリオとして公開する
- 閑話休題：ブログかポートフォリオサイトを公開しよう
- [補足]SEO内部対策をきちんと理解する
- Web制作ロードマップ-終盤
- ProgateでPHP1（2~4はできれば一周*任意）
- WordPressレッスンブック5.X対応版
- もしくは「ちゃんと学ぶ、WordPressテーマ開発講座」（こちらがおすすめ）
- ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版
- 【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】
- WordPress課題をアップロード
- エクストラ課題【取り組みは任意】
- ポートフォリオサイトの作成【任意】
- ここでゴール、おめでとうございます！！
- Web制作の具体的な案件獲得方法はこちら
- 案件の中で成長していくだけ
- モチベーションの管理の手法
- 未経験からWeb業界で働きたい方へ
- 実案件の進め方
- Web制作会社への営業講座出しました！
- Web制作学習でのよくある質問
Web制作完全独学ロードマップ-動画版-
このロードマップをこなすことで何ができるようになるの？
Web制作の学習手順を調べてるんですが、この記事のロードマップをこなせば”何ができるように”なって、”どういう進路”に進めるんですか？
Web制作の案件の大半に対応できる力がつきます。
Web制作会社への就職・転職はもちろん、フリーランスとして案件獲得を行うこともできるレベルに到達することができます！
その後の案件獲得に必要な営業に関しても記事の後半で解説しているので、この記事一本で“Web制作を学んで稼ぐまで”を理解していただけます！
この記事の信憑性（権威性）について
web制作歴5年、納品数は200件以上。
2019年からメンター業に関わることが増え、述べ100人以上フリーランスとしての独立成功をみてきた
クラウドソーシング、制作会社でコーディング案件をいただくことができる、またはコーダー・ディレクターとして就職転職ができる
このWeb制作独学ロードマップの強み
案件獲得や就職転職が十分可能です【実績あり】
とにかく常に最新の状態を保つように、頻繁に追記修正を行っています。
ロードマップを完走して営業した結果、制作会社からかなりの高評価を貰えた人もいます。
また、就職転職に成功された方もいます。
このWeb制作独学ロードマップの評判
前提：独学はいばらの道です
私個人の考えとしては、「良質なスクール」を活用してほしいというのが率直な考えです。
Web制作はサーバーサイドプログラミング（RubyやPHPエンジニア）に比べて独立しやすいと言われますが、
それでもフリーランス独立するには相当な数の壁がそびえ立っています。
それを乗り越える最良の手段の一つは私は「デイトラ」の「Web制作コース
」だと考えています。
しかし、スクールにはそれなりのお金がかかります（Web制作コースはメンター付きスクールの中でも相当安いですが…）
お金を払うことに躊躇する人もいるだろうと思い、今回は私が考える「最強のWeb制作学習ロードマップ」を公開しようと思いました。
このロードマップをやり遂げていただけたら、スクールに数十万を出さなくても実案件レベルに到達することができます！それぐらい内容にはかなり自身があります。
Progate終了後に学習すべき重要な点
- ローカル環境での開発
- デザインデータからのコーディング
- webサイトの公開方法
- WordPressの自作テーマ開発
やるべきことは多いですが、このあと解説していきます。
そもそものProgateの進め方
Progateはどこまで進んでから取り組めばいいのですか？
そうだね、HTML.CSSの初級、中級、上級、Flexbox編が終わってるといいかな。道場コースはやらなくてもいいかなと！（私は駆け出し期にやりませんでした）
Progateを効率よく進める方法は以下の記事で解説しています！
Web制作独学のおおまかな流れ
これから具体的なWeb制作のロードマップを紹介しますが、おおまかなWeb制作の流れをここで先に頭に入れておいてください。
自分の学習進度や立ち入りがわかりやすくなります。
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でPHP1 | 1週間 | 2日間 |
| WordPress本かudemy | 7日間～14日間 | 5日間 |
| WordPressの教科書 | 14日間～21日間 | 5日間 |
| 【上級】XDデザインからのコーディング実践演習 | 10日間 | 7日間 |
| エクストラ課題【取り組みは任意】 | ||
| 【即戦力編】Photoshopデザインからのコーディング演習 | 5日間 | 3日間 |
| 合計期間 | 5ヶ月程度 | 2ヶ月半程度 |
前半は静的サイトコーディング、後半はWordPress制作を身につけていきます。
またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。
個人的には短時間で一気に身に付けるのがいいと考えますが、
本業のある方は「平日3h/休日6h」を目安に頑張ってみてください。
Web制作ロードマップ先人たちのペース
学習習慣の確立のアドバイス
コワーキングスペースを活用しよう
私が駆け出し期のときは家にいるとサボるので、「コワーキングスペース」を活用していました。
このロードマップの道のりは決して簡単ではありませんが、コワーキングスペースのような“集中して取り組める環境”を利用できる人は、極力利用するといいかなと思います。
私は同じコワーキング内にいる、現役フリーランスエンジニアの方にかなりモチベーションを上げてもらいました。現場の方とのコミュニケーションもかなり学習には役立ちます。
営業・就職に十分なポートフォリオが手に入る
このロードマップでは複数教材を紹介していますが、その中でも私が出しているコーディング教材は基本的に「コーディングのポートフォリオ」として利用することが可能です。
なので、このロードマップを完走すれば、自然と十分なポートフォリオが揃っていて、即案件獲得や就職転職の行動に移せる状態となります。
過去に取り組んだ先輩たちからのメッセージ
そうは言っても、このWeb制作独学ロードマップで結果出せた人はいるの？
という疑問があるかと思います。
すでにこのロードマップ内で紹介している教材をクリアした方が「どんな結果を出せたのか」
またこれから取り組む方への激励のメッセージ・アドバイスを頂いています（順次更新中）
就職転職や案件獲得をされた方も多数います！
リスケになっても諦めなければ勝ち（マインド面）
具体的なロードマップに入る前に、ちょっと気持ちの持ち方について。
具体的なスケジュールを立てる方もいるかと思いますが、それ通りに行かない場合に
自分はなんてダメな人間だ…（泣）
となる必要は全くありません。初めて学ぶ分野を計画通りに進めるのは非常に大変なことです。でも、諦めなければ勝ちですよ。
私もプログラミングスクールで同期16人中最下位でしたが、今も働けてるのはその後周りが止めていく中、愚直に続けたからに他なりません。
その代わりに、達成できたら自分を目一杯褒めてあげてくださいね。
では中身に入っていきましょう。
Web制作独学ロードマップ-序盤
1冊で全て身につくHTML&CSSとwebデザイン入門講座
まずは一冊ですべて身につくHTML&CSSとwebデザイン入門講座で学ばれるのがいいかと思います。
ポイント①網羅的に学べる
まず出版年度が2019年で内容的にも新しいです。flex-boxからCSS Gridにも対応し、内容にも過不足がありません。
ポイント②内容が優しく挫折しない
個人的に一番いいと思ったポイントで、おすすめできる所以です。
著者のManaさんはWebクリエイターボックスで情報発信されているのですが、とにかく初心者向けに優しい解説をされており、一冊ですべて身につくHTML&CSSとwebデザイン入門講座に置いても文体や表現が機械的でなくあったかみがあるのがよきだなと。
ポイント③作っていても楽しい
従来のHTML本だと、作る完成物のデザインが微妙でモチベーションが上がりづらいという問題があったのですが、
一冊ですべて身につくHTML&CSSとwebデザイン入門講座では作るサイトもデザインが今時なのと、ゆるふわな感じなので、作っていてモチベーションが上がります。
完璧に覚える必要はない
プログラミングを本で学習する際に気をつけてほしいのは「一度で完璧に理解できなくても良い、それよりまずは一周しよう」ということです。
例えばCSS Gridがいまいち理解できなくても、実際にこの先の課題で手を動かして使ってみて、やっと理解できた、ということもあり得るので、この先の課題をやりつつ
あ、ここはこの前本で学んだ部分だ！
と辞書的に活用できればかなり良いです。
補助教材：VSCodeをちゃんと設定するなら
VSCodeが圧倒的にスタンダードなエディターですが、もう少しカスタマイズしたい方には以下の本がおすすめです。
Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方
Web制作に特化したVSCode本ということで、まさにぴったりですね。
コーディング教材初級編3つ
ここから「デザインカンプからのコーディング」に挑戦していきます。
コーディング教材は１つ目が肝心！
コーディング課題入門編
コーディング課題初級編
＼最もお得な全部盛りマガジンでまとめて購入／
コーディング教材2つ目以降は少し難しいものを
最初に行ったものより少し難易度の高いものをやるといいです。
私の方でも将来的には準備予定ですが、とりあえず下記をおすすめしています。
コーディングの練習をしよう〜その２〜
【HTML/CSS コーディング練習】初級編：ポートフォリオサイト／LP
ピクセルパーフェクトを前提にする！
教えてくれたりコードレビューが存在しない独学の場合、デザインデータを忠実に再現するのが代々大前提になります。
実務でデザインデータ通りにコーディングを行えないと、普通に差し戻しを受けます。
使用できるなら、拡張機能「PerfectPixel」を使用しましょう。
良く適当になりがちなのは、余白やフォントの大きさ、太さ、色、あとそもそもフォントが適用されてないとかありますね。
コーディングを３つ行ったころに慣れてくる
HTML,CSSはとにかく書きまくって試行錯誤することが一番成長の近道です。
3つほどこなすことで、だいぶ定着してくると思います。このあとのSassやjQueryをスムーズに身に付けるために、ここでHTML,CSSを固めておくことが重要です。
HTML,CSS総復習
慣れてきたところで、中間課題です！
【初級Ex】 XDデザインからのコーディング実践演習【複雑なレイアウト】
HTML.CSSのみで、現状のレベル感でぎりぎりできて、かつポートフォリオにできるぐらい実践形式の課題を作成しましたので、こちらに挑戦してみてください。
正直結構難しいと思います笑
ただ基礎が徹底していないと、この先のフロントエンド技術も満足に身につかないので、コーディング力を底上げして初級ラストを飾りましょう。
恐らく、多くの方がここで初めて、
- サーバーアップロード
- ドメイン
- Basic認証
- シートに則った厳格なセルフチェック
- プロからのレビュー
こういったものを経験することになると思います。
この初級Ex課題から私のレビューが入ってきます！頑張りましょう！
＼本当に理解できた？HTML.CSSの基礎を総復習！／
中盤前に…
補助教材：プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書を二冊目におすすめしています。
この本はデザインカンプからのコーディングをいくつかこなした後に読むと発見が多いため、中盤を進めながら辞書的に使用してもらうといいかと思います。
Web制作ロードマップ-中盤
jQueryの学習方法
ここでサイトに動くをつけていくためのjQueryの学習を進めていきます。
jQueryを使わずにこなせる案件は非常に限られてくるため、案件をとるために必須になります。
①まずはProgateで学習する
上級編までさらっとやることで大まかに理解をすることができます。
ちなみにjQueryで初めてプログラミングらしいプログラミングに触れる人が大半だと思います。
途中でわからない部分があっても、とりあえず「なんとなくこんなことができるんだな」ぐらいの認識で大丈夫です。
このあとの書籍でしっかり身につきます。
②jQuery標準デザイン講座
jQueryで何ができるのかというのと、書き方に慣れることを目指します。
書き方を暗記するというより、思考の流れに慣れるという感じです。
jQuery標準デザイン講座はwebサイトでよく使われるコンポーネントを中心に学習することができるので、モチベ高く続けられて一押しの本です。
実際に頻出のパーツを作りながら学べるので、モチベ高く学習できる本です！
完璧を目指さない
すべてを完璧に理解することは不可能なので、全体的に眺めて書いてみたら次に進んでOK。
ただ見るだけではなくて、書くことが大事です。
jQueryをどこまで理解すればいいかは、ゴールがありません。目安としては教本に書いてある流れが自分で一からかけなくとも、「見て全て理解できる」なら先に進んでいいかと思います。
書く練習はこのあとします。
Sassの学習方法
次にSassの学習を行っていきます。令和以後ほとんどのコーディング案件でSassが活用されているため、学習はほぼ必須となっています。
正直私が駆け出し期の頃も「なぜ生のCSSではだめなのか」がいまいちわからなかったのですが、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で学習をしてください。
②Sassの環境構築を行う
VSCodeに
- DartJS Sass Compiler and Sass Watcher
- またはLive Sass Compiler
を導入し、コンパイルできるようにしてください。
Sassはそのままだとブラウザが読み込めないため、CSSにコンパイルしたものを読み込む必要があるのです。
現状DartJS Sass Compiler and Sass WatcherでもLive Sass CompilerでもDart Sassをコンパイルできるようです。
【任意】cssをSassに置き換えてみる
最初に模写コーディングしたもののcssをSassに置き換えてみてください。
その際に絶対に利用して欲しいSassの機能があるので紹介します。
【任意】Sassを本で学ぶ場合
Sassはあまり本が出ていない上にDart Sass対応のものはなかったのですが、最近出た「【特典PDF付き】現場のプロから学ぶ CSSコーディングバイブル」が内容が最新でいいです。
また、この本はCSS設計なんかも学べるので、この後のパートが楽になります。
CSS設計を学ぶ【CSS設計完全ガイド】
「CSS設計完全ガイド ～詳細解説＋実践的モジュール集」を必ず読んでください。
これは「CSS設計」を本格的に学ぶ本です。CSS設計ができると「良いCSS」が書けるようになります。
- 予測しやすい
- 再利用しやすい
- 保守しやすい
- 拡張しやすい
この4つを併せ持ったもの。
ここまでCSSを書いてきて
ここ、もう少し効率化してかけそうかも。このコード使いまわせるかも。この命名は他とバッティングしそう。
など様々感じたかと思います。それらへの答えはCSS設計を学ぶことで解消されます。
この後のパートで実戦レベルのコーディングを連戦で行っていただくので、CSS設計の考えをなんとなくでいいので、ここで入れておいてください。
なぜ良いCSSを書かないといけないのか？
ここでこう思った方がいるかもしれません。
別にまだ練習の段階なんだから、きれいなCSSなんてこの段階で書かなくても問題ないのでは？
いや、この段階から概念だけでも理解しておいたほうがいいよ！CSS設計は基本的に実践を通してしか使いこなせるようにならない上に、実案件では”コーディング規約“で指定されていたりもするので、徐々に慣れておかないとパニクって大変なことになるんだ…（泣）
この「CSS設計完全ガイド」は頻出のパーツの具体例が多く登場するので、言葉でわからなくなったら、具体例を見ればわかりやすいかなと思います。
コーディング教材中級編2つ
ではここまでで学んだSassとjQueryを活用してコーディングしてみましょう！
コーディング課題中級編
＼jQueryのライブラリで動きのあるサイトを制作する／
コーディング課題中級Ex
＼和風サイトで高度なCSSアニメーションに挑戦する／
css命名規則を実践する
css命名規則は保守性の面から大事です。
先程紹介したcss設計完全ガイドが特に参考になります。全コーダーがいますぐ買うべき神本なので、
まさかいないと思いますが、まだ購入していない人はぜひ購入ぜひしてください。
テクニカルSEOを実践する
発注者視点だと
ソースコードぱっと見てみたら、divだらけでタグも適切に使えてないっぽいな…サイトもかなり読み込み遅いし、画像圧縮してないのかな？うーん…
となるケースが多いです。
これらがなぜ問題なのかは、後述する「SEO内部対策」のパートを見てもらえれば分かります。
とにかくこの時点では下記の最低限の対応を行えるようにしてください。
そこで、中級、中級Ex課題を行う上で以下の3点を意識してください。
- セクショニング・コンテンツ
- 見出し構造
- 画像の軽量化
①セクショニング・コンテンツ
解説は以下の動画にまかせます。
簡単に言えば「sectiion/article/aside/navを適切に使おう」ということになります。
②見出し構造
見出し構造については、様々なサイトを検証ツールで見てみることをおすすめします。
③画像の軽量化
ポートフォリオを確認していると、かなり思いサイトに遭遇します。その多くは以下が原因です。
- 画像が巨大なサイズ
- 圧縮をしていない（MacならImageOptim使う）
- jpgとpngの使い分け（写真をpngのままにしない）
ボトルネックは検証ツールのネットワークを参照すれば見つけることができます。
jQuery,JSのライブラリ（プラグイン）を使ってみる
実務ではプラグインを利用して機能実装することが非常に多いです。ほぼ毎回です。
それをコーディングの段階から取り入れてみましょう。
例えば先ほど紹介させていただいた私のコーディング教材では「swiper」というプラグインを利用前提にしています。
swiperは実務でスライダーを実装する際にはほぼ毎回使用することになります。制作会社の友人もこれしか使っていないと言っているほどですw
ここで作ったものは実績公開する前提なので、公開許可が出ているものを選定してください。
ポートフォリオとして公開する
ポートフォリオとして機能させるにはネットで動く状態で見せる必要があります。
ここまで作成した静的サイトをサーバーにあげて公開していきます。
- xfreeを使用する（手軽で無料だが…）
- レンタルサーバーでアップロード（実務と同様、有料だがおすすめの手法）
個人的にはレンタルサーバー（ConoHa WING 
）を契約してポートフォリオを上げる方法を推奨したいです。
無料サーバーはサイトが飛ぶ可能性があったり、広告が入ったりすることがありますし、
何より実案件では無料サーバーではなく、レンタルサーバーにアップロードすることが大半なためです。
一つサーバーを持てば、いくつもポートフォリオを公開することが可能です（Conohaでは無料ドメインが2つもついてきます）
この後のWordPress編でも活躍します。
「サーバーの契約→サイト公開」までを以下の記事で丁寧に解説したので、サイト公開まで一気に行うことが可能です。
ここまでで静的サイトを構築するスキルは身につきました。早い人だと1ヶ月と少し、遅くとも3,4ヶ月で来れると良いペースかなと。
閑話休題：ブログかポートフォリオサイトを公開しよう
実験場&練習場として活用する
webサイトを世界に公開・運用する手順を皆さんはご存知でしょうか？
- 独自ドメインを取得し
- サーバーを契約して取得したドメインと紐付け
- 全世界にwebサイトを公開して
- コンテンツを投稿する
ブログやポートフォリオサイトをアップする狙い
実務では公開までを代行することがあるため
例えば美容室のサイトを作ることになったとして、オーナーさんにコーディングしたデータを渡して「あとよろしく！！」なんてことにはならないわけです。
当然こちら側で公開までしなければなりません。その場合に「自分でサイトを公開した経験」がないと苦戦することになります。
特にWordPressは難解です。
そのため自分でブログやポートフォリオサイトをアップロードすることでその練習をします。まさに実験場です。
ブロックエディタなどWordPressのシステムに早めに慣れておく
WordPressのブロックエディタは仕様に慣れが必要です。
当然非ITのお客様にお渡しする場合、説明書を添付したり説明する必要があるわけです。
また昨今はブロックエディタを活用した開発が盛んで、ブロックでページを組み上げていく流れができています。
web制作者としてもブロックエディタを自分で活用しておくことはとても重要です。
このブログも最近クラシックエディタではなくブロックエディタで書いていますが、執筆が非常に早くなりました。
Google Analyticsやサーチコンソール導入までできると良い
お客さんのサイトを納品する場合、大抵の場合はGoogle Analyticsやサーチコンソールを利用したサイトマップの送信までやることが多いです。
自分のブログで練習できますし、どうせ導入するなら分析しがいのある自分のブログに入れてPDCA回せば、マーケティングも学べて一石二鳥です。
web制作をする上で、自分のサーバー上でテスト環境を用意することがままあるため、Web制作フリーランスとして活動するなら、１つレンタルサーバーを契約しておくことが重要です。
おすすめはConoHa WING
ConoHa WING 
ならとても簡単にWordPressサイトを公開することができます。
以下の記事で爆速で構築しておきましょう。
[補足]SEO内部対策をきちんと理解する
ここまで学習してこのような要素を利用してきませんでしたか？
- title
- meta description
- h1~h4
- リンク
- パンくず
- img
これらはサイトの検索結果の一覧上位に表示するための「SEO」に非常に大事になってくるものです。
Webサイトはお客さんを集客するために制作します。そして検索上位にサイトを乗せるために行わるのが「SEO」です。
特にWeb制作会社などと仕事をすると高確率で「SEO内部対策シート」のようなものを共有されます。
そこでコーディングを行いつつSEO内部対策を行うことになるのです。
SEO内部対策はWeb記事閲覧でOK
とりあえず下記の記事を見てもらえれば問題ないかなと思います。
SEOの内部対策とは？基本15のチェックリスト！外部対策との違いも解説
検索エンジンに正しく情報を伝える重要性
これがわかればとりあえずOKです。
SEOの内部対策は、特にこのあとの「WordPressでのサイト制作」にも深く関わってくるため、この段階で概要を掴んでおくと学習がしやすくなります。
さて、いよいよおまちかねのPHP、WordPressに入っていきます！プログラミング色が強くなってきます！
Web制作ロードマップ-終盤
ProgateでPHP1（2~4はできれば一周*任意）
PHPはWordPressの基礎部分
WordPressはPHPの基礎を知らないと完全に呪文と化してしまうため、Progateをまず軽く回しておくといいです。
https://prog-8.com/lessons/php/study/1
PHP2以降のオブジェクト指向は雰囲気だけでいい
クラスやコンストラクタ、インスタンスなど出てきますが、雰囲気だけでいいです。
完全に理解は無理なので、つまずいたら先に進んだ方がいいです。
また、道場コースも行う必要はありません。
WordPressレッスンブック5.X対応版
WordPressの基礎を一番優しく
WordPressの書籍を10冊以上みてきましたが、WordPressレッスンブックを導入にするとわかりやすくていいです。
周りのフリーランスに聞いても、評判がいいですし、5.X版になってから内容もブラッシュアップされ、カバー範囲が広くなりました。
グーテンベルク対応教材
WordPress本は2019年より前の出版のものはブロックエディタに未対応なのですが、この本は2019年11月に出ているので、
内容も新しいです。
もしくは「ちゃんと学ぶ、WordPressテーマ開発講座」（こちらがおすすめ）
動画で学びたいあなたへ
WordPressの基礎を動画で解説してくれている教材があります。
それが「ちゃんと学ぶ、WordPress テーマ開発講座」です。
作成者はたにぐちまことさんというPHPの教材を十年以上出されている方なのですが、この方の解説はめちゃくちゃわかりやすいため、
本より動画で学びたい人は「ちゃんと学ぶ、WordPress テーマ開発講座」を選ぶといいかなと思います。
内容的にも「全くの初心者から基礎をまんべんなく」といった理想のカリキュラムとなっており、
- サイトのバックアップ方法まで学べる
- カスタム三兄弟まで含んでいる
と言った点が、既存教材とは一線を画しています。
また、定期的にアプデを行ってくれるので、最新の内容を買い切りで学べるのは大きいと思います。
＼動画で学ぶならこれ！／
弊コーディング教材と一緒にツイートしてくださる方が多いです。ありがたい限りですし、両者ともおすすめです！笑
ビジネスサイトを作って学ぶ WordPressの教科書Ver5.x対応版
WordPressの応用まで
WordPressの教科書では、基本的なテンプレートタグの使い方だけではなく、PHPの知識も結構使うので、なかなか鍛えられます。
前者２つの教材より明らかに解説されるソースコードも実務最前線の実態に近くなっています。
どうしてもPHPの知識がないとコピペ＆応用が聞かない人材になってしまうので、プログラミングチックではありますが、ここで慣れておきましょう。
普通に実務を行うレベル感なので、結構難しく書籍のレビューも評価が別れています。それぐらい骨のある本です。
ビジネスサイトという題材のよさ
ビジネスサイト（コーポレートサイト）が案件としては一番多いのと、プライムストラテジーが実勢に仕事で制作しているレベル感のものができると公言されているので、
非常に実用的と言えます。
【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】
私が作成した上級編コーディング教材に取り組んでもらいます。
- 実案件ライクでありながら、完走できる難易度
- ポートフォリオとして受けの良い「コーポレートサイト型」
- 最後の表示確認特典付き
- 下層ページ6枚程度
- 実案件なら12~20万くらいの難易度
難易度的には、WordPressレッスンブックが終わった後から取り組むことができます。
さきほど紹介したUdemyの講座とも相性が非常に良いです。
WordPressは本で学習した後は実践で鍛えるしか無いのですが、上級編では実案件を想定しておりますので、
仕様書を添付しそのとおりにコーディングしていただきます。
模擬案件のように取り組むことが可能です。詳細はnoteを御覧ください。
WordPress課題をアップロード
ポートフォリオになるので、絶対アップロードしておく
ローカル環境で開発したものを本番にアップロードします
（方法など詳しくは【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】に記載）
できれば自分のサーバーに上げてほしい
All in one WP Migrationというプラグインで簡単にできます。
実務ではこれから頻繁に行うことになるため、自分のサーバーでできれば、勉強になります。
最近のサーバーは「WordPress簡単インストール機能」などを備えているので、あまり身構える必要はないです。
超簡単にWordPressサイトを公開する方法
ここまでで実案件レベルに到達することができました！
ここからはエクストラ課題で取り組みは任意になります。
エクストラ課題【取り組みは任意】
【即戦力編】Photoshopデザインカンプからのコーディング練習
ここまででAdobe XDデザインからのコーディングを練習してきました。
しかし、実案件では大半のデザインがPhotoshopかIllustratorでくることになります。
私は職業柄多くの駆け出しフリーランスをサポートしていますが、多くの方が苦戦しているのを見て、Photoshop編の課題をリリースすることにしました。
取り組みは任意で、Photoshopの準備が必要になりますが、デザインも仕様も実践仕様なため、ポートフォリオの強化にも繋がります。
難易度が高いため、ライバルとのポートフォリオの被りはだいぶ減らせるのではないかと思います。
- Photoshopに成熟したデザイナーによるデザイン
- スマホカンプも用意
- 実案件志向のデザイン
任意と言いつつ、昨今のWeb制作は駆け出しがかなり多いので、差をつけるためにぜひ取り組んでほしいなと思います。営業も実案件も大きく楽になると思います。
＼難解なHTMLコーディングを経験し差をつける！／
ポートフォリオサイトの作成【任意】
全員が作る必要はないかもしれませんが、「ポートフォリオサイト」も準備しておくと、自分をアピールしやすくなるので、営業や就職・転職活動が捗ります。
簡単に言うと、“自分のポートフォリオをまとめたサイト”になります。
詳細については以下の記事で解説しています。
私はポートフォリオサイトを作る過程で、実案件の流れをインスタントに経験できたので、かなり助かりました！
ここでゴール、おめでとうございます！！
あとは営業するだけ
ここまでで月30万稼げるスキルは身につきました。
しかしここからが真のスタートなのです。
また、フリーランスでなくコーダーとして就職転職目的の方でも、ここまででコーディングやWordPressでの開発ができるわけなのです。
Web制作の具体的な案件獲得方法はこちら
結論として、Web制作のおすすめ案件獲得方法は全て以下の記事にまとめましたので、これを読めばOKです。
あなたが本気なら全部やってほしいのですが、しかし、この中で「最もおすすめしたい方法」があるので、それをここではかいつまんで紹介します。
これだけは、やれば絶対結果が出るので、絶対やってほしいです！
WSSクラスでエンド営業を学んで！
結論、WSSクラスでエンド営業を学び、ちゃんと行動すれば、確実に高単価で案件を受注できます。
エンド営業というのは、「経営者に直接営業をすること」を指します。
クラウドソーシングのように中間業者が入らず、以下のようなメリットがあります。
- 高単価
- 納期を自分で調節できる
- 保守運用でサブスク収入も可能
- 追加提案で単価を更に上げることも可能
でも、経営者に営業とか、かなり無理ゲーな予感…営業未経験ですよ…?
それを見越したカリキュラムなので、特に問題ではないですし、みんなそう考えるからチャンスしかないわけですね。
正直、Web制作の参入者が増えて案件獲得ノウハウも出回り、下請け系は厳しい戦いが強いられますが、
エンド営業は案件獲得の難易度が、割と低いのにかなりの高単価になりやすいです。
制作会社数よりも、一般の事業者数のほうが遥かに多いですから、当たり前ですけどね笑
案件獲得後も適切にディレクションが行えるように、実務のサポートもあります。
私が今駆け出しなら、正直活用しない意味がわからないので、今から速攻で利用開始します。
WSSクラスの評判・口コミ
＼Web制作のエンド営業を徹底的に学ぶ！／
案件の中で成長していくだけ
ここまでで必要最低限のスキルは揃っています。
今回解説しなかった
- JavaScript
- gulpやwebpack
- git
これらは実案件で必要とされたときに学習すればいいです。
勉強はいったんやめて、案件をまずはとりましょう！
それでも不安だ！という方に、以下のコンテンツを紹介します。やるのはこれだけで大丈夫です。
制作を効率化させるGulp,Webpackを学べる教材
最近はGulpも勉強される方が増えたので、おすすめ教材を紹介しておきます。
作りながら学ぶGulp4！Web制作で使い回せる初期ファイルを作ろう！【回答付きだから安心】は私と同じくフリーランスエンジニアを数年されている友人が出したGulp.Webpack教材ですが、一番内容が充実していると思います。
完成度が高すぎて、自分で出すのを諦めたレベルです笑
コーディングの効率がめちゃくちゃ上がるので、かなりコスパいいです、是非！
モチベーションの管理の手法
ここまででロードマップは頭に入ったかと思いますが、しかし実際に完走するのは苛烈を極めるでしょう。
諦めないことが重要
プログラミング学習は苦難の連続です。特に環境に左右されます。
- やらなければならない環境に自分を追い込む（メンター付きスクールなど）
- やる気のある人たちと頑張れる環境に飛び込む（もくもく会を企画する参加する）
いずれにせよ諦めないことが一番重要です。
ここを考えて最善の道を取れるようにしましょう！！
自分の場合はiSaraというスクールでみんなで頑張った期間に一気に成長することができた過去があります。
過去の挑戦者たちの感想・激励のコメント
やる気が出てきました！でも、過去に取り組まれた方が具体的にどう取り組んで、どういった結果を出したのかとか、参考にしたいので、詳しく知りたいです！
そんな方には、ぜひ以下の記事を見てほしいです。実際に転職したり案件獲得された方が多数おります。
未経験からWeb業界で働きたい方へ
看護師とWeb制作の両立
看護師として働きつつ、副業でWeb制作を行うさたかさんにインタビューしてきました。
「副業としてWeb制作を行いたい」方に参考になると思います。
公務員からフリーランスデザイナーに
元々公務員として働きつつフリーランスWebデザイナーに転身されたコウダイさんにインタビューを行いました。未経験からフリーランスになりたい方は参考になると思います。
コウダイさんはコーディングを最初に学びつつも、厳しいと感じデザインに舵取りを変更したようです。
実案件の進め方
以下記事では、実際の案件はどう進むのかを解説しています。
- 実案件の進め方
- 実案件前に準備しておいたほうがいいこと
準備することとして特に大事なのは、実案件ではフォトショイラレでデザインデータをもらうことが大半なので、Adobe CCは必須だということです（特に制作会社）
こちらの記事を一読しておくといいです。知らないとパニクりますからね笑
Web制作会社への営業講座出しました！
「Web制作会社に特化した最強の営業法」を、満を持してついに出しました。ノウハウ面が強いため、売れすぎた場合は競合を防ぐために販売制限をかけようと思います。
先程の「WSSクラス」はエンド営業向けで、高単価をいきなり稼ぎつつ、保守運用でサブスク収益も作りたい人向け。
こちらの「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で公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
内容的にはまあまあの厚さがあります。
作者発案の設計思想の”PRECSS”が出てきますが、最低限「BEM」を理解し使えれば、ひとまず大丈夫です。