高卒・30歳・未経験です。本当に完全独学でWEB制作を仕事にできますか？
スクールに通いたいけど、いきなり何十万円も払う勇気がありません…
今回はこんな疑問に答えていきます！
本記事の内容
▶WEB制作は間違いなく独学できます（※条件あり）
▶独学に必要な考え方・準備
▶フォローしておくべきTwitterアカウント
▶HTML＆CSSの完全独学方法・おすすめツール・本・動画
▶jQueryの完全独学方法・おすすめ本
▶WordPressの完全独学方法・おすすめ動画・本
▶Shopifyの完全独学方法・おすすめ記事
本記事の信頼性
この記事を書いている僕は、2020年2月11日からWEB制作の独学をはじめ、4月にSEOの勉強と独学のアウトプットを兼ねてブログを開設。
紆余曲折を経て、一年後にはWEB制作で100万円以上稼げてました。
当ブログでは、高卒サラリーマンが毎月20万円以上の副業収入を得られるようになるまでに取り組んだことやその方法、他の独学者でも確実にマネできる情報を発信中。
また、2021年1月には独学応援サロンを起ち上げ。
全国の孤独に独学に励む方々をつなぎ合わせ、みんなで情報を交換し、ときには勉強や案件を助け合いながら、それぞれの目標を達成できる場所として、日々仲間を増やし続けています。
まえがき ～5分だけ時間をください～
断言します。WEB制作／プログラミングは独学可能です。
スクールに通うメリットも当然ありますが、「お金を節約したい」とか「仕事が忙しい」などの理由でスクールに通えない方も多いですよね。
僕も本業が忙しかったり、10万円以上の学費を支払う価値があるのかがわからなかったりして、「とりあえず独学で」という選択をしたわけですが、「やってみたら想像以上にできた」というのが正直な感想です。
また、僕が独学をはじめる前から「WEB制作者は増えすぎた」「WEB制作はオワコン」などと言われていましたが、そこは安心してください。
WEBサイトが毎年増え続けている一方で、WEB制作の独学に挑戦した人の95％は途中で断念しているようですし、独学しても営業力がなくて仕事にできていない人も珍しくなく、意外と人手は足りてません（笑）
「そんなにみんな諦めるなんて、どれだけ難しいの？」と思われるかもしれませんが、断念する原因の多くは勉強方法にあります。
60％理解できたらOK
もしかして、全部理解できるまで次には進まない派ですか？
正直、それは学習効率が悪い上に、WEB制作を仕事にしてからも作業に時間がかかることで、収益を安定させられない可能性があります。
だから、お願いです。
60％理解できたら次に進んでください。
多くのエンジニアの方々が口を揃えて仰っていることですが、マジメな方ほどこれが出来ず、結果的に勉強が辛くなり、独学を断念してしまうというケースが本当に多いです。
僕もこれまで多くの同期を失いましたが、ほぼみんなこのパターンでした。
一生懸命取り組んでいたのに、本当にもったいないですよね。
でも、なぜ理解が完全ではない状態で次の勉強に進むかというと、知識が身につくのはインプットではなくアウトプットの過程だからです。
どんなにテキストを読み込んでも、なかなか知識としては身につきません。
ましてWEB制作なんて情報量は膨大ですから、それをすべて覚えようとするなんて絶対に無理。
大切なのは、最低限の情報をインプットした状態で、難しい課題に直面したときに迅速な正しい判断ができることです。
「どう調べれば解決の糸口を見つけられるか？」は、多くの課題やサイト模写に挑み、サンプルサイトを作り続ける過程でしか学べないものです。
インプットよりアウトプット
ということで、インプット：アウトプット＝３：７が大前提です。
貴重なあなたの時間は「テキストを読む」などのインプットよりも、「実際に自分でコードを書いてみる」などのアウトプットに使いましょう。
具体的な流れは以下のとおり。
①：まずはその言語で何が出来るのか？勉強すべき言語なのか？を確認する
②：実際に自分でコードを書いて、どう表示されるかを確認する
③：②で出た不具合を修正する
①がインプットで、②と③がアウトプットですね。
特に③が大変ですが、最も大切なパートでもあります。
③に取り組むことで、自分が知らないことが明確になり、それをひとつずつ解決していく過程であなたは一歩ずつ着実にWEB制作者へとなっていくわけです。
解決方法は様々ですが、インターネットで検索したり、本で調べるのはもちろん、Twitterで「〇〇について教えて下さい！」とSOSをツイートするのもありですし、僕に質問してくださっても大丈夫です（教えたがりなので）
ちなみに僕は、独学初期にサンプルサイト制作で非常に苦しみ、ひとつの課題に３日以上悩んだこともありましたが、それを解決できたことでレベルアップしたと同時に、それは大きな自信にもつながりましたから、やはり挑戦してよかったと今でも考えています。
当たり前ですが、覚えていない知識はどんなに頭を捻っても出てきません。
でも、WEB制作はいつでも分からないことを検索できるんです。
言ってしまえば、答えを見ながら仕事ができるので、独学中もどんどん答えを探して、見つけたやり方を試し、多くの経験をストックしていきながら、いざというときの課題解決につなげましょう。
インプットに必要以上の時間を掛けるべきでない理由は、ここでご理解いただけたと思います。
※0円のプログラミングスクールという近道
毎月なにか新しいプログラミングスクールが出現している気がしますが、競合が増えたからなのか最近は価格競争が進んでます。その中でも、知名度抜群のTechAcademyは1週間の無料体験ができるので、ここでひとまず基礎学習を終えるというのもありですね。
>>TechAcdamyの無料体験はこちら
本記事は完全初心者がWEB制作の基礎を学習～案件獲得レベルに到達するまでの約3カ月分の手順を説明している記事です。
「一気に最後まで読む」というよりも、あなたの状況に合わせて、その都度必要な箇所をご参考いただければと思います。
わからなことがあれば、いつでもご質問ください。
独学は決して孤学ではありません。ぜひ案件獲得まで一緒にがんばりましょう！
【準備】未経験者がWEB制作を独学するために必要なコト
学習環境の確保
まずは毎日勉強できる環境を確保しましょうね。
これが本当に大切。
「新しいことをはじめる」というのは非常にすてきな判断ですが、それをやり続けられなくては本末転倒です。
あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中にプログラミングを勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。
一般的には「合計３００時間の学習で案件を獲得できるくらいになれる」といわれていますから、300時間達成を最初の目標としつつ、まずは「はじめること」、次に「続けること」が大切です。
「仕事に疲れて夜は勉強できない」という方は、出勤前の一時間を勉強時間にするなど、意地でも自分に勉強するチャンスを与えてあげてください。
ちなみに僕の場合、「勉強は明るいうちにやる」と決めています。
人生で一度も睡魔に勝てたことがないので（笑）
ちなみに、僕が「どうしても集中できない！」というときにやって、効果があったことをリストアップしておきます。
ご参考ください。
独学者が必ずフォローしておくべきTwitterアカウント
独学する上で、先輩たちのツイートをチェックすることも重要です。
ここでは、その中でも特に初心者にとってスキルアップに繋がるツイートをしてくれる方々をご紹介します。
駆け出しさんはフォロー必須の7アカウント
▶たにぐちまこと：@seltzer さん
→全員フォロー必須の超重要人物。
→→恐らくWEB制作を学ぶ全国の初心者がたにぐちさんの講座を受講しているはず。
→→→日頃のツイートも超有益。
→→→→フリーランスとして必要な多くの気づきを得られます。
▶小林｜Webクリエイター：@pulpxstyle さん
→普通に独学してたらまず学べないコードの数々をツイートしてくださる神。
→→さかのぼって全ツイートを読む価値アリです。
▶デザイン研究所 (デザ研)：@designkenkyujo さん
→超有名アカウント。
→→素敵なWEBデザインのコツを、非常に分かりやすい図解でツイートしてくれます。
▶アキユキ@Webデザイナー/エンジニア：@life_toshindai さん
→YouTubeで超有料級の解説動画を配信している僕らの先輩フリーランサー。
→→一昔前なら、何十万円っていう学費を支払わないと教われないレベルの講座多数。
▶祐太@はらブログ：@haraponta1496 さん
→独学でWEB製作者／WEBマーケターになられた努力の人。
→→案件の獲得方法に関しては、現在のTwitter界で原さんよりも信頼されている人なんていません。
▶みさ：@misaprog さん
→こちらも独学でWEBマーケターになられた才女。
→→クライアント様との信頼関係構築がすばらしく、ブログと併せて参考すべき。
▶めがねん：@iammeganen
→僕です！
→→この記事が「役に立った」と思っていただけたら、ぜひフォローをお願いします！
→→→独学応援サロンもやっていますので、興味のある方はぜひ！
独学に使うお金は専用カードで管理しましょう
このロードマップでは、できるだけお金を無駄にしないことも念頭に置いています。
これは僕が少ない貯金をやりくりして、節約しながら独学していたことに由来するのですが、結果的にコスパの良いロードマップの誕生に役立ったと思います。
その際に欠かせなかったのが、専用のクレジットカード。
独学にいくら使い、それを回収するためにどんな案件をいつまでに対応できるようになるべきか？を意識しながら学習を進めることで、より計画的な独学ができたのでした。
もちろん、クレジットカードにもお金は掛けないでください！
僕はマナブさんの教えもあり、コスパを考えて楽天カードにしましたが、みなさんはご自身にとって一番都合のよいカードを選んでみましょう。
特にフリーランスになると、すぐに社会的な信用がなくなり、クレジットカードを作れなくなるので、独立を検討されている方は必須ですね。
【HTML&CSS】完全独学で勉強する方法とおすすめツール・動画・本
それでは、さっそく始めていきたいところですが、その前にこの章の説明を。
まず、【HTML&CSS】は６STEP＋本番。
今日からの2週間で、あなたはWEB制作において必須言語であるHTML＆CSSというマークアップ言語を習得し、その後に実際の案件に応募します。
６STEP スケジュール
・STEP１：ドットインストールで雰囲気をつかむ（約３０分）
・STEP２：Progateで勉強（約３日）
・STEP３：YouTubeで復習（約１日）
・STEP４：本で復習＆サイト作りに挑戦（約３日）
・STEP５：デザインカンプのコーディングに挑戦（約３日）
・STEP６：ポートフォリオ作成（約４日）
STEP１～STEP４でHTMLとCSSを理解します。
STEP５で総復習し、STEP６で自分のポートフォリオを作ります。
STEP１からSTEP４までで７日程度。
STEP５からSTEP６まででさらに７日程度を想定しています。
人によって一日あたりの勉強時間は異なりますから、あっという間に進められる方はどんどん先へ進んでいただいて構いません。
逆にこの目安よりも時間がかかる場合は、無理する必要はありませんので、倍の一ヶ月を目安にしてください。
それも無理という方は、もしかすると十分な学習環境を捻出できていないかもしれません。
もう一度、一日の時間配分を検討してみましょう。
STEP１：ドットインストールで雰囲気をつかむ
それではスタートです！
最初はそもそも「HTML＆CSSって何なのか？」をざっくり学びます。
ここで登場するのがドットインストール。
１本２分前後の短い動画で解説してくれる定番サイトで、HTMLなどの基礎的なことについては無料で閲覧可能です。
HTMLに関しては３０分ほどですべて観終えることができますので、忙しい方でも確実に学習できます。
このときに、動画を観ながら実際に自分でテキストエディタにコードを書いてもいいですが、同じような作業をSTEP 2で行うので、ここは本当に観るだけでいいです。
そして、この時点で「プログラミングって思ってたより簡単じゃん」と思えたあなたには、控えめに言ってプログラミングの才能があります。
多くの人はこの時点で「面倒」とか「ややこしい」などといった拒否反応が出るらしいので、ここでプログラミングを嫌いにならなかったのなら、もう立派に僕たちの正式な仲間です（笑）
ぜひ最後まで走りきっていただいていので、諦めかけたらいつでも質問してくださいね。
勉強方法の再確認
ここで前の章の内容を思い出してください。
60％理解したら次に進む、でしたね。
ドットインストールの動画を観るときも、一本の動画を３回も４回も繰り返す必要はありません。
あくまでも「何が出来るのかを知ること」がSTEP１の目的です。
ここまで頑張ったら、STEP１は終了です。
次へと進みましょう。
STEP２：ProgateでHTML&CSSのFlexbox編まで挑戦
独学でプログラミングを勉強する上で、誰もが必ずお世話になるのがProgate。
無料でも各言語の触りくらいは学べますが、有料版は月額９８０円で様々な言語を開発環境を用意せずに学ぶことが出来る、初心者にとことん優しいサービスです。
「このサイトの登場でプログラミング学習のハードルはかなり下がった」と、ホリエモンもまこなり社長も言ってました。
HTMLやCSSくらいならテキストエディタをダウンロードすればいいだけですが、サーバー上で動くPHPとかになってくると色々と事前準備が大変なので、Progate登場以前はそれだけでハードルが高かったはずですからね。
ちなみに、僕もプログラミングを勉強しようと決心したまさにその日にProgateに課金しましたが、今となっては人生最良の決断だったと本気で思っています。
ここで学んだ基礎知識とここで得た自信が、現在の僕の大きな基盤ですし、そう考えている人は僕だけじゃないはず。
最終結果はこんなです。
Ruby以外は、必ず挑戦してほしいところ。
約10週間で10言語を学び、その内の1言語はWEB制作に不必要だと悟り、放棄しました（笑）
HTML&CSSに挑戦
とにかく僕たちにはProgate様がいらっしゃるので、ここからは実際に手を動かしつつ「HTML＆CSS」という講座にチャレンジしましょう。
休みの日に朝から一気に全部やるのもありですし、僕みたいに朝起きて１講座ずつやるのもありですが、後者のパターンでもだいたい３日もあれば余裕で学習できる量です。
「学習コース」と「道場コース」に分かれていて、「道場コース」というのは応用問題です。
もちろんここでも、検索して答えを探しながら挑戦して大丈夫です。
たまに「Progateの道場コースで挫折した」などといったツイートも見かけますが、恐らくは真面目に自分の実力を推し量ろうとして、記憶している知識だけで道場に挑んでしまったんだと思います。
僕たちはネット上の知識を総動員して、道場を破っていきましょう（笑）
Flexbox編
Progateにおいて、HTML&CSSの最終章は「Flexbox編」です。
この「Flexbox」とはCSSをつかったレイアウト方法のことです。
「好きな位置に好きなものを配置できること」がWEB制作において必須スキルとなりますが、Flexboxはそのために必ず知っておくべき知識ですので、決して無視せずしっかり挑戦してください。
ここまで終わったら、次のステップに進みましょう。
STEP３：たにぐちまことさんのYouTubeで理屈を学ぶ
ここまで「60％理解したら次に進んでください」と言ってきた僕ですが、この辺で一旦立ち止まり、頭の中を整理していきます。
STEP 3では動画、STEP 4では書籍で復習しましょう。
ということで、ここで観るのがたにぐちまこと：@seltzer さんのYouTube。
控えめにいって、超有料級の動画です。
CSS Gridなどなど、Progateでも学べなかったとても有益なことをさらっと解説してくれます。
これこそが僕のとっておきであり、独学の要！
たにぐちさんは小学生の頃からプログラミングに触れてきたという根っからのエンジニアの方ですが、とにかく説明が丁寧で分かりやすいのが特徴。
Progateでなんとなく分かった気になっている知識を、ここで理屈から説明してもらうことでしっかりと学び、理解を深めましょう。
観れば観るほど、無料でいいのかなと心配になりますよ（笑）
HTML編の７本とCSS編の９本を観て、ここまでの復習を行いましょう。
ちなみに余談ですが、僕は動画で学ぶときに必ず1.5～2倍速で観ています。
集中力が高まりますし、単純に時短にもなるので、もしよければ真似してみてください。
ここは１～２日で終えられると思いますから、サクッとやって、次のステップへ進みましょう。
STEP４：「世界一分かりやすい参考書」でWEBサイト作りに挑戦
学習開始からここまでで、だいたい３～４日程度かと思います。
残りの約１０日はとにかくコードを書きましょう。
ここでは世界中で翻訳された解説書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を読みながら、しっかりとしたサイトを作っていきます。
信じられないかもしれませんが、ここまで勉強したあなたには既にサイトを作る十分な基礎知識が備わっているんです。
なので、ここからはアウトプットを続けて学んだ知識を自分の力に変えていきましょう。
この本はとにかく解説が丁寧で、中学生でもこの本を読みながらHTMLとCSSを学べるくらいですから、まさに初心者にはうってつけの一冊です。
逆に背伸びして少しでも小難しい本を買ってしまえば、そこで挫折することになりかねないので要注意。
「初心者にも優しいわかりやすい説明」と「少し慣れてきたときにめっちゃ助かる豆知識が網羅されている」というのがポイントです。
もちろん分からないことはいつでも検索すればいいのですが、紙の本ならデバイスの充電なども心配することなくいつでも確認できますから、WEBも本も上手に活用して、時間を無駄にせずに勉強していきましょう。
この本では、実際にWEBサイトを作りながら体系的にWEB制作を学べます。
ここまではテキストエディタも使わずに進んできましたが、いよいよ本格的になってきますね。
１～３日を目安にWEBサイトを完成させましょう。
ちなみに、僕の２つ目のポートフォリオはこの本を参考にしながら作成したものです。
いま見るとひどい仕上がりですが（笑）、当時は自分でサイトを作れたことに感動していました。
自動返信の問い合わせフォームに関してはPHPの知識が必要ですが、それ以外はこの本に出てくるサンプルサイトを参考にしています。
STEP５：デザインカンプのコーディングに挑戦
ここまでたどり着いたあなたはもう立派なプログラミング初心者です（笑）
多くの人が「難しいそう」と考えているプログラミングの世界に、しっかりと足を踏み入れています。
折り合えし地点であるここからは、これまでに学んで知識を総動員させながら有意義な７日間を過ごしましょう。
ということで、デザインカンプに挑みます。
デザインカンプとは？
「デザインカンプ」とは、デザインの完成見本図のことです。
実案件では２つの目的でデザインカンプを用意するのですが、今回はあくまでコーディングの練習教材として使用しましょう。
これに挑戦することで、ここまでに身に着けたHTML＆CSSの基礎知識をしっかりアウトプットして、実案件さながらの脳の使い方も体験できます。
覚悟を決めて挑みましょう！
デザインカンプを用意する理由
①：クライアント様との認識のズレを防ぐため
②：制作サイドでの認識のズレを防ぐため
デザインカンプは無料のもので良い
デザインカンプも色々ありますが、まずは「デザインカンプ 無料」で検索しましょう。
すると、こんな感じで無料のデザインカンプが出てきますので、ありがたく頂戴して、実際にコーディングしてみてください。
どんなコードを書いても大丈夫です。
大切なのはデザインカンプ通りであることと、サイトとしてしっかり使えること。
このSTEP５では、シンプルなLPのデザインカンプの挑戦に４日という時間を設けていますが、実案件ではこれを２日前後でコーディングできると理想的です。
ひとつの目安としてご参考ください。
STEP６：自分のポートフォリオを作る
ここまで出来たら、もうポートフォリオを作る力は十分身についています。
その実力を示すために、STEP 5で作ったLPを利用して、自分のポートフォリオサイトを作ってみましょう。
HTMLとCSSをいじるくらいくらいなら余裕ですよね？
サイトの画像や文章を書き換えたら、サーバーにアップロードして完成です。
文章に関しては、色んな人のポートフォリオを見比べて、自分なりの書き方を考えましょう。
WEBライティングについては、後日落ち着いてから学んでOKです。
デザインはパクってOK
ちなみに、コンテンツの配置などはデザインカンプをパクってもOKです。
大切なのは中身。
完成したポートフォリオを誰かに見せる際に、「こだわったポイント」を説明できることを念頭に工夫みましょう。
ただひとつだけ注意点が。
デザインにこだわりすぎないでください。
WEBデザインの学習をしていない状態で悩んでも、イケてる答えはひねり出せません。
自分で納期を決めて、それに間に合うように自分のコーディング力と検索力を総動員させると、効率も考えた作業ができて、本番を意識した練習にもなります。
いすれにしても、ここまでに学んだ基礎知識をフル動員させつつ、分からないことはググり倒し、最初の難関を乗り越えてください！
サーバーを用意
コーディングが終わっても、まだ作業は終わりじゃありません！
サーバーにアップするという最後の仕事が残っていることをお忘れなく。
サーバーに関しては、そもそもどこと契約すべきか？という論争が絶えませんが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバー一択でしょう。
マナブさんのようなインフルエンサーたちも、世の制作会社も、WEBクリエイターさん達も、ほぼみんなエックスサーバーを使っていますし、分からないことがあっても検索すればすぐにネット上で答えが見つかるので、初心者でも独学でどうにかできるという大きなメリットがあるからです。
ただし、どうしても安く抑えたいという方にはロリポップ。
月額250円のライトプランでも十分機能しますし、速度が気になるならハイスピードプランがありますが、それでも月額はたったの500円という最強コスパ。
この辺りは、ご自身のお財布とよーくご相談くださいませ。
本番：案件に応募してみる
さて、デザインカンプをコーディング出来るほどの知識を身に着け、ポートフォリオも完成したとなると、もう実案件に挑戦できる段階にまでたどり着いていますね？（笑）
少なくとも完全ド素人ではなくなったのなら、さっそくクラウドソーシングに登録して、案件探しをはじめましょう。
案件の獲得方法などは別記事にまとめていますが、おすすめの方法をまとめると以下の４つ。
▶まずはクラウドソーシング内での実績作り（アンケート案件などで実績を１～２件作る）
▶できそうな案件（作業工程を7割イメージできる案件）に漏れなく応募
▶Facebookなどで、知り合いにWEB制作ができることを知らせる
▶Twitterで、WEBデザイナーやコーダーを必要としている人を探す
とにかく案件獲得については、行動するのみ！
２～３件応募して挫折してしまう方がいますが、成功者は少なくとも100件以上に応募しているものですし、中には1000件応募して３～４件から返信をもらえたという人もいます。
つまり、とにかく応募しまくり、応募しまくる中で自分の提案を洗練させていき、仕事を勝ち取るのです。
ちなみに、僕の初案件はイラストレーターをやっている高校時代からの友人に頼んでもらったWordPress案件でした。
WordPressが何なのかもわかっていませんでしたが、とりあえずググり倒して、本を買って、勉強しながら作ったことも今となっては良い思い出です（笑）
応募の目安
いずれにせよ、実績のない初心者が案件を獲得するのは至難の業ですが、どうか腐らず何度でも応募し続けましょう。
50回断られたら一人前です（笑）
先程も書きましたが、大事なことなのでまた書きます。
とにかく案件獲得については、行動するのみ！
応募して応募して応募し続けましょう！
ちなみに、応募時のポイントは３つ。
▶完成までの道すじが７割くらいイメージできる
▶応募者数は気にしない（他の応募者もだいたい初心者なので）
▶誤字脱字の多い募集はスルーする（経験上、コミュニケーションに難のあるクライアントが多かったです）
ここまでを1分でまとめましょう。
ということで、ここまでが「【HTML&CSS】完全独学で勉強する方法とおすすめツール・動画・本」でした。
ちなみに僕は、このあとでまたProgateに戻り、JavaScript、jQuery、Sass、PHPを勉強して、2つ目のポートフォリオを作りました。
作ったサイトのコードを公開してさらに内外にアピールするために、Gitも勉強しましたし、サーバーのこともしっかり知っておこうと思いSQLも学習しましたが、そこまでで独学開始からだいたい2ヶ月でした。
出来ることが増えたら、自分のポートフォリオをカスタムするなどしてアウトプットを繰り返し、インプットしたことを着実に自分の力に変えていくというのは、ここまでの6 STEPと変わりません。
案件獲得にはプログラミングの技術のほかに、「営業スキル」「相場の把握」などの勉強も必要なので、まだまだ学ぶことは多いですが、そのあたりも当ブログで僕のやり方を公開していますので、ぜひご参考ください！
【jQuery】完全独学で勉強する方法とおすすめ本
jQuery（ジェイクエリー）とは、JavaScriptというプログラミング言語をもっと簡単に扱えるように設計された「ライブラリ」と呼ばれるものの一種。
これを使いこなすことで、サイトに動きをつけられます。
PCでもスマホでも、画面の上からポップアップが出てきたりしますが、あれを簡単に実装するためのものです。
もちろんjQueryもProgateでしっかり基礎を学習できますが、問題はそのあと。
「Progateで基礎は学んだけど、そのあと何すればいいの？」
僕自身、ProgateでHTML&CSS～JavaScript～jQueryと学習したあとに、なんとなくわかった気になっただけで、学んだ知識をどう活かせばいいかわからず困り、色々と模索しました。
ここでは、そんなjQuery難民のために、Progate後の学習手順を解説していきます。
それでは、早速いってみましょう！
jQuery学習の３STEP
今回はシンプルな３STEPでjQueryを学んでいきます。
①実際にコードを試してみる
②本で復習する
③プラグインを知る
これだけです。
他の記事でも書いているとおり、jQueryの学習においても一度ですべてを理解する必要はありません。
とりあえずチャレンジして、分からないことは分からないまま次に進んで、ひととおり学習し終えてから、振り返ってみると分かってたりします。
それでも分からないことはありますが、全体を把握した上で挑めばすんなり理解できるものですから、とにかくいちいち立ち止まらないように気をつけましょう。
STEP１：ポートフォリオの作成／カスタマイズ
ということで、jQueryを使ってみましょう。
どんな知識もアウトプットしないと身につきませんからね。
Progateでひととおり学んで、jQueryとは何なのか？何が出来るのか？くらいは理解できていると思います。
それならその知識を活かして、自分のポートフォリオを作ってみましょう！
すでにポートフォリオを作っている方は、それをいじる程度でも大丈夫です。
もしも何を試せばいいかもわからない場合は、ポートフォリオに「スライダー」と「アコーディオン」の実装をおすすめします。
「jQuery スライダー」などと検索し、自分のポートフォリオやサンプルサイトに実装してみてください。
実案件でも当たり前に出てきますし、これを自分のコードで実装できると、のちのち強みになりますからね。
うまく行けば、HTML＆CSSとは異なるプログラミングの楽しさを味わえますよ。（自分すげー！ってなります）
おすすめ本とその読み方
jQueryを実際に試したあとは、復習の時間です。
僕のおすすめは本での復習。
Progateに戻ることも否定はしませんが、同じ問題に何度も挑戦したところで、得られるのは慣れだけですからね。
ここでの参考図書は我らがSB Creative出版・株式会社シフトブレイン著『jQuery 最高の教科書』です。
jQuery関連の書籍はたくさん出ていますが、そんな中でこの本は「初心者が参考にできるちょうどいいレベル」なんです。
実際に、WEB制作で単価何十万円という案件を対応するときにも役に立つような、数々の実例が充実しているので、長い目で見ても最高の一冊だと思ってます。
ここで大切なのが、その読み方。
「最初から順番に読む必要はない」というのが持論なのですが、この本も読みたいとこだけを読めば大丈夫です。
jQueryの基礎知識と基本テクニックを復習するなら１章と４章だけ読んでもいいですし、ギャラリーページを作りたいからと６章だけ読んでもいいんです。
ゲームの攻略本と同じで、いま知りたいことだけを調べて、本を読むことに必要以上の時間を使わないように気をつけてください。
どんなときも、インプット：アウトプット＝３：７です。
ちなみに、このページを見るとこの本でどんなことを学べるかがわかります。
書籍にはこれらのコードが全部載っているので、ここに書かれているコードを自分のポートフォリオやサンプルサイトで試し尽くして、どんどん経験値を高めましょう。
ライブラリやプラグインを検索してみる
ここまではjQueryの基礎学習を行ってきましたが、最後は実践を想定した話です。
これは僕自身も初案件に取り組んでいたときに感じたことですが、プログラムをイチからすべてを自分で組み上げるのはしんどいんですよね。
なので、すごくマジメな話、既にライブラリが存在しているならありがたくパクりましょう。
「jQuery ◯◯（機能名）」などと検索してみると、多くの方が機能ごとにプラグインのまとめ記事を書かれているので、そういうものを参考にしながら、プラグインごとの特徴を知っておくことも、作業効率のアップにつながる大事なリサーチです。
案件を引き受けてから調べてもいいですが、締め切りまでの時間を考えたら事前にできることはやっておいて損はないですよね。
ちなみに、定番のサイトはcdnjs。
英語ですが、3,900個以上のライブラリが検索できるようになってます。
基本的にはここからcdnのリンクをコピペするだけで、スライダーとかフォントとかだいたいの機能を実装可能ですよ。
また、WordPress開発を行う上で役に立つ「プラグイン」を知っておくことも大切。
プラグインのまとめサイトとして、僕が最近一番感心させられたのはこれ。
画像を使ったプラグインだけを200個以上も紹介しています。
ブログを書いてる身としては、作業工程を想像するだけでも恐ろしい…
ここまでを1分でまとめましょう。
ということで、ここまでが「【jQuery】完全独学で勉強する方法とおすすめ本」でした。
ここまでで、独学の基本的な動きは身についてきたかと思います。
少なくとも、独学を楽しめていませんか？
こうなったら、間違いなくあなたはWEB制作に適正のある方ですから、すでに実案件に挑めるくらいの技術力と検索力は身についています。
ただし、WEBの知識が少ない／まったくない人でも管理できるサイトを作らないと、仕事になりませんので、もうひとつ勉強しておくべきものがあります。
それが、WordPress。
【WordPress】完全独学で勉強する方法とおすすめ動画・本
WordPress（ワードプレス）とは、誰でも無料でサイトやブログを作成できるソフトウェアのこと。
プラグインと呼ばれる拡張機能を使って、難しいコードを使わずにお問合せフォームなどの機能を設置できるなど、WEB制作の知識がない方にとっても便利なツールです。
WEB制作の現場では、サイトのデザインや機能を考え、コーディングすることで、クライアントにとってオリジナルのサイトを効率よく作ることができるため、定番の案件として毎日必ず募集があります。
ここまで独学してきたあなたなら、WordPressの名前くらいはご存知のはず。
しかし、まだ実際に使ったことはないでしょうから、ここでは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化を学ぶ３STEP ①
初日はYouTubeで軽く勉強しましょう。
今回はアキユキさんの解説動画で「WordPressでサイトを作るとはどういうことか？」を学びます。
観た方は激しく頷いてくれると思いますが、Udemyなどで有料コンテンツ化してもいいくらいの内容です。
僕はこれを観て、「スクールに通わなくてもぜんぜん大丈夫じゃん」と思いました。
注意点としては、ここでの目的はあくまでも「WordPressで何が出来るのか？何をすれば良いのか？」という大まかな流れを掴むことであって、この動画で完璧にマスターしようとする必要はないということ。
難しそうに見えて、実は難しくない。それがWordPressです。
WordPress化を学ぶ３STEP ②
STEP①の動画でなんとなく雰囲気は掴めましたか？
ここからは本を参考にしながら、実際に静的サイトをWordPress化していきます。
というこでまずは参考図書をご紹介。
WordPress 導入とサイト制作の教科書 改定第二版
WordPressを解説している本は非常にたくさんありますが、WordPress化について細かく丁寧に解説している本って案外少なかったり、情報が古かったりします。
その点、この本は2020年に内容が改定されていますし、元々良書として知られていた本なだけに非の打ち所がありません。
とりあえずはじめから順番に読んでいくのが良いですが、ここでも、はじめからいきなり熟読する必要はありません。
もう聞き飽きたかもしれませんが、とにかく知りたい部分だけを読めばOKです。
はじめから熟読して一回の読書ですべてを理解しようとすると、確実に学習効率が下がります。
「最初は６～７割くらい理解できればいいや」くらいの流し読みで進めましょう。
ということで、「初心者が挫折しないための読み方」がこちら ⇓
①：とりあえず「へー、そうなんだー」程度にLesson1～3を流し読み
②：Lesson4を流し読みした上で、サンプルデータを使ってブログ記事を書いてみる
③：Lesson5を流し読みしてテーマとプラグインについて理解する
④：Lesson6を流し読みした上で、サンプルデータを使ってプラグインをいじってみる
ここまでゆる～くやってみましょう。
ゆる～く挑戦しても、とりあえずWordPressで記事を作成できるようになります。
自分のブログを作るついでにやってみるのもいいですね。
次に進みましょう。
⑤：Lesson7を読みながらローカル開発環境の作り方を学ぶ
⑥：Lesson8でPHPについて学ぶ（Progate等でPHPを学んだ人はスルーしてOK）
⑦：Lesson9～10を流し読みした上で、サンプルデータを使ってサイトを作ってみる
⑧：Lesson12を参考に作ってみたサイトを本番環境で表示させてみる
ここら辺は気合いを入れてがんばるところになりますが、やることは丁寧にすべて書かれているので、順番に真似していけば、つまずくことはほぼなさそうです。
本はこのあともまだLesson15まで続きますが、ここから先はサイトの管理・運営に関することは中心なので、「WordPressでのサイト制作」についてはここまで十分。
WordPress化を学ぶ３STEP ③
最後は、実際にWordPressを使ってサンプルサイトを作ってみましょう。
ブログを起ち上げるのも良いです。
ここまででインプットしたことを、サンプルサイト／ブログ制作を通じてアウトプットすることで、着実に自分のスキルアップをすると同時に、自分のポートフォリオにも載せられる「実績」も増やせますよ。
分からないことがあっても、WordPressに関する記事は無数に存在しているので、検索して何も出てこないときは自分の検索ワードを疑う方が良いかもしれません。
それくらいWordPressは世界中で利用され、多くの人が学び、質問されてきたので、必ずあなたの疑問を解決できる記事に出会えるでしょう。
ここまでを1分でまとめましょう。
ということで、ここまでが「【WordPress】完全独学で勉強する方法とおすすめ動画・本」でした。
実際にチャレンジしてみていかがでしたか？
少なくとも、「出来ないこと」ではなかったと思います。
同じPHPを使ったプログラミングでも、「自動返信機能付きの問い合わせフォーム」をイチから実装するのとはわけが違いますからね。
基本的にWordPress独自の構文に慣れてしまえば、オンラインマニュアルを見ながら進められるようになりますし、これで10万円以上の案件を受注できるようになると考えたら、非常にコスパがいいと思いませんか？
このあとさらに「カスタム3兄弟」の使い方を学べば、本格的なコーポレートサイトも作れるようになり、いよいよ案件ひとつで20～30万円くらいを見積もれるようになります。
がんばる価値のあることだと思いますから、ぜひとも挑戦してみてください。
【Shopify】完全独学で勉強する方法とおすすめ記事
これまではWordPressまで勉強しておけば稼げたわけですが、最近そこに変化が起き始めています。
Shopify（ショッピファイ）をご存知ですか？
Shopifyとは、誰でも簡単にECサイトを作れる仕組みとして徐々に名を広め、現在ではWEB上にあるサイトのうち３％はShopifyで構築されているといわれています。
WordPressの40％と比較すると少なく思えますが、16億個以上といわれている全世界のWEBサイトの中で、そのうちの３％ですから、約480万個のサイトがShopifyで作られている計算です。
そして、この勢いは今後さらに増していき、WordPressからShopifyに乗り換える企業が出てきたり、Amazonに出店しないブランドがShopifyで自社ECサイトを起ち上げるなどの動きが注目されています。
そんなShopifyについて学び、ECサイトをデザイン～コーディングできるようになることで、作ったECサイトの売上の数％を毎月自動的に収益化できたらすごいと思いませんか？
そこで今回は、Shopifyでのサイト構築の基本的な方法について学びます。
Shopifyとは？を解説する記事は日本語でも増えてきましたが、開発者向けにそれを解説する記事はまだまだ少ないのが実情…
ということで、以下の記事をご参照ください。
Shopifyの基礎や初期設定方法、おすすめの拡張機能などはこの記事１本で学べるようになっています。
時代の流れに適応して、柔軟に収益を安定させていきましょう。
【まとめ】WEB制作 – 30歳からの完全独学ロードマップ
ということで、以上が「【WEB制作】30歳からの独学完全ロードマップ【1000時間独学した僕が解説】」でした。
ここまで読んでくださったあなたには感謝しかありません。
また、その熱意は本物だと思います。
ここまで読んでくださったからには、決して挫折してほしくありませんから、もし分からないことがいつでもご質問ください。
僕は即レスをモットーにしていますので、本業の時間以外はいつでも即返信いたします。
2020年2月11日から独学をはじめ、緊急事態宣言中の引きこもり時期も、本業再開後も、ひたすら独学し続け、勉強方法をブログにまとめ、日々の気づきをツイートし続けた今日までの1000時間。
それを経験し、大きな案件を掛け持ちできるようになった今だからこそ、年齢や学歴を理由に人生を諦めてしまっている方に伝えたいです。
30歳・高卒・完全未経験の僕でも、稼げるようになったこと。
誰にだって真似できる方法があること。
努力し続けた先で、誰かの役に立てること。
ここまで読んでくださったあなたなら絶対に大丈夫です。
努力し続けることで、必ず立派なWEB製作者になれます。
一緒にがんばりましょう！
最後まで読んでいただき、本当にありがとうございます！
※独学方法に不安はありませんか？
▶自分の勉強方法に自信が持てない
▶案件は獲得したいけど、どこまで勉強すれば応募できるかわからない
▶いくら案件に応募しても採用されない
こんな悩みは独学応援サロンで解決できます！
独学応援サロンは完全無料・退会自由のオンライン・コミュニティ。
「独学はひとりでやるもんじゃない！」を合言葉に、多くの独学者とつながり、みんなで情報を共有しながら、案件獲得を実現しています。
Twitterで「#独学応援サロン」で検索いただければ、サロンメンバーの声をご覧いただけますので、よろしければご覧下さい。
また、僕からよりパーソナルなマンツーマン指導を受けたいという方には独学応援メンターをご案内しています。
どちらにつきましても、詳細はリンク先をご参考くださいませ。
よろしくお願いします。
コメント