この記事では、Web制作を独学で学びたい方に向けて、実際に完全未経験の30歳会社員からフリーランスのWebコンサルタント/メンターとなった筆者が、出来るかぎりお金を掛けずに独学する方法を解説します。
あなたの環境や計画に合わせて、6ヶ月〜1年を目安に取り組んでいただければと思います。

自分の独学方法に自信がありません。スクールに通うべきかもしれませんが、子育て中でもあるので、なるべく低予算で勉強したいです…
結論、Web制作を学ぶ方法や手順は様々です。
デイトラで最高品質の教材と環境を揃えて一気に学習する人もいれば、MENTAで経験豊富やメンターを見つけてマンツーマンの指導を受ける人もいるでしょう。
それらはどれも十分に価値のある自己投資です。
どんな手段を選ぼうと、Web制作のスキルを身に付けさえすれば誰だって自分の好きな場所で自由に働けるようになるからです。
フリーランスのコーダーなら制作会社のコーディング業務を担当することもできますし、フリーランスのWebデザイナーのパートナーとして活躍することもできるでしょう。
経営戦略やWebマーケティングの知識がある方なら法人のWeb事業を代行することもできますし、そうやって任された大きな仕事の一部を他のフリーランスに外注することで自分の業務量や時間をコントロールすることもできます。
しかし、ここでひとつの問題が浮上します。
制作スキルも営業力もスクールに通えばその基礎を学べますが、そうと分かっていてもいきなり高額な受講費を払うのには勇気が要りますよね。
自分にWeb制作がやれるのかどうかも怪しいでしょうし、そもそも本当に理想通りの働きができるかなんてわからないものです。
ということで今回は、そんな昔の僕のような方に向けてご予算3万円以内!この記事だけで未経験のあなたが完全独学でホームページやLPのコーディングを受注できるスキルを身につけられるまでの全行程を解説します。
行動し続ければ、誰でも毎月20万円以上稼げるようになるのWeb制作。
しかし、多くの人が挫折する独学。
この記事があなたの背中を押し、独学を成功させる一助になれば幸いです。
それでは、いってみましょう!
- 自分にWeb制作が向いているのかわからない人
- Web制作の独学や稼ぐ方法を知りたい人
- できるだけお金を無駄にせず、節約しながら独学したい人
- Web制作を学んで副業や転職を成功させたい人
- 在宅で稼げるスキルを身に着けたい人
【2023年1月追記】おかげさまでこの記事単体の累計閲覧数が3.6万を超えました。これほどたくさんの方に読んでいただき、ご感想をいただけているWeb制作の独学ロードマップは他にないと思います。すべての読者の方に感謝申し上げます。これからもこの記事をきっかけに独学を成功させられる人が増えることを願いながら更新し続けてまいりますので、引き続きよろしくお願いいたします。
本記事の目次
- 1 稼げるようになるまでの5STEP
- 2 独学をはじめる前に確認しておくこと
- 3 HTML&CSSを完全独学でマスター
- 4 jQuery(JavaScript)を完全独学でマスター
- 5 WordPressを完全独学でマスター
- 6 ポートフォリオではなく、事業サイトを作る
- 7 営業を学んで、案件獲得に挑戦しよう!
- 8 【まとめ】すべては、毎日取り組み続けることからはじまる
稼げるようになるまでの5STEP

独学の具体的な独学方法を説明する前に、まずは独学をして最終的に仕事にするまでの流れを確認しておきましょう。
これを知らずに独学に取り掛かってしまうと、自分のやっていることに迷いや不安が生じます。
僕も何度か挫折しかけましたが、それは自分の方法に自信を持てなかったことが大きな要因でした。
ということで、まずは結論から。
下記が、高卒底辺サラリーマンだった僕が独学でWeb制作を学び、最終的に単価50万円のWeb制作案件を受注できるようになるまでにたどり、他の方々でも十分に再現可能だと確信している5ステップです。
- Web制作スキルを身につける
- 実績を作るために採算度外視で営業する
- 実績を武器に信用していただき単価を上げてもらう
- 仕事を増やして外注先を見つける〜制作チームの結成
- 営業・制作を仕組み化
① Web制作スキルを身につける
まず、今回の記事では①を達成するための方法を中心に解説していきます。
独学をはじめる前に考えておくべきことや準備しておくことを確認した上で、できるだけお金のかからない学習方法を示します。
② 実績を作るために採算度外視で営業する
②に関しては、最後のWeb営業の解説で說明します。
ガツガツ営業するにしても、営業を仕組み化して基本待ちの姿勢を貫くにしても、必ず知っておくべき営業の基礎についてのお話です。
③ 実績を武器に信用していただき単価を上げてもらう
③に関してはすごく単純で、②の段階でどれだけ丁寧で真摯な対応をしたのか?がポイントです。
クライアント様に「こんな価格じゃ申し訳ないな」と感じさせるくらい一生懸命に働くことで、自ずと単価は上げてもらえるものですからね。
副業として充実してくるのはこの段階です。
④ 仕事を増やして外注先を見つける〜制作チームの結成
④は難しく思えるかもしれませんが、要はTwitterやサロンなどのコミュニティに属しておき、いざというときに頼れる人を見つけておくということです。
そもそも②〜③を繰り返していくと、任せてもらえる仕事も増えてきます。
そうなると自分ひとりでは対応しきれなくなるため、信用できる外注先を見つけておく必要が出てくるんです。
この外注先を各ポジションごと見つけておくことで、結果的にあなたの制作チームが出来上がり、あなたは小さな制作会社の代表になります。
⑤ 営業・制作を仕組み化
⑤外注先がハッキリしていると、たとえあなたにデザインセンスがなくてもデザイン案件を引き受けられるようになったりするので、クライアント様からの信頼をより深められることになり、結果的に毎月の受注数は増えていくことになるでしょう。
ここまで来ると、クライアント様から別のクライアント様をご紹介いただけたり、以前に担当したサイトやバナーのデザインをリニューアルするなどといった案件を任せてもらえるようになりますので、結果的に営業不要のフリーランスになれるというわけです。
「理想のフリーランスライフ」を実現できるのは、この段階です。
以上がWeb制作で稼げるようになるまでの5STEPです。
なんとなくでもイメージはできましたか?
正直、完全にひとりで全行程をこなすのは険しすぎるので、早い段階でどこかしらのコミュニティに入ったりSNSやCSで他のフリーランスの方々にメッセージを送るなどして、他の方々の働き方や時間の作り方などを質問されることもおすすめします。
独学って誰かの応援がないと99%挫折しますし、そもそも独りで黙々とやるものでもないですからね。
いずれにしても、今はまだ夢物語に思えるかもしれませんが、その夢物語を現実にできるかどうかはあなたが今から動きはじめられるかどうか、です。
頑張っていきましょう!
独学をはじめる前に確認しておくこと
稼げるようになるまでの道のりをイメージしたところで、今度は実際に動きだす前に考えておくべきことを理解していきましょう。
- 目標の明確化
- 家族への説明
- 学習の習慣化
- メンターの確保
目標の明確化
まずは最終目標を設定しましょう。
多くの方は「ホームページを作れるようになりたい」とお考えでしょうが、それだけだと漠然としすぎていてゴールとしては物足りません。
ゴールがはっきりしていないと、毎日なんのために走っているのか分からなくなります。
考えておくべきことは以下の4つ。
- Web制作を学んで、何をしたいのか?
- 副業として続けたいのか?それともフリーランスを目指すのか?
- いつから仕事にしたいのか?
- 年間にいくら稼ぎたいのか?
「Webを通じて地元に貢献したい」というステキな理由はもちろん、「今の倍は稼ぎたい」とか「30歳までにFIREしたい」などといった不純な動機でも構いません。とにかく学習の目的がハッキリしていないと、辛い独学を続けることは難しいです。
また、副業として続けていくのとフリーランスになるのとでは、必要なスキルが異なります。
独学に終わりはないので、仕事としてはじめる時期や希望の収益額を決めておかないと、いつまでも学習段階から抜け出せません。
独学に踏み切る前に、まずはここをハッキリさせておきましょう。
家族への説明
周囲の理解なくして、独学は続けられません。
特に仕事や子育ての合間で独学を続ける場合、ご家族の理解を得られている人とそうでない人とでは、営業に踏み切るまでに半年以上の時間差が生じます。
過去にいただいたご相談の中には、「ご家族の理解を得られておらず、せっかくスキルを磨いて仕事を掴んだのにWeb制作を続ける自信がなくなった」と泣いていらっしゃる方もいました。
これはあくまで極端な事例ですが、独学当初にしっかりとご家族と話し合い、仮に反対されたとしても、挑戦する期限を設けてその間だけは応援してもらうなど、交渉の方法はあると思います。
独学〜副業を続けるために、ここは必ず無視できないポイントです。
学習の習慣化
目標を決めたら、今度は継続して勉強できる環境を確保しましょう。
当たり前に思われるかもしれませんが、独学を継続できない方はここを実行できていないことがほとんどです。
「新しいことをはじめる」というのは非常に立派な判断ですが、それをやり続けられなくては本末転倒。
あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中で勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。
ここで設定した時間は、そのまま将来の副業に充てられる時間になります。
また、一般的には「合計1000時間の学習で案件を獲得できるくらいになれる」といわれていますから、まずはこれを達成することを最初の目標として「はじめること」。次に、これをやり切るために「続けること」が大切です。
習慣化のコツ
これはたとえ話ですが、最終的には「歯磨き」と「勉強」を同じくらい優先度の高いものとして認識してください。
どんなに疲れていても歯を磨かない日って滅多にないですよね?
それは、歯磨きがそれだけ優先度の高いものとして考えられているからであって、モチベーションに左右されないものだからです。
勉強も同じように、モチベーションに左右されないくらい自分の中で優先度を高めていきましょう。
独学を継続させるコツはこれに尽きます。
メンターの確保
経験者からフィードバックをもらえる環境に、自分の身を置いてください。
多くのスクールや有料コミュニティはこれを最大の売りにしてるわけですが、結局のところ学習において最も有益なのは第3者の意見です。
- 自分の目標達成に向けて、今のこの学習方法で合ってるのか?
- 答えを見てもさっぱりわからない!どうすればいいのか?
- 営業するといっても自分の何を売り込めばいいのか?
こうした悩みは経験者に相談することでしか解決できないことであり、自分ひとりで悩んでいても解決するのはいつになるか検討もつけられません。
時間を無駄にせず、何度考えても分からないことを相談できる人をできるだけ早いうちに見つけておくことも独学成功の秘訣ですから、スクールに通わないと決めた場合はできるだけ早くMENTAなどでメンターを探しておきましょう。
当ロードマップの構成について
この章の最後に、当ロードマップの進め方についてご説明します。
学習順は以下のとおりです。
- HTML&CSS
- jQuery(JavaScript)
- WordPress / Shopify
- 事業サイト制作
- Web営業
この工程を3ヶ月〜1年でやり遂げ、安定して稼げる状態を目指すロードマップになっています。
いずれも、僕が会社員として毎日10時間以上勤務しながら夜な夜なコツコツと取り組んで学習できたものですので、再現性はあると思います。
月収100万円以上を目指したい方はこのあとにWebマーケティングなどの勉強も必要ですが、それはまだ先の話なので、本記事ではこれから駆け出したい方のための基礎学習に焦点を絞りますね。
このロードマップが、あなたの人生をステキにするキッカケとなること切に願っています。
HTML&CSSを完全独学でマスター
それではさっそくはじめましょう!
今日からの1〜3ヶ月で、あなたはWeb制作において必須言語であるHTML&CSSというマークアップ言語の基礎を習得し、シンプルなデザインならそのとおりにマークアップできるようになります。
スケジュールは以下のとおり。
HTME&CSSの学習スケジュール
- ドットインストールで雰囲気をつかむ(30分)
- Progateで勉強(1週間〜1ヶ月)
- YouTubeで復習(1〜3日)
- 本で復習&サイト作りに挑戦(1週間〜1ヶ月)
- デザインカンプのコーディングに挑戦(2週間〜3ヶ月)
STEP1~STEP4でHTMLとCSSを理解します。
STEP5でアウトプットを繰り返し、スキルを磨きます。
人によって一日あたりの勉強時間は異なりますから、あっという間に進められる方はどんどん先へ進んでいただいて構いません。
逆にこの目安よりも時間がかかる場合は、決して無理する必要はありません。
しかし、倍以上の時間を費やしてもも無理そうな方は、学習環境や取り組み方に改善点があるかもしれませんので、一度TwitterのDMで僕にご連絡ください。
状況を教えていただければ、改善方法を提案させていただきますね。
STEP1:ドットインストールで雰囲気をつかむ

それではスタートです!
最初はそもそも「HTML&CSSって何なのか?」をざっくり学びます。
ここで登場するのがドットインストール。
1本2分前後の短い動画で解説してくれる定番サイトで、HTMLなどの基礎的なことについては無料ですべて閲覧可能です。
ということで、HTMLの無料部分を30分ほどでサクッと観てみましょう。
このときに、動画を観ながら実際に自分でテキストエディタにコードを書いてもいいですが、このロードマップでは同じような作業をSTEP2で行うので、今回は本当に観るだけでいいです。
そして、この時点で「プログラミングって思ってたより簡単じゃん」と思えたあなたには、控えめに言ってプログラミングの才能があります。
多くの人はこの時点で「面倒」とか「ややこしい」などといった拒否反応が出るらしいので、ここでプログラミングを嫌いにならなかったのならもう立派に僕たちの正式な仲間です(笑)
ぜひ最後まで走りきっていただいていので、諦めかけたらいつでも質問してくださいね。
勉強方法の確認
ここで注意点をひとつ。
60%理解したら次に進む、を徹底してください。
ドットインストールの動画を観るときも、一本の動画を3回も4回も繰り返す必要はありません。
あくまでも「何が出来るのかを知ること」がSTEP1の目的です。
Web制作は本番の仕事中も分からないことは検索しながら対応できるものです。
ただし、何ができるのかを知らないと調べようもありません。
間違ってもこの段階で100%理解しようとはしないようにご注意くださいね。
ここまで頑張ったら、STEP1は終了です。
次へと進みましょう!
STEP2:ProgateでHTML&CSSのFlexbox編まで挑戦

独学でプログラミングを勉強する上で、誰もが必ずお世話になるProgate。
無料でも各言語の触りくらいは学べますが、有料版は月額980円で様々な言語を開発環境を用意せずに学ぶことが出来る、初心者にとことん優しいサービスです。
「このサイトの登場でプログラミング学習のハードルはかなり下がった」と、ホリエモンも言ってました。
HTMLやCSSくらいならテキストエディタをダウンロードすればいいだけですが、サーバー上で動くPHPとかになってくると色々と事前準備が大変なので、Progate登場以前はそれだけでハードルが高かったはずですからね。
ちなみに、僕もプログラミングを勉強しようと決心したまさにその日(2020年2月11日)にProgateに課金しましたが、今となっては人生最良の決断だったと本気で思っています。
ここで学んだ基礎知識とここで得た自信が現在の僕の大きな基盤ですし、同じように考えている人は多いはず。

僕は3ヶ月間Progateにお世話になりました。
最終結果はこんなです。
約10週間で10言語を学び、その内の1言語はWeb制作に不必要だと悟って放棄しました(笑)
みなさんにも、Ruby以外は必ず挑戦してほしいです。
HTML&CSSに挑戦
ということで、さっそく課金してここからは実際に手を動かしつつ「HTML&CSS」という講座にチャレンジしましょう。
休みの日に朝から一気に全部やるのもありですし、僕みたいに朝起きて1講座ずつやるのもありですが、後者のパターンでもだいたい3日もあれば余裕で学習できる量です。
「学習コース」と「道場コース」に分かれていて、「道場コース」というのは応用問題です。
もちろんここでも、検索して答えを探しながら挑戦して大丈夫です。
たまに「Progateの道場コースで挫折した」などといったツイートも見かけますが、恐らくは真面目に自分の実力を推し量ろうとして、記憶している知識だけで道場に挑んでしまったんだと思います。
そんなすぐに記憶できるわけがありませんし、正直無理して暗記する必要もない(知りたいときに検索すればいい)ので、僕たちはネット上の知識を総動員して、道場を破っていきましょう(笑)
Flexbox編
Progateにおいて、HTML&CSSの最終章は「Flexbox編」です。
この「Flexbox」とはCSSをつかったレイアウト方法のことです。
「好きな位置に好きなものを配置できること」がWEB制作において必須スキルとなりますが、Flexboxはそのために必ず知っておくべき知識ですので、決して無視せずしっかり挑戦してください。
ここまで終わったら、次のステップに進みましょう!
STEP3:たにぐちまことさんのYouTubeで理屈を学ぶ
ここまで「60%理解したら次に進んでください」と言ってきた僕ですが、この辺で一旦立ち止まり、頭の中を整理していきます。
STEP 3では動画、STEP 4では書籍で復習しましょう。
ということで、ここで観るのがUdemyでもお馴染みのたにぐちまこと(@seltzer)さんのYouTube。
控えめにいって、超有料級の動画です。
CSS Gridなどなど、Progateでも学べなかったとても有益なことをさらっと解説してくれます。
これこそが僕のとっておきであり、独学の要!
たにぐちさんは小学生の頃からプログラミングに触れてきたという根っからのエンジニアの方ですが、とにかく説明が丁寧で分かりやすいのが特徴。
Progateでなんとなく分かった気になっている知識を、ここで理屈から説明してもらうことでしっかりと学び、理解を深めましょう。
観れば観るほど、無料でいいのかなと心配になりますよ(笑)
HTML編の7本とCSS編の9本を観て、ここまでの復習を行いましょう。
ちなみに余談ですが、僕は動画で学ぶときに必ず1.5~2倍速で観ています。
集中力が高まりますし、単純に時短にもなるので、もしよければ真似してみてください。
特にたにぐちさんの優しい語りは心地よすぎて…笑
STEP4:「世界一分かりやすい参考書」でWebサイト作りに挑戦
学習開始からここまではあっという間だったと思いますが、いかがでしたでしょうか?
ほんの1週間程度で、すっかり超素人の域は出ていることと思います。
ということで、ここからはとにかくコードを書いていきましょう。
ここでは世界中で翻訳された解説書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を読みながら、しっかりとしたサイトを作っていきます。
信じられないかもしれませんが、ここまで勉強したあなたには既にサイトを作る十分な基礎知識が備わっているんです。
なので、ここからはアウトプットを続けて学んだ知識を自分の力に変えていく番ですよ。
この本はとにかく解説が丁寧で、中学生でもこの本を読みながらHTMLとCSSを学べるくらいですから、まさに初心者にはうってつけの一冊です。
逆に背伸びして少しでも小難しい本を買ってしまえば、そこで挫折することになりかねないので要注意。
「初心者にも優しいわかりやすい説明」と「少し慣れてきたときにめっちゃ助かる豆知識が網羅されている」というのがポイントです。
もちろん分からないことはいつでも検索すればいいのですが、紙の本ならデバイスの充電なども心配することなくいつでも確認できますから、Webも本も上手に活用して、時間を無駄にせず勉強していきましょう!
この本では、実際にWebサイトを作りながら体系的にWeb制作を学べます。
ここまではテキストエディタも使わずに進んできましたが、いよいよ本格的になってきますね。
STEP5:デザインカンプのコーディングに挑戦

ここまでたどり着いたあなたはもう立派なプログラミング初心者です!
多くの人が「難しそう」と考えているプログラミングの世界に、しっかりと足を踏み入れています。
折り合えし地点であるここからは、これまでに学んで知識を総動員させながらスキルを磨いていきましょう。
ということで、デザインカンプに挑みます。
デザインカンプとは?
「デザインカンプ」とは、デザインの完成見本図のことです。
実案件では2つの目的でデザインカンプを用意するのですが、今回はあくまでコーディングの練習教材として使用しましょう。
これに挑戦することで、ここまでに身に着けたHTML&CSSの基礎知識をしっかりアウトプットして、実案件さながらの脳の使い方も体験できます。
覚悟を決めて挑みましょう!
- クライアント様との認識のズレを防ぐため
- 制作サイドでの認識のズレを防ぐため
デザインカンプはCodestepでゲット

ここでは、Codestepというとても有益なサイトのお世話になりましょう。
僕が勉強していた頃にはなかったサイトですが、はじめて見たときは「なんでもっと早く作ってくれなかったの!」って憤りました。
レベル別に色んなデザインカンプと必要素材、解答例となるコード一式が用意されていますので、まずは一番カンタンなやつから挑戦してみましょう。
どんなコードを書いても大丈夫です。
大切なのは「デザインカンプ通りであること」。
これは普段Webの仕事をしていて常に感じることでもありますが、やっぱりコーダーさんに一番求めたいのは「ほぼピクセルパーフェクト」。
デザインをどれだけ正確に再現してくれるかで評価が分かれますし、再現度の高い方には半永久的に仕事をお願いしたくなるものです。
というわけで、まずは初級編のデザインカンプで「カンプからコーディングする」という作業に慣れてください。
Codestepも有料版ではかなり本格的なカンプに挑戦できますが、無料版だと中級編とかでも正直物足りない方はいるでしょう。
そこで、ここではCodestep以外のおすすめも挙げておきますね。
この段階は時間を掛けて取り組む価値があるところですので、できるだけ答えを見ずに自分の知識とググり力だけで乗り越えてください。
特に「ググり力」を鍛えることは、Web制作者としても、社会人としても、非常に大きなアドバンテージとなります。
課題のレベルによってはjQueryなどが必要なものもありますが、それは勉強してからで大丈夫です。
ただし、最終的にコーダーとして営業をはじめるなら、最低限しょーごさんのコーディング演習課題(中級EX)までは難なくコーディングできるレベルを目指しましょう。
おまけ:案件を調べてみる
さて、デザインカンプをコーディングできるほどの知識を身に着けたとなると、ようやくこの段階で案件のレベルをイメージできるようになってきます。
少なくとも完全ド素人ではなくなっているので、さっそく色んなクラウドソーシングに登録して案件の内容を見てみましょう。
まだ応募するには早いですが、この段階から世の中で求められているレベルを知ることで目指すべき学習レベルを具体的にイメージできるようになり、そのことが今後の独学において非常に重要になってきます。
目標を把握できていないと、走り続けることはできないですからね。
ここまでを10秒でまとめましょう。
ということで、ここまでが「HTML&CSSを完全独学でマスター」でした。
ちなみに僕は、この段階でポートフォリオを作ってみました。
あなたもいきなりオリジナルは作れなくても、テンプレをいじるくらいなら出来るようになってるはずです。
その後に再びProgateに戻り、JavaScript、jQuery、Sass、PHPを勉強して、2つ目のポートフォリオを作りました。
作ったサイトのコードを公開してアピールするためにGitも勉強しましたし、サーバーのこともしっかり知っておこうと思いSQLも学習しましたが、そこまでで独学開始からだいたい2ヶ月くらいでした。
いま振り返ると、あの頃は寝てませんでしたね(あなたはちゃんと寝てくださいね)。
できることが増えたら、その都度自分のポートフォリオをカスタムするなどしてアウトプットを繰り返し、インプットしたことを着実に自分の力に変えていくというのは、ここまでのSTEPと変わりません。
案件獲得にはプログラミングの技術のほかに、「営業」「マーケティング」「ディレクション」などの勉強も必要ですが、まずは焦らず、Web制作のスキルを十分に身につけることに集中していきましょう。
jQuery(JavaScript)を完全独学でマスター
jQuery(ジェイクエリー)とは、JavaScriptというプログラミング言語をもっと簡単に扱えるように設計された「ライブラリ」と呼ばれるものの一種。
これを使いこなすことで、サイトに動きをつけられます。
PCでもスマホでも、画面の上からポップアップが出てきたりしますが、あれを簡単に実装するためのものです。
jQueryもProgateでしっかり基礎を学習できますが、問題はそのあと。

Progateで基礎は学んだけど、そのあと何すればいいの?
僕自身、ProgateでHTML&CSS~JavaScript~jQueryと学習したあとに、なんとなくわかった気になっただけで、学んだ知識をどう活かせばいいかわからず困り、色々と模索しました。
ここではそんなjQuery難民のために、Progate後の学習手順を解説していきます。
それでは、早速いってみましょう!
ちなみに、Webサイトに動きをつけるために用いられるのはjQueryだけではありません。
React(Next) や Vue(Nuxt)、GSAPなど様々な選択肢があり、ウェブアプリケーションの現場などではそれらの方がjQueryよりも使われているようです。
一方、Web制作の現場ではまだまだjQueryが現役。
I/O 3000のようなギャラリーサイトに掲載されるようなWebサイトでも、jQueryの使用率は67.9%なのに対し、ReactやVueは10%以下という調査結果もありました。
結論、まだまだjQueryを勉強する価値はあるということです。
Twitterなどでは「jQueryはオワコン」などという意見も聞かれますが、その際はその意見の前提を確認するか、無数の意見の中のひとつとして流しておきましょう。
いま大切なのは、あなたがjQueryを理解することです。
参考サイト:「ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた」feb19
jQueryの学習スケジュール
Progateで基礎を学んだら、そのあとはシンプルに2つのSTEPでjQueryを学んでいきます。
- 実際にコードを試してみる
- 本で復習する
これだけです。
他の記事でも書いているとおり、jQueryの学習においても一度ですべてを理解する必要はありません。
とりあえずチャレンジして、分からないことは分からないまま次に進んで、ひととおり学習し終えてから、振り返ってみると分かってたりします。
それでも分からないことはありますが、全体を把握した上で挑めばすんなり理解できるものですから、とにかくいちいち立ち止まらないように気をつけましょう。
STEP1:デザインカンプをアップデート
ということで、jQueryを使ってみましょう。
どんな知識もアウトプットしないと身につきませんからね。
Progateでひととおり学んで、jQueryとは何なのか?何が出来るのか?くらいは理解できていると思います。
それならその知識を活かして、Codestepなどで作った静的なデザインカンプをアップデートしてみましょう。
何を試せばいいかわからない場合は、「スライドショー」と「アコーディオンパネル」を実装してみてください。
動くWebデザインアイデア帳で検索し、実装するのが一番カンタンでしょう。
このふたつは実案件でも当たり前に出てきますし、これを実装できるようになると、のちのち自信にも強みにもなりますからね。
うまく行けば、HTML&CSSとは異なるプログラミングの楽しさを味わえますよ。(自分すげー!ってなります)
STEP2:本や動画講座で復習する
jQueryを実際に試したあとは、復習の時間です。
僕のおすすめは本や動画講座での復習。
Progateに戻ることも否定はしませんが、同じ問題に何度も挑戦したところで、得られるのは慣れだけですからね。
ここでの参考図書は先ほどもお世話になった『動くWebデザインアイディア帳』。
jQuery関連の書籍はたくさん出ていますが、そんな中でこの本は「初心者が参考にできるちょうどいいレベル」なんです。
実際に、Web制作で単価何十万円という案件を対応するときにも役に立つような、数々の実例が充実しているので、長い目で見ても最高の一冊だと思ってます。
ここで大切なのが、その読み方。
「最初から順番に読む必要はない」というのが持論なのですが、この本も読みたいとこだけを読めば大丈夫です。
ゲームの攻略本と同じで、いま知りたいことだけを調べて、本を読むことに必要以上の時間を使わないように気をつけてください。
どんなときも、インプット:アウトプット=3:7です。
ここまでを10秒でまとめましょう。
ということで、ここまでが「jQueryを完全独学でマスター」でした。
ここまでで独学の基本的な動きは身についてきたかと思います。
少なくとも、独学を楽しめていませんか?
こうなったら間違いなくあなたはWeb制作に適正のある方ですから、すでに実案件に挑めるくらいの技術力と検索力は身についています。
ただし、Webの知識が少ない/まったくない人でも管理できるサイトを作らないと、仕事になりませんので、もうひとつ勉強しておくべきものがあります。
それが、WordPress。
WordPressを完全独学でマスター

WordPress(ワードプレス)とは、誰でも無料でサイトやブログを作成できるソフトウェアのこと。
プラグインと呼ばれる拡張機能を使って、難しいコードを使わずにお問い合わせフォームなどの機能を設置できるなど、Web制作の知識がない方にとっても便利なツールです。
Web制作の現場では、サイトのデザインや機能を考え、コーディングすることで、クライアントにとってオリジナルのサイトを効率よく作ることができるため、定番の案件として毎日必ず募集があります。
ここまで独学してきたあなたなら、WordPressの名前くらいはご存知のはず。
そもそもWordPressがどんなものなのか?を把握するなら、実際にWordPressでブログを書きはじめるのがおすすめですが(それについては別の記事で解説するとして)、ここではWeb制作におけるWordPressの使い方を効率よく独学でマスターできる手順を解説していきます。
僕もこれを書いている2020年12月にはWordPress案件のおかげで本業並みに稼がせていただいてますが、半年前は参考書片手にゆっくりWordPress化の手順をおさらいしてたレベルでした。
奥は深いが、敷居は低い。
このことを分かってもらい、この解説を読んでくださったあなたが半年後に単価30万円以上の案件を楽々とこなす姿を想像してみてください。
はじめる前に
実際の学習をはじめる前に、ここでHTML&CSSで作ったサイトをWordPressで表示させる作業(以下、WordPress化)が、どれくらい単純かという話をしておきましょう。
ポイントは4つだけ。
- PHPそのものを覚えてなくても大丈夫
- 各ページに対応したテーマファイルを用意する
- ヘッダーや投稿記事を呼び出す独自コードを使う
- 記事一覧を取得するためのモジュールを使う
① PHPそのものをマスターしなくても大丈夫
WordPressは、PHPという言語で書かれています。
ProgateでPHPの基礎を学んでおくのもありですが、実際にはWordPress独自のコードがあり、それらを適切な場所に記述することで、制作を進めていきますので、事前にPHPを深く学んでいなくても大丈夫です。
むしろ、HTML&CSSやjQueryの知識の方が大切。
② 各ページに対応したテーマファイルを用意する
この概念図がすべてです。
要は、表示させたいページに必要なファイルを用意して、そこにHTMLとWordPressのコードを書いていけば、テーマファイルの完成です。
もちろんこれらも暗記しなくて大丈夫ですから、実際にWordPress化を行うときに必要なものをひとつずつ確認して進めましょう。
③ ヘッダーや投稿記事を呼び出す独自コードを使う
先ほども書いたとおり、WordPressには独自のコードがあります。
各ページに共通しているヘッダーやフッター、投稿記事や固定ページの雛形はそれ専用のファイルを作り、トップページなどを作る際にはそれらをパーツのように組み合わせていきます。
そのパーツを呼び出すための独自コードが用意されていて、それを利用していくというわけです。
また、このようにパーツを細かく分けておくことで、メンテナンスも楽になるというメリットもあります。
④ 記事一覧を取得するためのモジュールを使う
記事タイトルやカテゴリーなどといった投稿ページの情報を取得し、それらを一覧表示させるには、PHPで書かれたモジュールを使用します。
つまり、ブログ記事一覧を表示させる決り文句があって、それを正しく書いておけば大丈夫ってことですね。
これもPHPで書くとはいえ、書くものは決まっているので、お手本を見ながら学んでいきましょう。
WordPress化って意外と単純。
これらたった4つのポイントを押さえておけば、HTMLなどで書かれたファイルをちょちょいとイジるだけで、1日~2日もあればWordPress化できちゃいます。
僕が過去に取り掛かったWordPress案件では、jQueryが色々と使われているWebサイトをWordPress化するというものがありました。
結果的にそれも基本的な部分をWordPressのコードに置き換えて、jQueryで実装されていた部分はWordPressのプラグインで再現できたのですが、そのときの僕はProgateでPHPをひととおり勉強した程度のレベルでした。
WordPressの学習スケジュール
- YouTubeで「WordPressで制作するとは?」を確認
- 書籍でインプット&アウトプット
- デザインカンプに挑戦
- SnowMonkeyの使い方を確認
STEP1:YouTubeで「WordPressで制作するとは?」を確認
初日はYouTubeで気張らずに勉強しましょう。
今回はアキユキさんの解説動画で「WordPressでサイトを作るとはどういうことか?」を学びます。
観た方は激しく頷いてくれると思いますが、Udemyなどで有料コンテンツ化してもいいくらいの内容です。
僕はこれを観て、「スクールに通わなくてもぜんぜん大丈夫じゃん」と思いました。
注意点としては、ここでの目的はあくまでも「WordPressで何が出来るのか?何をすれば良いのか?」という大まかな流れを掴むことであって、この動画で完璧にマスターしようとする必要はないということ。
難しそうに見えて、実は難しくない。それがWordPressです。
STEP2:書籍でインプット&アウトプット
STEP①の動画でなんとなく雰囲気は掴めましたか?
ここからは本を参考にしながら、実際に静的サイトをWordPress化していきます。
というこでまずは参考図書をご紹介。
WordPress 導入とサイト制作の教科書 改定第二版
WordPressを解説している本は非常にたくさんありますが、WordPress化について細かく丁寧に解説している本って案外少なかったり、情報が古かったりします。
その点、この本は2020年に内容が改定されていますし、元々良書として知られていた本なだけに非の打ち所がありません。
とりあえずはじめから順番に読んでいくのが良いですが、ここでも、はじめからいきなり熟読する必要はありません。
もう聞き飽きたかもしれませんが、とにかく知りたい部分だけを読めばOKです。
はじめから熟読して一回の読書ですべてを理解しようとすると、確実に学習効率が下がります。
「最初は6~7割くらい理解できればいいや」くらいの流し読みで進めましょう。
ということで、「初心者が挫折しないための読み方」がこちら ⇓
①:とりあえず「へー、そうなんだー」程度にLesson1~3を流し読み
②:Lesson4を流し読みした上で、サンプルデータを使ってブログ記事を書いてみる
③:Lesson5を流し読みしてテーマとプラグインについて理解する
④:Lesson6を流し読みした上で、サンプルデータを使ってプラグインをいじってみる
ここまでゆる~くやってみましょう。
ゆる~く挑戦しても、とりあえずWordPressで記事を作成できるようになります。
自分のブログを作るついでにやってみるのもいいですね。
次に進みましょう。
⑤:Lesson7を読みながらローカル開発環境の作り方を学ぶ
⑥:Lesson8でPHPについて学ぶ(Progate等でPHPを学んだ人はスルーしてOK)
⑦:Lesson9~10を流し読みした上で、サンプルデータを使ってサイトを作ってみる
⑧:Lesson12を参考に作ってみたサイトを本番環境で表示させてみる
ここら辺は気合いを入れてがんばるところになりますが、やることは丁寧にすべて書かれているので、順番に真似していけば、つまずくことはほぼなさそうです。
本はこのあともまだLesson15まで続きますが、ここから先はサイトの管理・運営に関することは中心なので、「WordPressでのサイト制作」についてはここまで十分。
STEP3:WordPress化前提のデザインカンプに挑戦
最後は、デザインカンプに挑戦して、これまでに学んだことを再確認していきましょう。
各サイトに用意があると思いますが、しょーごさんの『コーディング演習課題』でいうと上級編ですね。
また、余裕があればブログを起ち上げるのも良いです。
いずれにしても、ここまででインプットしたことをデザインカンプやブログ制作を通じてアウトプットし、着実に自分のスキルアップを行うことが目的です。
分からないことがあっても、WordPressに関する記事は無数に存在しているので、検索して何も出てこないときは自分の検索ワードを疑う方が良いかもしれません。
それくらいWordPressは世界中で利用され、多くの人が学び、質問されてきたので、ここまでで鍛えてきたググり力をフル活用して取り組んでください。
STEP4:Snow Monkeyの使い方を確認
ここまででWordPressの実践的な使い方を学んだら、ここでついにSnow Monkeyに触れておきましょう。
Snow Monkeyとは、「ブロックエディタでさくさく高品質なWEBサイトを作れてしまう、非常に有名な国産の有料テーマ」です。
年間サブスクでダウンロードすれば商用利用も可という非常にありがたいテーマで、実際に使ってみるとそんなことまで出来るのか!っていうくらいに高機能で驚きますよ。
とはいえ、いきなり年額を支払うのは不安だと思うので、まずは無料版を使ってみてください。
公式ホームページで申請すれば数日以内にメールでおくられてきますよ。
で、実際の使い方やどれくらい便利なのか?については動画で確認しましょう。
Snow Monkeyでのブログの作り方などはたにぐちまことさんの動画がわかりやすいですが、ここではWeb制作における便利さを伝えられたらと思うので、こちらの動画を紹介させていただきます。
このレベルのデザインを、一切コーディングせずにサクッと作れてしまうなんて凄すぎません?
※僕が率いる制作チームGLASSCOOPEのホームページもSnow Monkeyを使っています。
Snow Monkeyの具体的な開発方法を勉強する
先ほどの動画でなんとなくSnow Monkeyの使い方を理解できたら、今度はこちらの動画で実際の制作工程を見ていきましょう。
いわゆる「Snow Monkey解説動画の決定版」といえばこれ、という動画です。
Twitterでも人気のゆっぱーさんが、独学応援サロンのメンバーと協力して作ってくださったんですが、ここまで初心者目線で、詳しく順を追いながらていねいに解説している動画は他にないと思います。
しかも、無料ですからね。
実際にこの動画のとおりにSnow Monkeyで開発したい方は、ゆっぱーさんのブログにレシピが掲載されてますので、そちらをご参考ください。
>>ゆっぱーブログ『はじめての Snow Monkey 動画用デモサイト全解説!』
ここまでを10秒でまとめましょう。
ということで、ここまでが「WordPressを完全独学でマスター」でした。
実際にチャレンジしてみていかがでしたか?
少なくとも、「出来ないこと」ではなかったと思います。
同じPHPを使ったプログラミングでも、「自動返信機能付きの問い合わせフォーム」をイチから実装するのとはわけが違いますからね。
基本的にWordPress独自の構文に慣れてしまえばオンラインマニュアルを見ながら進められるようになりますし、これで20万円以上の案件を受注できるようになると考えたら非常にコスパがいいと思いませんか?
このあとさらに「カスタム3兄弟」の使い方を学べば、本格的なコーポレートサイトも作れるようになり、クラウドソーシングでもいよいよ案件ひとつで30万円以上を見積もれるようになります。
また、Snow Monkeyが使えるとエンドクライアント相手に営業をしても、構成やデザイン次第で十分に高クオリティなサイトを迅速に納品できるようになります。
いずれにしても「がんばる価値のあること」だと思いますから、ぜひとも挑戦してみてください。
おまけ 〜 ここまで学習した人におすすめの教材
ここまで学習した方におすすめしたい教材として、じゅんぺいさんの「実務で使った2年分のコーディング&WordPressメモまとめ集」を挙げさせていただきます。
コーダーを目指す方なら誰もお世話になっているであろうじゅんぺいブログを運営しているじゅんぺいさんが数々のサイトを作ってきた中で書き留めていたメモを編纂したものですが、ここまで勉強されてきた方ならこれがどれだけ便利なものかは想像つきますよね?
まさに圧倒的なボリュームの実務で必要なコーディングとWordPressの知恵と工夫がぎっしり詰まっています。
いろんな技術書をたくさん読み込むよりも、これひとつを買っておいて、困ったときに検索すれば一撃で答えにたどり着けるという文字どおり有益な教材。
作業効率と単価を上げたい人にこそおすすめです!
これまではWordPressまで勉強しておけば稼げたわけですが、最近そこに変化が起き始めています。
Shopify(ショッピファイ)をご存知ですか?
Shopifyとは、誰でも簡単にECサイトを作れる仕組みとして徐々に名を広め、現在ではWEB上にあるサイトのうち3%はShopifyで構築されているといわれています。
WordPressの40%と比較すると少なく思えますが、16億個以上といわれている全世界のWEBサイトの中で、そのうちの3%ですから、約480万個のサイトがShopifyで作られている計算です。
そして、この勢いは今後さらに増していき、WordPressからShopifyに乗り換える企業が出てきたり、Amazonに出店しないブランドがShopifyで自社ECサイトを起ち上げるなどの動きが注目されています。
有名どころだと、プラダをはじめとするラグジュアリーブランドや無印の海外サイトなどが実際にShopifyで構築していますね。
そんなShopifyについて学び、ECサイトをデザイン~コーディングできるようになることで、作ったECサイトの売上の数%を毎月自動的に収益化できたらすごいと思いませんか?
そこでここでは、Shopifyでのサイト構築の基本的な方法について解説した記事をご紹介しておきます。
Shopifyとは?を解説する記事は日本語でも増えてきましたが、開発者向けにそれを解説する記事はまだまだ少ないのが実情…
ということで、以下の記事をご参照ください。
Shopifyの基礎や初期設定方法、おすすめの拡張機能などはこの記事1本で学べるようになっています。
時代の流れに適応して、柔軟に収益を安定させていきましょう。
最近はWordPressなどを使わずにSTUDIOなどのノーコードツールを使って実装されるデザイナーさんも増えてきました。
コーディングを仕事にするならSTUDIOを使っている場合ではありませんが、STUDIOでどのように実装するのか?くらいは知っておくべきでしょう。
ということで、3分ほどの参考動画を貼っておきますね👇
ポートフォリオではなく、事業サイトを作る

それでは、ここまでの学習の締めくくりとして「自分の事業サイト」を作ってみましょう。
事業サイトと言われてもイメージが湧かないと思いますが、「お客さまがあなたにWeb制作を任せるときに確認できる説明」だと思えばなんとなく想像できるのではないでしょうか?
一般的にはここでポートフォリオを作るようにいわれるタイミングだと思いますが、多くのポートフォリオは自己紹介だけで終わってしまい、仕事に繋げられないものがほとんどです。
大切なのは、お客様がたくさんいる駆け出しフリーランスの中からあなたを選ぶ明確な理由が伝わること。
デザインも重要ですが、それ以上に構成が肝です。
「自分という商品」の魅力を伝えることが目的になりますが、まずはこれを作るにあたって必要な準備手順を確認していきましょう。
- 誰に見てもらうのか?(制作会社?フリーのデザイナーやディレクターさん?)
- どんな印象を持たれたいのか?(真面目さ?親しみやすさ?面白さ?)
- 自分の何を伝えたいのか?(コーディングの正確さ?納期の早さ?レスの早さ?)
- どんな順番/構成で見せるのか?(結論・根拠・信頼・安心の4部構成がおすすめ)
- どんな言葉で伝えるのか?(基本的に端的で分かりやすいことを意識)
- どんなデザインにするのか?(メインカラーは?フォントは?)
サイト構成の考え方
とはいえ、手順通りにやるにしても判断が難しいでしょう。
そもそもサイトの構成を考える前に、自分の目的や強みをハッキリさせる方法も分からない方がほとんどだと思います。
メンターとして営業前の方からいただくご相談で一番多いのも、実はこれに関することです。
そこで、まずは「自分の目的や強みについて考える方法」から知りたいという方に向けてBrainを書きました。
要はサービスの組み立て方=マーケティングの基礎について解説しているのですが、いきなり専門用語を並べられると拒否反応を起こす方も多いので、ここでは「Twitter運用」を例に解説しています。
「自分の目的や強みについて考える方法」については無料で公開しているBrainの前半部分にまとまっていますので、そちらをご参考ください。
こちらの内容を参考に、実際に自分の事業サイトの目的や自分の強みを言葉にし、それを伝えたい相手に伝えるための事業サイトの構成を考えていきましょう。
※Brainとは、スキルハックス社が運営している「紹介機能付きのコンテンツ販売プラットフォーム」とそこで販売されているコンテンツの総称です。詳しくはこちらの記事をご参照ください。
ワイヤーフレームの考え方
構成が決まれば、今度はワイヤーを作る番です。
ここでは、Pintarestなどで「ワイヤーフレーム テンプレート」とか「グリッドデザイン テンプレート」などと検索してみましょう。
ワイヤーのサンプルがたくさん出てくるので、それを参考に自分が考えた構成を手描きで起こしていくところから始めてほしいのですが、そうは言われてもどんな構成にすれば良いのかなんてわからないとの意見をたくさんいただいたので、ワイヤーのサンプルを作りました。
よろしければ、ご参考ください。
テキストの書き方
いざ事業サイトを作り出してみると、サイトに載せるキャッチコピーやテキストで悩むと思います。
起承転結の曖昧な長い文章などはもちろんNG。
日本人の多くは学校でライティング技術を学んでいないから文章が下手だとも言われますが、文章力に自信のない方は、このタイミングで基礎を勉強しておきましょう。
ちなみに、文章力は毎日書くことで鍛えられるものですが、僕がみなさんにブログの運営やTwitterをおすすめしているのはそういう理由もあります。
ちなみに、僕の事業サイトはGLASSCOOPEです。
デザインのサンプル
デザインはとても重要ですが、ここまでまったく理論も何も勉強していない方は、独自のセンスで考えたりしないでください。
当たり前ですが、ないものはないんです。
ターゲットの心を掴むデザインを考えるためには知り合いのデザイナーに頼むのが先決ですが、頼むにしても自分の中でイメージを膨らめせておくことが必要です。
ということで、素敵なデザインがたくさん集まっているサイトを見ておきましょう。
ここでは僕が実務でも参考にしているオススメをご紹介します。
ちなみに、Webデザインを勉強していない方は無理に自分でデザインしようとしない方が無難です。
僕もそうでしたが、基本的に知識のない人が考えるデザインとは安っぽくなるものです。
Twitterやコミュニティでデザイナーさんと仲良くなり、ぜひぜひその方にデザインを依頼されることをおすすめします。
無料サイトを使い倒そう
事業サイトで使う画像やイラストなどは、無料サイトなどから探してきましょう。
Webデザインの学習をしていない状態で悩んでもイケてる答えはひねり出せませんから、ロゴなどもそうしたサイトで簡単に作っておくのが得策です。
まずは、ここまでに学んだ基礎知識をフル動員させつつ、分からないことはググり倒して最初の難関を乗り越えてください!
サーバーを用意
コーディングが終わっても、まだ作業は終わりじゃありません!
サーバーにアップするという最後の仕事が残っていることをお忘れなく。
サーバーに関しては、そもそもどこと契約すべきか?という論争が絶えませんが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバー一択でしょう。
安いところは他にもたくさんあるんですが、サーバーの安定度や表示速度、2年目以降の手数料や基本料金など、総合的にコスパを考えるとエックスサーバーが優秀だという結論に至りました。
また、利用者が多いからこそ分からないことがあっても検索すればすぐにネット上で答えが見つかるので、初心者でも独学でどうにかできるという大きなメリットがあります。
毎年、定期的に無料キャンペーンも実施してるので、Web制作者としてもブロガーとしても、一番オススメしやすいのがエックスサーバーというのが正直なところ。
一方で、それでも月額をできるだけ安く抑えたいという方にはロリポップ。
月額250円のライトプランでも十分機能しますし、表示速度がそこそこ早いハイスピードプランでも月額はたったの500円ですから、背に腹は代えられないなら致し難ないでしょう。
営業を学んで、案件獲得に挑戦しよう!

さて、ここまで勉強してきたらいよいよ営業に挑めます。
まだ自分にコーダーとしての自信がないという方は、noteで販売されているしょーごさんのデザインカンプに挑戦したり、コーディングスキル支援サービスである『CodeUps』で制作会社さんとのやり取りを疑似体験しながらCSS設計やBEM設計、gulp環境での実装(Sassでのコーディング)などを学ぶなどして、デザインを正確に再現する技術をさらに磨いてください。
一方で、かつての僕のように早く実績を積み上げていきたいとお考えなら、勇気を出してどんどん自分のスキルを知ってもらうための営業活動に取り掛かります。
ということで、以下の記事に僕の営業経験のすべてを整理してまとめました。
ここまでで身につけたスキルを無駄にすることなく誰かの役に立てるために、営業活動は必須です。
まずは営業を始めるにあたって必要なマインドの確認、そして仕事のパターンを知ることからはじめましょう。
【まとめ】すべては、毎日取り組み続けることからはじまる
ということで、以上が「完全独学ロードマップ」でした。
2020年2月11日から独学をはじめ、緊急事態宣言中の引きこもり時期も、本業再開後も、ひたすら独学し続け、勉強方法をブログにまとめ、日々の気づきをツイートし続けた今日までの1,000時間。
それを経験し、営業せずともWeb制作で稼げるようになった今だからこそ、年齢や学歴を理由に人生を諦めてしまっている方に伝えたいです。
30歳・高卒・完全未経験の僕でも、Web制作で稼げるようになったこと。
その方法は、誰にだって真似できるものであること。
努力を続けた先で、誰かの役に立てること。
過去を悔やむ時間があるのなら、その一分一秒を未来を飼えるために使ってもらえると幸いです。
最後まで読んでいただき、本当にありがとうございます!
この記事が独学をがんばる皆さんのお役に立てたらうれしいです。
高卒・30歳・未経験のサラリーマンです。本当に完全独学でWeb制作を学んで稼げるようになるんですか?