在宅ワークを始めようと決め、Web制作を選んだあなた
正解です！
なぜならほとんど費用をかけずに独学でスキルを身に付け、稼ぐことができるからです。
在宅ワーク主婦・ゆっぱーです。
私は2020年5月からWeb制作の独学を始め、同年9月に2案件獲得し、まず約25,000円稼ぎました。
現在、２件（制作会社とマネージメントをされている方）から定期的なお仕事を依頼されています。（クラウドワークスで獲得した初案件の倍以上の単価です！）
▶︎この記事は、Web制作を仕事にしたいけれど何から初めていいかわからない主婦の方に向けて書いています。
ふだんはオフィスワークをしていて副業を始めたい方、家から出ずにお金を稼ぎたい方にもお役に立てるかと思います。
▶︎この記事を読むと、忙しい主婦の方が、最短、低コストでWeb制作のスキルを身に付けるために、何から始めたらいいかがわかります。
学習を始める前の準備はこちらの記事で確認！
これからWEB制作の基礎を身につけるためにやることは６STEPです。
そんなに難しいことはありません。
ゆっくりマイペースでやって３ヶ月、パソコンに慣れていてガンガンやれる人は１ヶ月で習得することができると思います。
ご自分の状況にあわせて楽しみながら学習していきましょう！
ゼロから始めるプログラミング独学６ステップ
１）ドットインストールで動画を見てHTMLとCSSを理解する（無料）
・プログラミング学習サービス「ドットインストール」の動画を見る、それだけです
・Twitterでプログラミング学習開始をつぶやく
２）Progateで実際に打ち込んで習得する／マナブさんのロードマップ（無料・有料／無料）
・プログラミングの入門サイト、基礎から学べるProgateに登録
・HTMLとCSSの基礎を習得する
・Progateの成果をTwitterでつぶやく
３）たにぐちまことさんのYouTube視聴で復習（無料）
・WEB制作の神様たにぐちまことさんのYouTubeでHTMLとCSSを復習
・ちょっとブレイク：在宅主婦の秘密の作業場大公開！！
４）WEB制作初心者のバイブル本を見ながらサイトを作ってみる（本購入）
・「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」で学習
５）Codestepでコーディングの練習
・無料でコーディングが学べるCodestepというサイト
６）ポートフォリオ（自己紹介サイト）を作成する
・初めてのポートフォリオを作成するために使用する無料ツール
さらに前進 ➡︎ プログラミング独学６STEPの学習後にすること
１）ドットインストールで動画を見てHTMLとCSSを理解する
プログラミング学習サービス「ドットインストール」の動画を見る、それだけです
Web制作で最初に習得するべきものはHTMLとCSSです。
英字の羅列に拒否反応が出たあなた、大丈夫です。
最初の一歩は動画を見るだけ。全部で30分くらいの動画です。
・はじめてのHTML (全14回)
・はじめてのCSS (全15回)
この動画でHTMLとCSSが何なのかを理解しましょう。
ドットインストールのサイトにも書いてあるように「ざっと動画を見て雰囲気を掴む」でOK。
何度も見直しする必要はありません。「なんとなくこんなもんか」でOKです。
（・・・とはいえ、私は動画を見ていたら眠くなって何回か見直しました。自分のペースで好きなように学習できるのも自宅で独学のいいところです）
最初の一歩はこれだけです！
Twitterでプログラミング学習開始をつぶやく
在宅ワークの準備で作ったTwitterアカウントで、プログラミングの勉強を始めた事をつぶやきましょう。
「#プログラミング初心者」等のハッシュタグ付きでつぶやくと、同じプログラミング学習者たちが「いいね」で応援してくれます。
プログラミング学習のモチベーションが保てますね！
（たまにあやしいDMも来ますが、賢い主婦はスルーです。）
２）Progateで実際に打ち込んで習得する／マナブさんのロードマップをやってみる
プログラミングの入門サイト、基礎から学べるProgate（プロゲート）に登録
独学でプログラミングを習得しようとしている我々の強い味方、
オンラインプログラミング学習サービスProgate（プロゲート）。
世の中にはこんな便利なものがあるのか、と私は感動しました。
それくらい初心者にも取っ付きやすい、至れり尽くせりのプログラミング学習サービスだと思います。
まずはこちらに登録します。
Progateは無料版と有料版があり、無料版は各言語の初級編の１８コースが学習できます。
有料版は月額980円で、初級編～応用編まで７９コースが学習できます。
初級編ではレベルとしては「ちょっとわかる」程度なので、実務には向きません。
私はここで有料版に課金し、「お金もかけたことだし絶対に習得する」と決意しました！
結局5月～7月まで3か月で必要最低限の言語を習得しました。
（3,000円は最初の案件で回収済みです！）
Web制作の仕事を開始してからも、「Progateをもっとやっておけばよかった」という事態にはなっておりません。（ただRubyがどんなもんかやってみたかったかな…今話題だし←ミーハー…）
➡どうしても課金したくないという方は・・・
私はやっていませんが、このブログの「■独学でプログラミング（Web制作）を学習していく上でTwitterでフォローしておくべき方々」でも紹介している マナブさんの→【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】 をやってみるのも手ですね。
実際、「Progate初級 → マナブさんのロードマップ」でHTMLとCSSの基礎を習得し、実務をされている方もいらっしゃるようです。
HTMLとCSSの基礎を習得する
Progateで「HTML & CSS 初級編 」から「HTML & CSS Flexbox編 」まで一通りやってみましょう。
毎日ガッツリめにやって2週間、ぼちぼちやって1か月ほどでコースを終え、習得できると思います。
最初は簡単なものからなのでサクサク進むと思います。
気分（だけ）は天才ハッカーです（やっていることは赤ちゃんでもいいのです）。
1日1時間とか、今日はこのコース制覇とか、区切りをつけてやると捗ると思います。
途中難しいものも出てくると思いますが、こういうのがあって、Web上でこういうことができるんだ、くらいの理解でOKです。
（特に「道場コース」ではパソコン叩きつけたくなる場面があるかもしれませんが、わからなければ答え見てOKだと私は思います。）
Progateが正解になるまで何回もやる必要はありません。
私ももし今Progateをやったとしても、何も見ず検索せずにできることはほとんどないと思います。
いつも調べながらやっていますし、頻度の高いものは自然と覚えていきます。
実務に勝る学習無しです。
それくらいの感じで進んでいって大丈夫です。
Progateの成果をTwitterでつぶやく
Progateの学習が１つ終わると「●●コース終了しました！」とTwitterでそのままつぶやけるようになっています。
モチベーション維持のため、ぜひともつぶやいてください。
同じ仲間や独学の先輩がいいね！押してくれます。
スキルを身につけるために利用できるものは何でも利用しましょう！
特にWeb制作とTwitterは相性がいいです。
プログラミング学習やWeb関係の情報もたくさん入手できます。
意外と仲間ができて、その後の仕事につながることもあるかもしれません。
（実際、Twitterで仕事依頼したりされたりがあります。私も継続案件の１件はTwitter経由です）
３）たにぐちまことさんのYouTube視聴で復習
WEB制作の神様たにぐちまことさんのYouTubeでHTMLとCSSを復習
Web制作業界の仙人、たにぐちまことさんをご存知ですか？
たにぐちまことさんは今後もずっとお世話になっていく方なので、まだフォローしていない方は今すぐフォローなう☛（Twitter: @seltzer）
プログラミング教育やこども向けの講座などをされているエンジニアのたにぐちまことさん。
プログラミング初心者にはうれしい動画を無料で公開しています。
Progateで習得したものの理屈がわかり頭の中が整理されます。
たにぐちまことさんのYouTube「ともすたチャンネル」で学習
・HTMLの動画７本
・CSSの動画９本
私は動画を見ていると必ず眠くなるので、1.5倍速、1.75倍速で視聴しています。
（が、たにまこさんの声やしゃべり方が癒し系すぎてそれでも何回か止めて見直しましたｗ）
動画の感想や学習状況を（Twitter: @seltzer）付きでツイートすると、たにぐちまことさんが返信付きでリツイートしてくれるので、励みにもなりますし感謝の気持ちも伝えられるのでおすすめです。
ちょっとブレイク：在宅主婦の秘密の作業場大公開！！
ふふふ。
片田舎住みの主婦がコロナきっかけに在宅ワークを始めた作業場を見たいですか？
そうですか、見たいですか。
それでは今日は特別に公開しましょう・・・
内緒ですよ・・・
👇👇👇 片田舎の在宅ワーク主婦秘密の作業場はコチラ！！ 👇👇👇
どうですかこの生活感にあふれたPCデスクは。
足元にある米のケースをご覧ください。
いつでも米炊きに取り掛かることができますよ。
そしてご覧ください、８年くらい前に買ったパソコンを。
AdobeXDをインストールするために今更Windows7から10にバージョンアップをさせられ、毎日ウインウイン唸り声をあげて必死に働いているのに舌打ちをされイラつかれているかわいそうなパソコン・・・
椅子の足につけられたダイソーで購入のカバーが泣かせますが、今は背もたれのある椅子にクッション五個くらい詰め込んで座っています。
この仕事は本当に腰と尻にきます。
会社の椅子がどんなに素晴らしいものだったかがわかります。。。
何が言いたいかというと、
✅お金に余裕があったら良いパソコンを買う
→追記：その後MacBook Air購入しました。↓↓ レビュー記事をチェック ！！↓↓
▶︎【非アップル信者・PC詳しくない】M1搭載 MacBook Airを1週間使ったレビュー
▶︎【非アップル信者・PC詳しくない】M1搭載 MacBook Airを１ヶ月使ったレビュー
✅お金に余裕があったら良い椅子を買う
→追記：その後椅子購入しました。⬇︎椅子の写真が入った記事をチェック⬇︎
▶︎【主婦目線】買って良かった！在宅ワークで役に立ったもの１０選
実際案件を獲得して仕事をしていると、パソコンと椅子は仕事の出来に大きく関わってくると今実感しております。作業効率が全然変わります。
追記2021年4月）その後だいぶオシャレになったわたくしの作業場
４）WEB制作初心者のバイブル本を見ながらサイトを作ってみる
「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」で学習
いきなりですが、この本をオススメします。
この本にはWeb制作の基礎の基礎が掲載されています。
が、実際に案件を獲得して作業をしていくうえで何度この本を開いたことでしょう。
（2021年２月１３日追記）
この本の新しいものが2021/2/20に発売されます。
▶︎一冊目の本では触れなかった「擬似要素」。これを使うことで表現の幅がグンと広がります！様々な装飾例を紹介しています！
とのことです。Check！▼▼▼
（スマホに「リンク」が反映されていない場合はPCかプライベートモードで開いてみてくださいm(__)m）
プログラミング学習を進めていくとわかっていくと思いますが、現在Web制作ではWordPress（ワードプレス）というソフトウエアを使うことがほとんどです。
WordPrressとは、サイトの作成やブログの作成などができるCMS(コンテンツ管理システム)の1つで、無料のソフトウェアです。
少なくとも、クラウドソーシングで案件を獲得していく場合、WordPressは必ず通る道です。
このブログもWordPressで作成しています。
ホワイトハウスのサイトもWordPressで作成しているとのこと！！
そのWordPressでのWebサイトの制作でも、この本には何度もお世話になります。
ノートパソコンの下に敷いてノートパソコンスタンドにも使えます（え。
この基礎を学習し終えたらWordPressの学習へGO‼︎‼︎ ▼Click▼
【WordPressって何？という方向け】 WordPress完全攻略法！
この本、前半は、初心者が一からWebサイトを作れるように、基礎知識がわかりやすく丁寧に解説。
後半は手を動かしながら実際にWebサイトを制作していけます。
この本を見ながら二個目のポートフォリオ（自己紹介のサイト）を作りました。
二個目のポートフォリオ
大丈夫です、最初はこんなもんです！
この本を見ながら、早ければ１～３日で、ゆっくりでも一週間でWebサイトの完成です。
※ここで使うテキストエディター（コードを入力する黒い画面のアレ）は「Visual Studio Code」（無料）一択です。独学で必ずお世話になるたにぐちまことさん（Twitter: @seltzer）の動画でもVSコードを使用しているので、VSコードをダウンロードして編集しましょう。
Webデザイナー、Webクリエイターという感じがしてきました！
この調子で進みましょう！！
５）Codestepでコーディングの練習
おめでとうございます！！
ついにここまで来られましたか。
自分で学習しているときには気づきませんでしたが、プログラミング学習を始めて仕事にするまで続けられる人は一握りらしいのです。
でもここまできたあなたならもう大丈夫です！
ここまでやったのに途中でやめるのもったいないし！
もうこの後、Webサイト制作で稼ぐことは決まりました！
はりきってまいりましょう！！
無料でコーディングが学べるCodestepというサイト
私が知らぬ間にむっちゃ便利な学習サイトができていました。
このCodestepというサイトは無料でコーディングを学べるサイトです。
「簡単なHTML、CSSでできるシンプルな練習サイト」の初級編から「少し複雑なHTML、CSS、JavaScript（jQuery）を使用した練習サイト」の中級編、「JavaScript（jQuery）をメインに使用した練習サイト」の上級編まですべて無料で揃っています！
WordPress化まで準備されているので、もう無料で仕事にするまでのスキルは身につけられますね。
（私が独学しているときにあったらはっきりいって本とか買わずにこれだけでよかったかもしれないと思ったほどです・・・）
６）ポートフォリオ（自己紹介サイト）を作成する
ええ！？
ここまで来たんですか？
プログラミング学習を続けられる人は一握りというのに？
ここまで来たということはもうその一握りであり、IT社会である現代の勝ち組ですよ！！
そんな素振りも見せず、ここまで来たんですかあなたはっ！！
（いやそれはわからない）
さあ、いよいよ基礎学習が終わります。
ここまで学習して身につけたスキルでポートフォリオを作りましょう！
初めてのポートフォリオを作成するために使用する無料ツール
プログラミング初心者の我々には実績がないので、案件獲得の際「自分はこういうことができます！こういうWebサイト作れます！」という自己紹介のサイト、ポートフォリオを作らなければなりません。
ここでは、初めてのポートフォリオ作成で使用する無料ツールをご紹介します！
- レンタルサーバー
- エックスフリー
多くの人が使用しているエックスサーバーの無料版。
スマホ版に広告が出たり、暗号化できなかったりしますが、最初はこれで十分すぎるくらい十分です。のちに必ず作ることになるWordPress（ワードプレス）サイトを作る場も用意されています。
最初はエックスフリーで作って、必要に応じて有料のエックスサーバーに移行すればOK。
- エックスフリー
- 私もWEB制作の仕事に使うサイトにするためエックスサーバーで契約しています。（エックスフリーで作っていたサイトを移行したのですが、ちょっと手間がかかりました。）エックスサーバーではエックスフリーではできないSSL化（インターネット上の通信を暗号化する技術）が可能です。期間限定で「ドメイン永久無料＆初期設定費用0円」とのことなので、この機会にエックスサーバーでサイトを作っても良いかもしれません。
- ロリポップというレンタルサーバーもとてもコスパが良いので、将来クライアントに提案するレンタルサーバーとしても選択肢に入れておきたいところです。
（たにぐちまことさんも動画でオススメされていました！）
- 写真・画像素材
- O-DAN（オーダン）
海外の写真が多め。素早くダウンロードできるので一番よく使っています。 - GirlyDrop
女子が好きそうな写真がいっぱい。ポートフォリオで多用しました。 - AdobeStock
無料で使える写真は限られていますが、本格的にプロとして稼働するときに課金するかもしれないところなので、覗いてみてください。 - ソコスト
Web制作の方々絶賛のフリーイラスト素材サイト。使いやすいです。 - Loose Drawing
こちらも絶賛されているのをよく見かけるフリーイラスト素材サイト。こちらがすごいのはイラストの色を選べること！イラストの色を変えるだけでも楽しいので覗いみてください！
- O-DAN（オーダン）
さあ、道具はすべて揃いました。
今まで頑張って身に着けたものをフル稼働させてポートフォリオ作ってください！
最初のポートフォリオ、近い未来に「わあこんな拙いページを作ったんだ」と思い返すことになりますよ！
「ゼロから始めるプログラミング独学〜基礎の６STEP〜」はこれで終わりっ！
お疲れさまでした！！！
ここまで学習したあなたは間違いなく「おうちで楽しく稼ぐ」ことができるスキルを身につけました。
プログラミング独学を始めた方のほとんどが挫折すると言われる中、「継続することができた」だけでもとても価値あることをやってのけました。偉い。自分偉い！自分を褒めてください！
ここからはWEB制作を仕事にするために行動をしていくことになります。
プログラミング独学６STEPの学習後にすること
【WEB制作の基礎６STEP】終了後は、
１）WordPressでサイト制作をできるスキルを身につける
▶︎【WordPressって何？という方向け】 WordPress完全攻略法！
２）クラウドソーシングで案件を獲得する
▶︎【営業経験無し・ニガテな方向け】クラウドワークスで初案件を獲得する方法
という流れが無理なくWEB制作を仕事にできる流れかと思います。
この記事を読んで行動していただいたみなさまが「おうちで楽しく稼ぐ」ことができるよう心からお祈り申し上げます。
何か聞きたいことがありましたら、Twitterからお気軽に質問してください。
>>ゆっぱ〜／在宅ワーク主婦（@YupparW）｜Twitter
