こんにちは！てまりです。
今回は職業訓練卒業後、スキルアップの勉強を独学でして、現在Web制作会社２社と業務提携している私が「未経験からのWeb制作ロードマップ（勉強方法）」を作ってみました。
職業訓練を卒業後、自分のスキルの無さを痛感した私はコーディング・wordpressのスキルを上げるため、スクールに行かずに独学でスキルアップのための勉強をしました。
訓練校やスクールなどにもいかず、全て独学で勉強する人にも下記の順番で勉強すれば効率良くWeb制作を習得できます。
このロードマップは、年齢に関係なく、Web制作を学びたいすべての人に向けた内容です。
私自身も40代で未経験から学び始めましたが、段階を踏めばちゃんと力になります。
参考までに、職業訓練で学んだことは主にHTML、 css、jQuery、 WordPress、 illustrator、Photoshopです。職業訓練については下記に詳しく書いた記事があるので、そちらを良かったら読んでみて下さい。
- ・訓練校やスクールに行かずに全て独学で学びたい人
- ・職業訓練後、就活したがスキル不足のため上手くいかなかった人
- ・職業訓練後、スキルアップのために何をすればいいか分からない人
コーディングの学習方法
①オンラインサービスと書籍学習
Progateのhtml、css、jQuery、JavaScriptを受講
Progateはオンラインプログラミング学習サービスです。
html、cssの基礎的なことは職業訓練で私は学んだので、すでに分かっているところは復習のつもりでどんどん進めていきました。
Progateは分かりやすいので、独学でいちから勉強する人に特におすすめです。
jQueryについては、アコーディオンやスライダー、ハンバーガーメニューなど、Webサイトでよく使われる実装コードがネット上に多く掲載されています。
検索すればすぐに見つかりますが、将来的に応用がきくよう、ただコピペするのではなく、コードの意味をしっかり理解するよう心がけました。
書籍学習
次に下記の書籍を手を動かしながら、読み進めました。
ポチップ本の中でおしゃれなカフェのウェブサイトを制作していきます 。
この本を読を読むことで、Web制作の知識だけでなく、Webサイト制作の流れも身につけることができます。
②模写
次に模写に取り掛かりました。模写とは既存のサイトをそのまま真似て作ることです。
模写については必要ないと言われることもありますが、Google Chrome の検証ツールを使う練習になりましたし、自分のコードと模写したサイトのコードを見比べて勉強することもできました。
なので、１サイトでもいいので模写をすることをおすすめします。
模写のやり方については下記のはにわまんさんの記事が参考になりました。
Google Chromeの検証ツールの使い方については下記のサルワカさんの記事が参考になりました。
模写はしんどかったですが、chromeの検証ツールで調べたり、とにかくググりまくって、なんとか完成させました。
コーディングのスキルだけでなく、「ググる力」も身につくので、模写はとてもおすすめです。
➂レンタルサーバーを契約しよう
ここまで進んできて、Web制作でやっていけそうだと思ったらレンタルサーバーを契約することをおすすめします。
なぜ、レンタルサーバーの契約が必要なのかというと、その理由は以下のとおりです。
- ポートフォリオ（仕事獲得に必須）を公開するため
- 実案件でテスト用サーバーを使って動作確認をする際に必要なため
- WordPressに慣れておくため
このように、レンタルサーバーはポートフォリオの公開や実務で必須です。
また、WordPressでブログを運営することで、実案件に入る前にWordPressに慣れておくこともできます。
おすすめのレンタルサーバーについては、下記の記事で詳しく紹介しているので、良かったら読んでみてください。
④実案件レベルのコーディング練習ができる教材に挑戦
模写と実務案件では求められるスキルが異なります。
実案件では、デザイナーが作成したデザインデータ（デザインカンプ）をもとに、コーディングを進めていくのが一般的です。
その実践力を養うために、私は以下の教材に挑戦しました。
この教材はデザインカンプからのコーディング実践演習でHTML、CSS、JavaScriptを使用した実案件レベルの教材です。
コーディングが終わった後、サーバーにアップロードして課題提出をし、プロからのレビュー(表示確認）を受けることができます。
サーバーの扱い方を学べるだけでなく、プロの目で自分のコードを見てもらえる機会は貴重です。
またポートフォリオに課題を掲載できるので、これからコーディングの仕事を獲得したい人にもおすすめです。
学習期間中に習得しておいたほうがいいスキル
Sass
Sassはcssを効率的に記述できる記法です。
前述したProgateにもSassのカリキュラムがあります。
書籍で学ぶなら、下記の本がおすすめです。
私はこの本で、ネスト・パーシャル・@include・@mixinの部分を理解しておきました。
ポチップcss設計
css設計なら下記の本がおすすめです。私はBEMという手法を重点的に勉強しました。
ポチップWordPressの学習方法
次にWordPressですが、WordPressには既存のテーマをカスタマイズして作る方法(コーディング不要又は少なめ）とオリジナルテーマを制作する方法(コーディング必須）があります。
今回はオリジナルテーマを作るスキルに絞って書いていきます。
①書籍や動画で勉強する
職業訓練では下記の書籍を教科書として使用していました 。基礎を学べます。
ポチップ次に下記の本を1回通しで、本にあるサンプルサイトを手を動かしながら作りました。(この本はリニューアルしており、実際私が使用した本はリニューアル前の本です。）
初心者の方には難しい内容なのでさらっとでOK です！
実案件に取り組む中で疑問が生じたり理解が曖昧に感じたときに、該当箇所を読み返す形で活用しています。
ポチップ書籍より動画で学びたい方には、多少費用はかかりますが、アキユキさんの講座がおすすめです。
WordPress学習中、アキユキさんのYouTubeに大変お世話になりました。
とても分かりやすい説明をされる方なので、アキユキさんの動画はおすすめです。
②WordPressの実案件レベルのコーディング練習ができる教材に挑戦
ここまで一通り学習を終えたら、実案件レベルの下記の教材にとりかかりました。
【上級】デザインカンプからのコーディング実践演習【WordPress実案件レベル】
私はリニューアル前の上級をやったことがありますが、とても難しかったです。
でもこれができたなら、実案件に自信を持って挑戦できると思うので、ぜひ頑張ってみてください。
こちらの教材もプロのレビューを受けられますし、作品をポートフォリオに掲載できます！
ポートフォリオを作ろう
学習を終えたら、ポートフォリオを作りましょう！
ポートフォリオに関してはコーディングしたものを用意するのも、もちろん良いのですが、その分営業開始が遅くなってしまいます。
そのため、効率よく時短で作成できるコーディング不要のツールを活用するのがおすすめです。
詳しくは、Webデザイナーのためのポートフォリオ作成ツール5選という記事がありますので良かったら参考にしてみてください。
クラウドソーシングに登録してみよう
クラウドソーシングとは企業や個人が仕事を依頼したり、フリーランスが仕事を見つけたりできるインターネットを介したサービスです。
クラウドソーシングを利用するメリットは実績を積むことで、自分のポートフォリオを充実させられる点や、高評価を得ることでより多くの仕事を受注できる可能性が広がる点です。
また報酬を受け取る面でも、クラウドソーシング運営会社を通じて支払いが行われるため、金銭トラブルを防ぎやすいという安心感があります。
一方で、応募の手軽さから競争率が高く、なかなか仕事を獲得できなかったり、価格競争が激しく報酬が低めに設定されていることも多いというデメリットもあります。
それでも、自分のスキルを試したり、実績を積む場としては非常に有効です。
ぜひ一度登録して、どのような案件があるのかチェックしてみてください。
| 特徴 | ワーカー手数料 | 仕事獲得の形式 | |
|---|---|---|---|
| ココナラ | 初心者向けで個人間取引がメイン、スキル販売が多い | 22% | スキル出品 |
クラウドワークス  | 初心者から経験者まで利用、案件数が多い | 5～20% | プロジェクト形式、 コンペ形式、 タスク形式 |
| ランサーズ | 初心者から経験者まで利用、経験者に特におすすめ | 16.5% | プロジェクト形式、 コンペ形式、 タスク形式、 スキル出品 |
| 初心者向け、システム手数料が業界低水準 | 3~15% | プロジェクト形式、 コンペ形式、 タスク形式、 時間制形式、 スキル出品 |
まとめ
今回は、未経験からWeb制作を学ぶためのロードマップをご紹介しました。
初心者の方にとっては、コーディングやWordPressに苦戦することも多いと思います。
途中で挫折しそうになることもあるかもしれませんが、無理せず自分のペースで、コツコツと続けていくことが何より大切です。
そして、学習が一段落したら、いよいよ営業にもチャレンジしてみましょう！
この記事が、あなたの一歩を後押しできていたら嬉しいです。
