プログラミング

Progateから実務までにやるべきこと【Web制作案件までの具体的なロードマップ 】

progateから実務までにやるべきことロードマップ

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

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

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

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

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

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

web制作歴2年、2019年からメンター業に関わることが増え、述べ100人ほどフリーランスとしての独立成功をみてきた(iSaraで70人、東京フリーランス独立サポートで30人)

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

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

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

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

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

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

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

web制作学習ロードマップ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

模写コーディング初級編3つ

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

模写コーディングは1つ目が肝心!

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

模写コーディング

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

ちづみさん コーディングの練習をしよう!〜その1〜
模写コーディング教材

https://note.com/samuraibrass/n/n2108f5f03dd8

しょーご(投稿者)模写コーディング練習でHTML,CSSを定着させよう!【初級編】

模写コーディング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の基礎は身についたね!次に行こうか

jQueryの学習方法

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

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

まずはProgateで学習する

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

jQuery標準デザイン講座

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

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

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

完璧を目指さない

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

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

ポイント

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

目安期間;二週間程度

Sassの学習方法

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

まずはProgate

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

Sassの環境構築を行う

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

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

cssをSassに置き換えてみる

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

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

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

詳しくはSassの教科書かネットで調べてみてください。私自身もお世話になった本です。

模写コーディング中級編2つ

ではここまでで学んだSassとjQueryを活用して模写してみましょう!

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

模写コーディング教材

https://note.com/samuraibrass/n/nd1748e42934e

しょーご(わい) コーディング練習用のXDデザインカンプ配布します

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

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

css命名規則BEMを取り入れる

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

css命名規則はBEMがわかりやすい&一番使われているということから、BEMがわかりやすいかと思います。

このあたりはcss設計完全ガイドが参考になります。全コーダーがいますぐ買うべき神本なので、ぜひ購入してみてみてください。

cssの本で最高峰の本で、初心者からベテランまで有用の本です。本当に神本です。

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

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

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

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

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

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

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

目安期間:三週間程度

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

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

ここまで作成した静的サイト2つをNetlifyやGithub Pagesで無料公開できますので、公開しちゃいましょう。

公開方法については動画で述べています。

目安期間;一日

閑話休題:ブログをアップしよう

ブログを実験場練習場として活用する

ようこちゃん
ようこちゃん
ここでブログですか?
しょーご
しょーご
web制作者を目指すなら、自分のブログを運営しておくことは結構プラスになるんだよ!

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

  1. 独自ドメインを取得し
  2. サーバーを契約して取得したドメインと紐付け
  3. 全世界にwebサイトを公開して
  4. できればブロックエディタで記事を書いてみる

ブログをアップする狙い

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

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

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

不審がられるかも知れません。

そのため自分でブログをアップロードすることでその練習をします。ブログは実験場です。

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

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

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

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

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

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

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

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

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

イベントトラッキング
私は自分のブログにイベントトラッキングを仕込み、クリック数を図っています笑
ちなみに私はmixhost というレンタルサーバーのスタンダードプランを契約しています。

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

このブログもmixhost で稼働していますが、HTTP/3という最先端の通信方式を2020/06現在国内で唯一用いているため、非常に高速でありがたい限りです。

以下のMixhostなどでサーバーを借りてみて、ブログを開設してみましょう!(スタンダードで全然大丈夫です)

仮に他のサーバーを検討する場合も、低価格だと「WordPressが動かないサーバー」も存在するため、お気をつけください。

ProgateでPHP1~4まで

PHPはWordPressの基礎部分

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

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

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

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

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

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

目安期間:一週間

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

WordPressの基礎を一番優しく

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

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

グーテンベルク対応教材

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

内容も新しいです。

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

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

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

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

WordPressの応用まで

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

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

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

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

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

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

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

ゆうすけくん
ゆうすけくん
ぬわーん、疲れたもーやめたくなりますよー勉強…
しょーご
しょーご
よくここまできたね!あとはラストスパートだ!

デイトラ卒業制作

デイトラ卒業課題

https://note.com/tokyofreelance/n/n3813fa13822f

【卒業制作】コーディング × WordPressテーマ化 練習素材【※実案件です】

実案件前の最後の課題

デザインカンプからコーディングを行い、WordPress化していきます。実務と同じ工程をなぞります。

下層ページもあり、全部で6ページあります。

実案件で使われたカンプ

過去動画でも述べている通り、実務で実際に使われたカンプなので、実務まえにやるには適しています。

カスタムフィールドを使用した教材

実務でほぼ毎回使うことになるカスタムフィールドを練習できます。

特にリピーターフィールドという実務でめちゃ使う機能を利用することができます。

目安期間;二週間(実務を想定した期間)

デイトラ卒業制作アップロード

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

ローカル環境で開発したものを本番にアップロードします。

All in one WP Migrationというプラグインで簡単にできます。実務ではこれから頻繁に行うことになるため、勉強になります。

xfreeなどにアップロードする

無料でWordPressサイトを公開できるサーバーがあるので、そう言った場所に公開し、いつても見せられる状態にしておきます。(BASIC認証が必要ならかけるとかします)

目安期間;1日

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

あとは営業するだけ

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

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

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

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

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

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

web制作学習ロードマップ

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

今回解説しなかった

  1. JavaScript
  2. gulpやwebpack
  3. git

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

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

案件の獲得方法

クラウドソーシング系は激戦ですが、完全に穴場となっているサービス活用方を紹介しています!私も駆け出し期から使っており、非常におすすめです!

勉強を頑張る皆さんへ!

Kindle Unlimitedなら一部書籍が月額980円で読み放題になります。
プログラミング本とかマーケティング本とかデザイン本とか、意外にKindle Unlimitedにあるので、非常に便利でおすすめです!(私は毎月数冊読んでます)
初月無料なので、ぜひお試しください!

\いますぐ登録したい方はこちら/