独学方法がわかりません。スクールに通うべきかもしれませんが、いきなり何十万円も払う勇気もないです…
こんな疑問にお答えするために、完全独学でWEB制作を副業にできた僕の勉強方法をお伝えします！
- WEB制作の独学を成功させる３つの条件
- 独学に必要な考え方～準備
- 言語毎の完全独学方法、おすすめツール・本・動画
- WEB営業の基礎～学び方
2021年3月追記
独学当初より交流のある原さんから、非常にうれしいツイートをいただきました。
独学を続けていると、こうして仲間の優しさに触れられる瞬間もやってきますね。
「ロードマップは人それぞれ」です。
しかし、「スクールに通えず勉強方法を誰にも相談できない方」にとって、独学でWEB制作を学んで仕事にできている人の勉強方法は大いに参考になります。
そこで、本記事では独学でWEB制作スキルを身につけるために僕が取り組み、無事に仕事を獲得するに至った方法を22,159字でまとめました。
すべては、どうにかして人生を変えたい！と願う方の背中を押すために。
また、本記事はいつ誰に読んでいただいてもお役に立てるように掲載情報のアップデートを毎月実施しています。ご安心ください。
この記事があなたのお役に立てれば幸いです。
目次
まえがき ～30秒だけください～
断言します。WEB制作／プログラミングは独学可能です。
もちろん一番確実な方法はデイトラのようなスクールに通うことですが、「お金を節約したい」とか「仕事が忙しい」などの理由でスクールに通えない方も多いですよね。
僕も本業が忙しかったり、10万円以上の学費を支払う価値があるのかがわからなかったりして、「とりあえず独学で」という選択をしたわけですが、「やってみたら想像以上にできた」というのが正直な感想です。
また、僕が独学をはじめる前から「WEB制作者は増えすぎた」「WEB制作はオワコン」などと言われていますが、そこは安心してください。
WEBサイトが毎年増え続けている一方で、WEB制作の独学に挑戦した人の95％は途中で断念しているようですし、独学しても営業力がなくて仕事にできていない人も珍しくなく、意外と人手は足りてません（笑）
こう言うと「独学段階でそんなに諦めるてるなんて、どれだけ難しいの？」と思われるかもしれませんが、理由は2つだけです。
- 挫折した95％の大半が「やる気にない人たち」だった
- やる気はあったが、勉強方法を間違えていた
往々にしてこういう数値には「やる気のない人たち」も含まれているので、それを抜いて冷静に考えると、「WEB制作の独学に挑戦して仕事にできるまでになれる人」の確率は60％くらいかなと思います。肌感覚ですが。
一方で、「やる気はあるけど挫折した人たち」はほぼほぼ勉強方法を間違えていた人たちです。
これは独学応援サロンやメンターをやっていて本当にほぼ毎回感じることでもありますが、これから独学をしようかというあなたには同じ轍を踏んでほしくないので、以下に超大切なポイント３つをまとめました。
WEB制作にかぎらず、あらゆる勉強に当てはまる真理でもあります。
独学において最も大切なことは「目標設定」ですが、そもそもどこを目指せばいいかなんて分からないですよね。
だからこそ、独学をはじめる前に経験者に相談しましょう。
一番確実なのはプログラミングスクールの無料相談。
「自分の理想はWEB制作を学ぶことで叶えられそうなのか？」
「WEB制作を仕事にするために、何をどれくらい勉強すべきなのか？」
こうした疑問をクリアにすることで、独学するにしても、スクールに通うにしても、結果的に自分の人生を前進させる決断につながるわけです。
① 最短最速のスケジュールを考える
集中は長続きしません。
長期的な目標は負荷自体が小さい代わりに、道のりが長いので実現させるには卓越した自己管理能力と継続力、そして強い意志が必要です。
つまり、コツコツ継続できない普通の人が長期的な目標を立てた場合、ほぼ確実に挫折します。
だからこそ、「最短最速」にこだわるべき。
短期間だからこそ集中できますし、ストイックにもなれるんです。
ストイックでいるためには、好きなことを我慢するなどの「犠牲」を払う必要があります。
そんなことを長期間続けていたら、挫折するに決まってますよね？
モチベーションは上がらないですし、機嫌も悪くなって家族に迷惑を掛けることも…
また、最短最速で取り組んでいると結果も早く現れるので、軌道修正も早めにできます。
PDCAを一日単位で廻せるのでぐんぐん成長できます。
さらに、最短最速で結果を出せばどんな無名の低学歴でも注目されます。
多くの人が言い訳をして挑戦しないことに挑み、結果を出せば、目立って当然ですよね。
僕は本業の傍らで独学をはじめ、2週間でHTML&CSSの基礎を押さえ、翌週には最初のポートフォリオを作り、友人から初案件を受注したわけですが、成果自体がありきたりでも、期間がありえないほど短く、誰よりも先に結果を出した人は、その存在自体に希少価値が生まれるというわけです。
そして、注目されれば自ずと人脈が広がり、それまでの自分では想像もできないほど多くのチャンスが巡ってくるようになります。
だからこそ、最短最速にこだわる意味があるんです。
② 60％理解できたらOK
もしかして、全部理解できるまで次には進まない派ですか？
正直、それは学習効率が悪い上に、WEB制作を仕事にしてからも作業に時間がかかることで、収益を安定させられない可能性があります。
だから、お願いです。
60％理解できたら次に進んでください。
多くのエンジニアの方々が口を揃えて仰っていることですが、マジメな方ほどこれが出来ず、結果的に勉強が辛くなり、独学を断念してしまうというケースが本当に多いです。
僕もこれまで多くの同期を失いましたが、ほぼみんなこのパターンでした。
一生懸命取り組んでいたのに、本当にもったいないですよね。
でも、なぜ理解が完全ではない状態で次の勉強に進むかというと、知識が身につくのはインプットではなくアウトプットの過程だからです。
どんなにテキストを読み込んでも、なかなか知識としては身につきません。
ましてWEB制作なんて情報量は膨大ですから、それをすべて覚えようとするなんて絶対に無理。
大切なのは、最低限の情報をインプットした状態で、難しい課題に直面したときに迅速な正しい判断ができることです。
「どう調べれば解決の糸口を見つけられるか？」は、多くの課題やサイト模写に挑み、サンプルサイトを作り続ける過程でしか学べないものです。
③ インプットよりアウトプット
ということで、インプット：アウトプット＝３：７が大前提です。
貴重なあなたの時間は「テキストを読む」などのインプットよりも、「実際に自分でコードを書いてみる」などのアウトプットに使いましょう。
- 本や動画で「その言語で何が出来るのか？」「勉強すべき言語なのか？」を確認する
- 実際に自分でコードを書いて、どう表示されるかを確認する
- ２.で出た不具合を修正して、自分のスキルを向上させる
①がインプットで、②と③がアウトプットですね。
特に③が大変ですが、最も大切なパートでもあります。
③に取り組むことで、自分が知らないことが明確になり、それをひとつずつ解決していく過程であなたは一歩ずつ着実にWEB制作者へとなっていくわけです。
解決方法は様々ですが、インターネットで検索したり、本で調べるのはもちろん、Twitterで「〇〇について教えて下さい！」とSOSをツイートするのもありですし、僕に質問してくださっても大丈夫です（教えたがりなので）
ちなみに僕は、独学初期にサンプルサイト制作で非常に苦しみ、ひとつの課題に３日以上悩んだこともありましたが、それを解決できたことでレベルアップしたと同時に、それは大きな自信にもつながりましたから、やはり挑戦してよかったと今でも考えています。
当たり前ですが、覚えていない知識はどんなに頭を捻っても出てきません。
でも、WEB制作はいつでも分からないことを検索できるんです。
言ってしまえば、答えを見ながら仕事ができるので、独学中もどんどん答えを探して、見つけたやり方を試し、多くの経験をストックしていきながら、いざというときの課題解決につなげましょう。
インプットに必要以上の時間を掛けるべきでない理由は、ここでご理解いただけたと思います。
独学をはじめる前に確認しておくこと
目標の設定
まずは最終目標を設定しましょう。
多くの方は「ホームページを作れるようになりたい」とお考えでしょうが、それだけだと漠然としすぎていてゴールとしては物足りないでしょう。
ゴールがはっきりしていないと、毎日どこに向かて走り出せばいいのか分からなくなりますからね。
考えるべき指標は以下のとおりです。
- WEB制作を学んで、どんな人の役に立ちたいのか？
- いつから仕事にしたいのか？
- 年間にいくら稼ぎたいのか？
学習環境の確保
次に、毎日勉強できる環境を確保しましょう。
当たり前に思われるかもしれませんが、独学を継続できない方はここを実行できていないことがほとんどです。
「新しいことをはじめる」というのは非常に立派な判断ですが、それをやり続けられなくては本末転倒です。
あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中で勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。
一般的には「合計３００時間の学習で案件を獲得できるくらいになれる」といわれていますから、300時間達成を最初の目標としつつ、まずは「はじめること」、次に「続けること」が大切です。
「仕事に疲れて夜は勉強できない」という方は、出勤前の一時間を勉強時間にするなど、意地でも自分に勉強するチャンスを与えてあげてください。
ちなみに僕の場合、「勉強は明るいうちにやる」と決めています。
人生で一度も睡魔に勝てたことがないので（笑）
独学者が必ずフォローしておくべきTwitterアカウント
独学する上で、先輩たちのツイートをチェックすることも重要です。
ここでは、その中でも特に独学者にとってスキルアップにつながる有益ツイートをしてくれる方々をご紹介します。
駆け出しさんがフォロー必須のアカウント７選
- たにぐちまこと：@seltzer さん
- 全員フォロー必須の超重要人物
- 小林｜Webクリエイター：@pulpxstyle さん
- 普通に独学してたらまず学べないコードやアイディアをツイートしてくださる神
- せきゆおう＠Web制作のあれこれ発信する人：@wurst_design さん
- Web制作の駆け出しデザイナー・エンジニア向けに独学やスクールでは学べない情報を発信してくれる、この道14年の大ベテラン
- YUCOdesign：@yucodesign さん
- プロのデザイナーさんだけあって、図解ツイートのわかりやすさは桁違い
- アキユキ@Webデザイナー/エンジニア：@life_toshindai さん
- YouTubeで超有料級の解説動画を配信している僕らの先輩フリーランサー
- 祐太@はらブログ：@haraponta1496 さん
- codolifeをはじめ、多くの独学者に案件獲得～顧客満足向上のノウハウを伝授
- めがねん：@iammeganen
- 僕です。Twitter上に日々発信される、WEB独学者にとって有益なツイートを毎日拡散中！
当ロードマップの構成について
この章の最後に、当ロードマップの進め方についてご説明します。
学習順は以下のとおりです。
- HTML&CSS
- jQuery
- WordPress / Shopify
- WEB営業
この4工程を3ヶ月ほどで学び、最初の案件獲得に向けて動き出すためのロードマップになっています。
各項目、3週間を目安に取り組む前提でスケジュールを調整してみてください。
いずれも、僕が会社員として毎日10時間以上勤務しながら夜な夜なコツコツと取り組んで学習できたものですので、再現性はあると思います。
月収100万円以上を目指したい方はこのあとにWEBマーケティングやディレクションの勉強も必要ですが、それについては別記事をご参考いただくとして、本記事ではこれから駆け出したい方のために基礎学習に焦点を当てています。
あなたの独学に少しでもこのロードマップが役立つことを祈っております。
【HTML&CSS】完全独学で勉強する方法とおすすめツール・動画・本
それではさっそく始めていきたいところですが、その前にこの章の説明を。
まず、【HTML&CSS】は６STEP＋本番。
今日からの2週間で、あなたはWEB制作において必須言語であるHTML＆CSSというマークアップ言語の基礎を習得します。
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の基礎知識をしっかりアウトプットして、実案件さながらの脳の使い方も体験できます。
覚悟を決めて挑みましょう！
- クライアント様との認識のズレを防ぐため
- 制作サイドでの認識のズレを防ぐため
デザインカンプは無料のもので良い
デザインカンプも色々ありますが、まずは「デザインカンプ 無料」で検索しましょう。
すると、こんな感じで無料のデザインカンプが出てきますので、ありがたく頂戴して、実際にコーディングしてみてください。
どんなコードを書いても大丈夫です。
大切なのは「デザインカンプ通りであること」。
カンプによってはデザインツールの使い方を学ぶ必要もあるでしょうから、このタイミングでAdobe CCを使いはじめるのがよいでしょう。
このSTEP５では、シンプルなLPのデザインカンプの挑戦に４日という時間を設けていますが、実案件ではこれを２日前後でコーディングできると理想的です。
ひとつの目安としてご参考ください。
以下におすすめの練習用デザインカンプ（無料／有料）を挙げておきますね。
ここはそれぞれ時間を掛けて取り組む価値があるところですので、一旦このロードマップを休んで、できるだけ答えを見ずに自分の知識とググり力だけで乗り越えていくのもありですよ。
特に「ググり力」を鍛えることは、WEB制作者としても、社会人としても、非常に大きなアドバンテージとなります。
STEP６：自分のホームページを作る
ここまで出来たらポートフォリオを作るのが定説ですが、僕はホームページを作ることを提案します。
そもそもホームページを作る仕事がしたいのに、自分のホームページを持っていないって説得力なさすぎると思いませんか？
「その実力を示す」という目的はポートフォリオも同じですが、どうせ構成から考えてコーディングするなら、自分のという商品の魅力を伝えるためのホームページを作ってみましょう。
考えるべきことを順番に挙げておきます。
- 誰に見てもらうのか？
- どんな印象を持たれたいのか？
- 自分の何を伝えたいのか？
- どんな順番／構成で見せるのか？
- どんな言葉で伝えるのか？
- どんなデザインにするのか？
構成に関してはこんな本を参考にしたり、色んな先輩のポートフォリオを参考にするとよいでしょう。
Pintarestなどで「ワイヤーフレーム テンプレート」とか「グリッドデザイン テンプレート」などと検索してみるのもいいですし、仮にあなたに美容師の経験があるなら「美容室 ホームページ」で検索してみて雰囲気を参考にしてみてください。
いずれにしても、自分の強みとWEB制作スキルをかけ合わせることで、説得力のあるホームページを作れるはずです。
また、いざ作り出してみるとホームページに載せるテキストで悩むと思いますが、最低限WEBライティングの基本くらいは知っておくべきでしょう。
無料サイトを使い倒そう
ホームページで使う画像やイラストなどは、無料サイトなどから探してきましょう。
WEBデザインの学習をしていない状態で悩んでもイケてる答えはひねり出せませんから、ロゴなどもそうしたサイトで簡単に作ってしまいましょう。
まずは、ここまでに学んだ基礎知識をフル動員させつつ、分からないことはググり倒し、最初の難関を乗り越えてください！
サーバーを用意
コーディングが終わっても、まだ作業は終わりじゃありません！
サーバーにアップするという最後の仕事が残っていることをお忘れなく。
サーバーに関しては、そもそもどこと契約すべきか？という論争が絶えませんが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバー一択でしょう。
マナブさんのようなインフルエンサーたちも、世の制作会社も、WEBクリエイターさん達も、ほぼみんなエックスサーバーを使っていますし、分からないことがあっても検索すればすぐにネット上で答えが見つかるので、初心者でも独学でどうにかできるという大きなメリットがあるからです。
毎年、定期的に無料キャンペーンも実施してるので、WEB制作者としてもブロガーとしても、コスパを考えたって一番オススメしやすいのがエックスサーバーというのが正直なところ。
一方で、どうしても月額をできるだけ安く抑えたいという方にはロリポップ。
月額250円のライトプランでも十分機能しますし、速度が気になるならハイスピードプランがありますが、それでも月額はたったの500円。
この辺りは、ご自身のお財布とよーくご相談くださいませ。
おまけ：案件を調べてみる
さて、デザインカンプをコーディング出来るほどの知識を身に着け、自分のホームページも完成したとなると、ようやくこの段階で案件募集文の意味がわかるようになってきます。
少なくとも完全ド素人ではなくなっているので、さっそくクラウドソーシングに登録して案件の内容を見てみましょう。
まだ応募するには早いですが、この段階から世の中で求められているレベルを知ることで目指すべき学習レベルを具体的にイメージできるようになり、そのことが今後の独学において非常に重要になってきます。
目標を把握できていないと、走り続けることはできないですからね。
ここまでを10秒でまとめましょう。
ということで、ここまでが「【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個以上も紹介しています。
ブログを書いてる身としては、作業工程を想像するだけでも恐ろしい…
ここまでを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化を学ぶ３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は世界中で利用され、多くの人が学び、質問されてきたので、必ずあなたの疑問を解決できる記事に出会えるでしょう。
Snow Monkeyにさわる
ここまででWordPressの実践的な使い方を学んだら、ここでついにSnow Monkeyに触れておきましょう。
「Snow Monkeyとは」を一言でいうと、「ブロックエディタでさくさく高品質なWEBサイトを作れてしまう超有益なテーマ」です。
年間サブスクでダウンロードすれば、商用利用も可という非常にありがたいテーマで、実際に使ってみるとそんなことまで出来るのか！っていうくらいに高機能で驚きますよ。
とはいえ、いきなり年額を支払うのは不安だと思うので、まずは無料版を使ってみてください。
公式ホームページで申請すれば数日以内にメールでおくられてきますよ。
で、実際の使い方やどれくらい便利なのか？については動画で確認しましょう。
Snow Monkeyでのブログの作り方などはたにぐちまことさんの動画がわかりやすいですが、ここではWEB制作における便利さを伝えられたらと思うので、こちらの動画を紹介させていただきます。
このレベルのデザインを、一切コーディングせずにサクッと作れてしまうなんて凄すぎません？
余談ですが、僕が率いる制作チームGLASSCOOPEのホームページもSnow Monkeyを使っています。
Snow Monkeyの具体的な開発方法を勉強する
「Snow Monkey解説動画の決定版」といえばこれ。
Twitterでも人気のゆっぱーさんが、独学応援サロンのメンバーと協力して作ってくださったんですが、ここまで初心者目線で、詳しく順を追いながら、ていねいに解説している動画は他にないと思います。
しかも、無料ですからね。
実際にこの動画のとおりにSnow Monkeyで開発したい方は、ゆっぱーさんのブログにレシピが掲載されてますので、そちらをご参考ください。
＞＞ゆっぱーブログ『はじめての Snow Monkey 動画用デモサイト全解説！』
ここまでを10秒でまとめましょう。
ということで、ここまでが「【WordPress】完全独学で勉強する方法とおすすめ動画・本」でした。
実際にチャレンジしてみていかがでしたか？
少なくとも、「出来ないこと」ではなかったと思います。
同じPHPを使ったプログラミングでも、「自動返信機能付きの問い合わせフォーム」をイチから実装するのとはわけが違いますからね。
基本的にWordPress独自の構文に慣れてしまえばオンラインマニュアルを見ながら進められるようになりますし、これで10万円以上の案件を受注できるようになると考えたら非常にコスパがいいと思いませんか？
このあとさらに「カスタム3兄弟」の使い方を学べば、本格的なコーポレートサイトも作れるようになり、クラウドソーシングでもいよいよ案件ひとつで20～30万円くらいを見積もれるようになります。
また、Snow Monkeyが使えるとエンドクライアント相手に営業をして、一気に60万円以上の高単価案件を獲得したとしても、十分に高クオリティなサイトを迅速に納品できるようになります。
いずれにしても「がんばる価値のあること」だと思いますから、ぜひとも挑戦してみてください。
【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営業を学んで、案件獲得に挑戦しよう！
さて、ここまで勉強してきたらいよいよ独学の最終ステップ。
まずは「WEB営業の勉強方法」を学び、その上で「案件の種類・獲得方法」を確認して営業活動を本格化させましょう。
それぞれ別記事にまとめていますので、ご参考ください。
【まとめ】すべては、毎日取り組み続けることからはじまる
ということで、以上が「【WEB制作】完全独学ロードマップ【1000時間独学した僕が解説】」でした。
ここまで読んでくださったあなたには感謝しかありません。
また、その熱意は本物だと思います。
ここまで読んでくださったからには、決して挫折してほしくありませんから、もし分からないことがいつでもご質問ください。
僕は即レスをモットーにしていますので、本業の時間以外はいつでも即返信いたします。
2020年2月11日から独学をはじめ、緊急事態宣言中の引きこもり時期も、本業再開後も、ひたすら独学し続け、勉強方法をブログにまとめ、日々の気づきをツイートし続けた今日までの1,000時間。
それを経験し、大きな案件を掛け持ちできるようになった今だからこそ、年齢や学歴を理由に人生を諦めてしまっている方に伝えたいです。
30歳・高卒・完全未経験の僕でも、稼げるようになったこと。
誰にだって真似できる方法があること。
努力し続けた先で、誰かの役に立てること。
ここまで読んでくださったあなたなら絶対に大丈夫です。
努力し続けることで、必ず立派なWEB制作者になれます。
一緒にがんばりましょう！
最後まで読んでいただき、本当にありがとうございます！
この記事が独学をがんばる皆さんのお役に立てたらうれしいです。
当ブログは「有料級の無料」を信条に、良質なコンテンツ作りに努めています！
この記事が面白かった、役に立ったという方は、応援いただけますと励みになります。
高卒・30歳・未経験のサラリーマンです。本当に完全独学でWEB制作を勉強して、副業として毎月稼げるようになれますか？