WEB制作歴が2年弱ほどになりました。
完全未経験からWordPressで月7桁ほど稼げるようになったのでノウハウを共有します。
WordPressの勉強方法【完全版】
「WordPressは稼げます。」そんな言葉を聞いて完全未経験から勉強を開始して２年弱が経過して月7桁稼げるようになりました。
しかしそこまでの道のりは「独学 → スクール → 制作会社転職」と無駄なルートをかなり通りました…。当時の僕に効率の良い勉強方法があると教えてあげたいほど遠回りしました。そういった背景から同じような方向けに勉強の指針となるような記事を書こうと思いました。
ここで紹介している情報は全て僕の実体験です。WEB制作で稼ぎたいと思っている人はぜひ参考にしてみてください。
読むべき人＆できること
ちなみにこの記事を読んでほしいのは、
- WordPressのWEB制作で稼ぎたい方
- 勉強中だけどなかなかWordPressが習得できない方
です。
またこの記事を読んで3ヶ月勉強すればできることは、
- WEB制作会社への転職
- WordPressのWEB制作で案件受注
という感じです。
この記事通りに3ヶ月勉強すれば5〜10万円ほどのWordPressを使ったWEB制作ができるようになるし、WEB制作会社への転職も可能です。
さっそく見ていきましょう！
【ステップ1】コーディング基礎を理解する【HTML/CSS】
HTML/CSSはWEB制作で必須となる基礎スキルです。簡単に説明するとWEB制作でHTMLは骨組みをつくり、CSSで形を整えるといった感じ。
HTML/CSSを操れるようになればコーディングでのWEB制作が可能。WordPressを勉強する前に習得すべきですが簡単です。
※「コーディングとはホームページを組み立てる作業」という認識でOK。
ステップ1-1 HTML/CSSの基礎理解
Progate | プログラミングの入門なら基礎から学べるProgate
プログラミング初学者向けの学習サイト「Progate」で勉強します。Progateは「1.スライド理解 → 2.実践」という風に、インプットとアウトプットが同時にできる優れものです。初学者向け有名サイトでドットインストールがありますが、Progateだけで十分です。ドットインストールも素晴らしいですが、動画形式なので自分ペースで学習することが難しいです。
ステップ1-2 HTML/CSSのコーディングでWEBサイト制作
HTML/CSSの基礎を理解したら、WEB制作をするためのコーディングを経験しましょう。このモダンコーディングで初級から中級へレベルアップでいます。WEB制作は型があるのですが、「スタンダードレイアウト」、「グリッドレイアウト」、「シングルペイジレイアウト」の3種類を学べます。意味わからないかもですが、この3種類のレイアウトでコーディングを学べば中級レベルとしてはOK。
HTML/CSSは簡単ですが奥が深く、できることが多いです。ここまでで中級レベルなどで後は都度理解していきましょう。
ステップ1-3 photoshop/Illustratorデザインからのコーディング
ステップ1-2で終わる人が多いのですが、ステップ1-3「photoshop/Illustratorデザインからのコーディング」で一気にコーディングは実務レベルにアップします。というのも実務でWEB制作をする際は、「photoshop/Illustrator」で作られたデザインからコーディングすることがほとんどです。ほとんどの人がこの段階で「サイト模写」をしますが、サイト模写は実務で必要なスキルは身に付かないのであまりおすすめしません。
手前味噌で申し訳ないですが、僕が作ったコーディング模写【実務が体験できるpsdデザインカンプからのコーディング】がおすすめです。初学者時代に喉から手が出るほど欲しかった教材です。
【ステップ2】WEBサイトに動きをつける【jQuery】
ここまででHTML/CSSを使った動きのないWEB制作はOKです。とはいえ動きが全くないサイトは寂しいですよね…。そんな動きをつけたい時に必要なのがjQueryです。
ここも初学者のつまづきポイントなのですが、動きをつけると聞くと「JavascriptとjQueryどっちから勉強すべき？」みたいに迷う人が多いですが迷う必要なし。jQueryを勉強しておけばいいですよ。詳しくは下記の記事を読んでみてください。
>>【初心者向け】jQueryかJavaScriptどちらから勉強すべきか？【結論】
ステップ2-1 jQueryの基礎理解
Progate | プログラミングの入門なら基礎から学べるProgate
HTML/CSSの基礎理解で利用したProgateで勉強しましょう。jQueryの基礎、使い方が理解できます。「こんなの実践で0から書けない」と思うはずですが問題なし。0からjQueryを書けるようになる必要はありません。
理由は単純で動きをつける「スライダー、ライトボックス、ハンバーガーメニュー」とかは、既にコードがネット上に公開されていてそのコードを使えるといった感じ。
ステップ2-2 WEB制作で使うjQueryを理解
僕はjQuery関連の本を5冊前後読んだのですが、「jQuery最高の教科書」が1番初学者よりで理解しやすいです。Twitterでも何度か紹介した良書です。この本1冊で「スライダー、ライトボックス」などが0から作れるようになります。ここで「0からjQueryを書ける必要はないって言ってたのでは？」と思う方もいるかもですが、ネット上にあがったコードをカスタマイズするのに0から作れるスキルがあればつまづかないのでやっておいて損はないです。
【ステップ3】WordPressの基礎を習得する【WordPress】
ここまででHTML/CSS/jQueryを使ったコーディングは大丈夫。WordPressの下準備はOKなので、WordPressの勉強を開始しましょう。
ステップ3-1 WordPressの基礎理解
「WordPressレッスンブック」の1冊で基礎理解は十分です。僕はWordPressをなかなか習得できずに、書籍はかなり読みましたが基礎理解にはこの本しかありえません。とりあえずWordPressでWEB制作ができるレベルになります。
ちょっと解説しておくと、
語弊があるかもですが、この「WordPressへ変換」という部分がこの1冊で理解できます。
WordPressの書籍は色々買って読みました。レビューが気になる人は下記の記事にまとめているので読んでみてください。
>>WordPress初心者向け書籍はこの1冊しか有り得ない【断言します】
ステップ3-2 WordPressの基礎理解（おまけ）
ちょっと脱線しますがWordPressはHTML、CSS、jQueryがコーディングは大丈夫というレベルからするとレベルが高いのも事実。
つまづく人も結構多い印象です。
参考書選びに失敗したり、参考書を読んでも理解できなかったりでつまづく人が多いですね。
参考書がしっくりこない人はUdemyの動画で勉強するのもありですよ。ちなみに僕はUdemyでもWordPressを勉強済み。気になる方は下記の記事を読んでみてください。
>>UdemyでWordPressを勉強するときにおすすめな動画【WEB制作】
【ステップ4】WordPressの応用を理解する【WordPress】
「WordPressへ変換」が理解できたら、WordPressをカスタマイズできるレベルまでレベルアップしましょう。カスタマイズと聞くと難しいですが、クライアント目線でWEB制作をするためのスキルと理解しましょう。必須スキルになるのでしっかり勉強しましょう。
ステップ4-1 WordPressでの応用理解
WordPressのカスタマイズはこの1冊で一通りはOK。クライアント目線でのWEB制作とは簡単に言うと「使いやすさ重視」で作れるようになるということです。まだ聞いてもちんぷんかんぷんかもですが、カスタムフィールドとかですね。美容院のサイトで新規店舗ができた時にいちいちサイトを制作者が追加するのは面倒ですよね。美容院側で簡単に追加できれば親切です。そんな便利な機能がこの1冊で学べます。
【ステップ5】実務レベルへスキルアップするのに必要なこと2つ【実務で必要な知識】
ここまでくればWordPressでのサイト制作は十分です。とはいえ自分のPCで作れるだけで、実務レベルには達していないのが正直なところ。
実務となると、「FTPツールの使い方」、「Adobeソフトの使い方」、「デベロッパーツールの使い方」などプログラミング以外にやるべきこと、知っておくべきことがたくさんあります。
ここで詳しく解説してもいいのですが、WEB制作で3万円稼ぐまでの実体験を大公開【初心者向け再現性高】で詳しく解説しています。
ここまで紹介した未経験からWordPressのWEB制作で稼ぐまでの学習方法ですが、実際に僕が未経験から勉強して3万円の制作案件を受注するまでにしたことを詳しくまとめています。ここにはプログラミング以外にやるべきこともまとめているので興味のある方は読んでみてください。
まとめ
僕は恥ずかしいのですがWordPressをマスターするのにかなり時間がかかりました。「独学 → スクール → 転職」とかなりの時間とお金を消耗しました。
正しい勉強方法を知っていれば遠回りはせずに済んだのになぁと思います。
WordPressのWEB制作をしたい人はぜひこの記事を参考にしてみてください！
