自分の独学方法に自信がありません。スクールに通うべきかもしれませんが、いきなり何十万円も支払う勇気もないです…
今回はこんな疑問にお答えしていきます！
デイトラのように素晴らしいスクールもありますが、どうしても出来るだけ低予算で独学したいというあなたのために、この記事だけで完全未経験のあなたが独学でフリーランスとしてホームページやLPの制作を受注できるスキルを身につけられるまでの全行程を解説します。
仕事にできるまでの道のりは人それぞれですが、これから勉強される方にとって少しでも参考にしてもらえると幸いです。
それでは、いってみましょう！
- Web制作で稼げるようになるまでの５STEP
- 必要な事前準備
- 必要な言語の独学方法
- Web営業の基礎～参考記事
ロードマップは人それぞれです。
しかし、身近に相談相手がいないあなたにとって、目安となる道しるべを見つけておくことはとても意味があります。
僕はデイトラ起業前のしょーへーさんが運営されていた#30DAYSトライアル の手順を参考にしてきましたが、やはり真似できそうな先輩のやり方を見つけられたことは成功の大きなポイントでした。
そこで、この記事もこれから読んでくださるみなさんにとってそんな存在になれるように、定期的に掲載情報をアップデートしながらみなさんの背中を押せるロードマップであり続けたいと考えています。
この記事があなたのお役に立てれば幸いです。
目次
稼げるようになるまでの５STEP
まずは独学をして最終的に仕事にするまでの流れを確認しておきましょう。
これを知らずに独学に取り掛かってしまうと、自分のやっていることに迷いや不安が生じます。
僕も何度か挫折しかけましたが、それは自分の独学方法に自信を持てなかったことが大きな要因でした。
ということで、まずは結論から。
Web制作を仕事にするまでのステップは以下の５つです。
- Web制作スキルを身につける
- 実績を作るために採算度外視で営業する
- 実績を武器に信用していただき単価を上げてもらう
- 仕事を増やして外注先を見つける〜制作チームの結成
- 営業・制作を仕組み化
① Web制作スキルを身につける
まず、今回の記事では①を達成するための方法を中心に解説していきます。
独学をはじめる前に考えておくべきことや準備しておくことを確認した上で、できるだけお金のかからない学習方法を示します。
② 実績を作るために採算度外視で営業する
②に関しては、最後のWeb営業の解説で說明します。
ガツガツ営業するにしても、営業を仕組み化して基本待ちの姿勢を貫くにしても、必ず知っておくべき営業の基礎についてのお話です。
③ 実績を武器に信用していただき単価を上げてもらう
③に関してはすごく単純で、②の段階でどれだけ丁寧で真摯な対応をしたのか？がポイントです。
クライアント様に「こんな価格じゃ申し訳ないな」と感じさせるくらい一生懸命に働くことで、自ずと単価は上げてもらえるものですからね。
副業として充実してくるのはこの段階です。
④ 仕事を増やして外注先を見つける〜制作チームの結成
④は難しく思えるかもしれませんが、要はTwitterやサロンなどのコミュニティに属しておき、いざというときに頼れる人を見つけておくということです。
そもそも②〜③を繰り返していくと、任せてもらえる仕事も増えてきます。
そうなると自分ひとりでは対応しきれなくなるため、信用できる外注先を見つけておく必要が出てくるんです。
この外注先を各ポジションごと見つけておくことで、結果的にあなたの制作チームが出来上がり、あなたは小さな制作会社の代表になります。
⑤ 営業・制作を仕組み化
⑤外注先がハッキリしていると、たとえあなたにデザインセンスがなくてもデザイン案件を引き受けられるようになったりするので、クライアント様からの信頼をより深められることになり、結果的に毎月の受注数は増えていくことになるでしょう。
ここまで来ると、クライアント様から別のクライアント様をご紹介いただけたり、以前に担当したサイトやバナーのデザインをリニューアルするなどといった案件を任せてもらえるようになりますので、結果的に営業不要のフリーランスになれるというわけです。
「理想のフリーランスライフ」を実現できるのは、この段階です。
以上がWeb制作で稼げるようになるまでの５STEPです。
どうでしょう、イメージはできましたか？
今はまだ夢物語に思えるかもしれませんが、その夢物語を現実にできるかどうかは、あなたが今から動きはじめられるかどうか。それだけです。
独学をはじめる前に確認しておくこと
稼げるようになるまでの道のりをイメージしたところで、今度は実際に動きだす前に考えておくべきことを理解していきましょう。
目標の設定
まずは最終目標を設定しましょう。
多くの方は「ホームページを作れるようになりたい」とお考えでしょうが、それだけだと漠然としすぎていてゴールとしては物足りません。
ゴールがはっきりしていないと、毎日なんのために走っているのか分からなくなります。
考えるべき指標は以下のとおりです。
- Web制作を学んで、どんな人の役に立ちたいのか？
- いつから仕事にしたいのか？
- 年間にいくら稼ぎたいのか？
学習環境の確保
目標を決めたら、今度は毎日勉強できる環境を確保しましょう。
当たり前に思われるかもしれませんが、独学を継続できない方はここを実行できていないことがほとんどです。
「新しいことをはじめる」というのは非常に立派な判断ですが、それをやり続けられなくては本末転倒。
あくまでも本業や普段の私生活の時間を考えつつ、一日のルーティンの中で勉強する時間をどれくらい準備できるのかを考えて、どんなに忙しくても必ずインプットとアウトプットの時間を作りましょう。
一般的には「合計３００時間の学習で案件を獲得できるくらいになれる」といわれていますから、300時間達成を最初の目標としつつ、まずは「はじめること」、次に「続けること」が大切です。
「仕事に疲れて夜は勉強できない」という方は、出勤前の一時間を勉強時間にするなど、意地でも自分に勉強するチャンスを与えてあげてください。
ちなみに僕の場合、「勉強は明るいうちにやる」と決めています。
人生で一度も睡魔に勝てたことがないので（笑）
当ロードマップの構成について
この章の最後に、当ロードマップの進め方についてご説明します。
学習順は以下のとおりです。
- HTML&CSS
- jQuery
- WordPress / Shopify
- Web営業
この4工程を3ヶ月ほどで学び、最初の案件獲得に向けて動き出すためのロードマップになっています。
各項目、3週間を目安に取り組む前提でスケジュールを調整してみてください。
いずれも、僕が会社員として毎日10時間以上勤務しながら夜な夜なコツコツと取り組んで学習できたものですので、再現性はあると思います。
月収100万円以上を目指したい方は、このあとにWebマーケティングなどの勉強も必要ですが、それはまだ先の話なので、本記事ではこれから駆け出したい方のための基礎学習に焦点を絞りますね。
あなたの独学に少しでもこのロードマップが役立つことを祈っております。
HTML&CSSを完全独学でマスター
それではさっそくはじめましょう！
今日からの一ヶ月で、あなたはWeb制作において必須言語であるHTML＆CSSというマークアップ言語の基礎を習得し、シンプルなデザインならそのとおりにマークアップできるようになります。
スケジュールは以下のとおり。
HTME&CSSの学習スケジュール
STEP１：ドットインストールで雰囲気をつかむ（約３０分）
STEP２：Progateで勉強（約７日）
STEP３：YouTubeで復習（約１日）
STEP４：本で復習＆サイト作りに挑戦（約７日）
STEP５：デザインカンプのコーディングに挑戦（約１４日）
STEP６：事業サイト制作（約1４日）
STEP１～STEP４でHTMLとCSSを理解します。
STEP５で総復習し、STEP６で自分のポートフォリオを作ります。
STEP１からSTEP5までで30日程度。
その後、STEP６日で学んだことのアウトプットを行います。
人によって一日あたりの勉強時間は異なりますから、あっという間に進められる方はどんどん先へ進んでいただいて構いません。
逆にこの目安よりも時間がかかる場合は、無理する必要はありませんので、倍の２ヶ月を目安にしてください。
それも無理という方は、もしかすると十分な学習環境を捻出できていないかもしれません。
もう一度、一日の時間配分を検討してみましょう。
STEP１：ドットインストールで雰囲気をつかむ
それではスタートです！
最初はそもそも「HTML＆CSSって何なのか？」をざっくり学びます。
ここで登場するのがドットインストール。
１本２分前後の短い動画で解説してくれる定番サイトで、HTMLなどの基礎的なことについては無料ですべて閲覧可能です。
ということで、HTMLの無料部分を30分ほどでサクッと観てみましょう。
このときに、動画を観ながら実際に自分でテキストエディタにコードを書いてもいいですが、このロードマップでは同じような作業をSTEP2で行うので、今回は本当に観るだけでいいです。
そして、この時点で「プログラミングって思ってたより簡単じゃん」と思えたあなたには、控えめに言ってプログラミングの才能があります。
多くの人はこの時点で「面倒」とか「ややこしい」などといった拒否反応が出るらしいので、ここでプログラミングを嫌いにならなかったのならもう立派に僕たちの正式な仲間です（笑）
ぜひ最後まで走りきっていただいていので、諦めかけたらいつでも質問してくださいね。
勉強方法の確認
ここで注意点をひとつ。
60％理解したら次に進む、を徹底してください。
ドットインストールの動画を観るときも、一本の動画を３回も４回も繰り返す必要はありません。
あくまでも「何が出来るのかを知ること」がSTEP１の目的です。
Web制作は本番の仕事中も分からないことは検索しながら対応できるものです。
ただし、何ができるのかを知らないと調べようもありません。
間違ってもこの段階で100％理解しようとはしないようにご注意くださいね。
ここまで頑張ったら、STEP１は終了です。
次へと進みましょう！
STEP２：ProgateでHTML&CSSのFlexbox編まで挑戦
独学でプログラミングを勉強する上で、誰もが必ずお世話になるProgate。
無料でも各言語の触りくらいは学べますが、有料版は月額９８０円で様々な言語を開発環境を用意せずに学ぶことが出来る、初心者にとことん優しいサービスです。
「このサイトの登場でプログラミング学習のハードルはかなり下がった」と、ホリエモンも言ってました。
HTMLやCSSくらいならテキストエディタをダウンロードすればいいだけですが、サーバー上で動くPHPとかになってくると色々と事前準備が大変なので、Progate登場以前はそれだけでハードルが高かったはずですからね。
ちなみに、僕もプログラミングを勉強しようと決心したまさにその日（2020年2月11日）にProgateに課金しましたが、今となっては人生最良の決断だったと本気で思っています。
ここで学んだ基礎知識とここで得た自信が現在の僕の大きな基盤ですし、同じように考えている人は多いはず。
最終結果はこんなです。
Ruby以外は、必ず挑戦してほしいところ。
約10週間で10言語を学び、
その内の1言語はWEB制作に不必要だと悟って放棄しました（笑）
HTML&CSSに挑戦
ということで、さっそく課金してここからは実際に手を動かしつつ「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週間程度で、すっかり超素人の域は出ていることと思います。
ということで、ここからはとにかくコードを書いていきましょう。
ここでは世界中で翻訳された解説書「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」を読みながら、しっかりとしたサイトを作っていきます。
信じられないかもしれませんが、ここまで勉強したあなたには既にサイトを作る十分な基礎知識が備わっているんです。
なので、ここからはアウトプットを続けて学んだ知識を自分の力に変えていく番ですよ。
この本はとにかく解説が丁寧で、中学生でもこの本を読みながらHTMLとCSSを学べるくらいですから、まさに初心者にはうってつけの一冊です。
逆に背伸びして少しでも小難しい本を買ってしまえば、そこで挫折することになりかねないので要注意。
「初心者にも優しいわかりやすい説明」と「少し慣れてきたときにめっちゃ助かる豆知識が網羅されている」というのがポイントです。
もちろん分からないことはいつでも検索すればいいのですが、紙の本ならデバイスの充電なども心配することなくいつでも確認できますから、Webも本も上手に活用して、時間を無駄にせず勉強していきましょう！
この本では、実際にWebサイトを作りながら体系的にWeb制作を学べます。
ここまではテキストエディタも使わずに進んできましたが、いよいよ本格的になってきますね。
STEP５：デザインカンプのコーディングに挑戦
ここまでたどり着いたあなたはもう立派なプログラミング初心者です（笑）
多くの人が「難しそう」と考えているプログラミングの世界に、しっかりと足を踏み入れています。
折り合えし地点であるここからは、これまでに学んで知識を総動員させながらスキルを磨いていきましょう。
ということで、デザインカンプに挑みます。
デザインカンプとは？
「デザインカンプ」とは、デザインの完成見本図のことです。
実案件では２つの目的でデザインカンプを用意するのですが、今回はあくまでコーディングの練習教材として使用しましょう。
これに挑戦することで、ここまでに身に着けたHTML＆CSSの基礎知識をしっかりアウトプットして、実案件さながらの脳の使い方も体験できます。
覚悟を決めて挑みましょう！
- クライアント様との認識のズレを防ぐため
- 制作サイドでの認識のズレを防ぐため
デザインカンプはCodestepでゲット
ここでは、Codestepというとても有益なサイトのお世話になりましょう。
僕が勉強していた頃にはなかったサイトなんですが、はじめて見たときは「なんでもっと早く作ってくれなかったの！」って憤りましたｗ
レベル別に色んなデザインカンプと必要素材、解答例となるコード一式が用意されていますので、まずは一番カンタンなやつから挑戦してみましょう。
どんなコードを書いても大丈夫です。
大切なのは「デザインカンプ通りであること」。
これは普段Webの仕事をしていて常に感じることでもありますが、やっぱりコーダーさんに一番求めたいのは「ほぼピクセルパーフェクト」です。
デザインをどれだけ正確に再現してくれるかで評価が分かれますし、再現度の高い方には半永久的に仕事をお願いしたくなるものです。
というわけで、まずは入門編のデザインカンプを最低２つは作ってみましょう！
Codestep以外にもおすすめの練習用デザインカンプを挙げておきますね。
ここはそれぞれ時間を掛けて取り組む価値があるところですので、一旦このロードマップを休んで、できるだけ答えを見ずに自分の知識とググり力だけで乗り越えていくのもありです。
特に「ググり力」を鍛えることは、Web制作者としても、社会人としても、非常に大きなアドバンテージとなりますからね。
このタイミングでデザインツールの使い方も理解できておけると尚良し！なので、Adobe CCを購入しておきましょう。
STEP６：自分の事業サイトを作る
Codestepでデザイン通りに書くことを体験したなら、ここまでの学習の締めくくりとして自分の事業サイトを作ってみましょう。
事業サイトといわれると何を作ればいいかイメージがつかないと思いますが、「お客さまがあなたにWeb制作を任せるときに確認できるメニュー表」だと思えばなんとなくイメージできるのではないでしょうか？
一般的にはここでポートフォリオを作るようにいわれるタイミングだと思いますが、多くのポートフォリオは自己紹介だけで終わってしまい、仕事に繋げられないものがほとんどです。
デザイン自体は、Codestepの初級編にあるポートフォリオのデザインカンプを真似して構成を考えてもいいですし、その他にも色んな人のポートフォリオを参考にするのもありです。
ただし、これからWeb制作を仕事にしていきたいのなら、あなたが作るべきは事業サイト。
シンプルなものでいいので、ここまでに学んできた知識を総動員して作ってみましょう。
「自分という商品」の魅力を伝えることが目的になりますが、まずはこれを作るにあたって必要なことを確認してきましょう。
- 誰に見てもらうのか？（制作会社？フリーのデザイナーやディレクターさん？）
- どんな印象を持たれたいのか？（真面目さ？親しみやすさ？面白さ？）
- 自分の何を伝えたいのか？（コーディングの正確さ？納期の早さ？レスの早さ？）
- どんな順番／構成で見せるのか？（結論・根拠・信頼・安心の4部構成がおすすめ）
- どんな言葉で伝えるのか？（基本的に端的で分かりやすいことを意識）
- どんなデザインにするのか？（メインカラーは？フォントは？）
デザインに関してはこんな本を参考にするのもありですし、Pintarestなどで「ワイヤーフレーム テンプレート」とか「グリッドデザイン テンプレート」などと検索してみるのもいいです。
仮にあなたに美容師の経験があるなら、「美容室 ホームページ」で検索してみて雰囲気を参考にしてみることもできます。
いずれにしても自分の強みとWeb制作スキルをかけ合わせることで、個性的なポートフォリを作れるはずです。
また、いざ作り出してみるとサイトに載せるテキストで悩むと思いますが、そこは他の方のサイトを参考にするだけでもいいですし、Webライティングの基本を学んで読みやすい文章術を身に着けておくのもありですね。
ちなみに、僕の事業サイトはこのブログのメニューの中にあるGLASSCOOPEです。。。
無料サイトを使い倒そう
事業サイトで使う画像やイラストなどは、無料サイトなどから探してきましょう。
Webデザインの学習をしていない状態で悩んでもイケてる答えはひねり出せませんから、ロゴなどもそうしたサイトで簡単に作っておくのが得策です。
まずは、ここまでに学んだ基礎知識をフル動員させつつ、分からないことはググり倒して最初の難関を乗り越えてください！
サーバーを用意
コーディングが終わっても、まだ作業は終わりじゃありません！
サーバーにアップするという最後の仕事が残っていることをお忘れなく。
サーバーに関しては、そもそもどこと契約すべきか？という論争が絶えませんが、「安定していること」と「管理のしやすさ」を考えるとエックスサーバー一択でしょう。
安いところは他にもたくさんあるんですが、サーバーの安定度や表示速度、2年目以降の手数料や基本料金など、総合的にコスパを考えるとエックスサーバーが優秀だという結論に至りました。
また、利用者が多いからこそ分からないことがあっても検索すればすぐにネット上で答えが見つかるので、初心者でも独学でどうにかできるという大きなメリットがあります。
毎年、定期的に無料キャンペーンも実施してるので、Web制作者としてもブロガーとしても、一番オススメしやすいのがエックスサーバーというのが正直なところ。
一方で、それでも月額をできるだけ安く抑えたいという方にはロリポップ。
月額250円のライトプランでも十分機能しますし、表示速度がそこそこ早いハイスピードプランでも月額はたったの500円ですから、背に腹は代えられないなら致し難ないでしょう。
おまけ：案件を調べてみる
さて、デザインカンプをコーディング出来るほどの知識を身に着け、自分の事業サイトも完成したとなると、ようやくこの段階で案件の募集文の意味がわかるようになってきます。
少なくとも完全ド素人ではなくなっているので、さっそく色んなクラウドソーシングに登録して案件の内容を見てみましょう。
まだ応募するには早いですが、この段階から世の中で求められているレベルを知ることで目指すべき学習レベルを具体的にイメージできるようになり、そのことが今後の独学において非常に重要になってきます。
目標を把握できていないと、走り続けることはできないですからね。
ここまでを10秒でまとめましょう。
ということで、ここまでが「HTML&CSSを完全独学でマスター」でした。
ちなみに僕は、このあとでまたProgateに戻り、JavaScript、jQuery、Sass、PHPを勉強して、2つ目のポートフォリオを作りました。
作ったサイトのコードを公開してアピールするためにGitも勉強しましたし、サーバーのこともしっかり知っておこうと思いSQLも学習しましたが、そこまでで独学開始からだいたい2ヶ月。
出来ることが増えたら、その都度自分の事業サイトをカスタムするなどしてアウトプットを繰り返し、インプットしたことを着実に自分の力に変えていくというのは、ここまでのSTEPと変わりません。
案件獲得にはプログラミングの技術のほかに、「営業」「マーケティング」「ディレクション」などの勉強も必要ですが、まずは焦らず、Web制作のスキルを十分に身につけることに集中していきましょう。
jQueryを完全独学でマスター
jQuery（ジェイクエリー）とは、JavaScriptというプログラミング言語をもっと簡単に扱えるように設計された「ライブラリ」と呼ばれるものの一種。
これを使いこなすことで、サイトに動きをつけられます。
PCでもスマホでも、画面の上からポップアップが出てきたりしますが、あれを簡単に実装するためのものです。
もちろんjQueryもProgateでしっかり基礎を学習できますが、問題はそのあと。
Progateで基礎は学んだけど、そのあと何すればいいの？
僕自身、ProgateでHTML&CSS～JavaScript～jQueryと学習したあとに、なんとなくわかった気になっただけで、学んだ知識をどう活かせばいいかわからず困り、色々と模索しました。
ここでは、そんなjQuery難民のために、Progate後の学習手順を解説していきます。
それでは、早速いってみましょう！
jQueryの学習スケジュール
Progateで基礎を学んだら、そのあとはシンプルに２STEPでjQueryを学んでいきます。
- 実際にコードを試してみる
- 本で復習する
これだけです。
他の記事でも書いているとおり、jQueryの学習においても一度ですべてを理解する必要はありません。
とりあえずチャレンジして、分からないことは分からないまま次に進んで、ひととおり学習し終えてから、振り返ってみると分かってたりします。
それでも分からないことはありますが、全体を把握した上で挑めばすんなり理解できるものですから、とにかくいちいち立ち止まらないように気をつけましょう。
STEP１：ポートフォリオでアウトプット
ということで、jQueryを使ってみましょう。
どんな知識もアウトプットしないと身につきませんからね。
Progateでひととおり学んで、jQueryとは何なのか？何が出来るのか？くらいは理解できていると思います。
それならその知識を活かして、自分のポートフォリオをアップデートしてみましょう。
もしも何を試せばいいかもわからない場合は、「スライドショー」と「アコーディオンパネル」を実装してみてください。
動くWebデザインアイデア帳で検索し、自分のポートフォリオなどに実装するのが一番カンタンでしょう。
このふたつは実案件でも当たり前に出てきますし、これを実装できるようになると、のちのち自信にも強みにもなりますからね。
うまく行けば、HTML＆CSSとは異なるプログラミングの楽しさを味わえますよ。（自分すげー！ってなります）
STEP2：本で復習する
jQueryを実際に試したあとは、復習の時間です。
僕のおすすめは本での復習。
Progateに戻ることも否定はしませんが、同じ問題に何度も挑戦したところで、得られるのは慣れだけですからね。
ここでの参考図書は先ほどもお世話になった『動くWebデザインアイディア帳』。
jQuery関連の書籍はたくさん出ていますが、そんな中でこの本は「初心者が参考にできるちょうどいいレベル」なんです。
実際に、Web制作で単価何十万円という案件を対応するときにも役に立つような、数々の実例が充実しているので、長い目で見ても最高の一冊だと思ってます。
ここで大切なのが、その読み方。
「最初から順番に読む必要はない」というのが持論なのですが、この本も読みたいとこだけを読めば大丈夫です。
ゲームの攻略本と同じで、いま知りたいことだけを調べて、本を読むことに必要以上の時間を使わないように気をつけてください。
どんなときも、インプット：アウトプット＝３：７です。
ここまでを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で制作するとは？」を確認
- 書籍でインプット＆アウトプット
- ポートフォリオのWP化でアウトプット
- SnowMonkeyの使い方を確認
STEP１：YouTubeで「WordPressで制作するとは？」を確認
初日はYouTubeで気張らずに勉強しましょう。
今回はアキユキさんの解説動画で「WordPressでサイトを作るとはどういうことか？」を学びます。
観た方は激しく頷いてくれると思いますが、Udemyなどで有料コンテンツ化してもいいくらいの内容です。
僕はこれを観て、「スクールに通わなくてもぜんぜん大丈夫じゃん」と思いました。
注意点としては、ここでの目的はあくまでも「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でのサイト制作」についてはここまで十分。
STEP３：ポートフォリオのWP化でアウトプット
最後は、自分のポートフォリオを実際にWordPress化することで、これまでに学んだことを再確認していきましょう。
余裕があれば、ブログを起ち上げるのも良いです。
いずれにしても、ここまででインプットしたことをポートフォリオのアップデートやブログ制作を通じてアウトプットし、着実に自分のスキルアップを行うことが目的です。
分からないことがあっても、WordPressに関する記事は無数に存在しているので、検索して何も出てこないときは自分の検索ワードを疑う方が良いかもしれません。
それくらいWordPressは世界中で利用され、多くの人が学び、質問されてきたので、ここまでで鍛えてきたググり力をフル活用して取り組んでください。
STEP４：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独自の構文に慣れてしまえばオンラインマニュアルを見ながら進められるようになりますし、これで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で構築していますね。
そんなShopifyについて学び、ECサイトをデザイン～コーディングできるようになることで、作ったECサイトの売上の数％を毎月自動的に収益化できたらすごいと思いませんか？
そこでここでは、Shopifyでのサイト構築の基本的な方法について解説した記事をご紹介しておきます。
Shopifyとは？を解説する記事は日本語でも増えてきましたが、開発者向けにそれを解説する記事はまだまだ少ないのが実情…
ということで、以下の記事をご参照ください。
Shopifyの基礎や初期設定方法、おすすめの拡張機能などはこの記事１本で学べるようになっています。
時代の流れに適応して、柔軟に収益を安定させていきましょう。
WEB営業を学んで、案件獲得に挑戦しよう！
さて、ここまで勉強してきたらいよいよ独学の最終ステップです。
Web制作という「作る力」を身につけたわけですから、今度はその力を誰かの悩みを解決するために使えるように、あなたに仕事を任せてくれる人を探しましょう。
まずは「Web営業の目的」について学びましょう。
その上で営業方法を勉強し、「Web制作ができるあなた」という商品を売り込むために、何を考えればいいのかを学んでいくのがおすすめです。
ここも別記事のリンクを貼っておきます。
１つ目は、Web営業の勉強方法についての解説記事。
２つ目は、多くの駆け出しさんが消耗しているクラウドワークスでの応募方法に関する有料記事です。
それぞれご参考ください。
【まとめ】すべては、毎日取り組み続けることからはじまる
ということで、以上が「完全独学ロードマップ」でした。
ここまで読んでくださったあなたには感謝しかありません。
また、その熱意は本物だと思います。
ここまで読んでくださったからには、決して挫折してほしくありませんから、もし分からないことがいつでもご質問ください。
僕は即レスをモットーにしていますので、本業の時間以外はいつでも即返信いたします。
2020年2月11日から独学をはじめ、緊急事態宣言中の引きこもり時期も、本業再開後も、ひたすら独学し続け、勉強方法をブログにまとめ、日々の気づきをツイートし続けた今日までの1,000時間。
それを経験し、大きな案件を掛け持ちできるようになった今だからこそ、年齢や学歴を理由に人生を諦めてしまっている方に伝えたいです。
30歳・高卒・完全未経験の僕でも、稼げるようになったこと。
誰にだって真似できる方法があること。
努力し続けた先で、誰かの役に立てること。
ここまで読んでくださったあなたなら絶対に大丈夫です。
努力し続けることで、必ず立派なWEB制作者になれます。
一緒にがんばりましょう！
最後まで読んでいただき、本当にありがとうございます！
この記事が独学をがんばる皆さんのお役に立てたらうれしいです。
当ブログは「有料級の無料」を信条に、良質なコンテンツ作りに努めています！
この記事が面白かった、役に立ったという方は、応援いただけますと励みになります。
高卒・30歳・未経験のサラリーマンです。本当に完全独学でWeb制作を学べるんでしょうか？