プログラミング

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

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

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

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

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

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

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

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

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

しょーご
しょーご
ということでたくさん人がフリーランスとして羽ばたいていくのをみてきたよ!もう何人か月収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

しょーご(投稿者)【入門】XDデザインからのコーディング練習【無料です】
模写コーディング教材

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

しょーご(投稿者)【初級】XDデザインからのコーディング練習

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

私のコーディング教材はマガジンでまとめて購入頂くと更にお得です!
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の基礎は身についたね!次に行こうか

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日

【追記】模写コーディング教材上級編

デイトラ卒業制作と同等レベルのもので、私が作成した上級編コーディング教材もとても取り組みやすいと思います。

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

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

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

WordPressは本で学習した後は実践で鍛えるしか無いのですが、上級編では実案件を想定しておりますので、仕様書を添付しそのとおりにコーディングしていただきます。

模写コーディングWordPress
実案件で貰うような仕様書にしました。

模擬案件のように取り組むことが可能です。詳細はnoteを御覧ください。めちゃくちゃ頑張って作ったのでおすすめです!!👍

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

コーディング演習上級編 しょーご

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

あとは営業するだけ

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

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

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

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

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

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

web制作学習ロードマップ

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

今回解説しなかった

  1. JavaScript
  2. gulpやwebpack
  3. git

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

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

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

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

諦めないことが重要

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

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

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

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

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

まずはスタートダッシュが大事

上記の独学ロードマップをいきなり独学し始めてもいいですが、独学は強制力もないので、継続面でかなり辛い所もあります。

まずは感覚を掴むために自分で勉強してみるのがいいのですが、実は完全無料で一週間メンター付きで学習できるサービスがあります。

TechAcademyの無料体験

TechAcademy 無料体験

とりあえずお試しで無料で試してみたい場合ならTechAcademyの無料体験ならメンター付きで完全無料で試すことができます。

初学者さん

うーん、そもそもプログラミングに適性あるのかなぁ自分。プロに相談してみたい

そんな方は、とりあえず一週間のTechAcademyの無料体験を受けてみて、継続できそうだと思ったら引き続き独学ロードマップを進めるか、TechAcademyで部分的に学ぶか検討すればいいかなと思います。

ちなみに無料体験の内容は以下のようなものです。

  1. 体験期間が1週間の長期間。
  2. 無料体験カリキュラムを受講できる(HTML/CSS/PHPの基礎。メンターによるレビュー付の課題あり)
  3. 現役エンジニアのメンターとのビデオチャットが1回体験できる
  4. 期間中、現役エンジニアのメンターとチャットし放題(15:00-23:00)

特に、現役エンジニアのメンターとのビデオチャットが1回体験できる」というのが最高ですね。

最前線で戦う時給5000円以上の本物のエンジニアに、今後のキャリアやプログラミング学習について無料で聞けるのは、めちゃくちゃお得です。

またTechAcademyはプログラミングスクールの中では古参の方で、オンラインスクールで受講者数No.1なので、ノウハウ面も安心感があります。

しょーご
しょーご
これらが完全無料とか太っ腹すぎる…自分が今駆け出し期なら最初に無料体験でエンジニア適正を見てみますね!プログラミング学習にもお金がかかりますから。

まず無料カウンセリングで業界を知るべし

また、将来的に就職転職を考えられている方はテックキャンプの無料カウンセリングで業界の現状を知るのがおすすめです。

テックキャンプ無料カウンセリング
リンク先より

フリーランスの場合でも具体的なキャリアプランを教えてくれますし、副業での稼ぎ方も相談に乗ってくれます。

また、プログラミングスクールのこういったカウンセリングは

駆け出しさん

どうせスクールを進めてくるんでしょう?

と思われるかと思いますが、テックキャンプの無料カウンセリングでは勧誘は無理なセールスは一切していないため、フラットに相談することができます。

リンク先より

業界に疎い自分の思い描いているキャリアプランは非現実的だったりします。

テックキャンプの無料カウンセリングではエンジニア・デザイナー就職転職専門カウンセラーが対応するため、一度相談してみて学習の方向性を確認するのがいいと思います。

プログラミング関連の教材・サービスはお金がかかりますから、まずはこうした無料サービスをフル活用して、自分の学習を優位に進めましょう!

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

案件の獲得方法

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

web制作にAdobe CCは必須な話

実案件ではフォトショイラレでデザインデータをもらうことが大半です(特に制作会社)

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

\\\コーディング教材公開中///

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

XDからの模写コーディング教材

XDデザインデータからのコーディング経験を積むことができ、ポートフォリオとして活用していただくことも可能です

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

マガジンでまとめて購入していただくと、お得になります。

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