はじめまして、みつあきです。現在はWeb制作で月50万以上を稼ぎ、フリーランスとして活動しています。
さっそくですが、Web制作の学習って簡単じゃないですよね？ 実は、僕は学習当初、パソコンのエクセルですら、素人並！本当に営業をするだけが取り柄だったので、だいぶ苦戦をしました。。。挫折しかけて、なんとか、WordPressやその他言語を習得してきました。
WEB制作って正直なところ、いい意味で教材やスクールが豊富にありますよね？
ただ、だからこそ、あれもやったりこれもやったり、ゴールが見えなくなっている…みたいなことってありませんか？僕はそうでした。挙げ句の果にJavaScriptあたりから、メチャクチャ難しくなって、あれ？Web制作無理かも！ってなってました。
ただ、そんな僕が今では、WordPressはオリジナルテーマを主軸にコードをごりごりに書いています。 また、デザインも簡単なものは自分でやっちゃいます。おかげで今は 最高月収は１００万円を超えて、営業せずともご依頼もいただきます。
皆様の中にも同じような境遇な人がいたら、ぜひWeb制作を続ける勇気とサポートになればとおもって執筆致しました。
Web制作学習は簡単ではないけど、コツがわかると学習もスムーズになると思っています。
今回の内容は、
- 何から勉強したらいいか
- どこまで勉強したらいいか。
- どのように勉強したらいいか。
について、ヒントになるように、私が初めて受注できるまでの学習全工程をお伝えできればと思っています。
つまり、同じ事をすべてクリアできれば、案件が取れるレベルであるということです。
- これから勉強される方
- 既に勉強したけど、いつから営業すればいいかわからない方
- 営業をする自信がない方
にもヒントになると思いますので、是非参考にしていただけば幸いです。
先に簡単にお伝えすると、これが僕が学習開始から営業開始まで過程のまとめになっています。
※具体的なお話は書くパートごとにお伝え致します。
Web学習前にお伝えしたいこと
学習の工程をお伝えする前に、私が途中で手に入れたPCマストアイテムだけお伝えさせてください。
学習において、絶対にないと困るレベルのものをお伝えするなら、ディスプレイです！
PCやマウス等は当然ですので、さておき、当時はディスプレイがなくて、学習効率がめちゃくちゃ下がっていました。 なので、私は途中で安い1万円ほどのディスプレイを買いました。どんなときに必要かというと、
- 模写をする時
- デザインカンプからコーディングする時
- 動画見ながら、コーディングする時
つまり学習中の全行程で必要でした。笑 もちろんなくても、できます。 ただし、 あるかないかで案件獲得まで1ヶ月以上差が出ると思いますので、ぜひ購入するのがいいと思います。
それでは次の章から早速全行程をお伝え致します。
Web制作の最初の学習は、Progate（プロゲート）※2週間
まずはProgateを行いました。 これはJavaScriptまでを僕の場合は行いました。期間は約2週間くらい！最初の1週間でHTML＆CSS，次の1週間ではJavaScriptを学習するという目標を立てて、勉強しました。
ちなみに、ここで躓くひといませんか？
はっきりいいます！ぼくはつまづきました（笑） でも多分これって普通なことみたいです。 ぼくもそうですし、僕の知り合いの京大の方もここの道場コースで躓いたみたいです。（正直ぼくは、道場以外でもつまづいたんですけどねｗ）
ここで道場コース躓く方多いと思うんですけど、正直道場は、ぼくは答え見ながらやってました。それでも出来るようになります。ここは完璧目指すのではなく、ある程度概要を掴む程度の気持ちで終えてしまって大丈夫です。 ここで完璧目指すより、あとあとつまづいたら、辞書的な感じで戻る！という使い方をしたほうがいいです。
ぼくのやり方
- Html〜JavaScript（余裕あればjQueryも）概要掴みながらやってみる
- 道場コースは、考えてだめなら、すぐ答え見る！
Progateは何周もせず、1週で次のステージにいくのがおすすめです！
アウトプットで模写をやってみる
模写コーディングの目的ってなんだとおもいますか？
いろんな答えあると思いますが、ぼくは下記の目的で行っていました。
- プロのコーディングのルールや書き方を勉強する（模写のやり方を覚えるのではありません）
- アウトプットして、インプットを定着させること
そこでおすすめしたいのが、Webの神様というYouTubeです。これは、はじめて模写を行う人用の題材をつかっているので、初めてでもわかりやすい！ 題材もいくつかもあります。
また、答えがないと、すごく時間かかりますし、挫折しやすいと思っています。 なので、この教材は答えを動画で説明してくれるので、とてもおすすめです。
ここでぼくのやり方を紹介
- とりあえずトライする。わからなければすぐ動画をみる
- 動画を少しみて、再チャレンジ。だめならすぐ答え見る。
正直、はじめて模写をやりましたが、かなり難易度高かったです💦 だから、だめなら調べて、すぐ答え見る！を繰り返してました。もしさっぱりだめなら、1回全部答え見てから、自分で同じ教材をやってみるのもおすすめです。これ終えたら、なんか出来るようになった感ありますので、ぜひやってみてください。
CSS，JavaScriptのレベルを少し上げる
ここまで来ると、超基本は出来るようになったと思います。
そしたら、少しレベルをあげるのにUdemyを使いました。 Udemyでできるのが
- CSSのアニメーションの勉強
- CSSでパーツの作り方学ぶ（ボタンやスライダーなど）
- JavaScriptを少しレベルアップ
- Swiperなどのライブラリーの勉強
ここで伝えたいのが、目的はレベル上げです。 Progateと模写だけだと、基礎中の基礎なので、改めて現場でよく使うものをインプットすることで現場レベルになるのが目的です。
教材：【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
ただし、結構難しいです、このUdemyはぼくもすべてを理解できなかったです。
けど未だに辞書がわりに使ったりしますし、とても良く使うパーツを講義で実装しているのでおすすめ！
なので、さらっと復習と新しいインプットという感じで軽い感じで流してみていました。
ここまでくると、結構いろんなパーツつくれるようになってます。
最後に念押しでいいます。 完璧にできなくていいです。できなければ飛ばしてみて、最後まで見終えればいいです。（ぼくも全部理解できなかったです）
ここまで来たら、案件獲得レベル！ あとはアウトプットを重ねて、知識を定着させるだけ！
これまでの知識をアウトプットする
ここまで来たら、もうどのくらい理解できているか、テストするのが一番です。
そのためにデザインカンプからのコーディングをやりました。
ここでオススメなのが、『答えがあるデザインカンプでコーディングすること！』
挫折しても、答えをみて完了できるので、インプットになるからです。
そこでやったのが、しょーごさんのデザインカンプ！
これは神教材でした！！理由は…
私の場合、2つやりました。中級は4日ほど、中級Exは2週間程度で完成できましたが、結構難しかったです。 でも今回腕試しとしてやってみて、これを完成させると結構な自信になりますよ！
- 答えを動画にしている
- 添削がついている
- レベルが最適（中級から中級Ex) これできたら実案件こなせます。←じぶんの実体験です。
ここまでくれば、コーディング単発は案件受注出来きます。あとは、営業する勇気ですが、営業をする勇気は別記事で説明します
実案件レベルの学習におすすめのデザインカンプ
※ちなみに、当時上記カンプでつくったものを載せてきます。
（当時のものなので、コーディングは甘く、反省点多いです）
WordPressの学習
コーディングがある程度できるようになったら、あとはWordPressですね！
ちなみに、ここまでコーディングができている人はあとは、WordPress化ができるようになれば、WordPressを使えるようになります。
まずは、下記を整理するといいと思います。
- WordPressを使えるようになりたい。
- WordPress化できるようになりたい。
違いは、前者であればテーマがつかえるようになればOkeyだと思います。後者は、つまりオリジナルテーマを創れるようになるということ！ テーマはある程度デザインの幅も制限を受けますが、便利で最近はある程度カスタマイズができるものも増えています。
今回はオリジナルテーマを作りたい方、あるいは少し深くまで知りたい方向け（当時のぼくはオリジナルテーマを作るのが目標でした）にご紹介します。
ではまず、WordPressを学ぶ上で自分が使った学習ツールを紹介します。
・WordPressの使い方を完全解説！WordPressでデモサイト制作＆解説を１からやります！(YouTube)
・WordPress開発マスター講座 （Udemy）.
これはみて、ある程度概要をさらっとインプットしました。（全く完璧の必要はないです）←念押しです。 なぜなら、僕もさらっと学習でおわりです。
あくまで目的は、
- 基本を軽く知ること
- わからなくなったら、検索できる辞書として使えるようにすること
どちらかというとWordPressはアウトプットしながら、都度検索しながら、つくれるようになりました。なので、僕のオススメはアウトプットをして、わからない点を検索する学習方法です。 そのため、早速もうアウトプットに入りましょう。
ここは軽く学習をして、アウトプットをベースに学習していきましょう。
WordPressのアウトプット
アウトプットは下記、教材がおすすめです！
おすすめ理由は
- これ出来れば、実案件こなせるレベルだから！
- ワードプレス作成の必須機能がついたカンプだから！
これをつくるときに先程紹介したYouTubeをみながら、作ると良いですよ！とてもわかり易いと思います。
ここで実案件をする上でWordPressの作成手順をご紹介します。（←ぼくの作成手順です）
- コーディング（html)
- それぞれの階層ページを作る
- それぞれのページリンクに書き換える。（また画像等も書き換える）
- ループ分を書く
- ページネーションを書く（前へと次へ）
- パンくずリストを書く
- 最後にmeta情報を書く
ちなみに、①と②はなれれば、コーディングを階層別にかくこともできます。初めてで何から手をつけたらいいか、わからなければ、上記順番にやってみてください。
※ぼくが実際に作ったやつです。（しょーごさんのカンプ上級編）
最後に
ここまで完了したら、もう案件を取りにいけるレベルですよ！お疲れさまです。
正直なところ、今50件以上は案件対応していますが、ここの学習段階が1番時間がかかり、躓いたと自信を持って言えます。
とくにWordPress化はメチャクチャ難しかったです！ しかし、ここまできたということは、検索しながら、作業をしたということです！だから、現場も検索しながら案件をこなせますよ！
ぜひ自信をもって、営業してください！ ただ、それでも心配！営業が不安！めちゃくちゃわかります。僕もそうでした。そのための営業で不安を払拭するためにやったことも記事で書く予定ですので、楽しみにお待ち下さい。
ここまで読んでいただき、ありがとうございます。
お疲れさまでした。 もし何か聞きたいことあれば、TwitterDMにでも気軽にメッセージください。 ご検討をお祈り致します。
