※本サイトで紹介している商品・サービス等の外部リンクにはアフィリエイト広告が含まれる場合があります。

Web制作を
YouTubeで学んで
副業やフリーランスで

自由に働こう!

当サイトでは、Web制作の始め方を解説しています。

このサイトや他SNSで学べる知識を通じて、副業やフリーランス、就職に役立ててくれれば嬉しいです。

Web制作を始めてみたいけど、どうやって学べばいいの?

Webデザイナーになってフリーランスとして独立したい!

コスパ良くWeb制作を学んで副業で稼ぎたい…

そのお悩み!爆速Webなら叶うかもね!

Web制作を副業や本職にするには、ある程度のスキルが必要です。

爆速Web制作の独学ロードマップは、Webサイトの作り方をはじめとした「Web制作を仕事にするためのスキル」を実際に手を動かしながら学んでいけるサイト&動画です。

爆速Webの内容を地道にこなしていけば、Web制作を通してお金や自由な生活を手にできます。

HTMLやCSSといったコーディングスキルが学べる

WEB制作を仕事にする最短手順がわかる

Web制作で稼ぐコツや役立つ情報を知れる

Web制作でお金を稼ぐことができれば、お財布と時間に余裕が生まれます。

副業として月5万円稼げば、生活費に余裕が生まれるし趣味や貯蓄、将来への投資のお金にもなります。

フリーランスとして独立すれば、嫌な人間関係から避難できるし、好きな時に働いて好きな時に休み遊ぶ生活を送れます。収入も青天井です。

当然フリーランスにはフリーランスの悩みがあるので、「Web制作で稼げる=全員が幸せ」というわけではないですが、人生や生活の選択肢が増えるのは大きなメリットのはずです。

確かに自分でお金が稼げるようになったら、人生の自由度が上がるね!

自分に合わなかったらやめればいいだけだよ!気軽に挑戦していこう!

爆速Web制作の独学ロードマップとは?

で、結局「爆速Web制作の独学ロードマップ」ってなんなの?

Web制作を学べるYouTubeチャンネルだよ!

爆速Web制作の独学ロードマップは、ホームページのコーディング方法を中心に動画を投稿しているYouTubeチャンネルです。

動画の解説と一緒にサイトをコーディングすることで、実際に手を動かしながらWeb制作を学ぶことができます。

名前は「ロードマップ」だけど、言う程ロードマップじゃないね

そうだね!だからロードマップや学習手順はこのサイトで紹介しようかなって思っているよ!

Web制作は無料でも学べる

Web制作を学べるって言っても、どうせ高額な有料教材なんでしょ?

爆速Webは無料だよ!YouTubeチャンネルだしね

爆速Web制作の独学ロードマップは無料です。

とはいえ、YouTubeが再生されることで得られる収益はしっかり貰っていきます。
動画を作るのってかなり大変で時間もかかるので、慈善事業だけではやっていけません。

現状は余裕で赤字、動画を作る度にその作業分が赤字になっていく状況なので、動画が多くの方に見られるよう友達や知り合い、SNSなどで広めてくれると助かります。

僕は高額教材やスクールに食われてボロボロだよ…

高額な教材には気をつけようね

爆速Webは誰が運営しているの?

どんな人がチャンネルを運営しているの?

実際に今もフリーランスとしてWeb制作をしている人間だよ

爆速Webの運営者は、Web制作で実際にフリーランスとして働いている僕です。

「超大手一流企業出身です」とか「東大卒でハイスペックです」とか「何億稼ぎました!」とかそんなSNSでバズりそうな感じの人物ではありません。

未経験からWeb制作を学んで、生活に不安がないくらい稼ぎながら、割と自由に生活しているノーマルスペックの人間です。

とはいえ、ノーマルスペックなことは僕の強みでもあり、普通の能力だからこそ僕が伝えることは多くの人にとって再現性が高いはずです。

すごい経歴やハイスペックな人の教えって多くの人には当てはまらない、再現困難なことって多いもんね。それは仕方ないけど

「少しWeb制作ができる友達にゆるく教わっている」くらいの感覚で見てくれたら嬉しいな

【STEP1】Web制作を始める事前準備

これから爆速Webで学び始めるけど、まずは何をすればいいの?

まずは事前準備から始めよう!

これから「爆速Webで学んで副業やフリーランスで自由に働く手順」を解説していきます。

必要なものを揃える

必要なもの…やる気?何を揃えればいいの?

やる気はそんなにいらないよ!ゆるくでも続けていくことの方が大切!

まずは、Web制作に必要なものを一式揃えちゃいましょう!

最初に必須なもの一覧
  • ブラウザ
  • エディター
  • レンタルサーバー
  • パソコン

やってしまえばすぐに完了するので、今すぐ完了させてしまおう!

ブラウザ(Chrome)

まずは、Webサイトを見るためのブラウザを用意します。

Webサイトを作りながらプレビューを見たり、完成したサイトを見るために使います。

ブラウザは何を使えばいいの?

ブラウザはChrome(クローム)を使ってね!

Web制作で使うブラウザはChrome一択です。
理由はサイト作成に必要な開発ツールが揃っているからです。

まだインストールしていない人は速攻ダウンロードしてください。

エディター(Brackets or Visual Studio Code)

次にエディターを用意します。

YouTubeなどから来た方は既に使っているかもですね!

エディターって沢山あるんだね

BracketsかVSCodeを選んでおけばOKだよ

世間的な主流は「Visual Studio Code」。
VSCodeは、Web制作に限らず、プログラミングで幅広く使われているエディターです。

爆速Webでは、「Brackets」というエディターを使用しています。

理由はシンプルですぐに使えて分かりやすいから

VSCodeは初期設定が必要だったり、プログインを導入する必要があったりと、初心者は環境構築で挫折する可能性もあります。

Bracketsはインストールして、すぐにそのまま使えるし、ホームページ制作に必要な機能は十分です。

レンタルサーバー(エックスサーバー)

レンタルサーバーって何?

作ったサイトをネット上に公開するための場所だよ

Web制作にはレンタルサーバーが必要です。

自分で作ったサイトを公開したり、実務で作ったサイトをクライアントに確認してもらう時にも使います。

サーバーはどれを使えばいいの?

エックスサーバーをおすすめするよ!

エックスサーバーがおすすめな理由
  • コスパがいい
  • 通信速度が速い
  • 安定していて信頼できる
  • 管理画面が分かりやすい

僕が長年愛用しているおすすめのレンタルサーバーです。
ちなみに、このサイトもエックスサーバーで運用しています。

他のサーバーが良い人は、もちろんそっちのサーバーでもOKです。

ちなみにサーバーの取得方法とサイトを公開する方法は別の記事で手順を解説しています。

パソコン(既にあるやつでOK)

おすすめのパソコンってある?

Web制作はそこまで処理性能を求めないし、結構なんでもいいよ!

パソコンは今あるやつでOKです。

パソコンは安いものではないので、とりあいずは今持っているパソコンで始めてしまって大丈夫。

パソコン持ってないから買いたいんだよね

ならMacBook Airがおすすめだよ!

パソコンを持っていない人やパソコンを買い替えたい人は、MacBook Air(M1チップ以上)をおすすめします。

理由は性能が十分で重量も軽いからです。

MacはWindowsと比べると確かに少し高めですが、モニターの解像度が高かったり、Web制作に向いている要素を満たしています。

Windowsは確かに安いパソコンもありますが、Macと同等のスペックや軽さ、モニターの解像度を求めるとWindowsパソコンでも普通に高い値段になります。

とはいえ、Windowsパソコンでも全然OKです。僕はMacBook Airを使っていますが、根はWindows派です。
WindowsでもMacでもノートパソコンでもデスクトップでも好きなのを使ってください。

Web制作の事前準備まとめ

爆速で全部揃えたよ!

全部揃えた人は次のステップに進もう!

【STEP2】HTMLとCSSの基本を軽く学ぶ

事前準備を済ませたら次は何をすればいいの?

次はHTMLとCSSの基本をさらっと学ぼう!

HTMLとは?
Webサイトの骨格を作るコードです。

CSSとは?
HTMLで作った骨格に装飾をつけるコードです。

まずは、HTMLとCSSを軽く学んでいきます。

さらっと軽く学ぶだけでいいの?

軽くでいいよ!ガッツリ全部覚えようとしなくてOK!

HTMLとCSSを学習する際、全部覚えなきゃ!と1つ1つ細かに暗記しようとしてしまいがちですが、そんな必要ありません。

「こんなものがあるんだな」くらいで見ておいて、実際に使いながら覚えていけばOKです。
なんなら、最初は覚えてないけど都度調べて使うとかでも全然問題ありません。

HTMLとCSSの基本を学べる動画

上記の様な動画でさらっと基本だけ学んで、ささっと次のステップに進みましょう!

基礎って挫折しがちだから助かる!

分からないことがあっても、いつでも調べられるから大丈夫!

【STEP3】とにかくサイトを作りまくる

実践あるのみ!とにかくサイトを作りまくろう!

いよいよ本番って感じだ!

HMTLとCSSの基本の次は、とにかくサイトを作りまくりましょう。実践あるのみです!

Web制作は一朝一夕で身に付くものではないです。
簡単に身には身につかないからこそ、それが参入障壁になって、続けた人が得をするようになっています。

でもどうやってサイトを作りまくればいいの?

爆速Web制作の独学ロードマップの出番だよ!

爆速Web制作の独学ロードマップYouTubeチャンネルを活用

爆速WebのYouTubeチャンネルでは、たくさんのサイト制作解説動画を出しています。

この動画で何十何百とサイトを作っていけば、自然とWeb制作スキルが身についていくはずです。

動画は日々更新されているので、どんどん実際に真似して作ってみてください!

サイトをたくさん作るだけで意味あるの?

ひたすら数をこなすことと、長期的に続けることが何より重要!

スポーツや勉強、他のことでもなんでもそうですが、上達には慣れが必要です。

僕の実体験として、予定や想像を遥かに超えた数のサイトを作った辺りで、やっとある程度は思い通りのサイトを作ることができるようになりました。

ここは挫折しやすいポイントだけど、ゆるく地道に継続していこう!

【STEP4】ポートフォリオを作る

ポートフォリオってなに?

自分の作品集・実績一覧みたいなものだよ!

副業やフリーランスとして仕事を得るには、ポートフォリオが必須です。

もし自分が仕事を発注する側だったとして、「見せれる実績やサイトを作れる証拠はないけど、作れます!やる気はあります!」って言われても不安なはず。

発注者側の立場から見て、「この人ならしっかり仕事をしてくれそうだな」思ってもらうことが大切です。

発注者側からすると、ポートフォリオがあると安心材料になるよ

ポートフォリオはすごくなくて大丈夫

ポートフォリオ・自分の実績というと「すごいサイトを作らなきゃ!」「キラキラした実績にしなきゃ!」と思いがちですが、普通で大丈夫です。

理由は簡単で、発注者側はすごいポートフォリオを求めてないからです。

すごいサイトを沢山作ってポートフォリオに載せた方が良くない?

ダメではないけど、普通のよくあるサイトで十分だよ

軽自動車を買いに来たお客さんに、何千万円もするスーパーカーのカタログを渡しても、お客さんは買おうって思いません。お客さんは軽自動車のカタログが見たいはず。

牛丼を食べに来たお客さんに、何万円もするフレンチ料理のメニューを渡しても、お客さんはコレじゃないって思うはず。お客さんが見たいのは牛丼のメニューですよね。

Webサイトでも同じで、「よくある普通のHPが欲しい人」は普通のサイトが載ったポートフォリオが見たいはずです。
すごく洗練されたデザイン特化のサイトでなくても、市場には十分な需要があるので自分が作れる範囲のサイトを複数載せるのをおすすめします。

ポートフォリオについては、動画やSNSでも詳しく触れようと思っているよ!

【STEP5】実際に仕事を受注する

ついに仕事受注だ!

ついにここまで来たね!

仕事の取り方は千差万別です。どんな方法でもOK!

仕事の受注方法の例
  • 直接営業で受注
  • クラウドソーシングで受注
  • SNSやサイトなどで受注
  • 制作会社の下請けで受注
  • 知り合いから受注 など

自分に合った方法がおすすめです。ちなみに僕は一度試しに全部やってみました。

それぞれ得意なことや苦手なことがあると思うので、まずは複数やってみて嫌ではなかったものを中心に取り組むのがいいかもしれません。

まずはクラウドソーシングを頑張ってみようかな?

知り合いに聞いてみよう!

仕事の受注方法については、SNSなどでも詳しく扱っていこうと思っているよ!

Web制作をYouTubeで学んで副業やフリーランスで自由に働こう!

Web制作はかなりコスパの良いスキルです。

何年も大学や専門学校に行かなくてもいいし、数ヶ月〜1年程度で習得できます。
さらに収入は青天井で、働き方も縛りがなく自由。しかも無料で学べる。

ビジネスとして見ても、原価ゼロから数万〜数十万、数百万の利益を出せるいい商売です。
在庫リスクも雇用コストもありません。

しかも初期投資はパソコン1台、ランニングコストもサーバーとWifiくらい。

Web制作スキルは、結構チートスキル寄りだと思ってます。

まずはSTEP1の事前準備から済ませて、YouTube動画で実践してみてね!

【STEP1】Web制作の事前準備まとめ

最後まで読んでくれてありがとう!