まったくの未経験・30歳から独学でWEB制作なんてできるの？
スクールに通いたいけど、いきなり何十万円も払えない…
今回はこんな疑問に答えていきます！
本記事の内容
▶WEB制作は間違いなく独学できます（※条件あり）
▶独学に必要な考え方・準備
▶フォローしておくべきTwitterアカウント
▶HTMLとCSSを完全独学で勉強する方法・おすすめツール・本・動画
▶jQueryを完全独学で勉強する方法・おすすめ本
▶WordPressを完全独学で勉強する方法・おすすめ動画・本
▶Shopifyを完全独学で勉強する方法・おすすめ記事
本記事の信頼性
この記事を書いている僕は、2020年2月11日からプログラミングの学習をはじめ、4月にSEOの勉強と独学のアウトプットを兼ねてブログを開設。
WEB系フリーランスとしての活動を通じて学んだことを記事にし続け、他の独学者にとって最新のロードマップとなるブログを運営中。
2021年1月には、「ひとりでも多くの独学者同士をつなぎ、切磋琢磨しながらそれぞれの目標を達成できるサロン」を目指し、独学応援サロンを起ち上げました。
「独学方法に悩む人」や「案件を獲得できずに困っている人」の質問に、みんなで無限に答えて応援しています。
まえがき ～ここだけは読んでください～
断言します。WEB制作／プログラミングは独学可能です。
スクールに通うメリットも当然ありますが、「お金を節約したい」とか「仕事が忙しい」などの理由でスクールに通えない方も多いですよね。
僕も本業が忙しかったり、10万円以上の学費を支払う価値があるのかがわからなかったりして、「とりあえず独学で」という選択をしたわけですが、「やってみたら想像以上にできた」というのが正直な感想です。
また、僕が独学をはじめる前から「WEB制作者は増えすぎた」「WEB制作はオワコン」などと言われていましたが、そこは安心してください。
WEBサイトが毎年増え続けている一方で、WEB制作の独学に挑戦した人の95％は途中で断念しているようですし、独学しても営業力がなくて仕事にできていない人も珍しくなく、意外と人手は足りてません（笑）
「そんなにみんな諦めるなんて、どれだけ難しいの？」と思われるかもしれませんが、断念する原因の多くは勉強方法にあります。
60％理解できたらOK
もしかして、全部理解できるまで次には進まない派ですか？
正直、それは学習効率が悪い上に、WEB制作を仕事にしてからも作業に時間がかかることで、収益を安定させられない可能性があります。
だから、お願いです。
60％理解できたら次に進んでください。
多くのエンジニアの方々が口を揃えて仰っていることですが、マジメな方ほどこれが出来ず、結果的に勉強が辛くなり、独学を断念してしまうというケースが本当に多いです。
僕もこれまで多くの同期を失いましたが、ほぼみんなこのパターンでした。
一生懸命取り組んでいたのに、本当にもったいないですよね。
でも、なぜ理解が完全ではない状態で次の勉強に進むかというと、知識が身につくのはインプットではなくアウトプットの過程だからです。
どんなにテキストを読み込んでも、なかなか知識としては身につきません。
ましてWEB制作なんて情報量は膨大ですから、それをすべて覚えようとするなんて絶対に無理。
大切なのは、最低限の情報をインプットした状態で、難しい課題に直面したときに迅速な正しい判断ができることです。
「どう調べれば解決の糸口を見つけられるか？」は、多くの課題やサイト模写に挑み、サンプルサイトを作り続ける過程でしか学べないものです。
インプットよりアウトプット
ということで、インプット：アウトプット＝３：７が大前提です。
貴重なあなたの時間は「テキストを読む」などのインプットよりも、「実際に自分でコードを書いてみる」などのアウトプットに使いましょう。
具体的な流れは以下のとおり。
①：まずはその言語で何が出来るのか？勉強すべき言語なのか？を確認する
②：実際に自分でコードを書いて、どう表示されるかを確認する
③：②で出た不具合を修正する
①がインプットで、②と③がアウトプットですね。
特に③が大変ですが、最も大切なパートでもあります。
③に取り組むことで、自分が知らないことが明確になり、それをひとつずつ解決していく過程であなたは一歩ずつ着実にWEB制作者へとなっていくわけです。
解決方法は様々ですが、インターネットで検索したり、本で調べるのはもちろん、Twitterで「〇〇について教えて下さい！」とSOSをツイートするのもありですし、僕に質問してくださっても大丈夫です（教えたがりなので）
ちなみに僕は、独学初期にサンプルサイト制作で非常に苦しみ、ひとつの課題に３日以上悩んだこともありましたが、それを解決できたことでレベルアップしたと同時に、それは大きな自信にもつながりましたから、やはり挑戦してよかったと今でも考えています。
当たり前ですが、覚えていない知識はどんなに頭を捻っても出てきません。
でも、WEB制作はいつでも分からないことを検索できるんです。
言ってしまえば、答えを見ながら仕事ができるので、独学中もどんどん答えを探して、見つけたやり方を試し、多くの経験をストックしていきながら、いざというときの課題解決につなげましょう。
インプットに必要以上の時間を掛けるべきでない理由は、ここでご理解いただけたと思います。
本記事は完全初心者がWordPressを学習～理解するまでの数カ月分の手順を説明しています。
「一気に最後まで読む」というよりも、あなたの状況に合わせて、その都度必要な箇所をご参考いただければと思います。
わからなことがあれば、いつでもご質問ください。
独学は決して孤学ではありません。ぜひ案件獲得まで一緒にがんばりましょう！
【準備】未経験者がWEB制作を独学するために必要なコト
学習環境の確保
まずは毎日勉強できる環境を確保しましょうね。
これが本当に大切。
「新しいことをはじめる」というのは非常にすてきな判断ですが、それをやり続けられなくては本末転倒です。
あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中にプログラミングを勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。
一般的には「合計３００時間の学習で案件を獲得できるくらいになれる」といわれていますから、300時間達成を最初の目標としつつ、まずは「はじめること」、次に「続けること」が大切です。
「仕事に疲れて夜は勉強できない」という方は、出勤前の一時間を勉強時間にするなど、意地でも自分に勉強するチャンスを与えてあげてください。
ちなみに僕の場合、「勉強は明るいうちにやる」と決めています。
人生で一度も睡魔に勝てたことがないので（笑）
ちなみに、僕が「どうしても集中できない！」というときにやって、効果があったことをリストアップしておきます。
ご参考ください。
独学者が必ずフォローしておくべきTwitterアカウント
独学する上で、先輩たちのツイートをチェックすることも重要です。
ここでは、その中でも特に初心者にとってスキルアップに繋がるツイートをしてくれる方々をご紹介します。
▶たにぐちまこと：@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５：YouTubeで学習＆サイト作り（約３日）
・STEP６：ポートフォリオ作成（約２日）
STEP１～STEP４でHTMLとCSSを理解します。
STEP５でBootstrapを学び、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５：YouTubeでBootstrapを勉強
ここまでたどり着いたあなたはもう立派なプログラミング初心者です（笑）
多くの人が難しいそうだと考えているプログラミングの世界に、しっかりと足を踏み入れています。
ここからは、自分の実力を示せるようになるための７日間を過ごしましょう。
ということで、Bootstrapを勉強します。
Bootstrapを知る
Bootstrapとは、いわゆるフレームワークと呼ばれるもののひとつで、ここまで学んできたCSSをもっとシンプルに使いこなせるようになる画期的なものです。
まずはYouTubeで「何が出来るのか？」と「どう使うのか？」をサクッと学んでいきましょう。
ここでもやはり、たにぐちまことさんの動画が非常にわかりやすいです。
Bootstrapを使ってみる
たにぐちさんの動画を観て、なんとなく便利であることがわかったらあとは試してみるのみ！
ということで、参考にするのはこちらの動画。
解説されているのはUdemyで講師もされている方ですが、説明が丁寧すぎて英語なのにものすごく理解しやすいレベル。
英語がわからなくても見様見真似でサイトを作れるので、まずはこの動画を観ながら、Bootatrapを使用したWEBページを作りましょう。
ところで、ここまでコードを書いていてどうですか？
「楽しい！」と感じていただけているなら、自分の才能を認めてください。
この時点ではまだまだプログラミング初心者ですが、それと同時に、あなたは既に「普通の人が出来ないこと」が出来るようになっています。
ここまでの努力は間違いなく素晴らしいですし、これからもっと凄くなれるんです。
なので、このSTEP 5も着実にやり遂げて、最終章であるSTEP 6に挑戦してもらえると幸いです。
ちなみに、僕はこの動画を観ながらだいたい６時間くらいかけてWEBページを完成させましたが、これを完成させたことが最初の大きな自信につながりました。
色々と間違えましたが、一番多かったミスはスペルミスでしたね（情けない…
正直、Bootstrapだけでサイト作ってしまうのも味気ない気がしますが、大切なのはいつだって顧客目線です。
「完成度」はもちろん、「納期」や「見た目のインパクト」で依頼主に満足してもらえるためにも、Bootstrapは知っておくべき大切な知識だと思ってます。
グリッドは本当に便利ですしね。
ここまでできたら、いよいよ最終章へお進みください。
STEP６：自分のポートフォリオを作る
ここまで出来たらもうポートフォリオを作る力は十分身についています。
その実力を示すために、STEP 5で作ったWEBページを利用して、自分のポートフォリオサイトを作ってみましょう。
HTMLとCSSをいじるくらいくらいなら余裕ですよね？
サイトの画像や文章を書き換えたら、サーバーにアップロードして完成です。
文章に関しては、色んな人のポートフォリオを見比べて、自分なりの書き方を考えましょう。
おすすめの無料サイト
画像は手持ちのものでも構いませんし、Unsplashなどでフリー素材を拾ってきてもOKです。
イラストなら当ブログでも多用しているstoriesがオススメ。
ロゴを作るならLogo Maker。
オリジナルのサムネイルを作るならCanva。
ファビコンを作るならicon8。
色々と画像サイズを変えたいならPEKO STEPといったとこでしょうか。
もちろん全部無料で使い倒しましょう。（稼げるようになったら、それまでの感謝の気持を込めて寄付すればいいと思います
おすすめのサーバー
サーバーに関しては色んな論争がありますが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバー一択でしょう。
制作会社も、世の中のWEBクリエイターさんも、だいたいみんなエックスサーバーを使っているので、分からないことがあっても検索すればすぐにネット上で答えが見つかるのもエックスサーバーだったりします。
初心者にとってはそれが一番のメリットかも。
こういうとこでも時間を無駄にしたくないですね。
デザインはパクってOK
ちなみに、コンテンツの配置などはほぼテンプレートをパクってOKです。
大切なのは中身。
完成したポートフォリオを誰かに見せる際に「フォントのここにこだわってオリジナリティを出しました」とか「スマホでの表示では特にここにこだわりました」などといった、自分なりのポイントを説明することを念頭に工夫してみましょう。
ただひとつだけ注意点が。
デザインにこだわりすぎないでください。
WEBデザインの学習をしていない状態で悩んでも、イケてる答えはひねり出せません。
ということで、「Agency」とか「Freelancer」「Grayscale」あたりの無料テンプレートを使いましょう。
自分で納期を決めて、それに間に合うように自分のコーディング力と検索力を総動員させると、効率も考えた作業ができて、本番を意識した練習にもできますよ。
もちろん、僕のポートフォリオをがっつりパクっていただいてもOK！
腕を試したい方はデベロッパーツールで分析していただければと思いますが、答えを見ながら組み立てたい方にはデータを配布しますので、いつでもご連絡ください。
その後①：模写＆デザインカンプに挑戦
自分のポートフォリオを完成させたら、基礎学習の第一段階クリアです。
本当にお疲れさまです。
ここまでで基礎はしっかり学べていますから、あとはひたすらアウトプットを繰り返すのみ！です。
ということで、「模写」に最低に挑戦しましょう。
正直、実案件では動いているサイトを参考にコーディングなんてできないので、「サイト模写は無駄だ」という意見もありますが、僕は経験する価値があると思っています。
というのも、僕自身が自分の技術に自身を持てたのはサイト模写に成功したときでしたし、独学者にとってみれば、あのまったくの素人だった自分が世の中に存在するプロが作ったサイトを再現できるだけでも、それまでの学習に意味があったと確信できるからです。
ということで、I/O3000などで自分好みの（シンプルで）イケてるサイトを探して、自分の練習環境で模写してみましょう。
さらにそのあとには、デザインカンプからのコーディングに3回は挑戦します。
こんな感じの無料のデザインカンプを頂戴して、実際にコーディングしてみてください。
これを経験することで、すでに確定しているデザインをコーディングする、所謂「コーディング案件」に対応できるようになります。
それだけでもだいたい５万円ほどの案件になるでしょうから、かなり価値ある練習だと思いませんか？
その後②：案件に応募してみる
模写もいくつか経験し、少なくとも完全ド素人ではなくなったのなら、さっそくクラウドワークスなどで仕事を探すべきです。
案件の獲得方法などは別記事にまとめていますが、ひとまずおすすめの方法は以下の３つ。
▶クラウドワークスで、できそうな仕事に応募しまくる
▶Facebookなどで、知り合いにWEB制作ができることを知らせる
▶Twitterで、WEBデザイナーやコーダーを必要としている人を探す
ポートフォリオや提案文に自信が持てないようであれば、いつでも僕が拝見しますので、お気軽にご連絡ください。
ちなみに、僕の初案件はイラストレーターをやっている高校時代からの友人に頼んでもらったWordPress案件でした。
WordPressが何なのかもわかっていませんでしたが、とりあえずググり倒して、本を買って、勉強しながら作ったことも今となっては良い思い出です（笑）
応募の目安
いずれにせよ、実績のない初心者が案件を獲得するのは至難の業ですが、どうか腐らず何度でも応募し続けましょう。
50回断られたら一人前です（笑）
ちなみに、応募の目安は３つ。
▶完成までの道すじが8割くらいイメージできる
▶応募者数は気にしない（他の応募者もだいたい初心者なので）
▶誤字脱字の多い募集はスルーする（経験上、コミュニケーションに難のある方が多かったです）
まずはこの目安を参考に案件を選んで、応募してみてください。
ここまでを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製作者になれます。
一緒にがんばりましょう！
最後まで読んでいただき、本当にありがとうございます！
※この記事を読んでくださったあなたは、いつでも僕に無料で質問していただけます。
ブログの始め方はもちろん、WEB制作の独学方法や案件獲得に向けた提案の仕方など、僕が答えられることはいくらでもお答えしますよ！
ブログのコメント欄かTwitterのDMからご連絡ください。
よろしくお願いします。
コメント