【独学する人にもおすすめ】Webデザインの職業訓練卒業後からのWeb制作ロードマップ
※本記事にはプロモーションが含まれています
お悩み
Webデザインの職業訓練後、コーディング・wordpressのスキルを上げたいのだけど、何をすればいいのかな・・・

こんにちは!てまりです。

今回は職業訓練卒業後、スキルアップの勉強を独学でして、現在Web制作会社2社と業務提携している私がWebデザインの職業訓練卒業後からのロードマップ(勉強方法)を作ってみました。

職業訓練を卒業後、自分のスキルの無さを痛感した私はコーディング・wordpressのスキルを上げるためスクールに行かずに独学でスキルアップのための勉強をしました。

訓練校やスクールなどにもいかず、全て独学で勉強する人にも下記の順番で勉強すれば効率良くWeb制作を習得できると思います

職業訓練で学んだことは主にHTML、 css、jQuery、 WordPress、 illustrator、Photoshopです。職業訓練については他に詳しく書いた記事があるので、そちらを良かったら読んでみて下さい。

本記事はこんな人におすすめ
  • ・職業訓練後、就活したがスキル不足のため上手くいかなかった人
  • ・職業訓練後、スキルアップのために何をすればいいか分からない人
  • ・訓練校やスクールに行かずに全て独学で学びたい人

てまり
下記のもくじから、読みたいところをタップしたら、読みたい部分に飛べるので、時間のない人はタップしてね♪

コーディングのスキルをあげるためにやったこと

①オンラインサービスと書籍学習

Progateのhtml、css、jQuery、JavaScriptを受講

Progateオンラインプログラミング学習サービスです。

html、cssの基礎的なことは職業訓練で私は学んだので、すでに分かっているところは復習のつもりでどんどん進めていきました。

Progateは分かりやすいので、独学でいちから勉強する人に特におすすめです。

jQueryに関してはネット上にアコーディオンやスライダー、ハンバーガーメニューなど、webサイトによくある実装のコードがググるとでてきますが、後々応用が利くように、ただコピペするのではなく、コードの意味を理解するよう努めました。

書籍学習

下記の書籍を手を動かしながら、読み進めました。

本の中でおしゃれなカフェのウェブサイトを制作していきます 。

この本を読んでいけば、ウェブ制作の知識だけではなく、Webサイトの制作の流れが身につきます。

②模写

次に模写に取り掛かりました 。模写とは既存のサイトをそのまま真似て作ることです。 

模写については必要ないと言われることもありますが、Google Chrome の検証ツールを使う練習になりましたし、自分のコードと模写したサイトのコードを見比べて勉強することもできました。なので、1サイトでもいいので模写をすることをおすすめします。

模写のやり方については下記のはにわまんさんの記事が参考になりました。

Google Chrome の検証ツールの使い方については下記のサルワカさんの記事が参考になりました。

模写はしんどかったですが、chromeの検証ツールで調べたり、とにかくググりまくって、完成させました。コーディングのスキルもさることながら、ググる力もつくのでおすすめです。

➂レンタルサーバーを契約しよう

ここまで進んできて、Web制作でやっていけそうだと思ったらレンタルサーバーを契約することをおすすめします。

なぜ、レンタルサーバー契約が必要かというと下記になります。

  • ポートフォリオ(仕事獲得に必須)を公開するため
  • 実案件でテストサーバーでテストする時に必要なため
  • WordPressに慣れておくため

このようにレンタルサーバーはポートフォリオを公開する時や実務でも使いますし、WordPressでブログなどをやることによって、実案件前にWordPressに慣れておくこともできます。

てまり
下記で紹介する【実案件レベルのコーディング練習ができる教材】を試してみたい方は、サーバーにアップロードして課題提出をしてレビューをもらうことができるので、この段階でレンタルサーバーを借りておくことをおすすめします。

おすすめのレンタルサーバーは別記事で書いているので良かったら読んでみてください。

④実案件レベルのコーディング練習ができる教材に挑戦

模写と実務案件は違います。実案件ではデザイナーがデザインしたデザインデータをみて、コーディングしていきます。

そこで、下記の教材に挑戦しました。

【中級Ex】 デザインカンプからのコーディング実践演習

この教材はデザインカンプからのコーディング実践演習でHTML,CSS,JavaScriptを使用した実案件レベルの教材です。

コーディングが終わった後、サーバーにアップロードして課題提出をし、プロからのレビュー(表示確認)を受けることができます。

サーバーの扱い方の勉強にもなり、コーディングをプロの方に見てもらえる機会はあまりないと思いますので、貴重だと思います。またポートフォリオに課題を掲載できるので、これからコーディングの仕事を獲得したい人にもおすすめです。

てまり
ここまでマストなスキルを紹介してきましたが、ここからは学習中に習得しておいたほうがいいスキルを紹介します!

学習期間中に習得しておいたほうがいいスキル

Sass

Sassは効率的にcssを書くことができる記法です。前述したProgateにもSassのカリキュラムがあります。

書籍なら下記がおすすめです。私はネスト・パーシャル・include・mixinの部分をこの本で理解しておきました。

css設計

css設計なら下記の本がおすすめです。私はBEMという手法を重点的に勉強しました。

WordPressのスキルを上げるためにやったこと

次にWordPressですが、WordPressには既存のテーマをカスタマイズして作る方法(コーディング不要又は少なめ)とオリジナルテーマを制作する方法(コーディング必須)があります。

今回はオリジナルテーマを作るスキルに絞って書いていきます。

①書籍や動画で勉強する

職業訓練では下記の書籍を教科書として使用していました 。基礎を学べます。

次に下記の本を1回通しで、本を読みながら本にあるサンプルサイトを手を動かしながら作りました。(この本はリニューアルしており、実際私が使用した本はリニューアル前の本です。)初心者の人には難しい内容なのでさらっとでOK です!

この本の私の使い方は、実案件をやりながら、疑問点や理解不足を感じたときに該当箇所を読み返すという感じで使用しています。

書籍より動画で学びたい場合は少し費用が掛かりますが、 アキユキさんの講座がおすすめです。

unazuki WordPressコンプリートコース

WordPress学習中、アキユキさんのYouTubeに大変お世話になりました。とても分かりやすい説明をされる方なので、アキユキさんの動画は理解しやすいと思います。

②実案件レベルのコーディング練習ができる教材に挑戦

勉強が終わったら実案件レベルの下記教材をやりました。

【上級】デザインカンプからのコーディング実践演習【WordPress実案件レベル】

私はリニューアル前の上級をやったことがありますが、とても難しかったです。

でもこれができたなら、実案件に自信を持って挑戦できると思うので是非、頑張ってみてください。

プロのレビューが受けられますし、作品はポートフォリオに掲載できるので是非挑戦してみましょう!

ポートフォリオを作ろう

ここまで来たら是非ポートフォリオを作りましょう!

ポートフォリオに関してはコーディングしたものを用意するのも、もちろん良いのですが、その分営業開始が遅くなってしまうので、効率よく時短で作成できるコーディング不要のツールでの制作がおすすめです。

詳しくは、Webデザイナーのためのポートフォリオ作成ツール5選という記事がありますので良かったら参考にしてみてください。

クラウドソーシングに登録してみよう

クラウドソーシングとは企業や個人が仕事を依頼したり、フリーランスが仕事を見つけたりできるインターネットを介したサービスです。

クラウドソーシングを利用するメリットはクラウドソーシングで実績を積むことで、自分のポートフォリオを充実させることができる点と、高評価を得ることでより多くの仕事を受注することができる点です。

また報酬を受け取る面でも、クラウドソーシングの会社を通じて支払いが行われるのでトラブルを防ぐことができます。

クラウドソーシングとして働くデメリットですが、手軽に応募できるので競争率が高く、なかなか仕事を獲得できなかったり、価格競争が激しく、報酬金額が一般的に低価格なところです。ですが、自分のスキルを試したり、実績を積む場として活用できるので、是非登録してどんな案件があるのかチェックしてみましょう。

クラウドソーシングは下記3つが定番です。

ココナラ

クラウドワークス

ランサーズ

てまり
ココナラ 】や【ランサーズ】は自分のスキルを出品し、それを購入してもらうことで、案件に応募せずに案件獲得できる「待ちの営業」ができます!

まとめ

今回はWebデザインの職業訓練を卒業後からのWeb制作ロードマップを紹介しました。

初心者の方にとってはコーディングもWordPressも難しく挫折しやすいと思いますが、継続が大事なので、少し休んでもいいのでコツコツがんばって、少しずつでも前に進んでいきましょう。

そして学習を終えたら、営業に向かって頑張りましょう!

この記事が誰かのお役に立てていたら嬉しいです。

おすすめの記事