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

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

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

この記事の信憑性（権威性）について

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

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

Progateから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つ

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

模写コーディングは１つ目が肝心！

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

しょーご（投稿者）【入門】XDデザインからのコーディング練習【無料です】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML,CSS総復習

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

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

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

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

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

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

jQueryの学習方法

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

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

まずはProgateで学習する

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

jQuery標準デザイン講座

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

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

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

完璧を目指さない

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

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

【2020年】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】web制作、アプリやサービス開発向けのjQuery,JavaScriptの「もっとも効率の良い」勉強方法を解説しました。具体的な使用教材や流れ、学習のポイントを解説しています。...

Sassの学習方法

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

まずはProgate

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

Sassの環境構築を行う

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

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

cssをSassに置き換えてみる

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

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

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

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

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

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

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

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

わい【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブログをアップする狙い

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに私はmixhost というレンタルサーバーのスタンダードプランを契約しています。

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

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

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

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

ProgateでPHP1~4まで

PHPはWordPressの基礎部分

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

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

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

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

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

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

WordPressの基礎を一番優しく

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

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

グーテンベルク対応教材

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

内容も新しいです。

WordPressテーマ開発マスター講座

動画で学びたいあなたへ

上記のWordPressレッスンブックと同等レベルの教材で動画で解説してくれている教材があります。

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

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

WordPressレッスンブック本より動画で学びたい人はこちらを選ぶといいかなと思います。

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

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

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

WordPressの応用まで

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

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

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

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

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

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

デイトラ卒業制作

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

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

実案件前の最後の課題

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

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

実案件で使われたカンプ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あとは営業するだけ

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

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

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

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

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

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

今回解説しなかった

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

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

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

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

諦めないことが重要

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

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

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

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

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

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

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

TechAcademyの無料体験

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案件の獲得方法

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

Web制作フリーランスならいますぐWorkshipで案件を探すべき【現役フリーランスが解説】 こんにちは、現在フリーランスのweb制作者として活動しているしょーご（＠samurainrass）といいます。 みなさんweb制...

web制作にAdobe CCは必須な話

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

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

web制作にAdobe CCは必須な話【最安で手に入れるおすすめ方法も解説】Web制作でAdobe CCは必要なのか、どうしたら最安で手に入れられるのか、おすすめの方法を解説しています。...