初心者が独学でWeb制作|副業で稼げるようになるまでの勉強方法

今回は、初心者が独学でWeb制作(Webデザイン)を副業で始めるにあたって、

実際に副業で稼げるようになるまでの勉強方法などを順序立てて書いてみました。

僕自身、元々はフリーランスエンジニアで、

過去には東京にある制作会社で働いていた経験もあります。

ですので今回の記事は、今現在プログラミングに興味がある初心者の方々に向けて、

コーディング、特にWeb制作に関する基本的な内容をまとめておきます。

Web制作(Webデザイン)に必要なものと、最低限必要なスキル

Web制作(Webデザイン)を副業で始める際に、

実際にお金を稼げるようになるまでに必要なスキルというのが、

  • HTML
  • CSS(Sass)
  • JavaScript(jQuery)
  • PHP(WordPress)
  • せめて必要最低限これくらいのスキルがあれば、Web制作(Webデザイン)で案件を受ける事は可能です。

    あとはこれらに加えて、いろいろなソフトの使い方を少しだけ。

    あとはコーディングのスピードとスキルを上げる事(これが重要)

    Web制作(Webデザイン)に必要なパソコンについて

    Web制作(Webデザイン)をする際に必要なパソコンは、

    インターネット上で1~2万円程度で買えるような中古パソコンでOKです。

    しかし選び方などに多少コツがあるので、もし興味がある方はこちらの記事にも目を通してみて下さい。

    【2万円でOK|初心者から中級者におすすめの中古パソコンの選び方】

    Web制作(Webデザイン)に必要なソフト

    Web制作で一般的に必要となるソフトに関しては、

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe XD
  • こういったものがあると便利です。

    「Photoshop」や「Illustrator」を持っていないという人は、代わりに「GIMP」や「Inkscape」を使っているという人もいるようですが、

    僕は少し古めのバージョンのPhotoshopやIllustratorをパソコンに入れて使ってます。

    ※ほとんどの制作会社やデザイナーは、PhotoshopやIllustratorでデザインを送ってくる事が多いです。

    こういった画像編集系のソフトに関しては、他にもたくさんWeb上に転がっていますので、いろいろ見てみるといいかもしれません。

    次に、テキストエディタと呼ばれるソフト(プログラミングをする際のメモ帳みたいなもの)に関しては、

  • VS Code
  • Sublime Text
  • ここら辺のものを適当に使っていれば問題ないと思います(無料)

    どれを使うかに関しては、完全にその人の好みです。

    FTPソフトに関しては、僕の場合はWindowなので「WinSCP」というものを使っていますが、他にも、

  • FileZilla
  • Cyberduck
  • などと、とにかくかなりの数のFTPソフトがあるので、これもご自身が使いやすいものでOKです。

    Web制作(副業)で稼げるようになるまでの勉強方法

    次にWeb制作(副業)で稼げるようになるまでの勉強方法について。

    基本的には次から説明していく項目を、上から順番に学んでいけば、

    最終的には、Web制作(Webデザイン)に必要最低限の基本的なスキルがついてきます。

    Web制作に必要最低限必要なスキル1|HTML

    HTMLとはウェブサイト(ホームページ)を作る際の骨組みになる部分。

    HTMLがどういったものかを知ってもらうには、こちらのサイトを見てもらえればと思います。

    【誰でも分かる!世界一簡単なホームページの作り方】

    Web制作に必要最低限必要なスキル2|CSS(Sass)

    そして次にCSSに関しては、上で紹介した記事の中でも説明していますが、

    上のHTMLが白黒の下書きだとしたら、

    その白黒の下書きの文字や背景に色をつけたり、文字の大きさを変えたりなどのデザイン部分をこのCSSで行う事が出来ます。

    HTMLとCSSを学ぶ際には、上で紹介したリンク以外にも「Progate(プロゲート)」というサイトが非常におすすめです。

    そしてSassはCSSをもう少し便利にしたようなもので、CSSと比べてもそこまで難しいものではないですし、

    覚えると超絶便利なので、実際にフリーで仕事をする際には必須だと思ってもらってOKです。

    Sassに関しても、同じく「Progate(プロゲート)」で詳しく学ぶ事が出来ます。

    こちらのブログの他の記事の中でも簡単に説明しています。

    【Sass、SCSSの基本的な書き方やメリットを簡単に説明】

    【Sass(SCSS)をCSSに変換、コンパイル|gulpの使い方・設定方法】

    Web制作に必要最低限必要なスキル3|JavaScript(jQuery)

    次にJavaScript(jQuery)に関しては、上のHTMLとCSSに動きをつけたりするような機能がある。

    例えば、画面のボタンをクリックしたり触ったりすると、ボタンが大きくなったり動いたりなどとそういう機能。

    こちらのブログでもjQueryの一般的な使い方や設定方法に関する記事をいくつか書いています。

    【簡単シンプルなハンバーガーボタンの作り方|CSS, jQuery】

    【トップへ戻るボタンを表示する方法】

    【jQueryでアコーディオンメニュー】

    【HTMLとCSSでドロップダウンメニュー作成】

    ここら辺の記事の中で書かれている内容は、実際に実務で使う機会も多いです。

    Web制作に必要最低限必要なスキル4|PHP(WordPress)

    そして次にPHP(WordPress)に関しては、

    世の中のほとんどのウェブサイトが、このWordPress(ワードプレス)で作られていて、

    例えばブログの記事やお知らせの更新などを、

    簡単に出来るような機能を搭載する事が出来るのが、このWordPress(ワードプレス)です。

    PHPに関しても「Progate(プロゲート)」などで、基礎の部分だけを押さえておけばOKです。

    WordPressについて学ぶ際には「ドットインストール」なんかもおすすめです。

    こちらのブログの別の記事の中でも、自分で作ったHTMLのサイトにWordPressを組み込むように説明したものがいくつかあります。

    【WordPressオリジナルテーマの作り方|HTMLをワードプレス化で自作】

    【デザインが異なる固定ページが複数あるサイトをWordPress化する方法】

    ちなみに今見ていただいているこちらのブログのWordPressテーマも、実際に僕がゼロから自作したものです。

    テーマ自体がシンプルなので、ページの表示速度も割と早いほうです。

    Web制作で稼げるようになるまで|サイト模写を大量に行う

    そして上記の勉強がある程度終わったら、今度は実際にいろいろなサイトを模写してみるといいでしょう。

    サイト模写はたくさんやればやるほどに良くて、とにかくいろいろなデザインに対応出来るようになる事と、

    あとはプログラミングのスピードアップ、とにかくプログラミングに慣れる事が非常に重要です。

    そうしないといざ案件を貰った時に、自分が思ったよりもデザインが複雑で時間がかかってしまい、

    貰った納期内に終わりそうもないという事で依頼を断ってしまうと、次から仕事が貰えなくなる事もあります。

    初心者がWeb制作(副業)で稼げるようになるまで|ポートフォリオを作る

    次にポートフォリオに関しては、

    ポートフォリオ=これくらいの事が出来るよーというスキルの証明になるので、

    ある程度、動きの多いデザインの凝ったポートフォリオを用意するといいです。

    複数ページのポートフォリオだともっといいですが、もし1ページでという事だと、

    出来るだけデザインや動きが複雑な、レベル高めのポートフォリオを用意する事をおすすめします。

    あとは、ポートフォリオにお問い合わせフォームなど、いろいろな機能をつける事も重要です。

    【サイトをワードプレス化した後にコンタクトフォーム7を設置する方法】

    初心者が独学でWeb制作|実際に案件をゲットする方法

    次にある程度勉強も終わって、サイト模写も大量に終わって、自信も無事について、

    ちゃんとしたポートフォリオも作ったという事なら、あとは実際に案件をゲットするだけですね。

    実際にWeb制作のお仕事をゲットする方法に関しては、

  • クラウドソーシング
  • 知り合いにお願いする
  • 制作会社に直営業する
  • などなどといった方法があって、

    クラウドソーシングでいえば、例えば、

    ランサーズ」や「クラウドワークス」「Bizseek」「クラウディア」といったような、

    サイトを使う方法がまずは一般的で、特にまだ何も実績のないWeb制作の初心者の方々には特におすすめです。

    ものによっては、本当に一瞬で終わるような案件もあったりするので、

    そういったものをささっと終わらせて、自分のポートフォリオに組み込むのもあり。

    実際にどういった案件があるのかは、まずは一通り自分の目で確認してみて、

    その結果、もし自分のスキルがまだ足りていないと感じるようなら、

    その場合は、また追加で足りない部分を勉強をしてみるなりするといいと思います。

    こういったクラウドソーシングサイトには、Web制作以外にも、Webライターのお仕事や動画編集の仕事などと、

    本当にいろいろなものがあるので、見ていていろいろと勉強になる事も多いです。

    制作会社に直営業をする場合

    あとはもういきなり、制作会社に直接営業をかけるという方法もありますが、

    この場合、案件の報酬単価は高い傾向にありますが、その分プログラミングの難易度が高い場合もあるので(要はもう実践)

    もし自信があるようなら、そういった方法もありです。

    制作会社に直営業をする場合は、今現在、東京近辺に住んでいる人の方が有利です(実際に面接に来てと言われる場合もある)

    そして直営業をする場合には、あらかじめポートフォリオをネット上にアップロードしておいて、

    あとはメールに自己紹介とポートフォリオのURLを添付して送りまくるといった方法で、

    ポートフォリオに関しては、スクリーンショットで渡すよりも、実際にURLを送った方が、

    相手も実際のサイトの動きやソースコードの確認が出来ていいです。

    実際に案件を請け負う際の見積もりの出し方

    見積もりの出し方に関しては、人それぞれでページごとに出す人もいれば、

    例えば僕の場合は、こちらで見積もりを出さずに、基本的には毎回相手側にお任せをしていました。

    なので、もし見積もりがいちいち面倒、難しいという事であれば、基本的にはお任せしていますでOKだと思います。

    初心者が独学でWeb制作|結論はおすすめしない

    といった感じで、今回は初心者が独学でWeb制作(副業)で、

    実際に稼げるようになるまでの勉強方法についての記事だったのですが、

    ここまで書いておいてあれですが、僕自身はWeb制作というのは、実はそこまですすんではおすすめしてなくて、

    昔ならまだしも今現在は、Web制作の単価が非常に安くなっている上に、

    にも関わらず何気にやる事が多いので、その結果、消耗して、

    プログラミング自体が嫌になって、すぐに辞めてしまうというパターンが非常に多いです(恐らく9割以上)

    特にスキルのないフリーランスは割と地獄なので、まず間違いなく長くは続かないです。

    ただただWebサイトが作れるだけだとちょっと弱かったりもして、

    場合によっては、クリエイティブな部分であったりマーケティングな部分であったりと、

    とにかく求められるものが非常に多い(増えてきている)

    にも関わらずWeb制作は、ある程度誰にでも簡単にとっかかりやすい分、競合もかなり多くライバルだらけなんですね。

    なので今現在はもう既に、人で溢れかえってる状態で、仕事が取りにくい=単価が安くなる。

    その結果、思ったよりも稼げない上に、作業も大変でコスパが悪いという事にもなりがちです。

    なので、出来る事ならいきなりフリーランスではなく、Web制作でもなく、

    挫折する前に、さっさと転職保証のついたプログラミングスクールなんかを利用して、

    無理やりにでも、早々とどこかしらの会社に入るという事を強くおすすめしています。

    要するにWebデザイナーではなく、プログラマーをやるべきという事で、その方が実際に需要も求人も多いです。

    Webデザイナーではなくプログラマーを目指すべき|早ければ早いほどにいい

    実際にプログラマーになるにあたっては、実は年齢というものはかなり重要で、

    それに加え、特にプログラミング未経験という事になると、正直な話、

    なかなか自力でどこかしらの会社に入るというのはかなり難しいです。

    ですのでもし本当にプログラマーになりたいとしたら、その時の年齢にもよりますが、

    僕だったら間違いなく独学はしないです=時間の無駄になってしまうため。

    僕が今はまだ中高生という事なら、時間も暇もたくさんあるので、まだまだ全然独学でいけるかもですが、

    僕が今現在もし、20代、30代という事であれば、

    その場合は、間違いなく転職支援付きのプログラミングスクールに行って、そのまま転職の斡旋をしてもらい、

    無理矢理にでも、どうにかこうにかとどこかしらの会社に入れてもらう。

    そうする事で未経験というタグが外れ、今後、更に無敵になれるんですね。

    正直、30代未経験からプログラマーに転職するというのはかなりハードルが高いので、

    普通にまともにやってても、ほとんど上手くいかないと思ってもらってOKです。

    なので、そういった転職保証のついたプログラミングスクールを利用するという事が重要で、そうすれば、

    いざ仮に転職が出来なかったとしても、その場合には全額返金制度があるので、損する事はない。

    そして場合によっては、無料でプログラミングの勉強をする事も可能です。

    プログラミング未経験の場合、年を取れば取るほどに転職できる確率が下がりますし、お金がもったいないとか言ってる時間もない。

    そして入社して数年は頑張る=そしてその後フリーランスになるかはそこからまた考えればいい。

    もし今現在20代の人でも、やっぱり出来るだけ早くどうにかして、どこかしらの会社に無理やり入る事が重要で、

    実際にどこかしらの会社に無事に入る事さえ出来れば、払ったお金に関しては、後からいくらでも回収が可能ですし、

    そうする事で今後は一気に給料も上がりますし、一度しっかりとプログラミングスキルさえ身につけば、

    今後食いっぱぐれる事はなくなりますし、それからフリーランスになっても全く遅くないです。

    正直、Web制作だと今はもう単価も安いし、さっさとディレクターとして外注なんかをしない限りは、

    間違いなく消耗するだけして終わりますし、僕自身も実際にそういった人達をたくさん見てきています。

    Web制作=昔からある=だからわざわざ今の若者じゃなくても出来る人は多い。

    しかも習得が簡単=だからクラウドソーシングなんかで出来る人を探せばいくらでも見つかるわけで、

    割と誰にでも出来る=もう既にいっぱいいる=単価が安い。

    希少性がない=単価が下がるのは当たり前。

    だからただただWeb制作が出来るだけではもうそこまで価値がない=そのくせやる事は多いから消耗して終わるという事。

    プログラマーは需要がある上に給料がかなり高い|リモート求人も多い

    あとは実際にフリーランスエンジニア向けの求人なんかを見てもらえれば分かりますが、

    一度どこかしらの会社で働いた後に、フリーランスエンジニアとして働けるようになれば、

    普通に会社員の時と比べても全然稼げるようになりますし、しかもリモートOKの会社もかなり多いです。

    なのでそういった事が理由で、Webデザイナー(Web制作)ではなくプログラマーを目指すべきで、しかもそれは早ければ早いほどにいい。

    Web制作に未来はないとまでは言いませんが、僕がもし今現在プログラミング未経験で、年齢的にも時間があまり残されていないという事であれば、

    いきなりフリーランスで、単価の安いWeb制作を今後も消耗しながらずっと続けていくような事はせず、

    間違いなく、転職保証のあるプログラミングスクールなどに入って、

    そのコネを使って、無理やりどこかしらの会社にねじこんでもらいます。

    そうする事で未経験というタグが外れ、今後転職をする際にもかなり有利になり、

    今後も食いっぱぐれる事のない、需要の高いスキルを身につける事が出来ます。

    今回の記事が参考になれば幸いです。