プログラミング

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

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

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

最近はプログラミング学習を始める人が急増しているのに伴って、学習情報が氾濫してきたように思います。

2021年は特に、「Web制作のロードマップ」をいろんな人が出しておりますね。

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

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

アプデ情報
  • 4.02 おすすめサーバー追加
  • 4.21 ロードマップを目安期間と共に、わかりやすくテーブルにまとめました
  • 5.31 エクストラ課題(Photoshopからのコーディング課題)を追加しました。
  • 6.01 FTPについて追加、激励のメッセージ記事追加
  • 2021/08/31 SassやCSS設計パート修正追加
    2021/10/15 テクニカルSEOパートを追加

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

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

ロードマップYouTube動画版

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

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

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

デイトラWeb制作コース

しょーご
しょーご
ということでたくさんの人がフリーランスとして羽ばたいていくのをみてきたよ!もう何人か月収100万超えだし(僕じゃなく本人の行動力がすごい)

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

クラウドソーシング、制作会社でコーディング案件をいただくことができる、または就職転職ができる
HTML,CSS,Sass,jQuery,WordPressをカバー
JavaScript、Gulp,Webpackは範囲外(不要不急なため)

このWeb制作独学ロードマップの感想・レビュー(定期更新)

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

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

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

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

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

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

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

このロードマップは新しい教材が出るごとにアップデートしており常に最新最良です。

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

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

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

Progateからweb制作案件までのロードマップ公開

前半
1冊で全て身につくHTML&CSSとwebデザイン入門講座目安期間;1週間〜2週間
コーディング教材初級編3つ目安期間;1ヶ月以内
中間課題:【初級Ex】 XDデザインからのコーディング練習目安期間:6日
中盤
jQueryの学習目安期間;2週間
Sassの学習目安期間:7日間
CSS設計目安機関:4日間
コーディング教材中級編2つ目安期間:3週間程度
ポートフォリオとして公開目安期間;1日
閑話休題
WordPressに慣れる目安期間:5日
後半
ProgateでPHP1目安期間:1週間
WordPress本かudemy目安期間:1週間~2週間
WordPressの教科書目安期間;2週間~3週間
【上級】XDデザインからのコーディング実践演習目安期間:10日
エクストラ課題【取り組みは任意】
【即戦力編】Photoshopデザインからのコーディング演習目安期間:5日間
web制作独学ロードマップ

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

またこの学習期間は基本的に「平日3h/休日6h」で達成できる期間です。個人的には短時間で一気に身に付けるのがいいと考えますが、

本業のある方はこの時間を目安に頑張ってみてください。

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

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

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

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

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

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

しょーごログ コーディング教材

すでにこのロードマップ内で紹介している教材をクリアした方たちから、みなさんに激励のメッセージを頂いています(順次更新中)

挫折しそうなときは、こちらで心を癒やしていただければと思います(*^^*)

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

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

Web制作ロードマップ

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

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

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

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

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

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

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

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

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

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

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

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

コーディング教材初級編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〜

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

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

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

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

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

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

目安期間;1ヶ月以内

HTML,CSS総復習

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

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

コーディング教材

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

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

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

目安期間:6日

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

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

Web制作独学ロードマップ

jQueryの学習方法

Web制作学習ロードマップ

ここでサイトに動くをつけていくためのjQueryの学習を進めていきます。jQueryを使わずにこなせる案件は非常に限られてくるため、

案件をとるために必須になります。

①まずはProgateで学習する

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

https://prog-8.com/

jQuery標準デザイン講座

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

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

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

完璧を目指さない

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

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

ポイント

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

目安期間;二週間程度

Sassの学習方法

Web制作独学ロードマップ

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

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

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

①まずはProgate

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

②Sassの環境構築を行う

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

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

【任意】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日間

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

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

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

コーディング課題中級編

模写コーディング教材

コーディング課題中級Ex

コーディング教材

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

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

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. Github pagesやNetlify、xfreeを使用する(動画で紹介している手法、無料だが…
  2. レンタルサーバーでアップロード(実務と同様、有料だがおすすめの手法

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

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

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

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

ポートフォリオ公開方法

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

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

目安期間;一日

FTPツールに触れておく

 FTPツール

余裕がある人は、ぜひFTPツールを利用してファイルをアップロードして公開してみてください。

Web制作の案件では相手のサーバーにファイルをアップロードして公開するまでは案件のことが非常に多いのに、

練習する機会がないからテンパりやすい場所です。

私のおすすめはWindowsにもMacにも対応しているFileZillaです。

私のnote記事内でも案内していますが、ここでも参考リンク(conoha&Filezillaの場合)を添付しておきます。

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

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

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の基礎を動画で解説してくれている教材があります。

それがWordPress開発マスター講座 です。2020年10月7日に販売開始しました。

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

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

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

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

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

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

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

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

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

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

WordPressの応用まで

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

目安期間:10日

WordPress課題をアップロード

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

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

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

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

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

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

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

無料がいいならxfreeなどにアップロードする

もしくは、無料でWordPressサイトを公開できるサーバー(xfree)もあるので、そう言った場所に公開し、いつても見せられる状態にしてもいいと思います。

目安期間;1日

xfreeの欠点は、WordPressサイトを一つしか公開できないことです。
また、定期的に更新しないとサイトが自動で削除されたりスマホで広告が自動挿入されるので、使用する際は気をつけてください。
過去更新メール無視してポートフォリオにしてもサイト消された人が何人もいます(;_;)
めんどうならサーバーとっちゃいましょう!

しょーご
しょーご
詳しくはnoteに記載していますが、公開前にBASIC認証はかならずかけるようにしてくださいね

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

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

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

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

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

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

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

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

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

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

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

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

あとは営業するだけ

ここまでで月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というスクールでみんなで頑張った期間に一気に成長することができた過去があります。

独学の自身がない、メンター付きでコスパよく学習したい場合

デイトラ」が圧倒的におすすめです。徹底レビューしておりますので、参考にしてみてください。

案件獲得までスクールでサポートしてほしい!という場合

6ヶ月間メンターに質問できて案件も獲得できる

つい最近、テックアカデミーが出した『Web制作副業コース』がすごくて、

なんと案件獲得も可能で、その案件を現役エンジニアがサポートしてくれます。

タイトルに副業と冠していますが、フリーランス独立も可能だと思いますね。

しょーご
しょーご
結構高額なんですが、案件獲得して納品までメンター付きでサポートって、革新的すぎます…
しょーご
しょーご
この独学ロードマップで全然実務までいけるのですが、独学が厳しい人、最初は案件を提供してほしい人向けですね。

穴場案件の獲得サービス

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

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

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

実案件の進め方

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

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

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

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

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

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

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

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

しょーご

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

さらに、まとめて購入していただくとかなりお得になります。

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