総集編！初心者がWeb制作でフリーランスになる為の完全ガイド。勉強方法・ポートフォリオ・営業方法まで完全網羅！

完全初心者だけどWeb制作フリーランスになって独立したい!!

でも勉強法やポートフォリオの作り方、営業方法まで完全未経験からやること多すぎて迷子になりそう…

完全未経験からWeb制作フリーランスになって独立したいという方が増えています。
でも勉強をはじめてみたけど、途中で迷子になったり挫折したりして人知れず勉強をやめてしまう人も少なくありません。

そこで、完全未経験から独立まで迷子にならないようにするに全体像を確認してみましょう。

HTMLやCSSをはじめとするWeb制作に必要なスキル（沢山ある）
ポートフォリオの具体的な作成方法
独立するために欠かせない営業方法

大きく分けると３つのSTEPを順番に進めるだけです。
ゴールが分かっていて何をすればいいのか分かっていれば途中で挫折しそうになっても「ここまできた。頑張ろう！」と思えます。

そこで、完全初心者からWeb制作フリーランスをはじめる方法をまとめました！！
Web制作フリーランスとして独立するまでの全体像を確認したい方、勉強をしていて迷子になりそうな方は参考にしてみてください。

1. 完全初心者のためのWeb制作の勉強法
2. 今すぐ実践できるWeb制作フリーランスのポートフォリオの作り方
3. Web制作フリーランスの営業方法とキャリア戦略
- 3.1. 具体的な案件獲得方法7選
- 3.2. 信用を積み重ねることの大切さ
4. 即独立する？それとも就職する？
- 4.1. Web制作の営業法をもっと詳しく知りたい方はこちら！
5. 【PR】Web制作を勉強するならデイトラがおすすめ！

完全初心者のためのWeb制作の勉強法

Web制作フリーランスになるためには、何をどうやって勉強すればいいの？

Web制作フリーランスの中でも特にコーディング（HTMLやCSSをはじめとする実装）をメインに仕事をする場合、必要なスキルと勉強方法をご紹介します。

Web制作フリーランスに必要なスキルセット一覧

HTML/CSS
Bootstrap
サーバーとドメインの基礎
JavaScript
jQuery
Sass(Scss)
PHP
SQLの基礎
WordPress

こんなにあるの？

Web制作でも特にコーディングメインに仕事をする場合、必要なスキルセットです。
こんなに勉強できるの？と心配になる方もいるかもしれませんね。

どれも大切な技術です。
特にHTML/CSS、jQuery、Sass、WordPressは実案件でもよく使うので最初、重点的に勉強した方が良いところです。
しかし最初はさらっと勉強して後から詳しく勉強すれば良いところもあります。

例えばWeb制作を勉強して実際にフリーランスとして独立して仕事をしている方がよく言ってる意見なのですが

Bootstrapは実案件では使う機会が少ない
JavaScriptはjQueryを理解するための前提知識として分かる程度でも最初は十分
PHPもWordPressを理解するための基礎的な部分だけ最初は分かれば大丈夫
SassはCSSの延長線上でCSSを理解していれば習得は難しくはない

「JavaScriptやPHPは深い入りしすぎない方が良い」
ってSNSでWeb制作フリーランスをしている人がよく言ってるよね。

もちろん経験を積むに連れて、それぞれの知識を深めていく努力と姿勢はWeb制作に関わる職業人として必要です。
しかし最初から完璧に勉強しようとすると挫折してしまうので最初、重点的に勉強する部分はどこなのかを頭に入れておくと良いでしょう。

いきなり全部、完璧に勉強するのは現実問題、難しいもんね…

全部、大事なスキルだけど最初に重点的に勉強する分野は限られている

勉強する教材のまとめ

市販の書籍やプログラミング学習サービス、有志のつくってくれた学習素材を組み合わせることで学習は可能です。

最近、市販のWeb制作向けの書籍やUdemyも充実してきているよね。

先に挙げたHTML/CSS、jQueryなどの必要なスキルを扱っている市販の書籍やUdemyの教材で基礎を学習します。そして実案件でよくある渡されたデザインを再現するデザインカンプからのコーディングの練習をしましょう。

【おすすめの市販の教材＋Udemy】

Progate・・・人気のプログラミング学習サービス(税別月980円）
Web制作者向けの学習書籍
Udemy・・・オンライン学習プラットフォーム（買い切りの動画教材が販売されています。セールの時に買うとお得！）

【有志の方の作っているデザインカンプ】

クリスタさん（無料・カンプのみ）
KROWLさん（無料・解説あり）
しょーごさん（有料・JSや模範解答あり）

【勉強すること】

ProgateでHTML/CSSやjQuery、Sass等のコースを一通りする
おすすめの参考書やUdemyなどの動画教材で学習
デザインカンプからのコーディングやWordPressのオリジナルテーマを一から作る

「デイトラWeb制作コース」はWeb制作に必要な内容が揃っている！

市販の書籍やUdemyのような動画教材も充実してきたけど、デイトラのWeb制作コースを受講するメリットってあるの？

市販の書籍や動画教材でも一般的なHTMLやCSSをはじめとしたスキルは学べます。
しかし、デイトラのWeb制作コースはオンラインスクールである特性を生かした強みがあります。

デイトラのWeb制作コースだけで完全未経験から独立までに必要な内容が全て揃っています。

現役エンジニアのオンラインメンターに分からないところを聞ける
完全初心者でもステップを踏めば仕事をはじめるレベルに到達できる
情報がアップデートされていく

デイトラの強みはオンラインで現役で活躍しているメンター陣に分からないところが聞けるところです。

メンターにオンラインで質問できるのは嬉しい！
書籍を一人で読んでいても分からないところがあると勉強って進まないんだよね…

そしてデイトラのWeb制作コースだけでHTML/CSSからWordPressまでの仕事に必要なスキルをカバーしています。

動画による解説からデザインカンプからのコーディング教材やWordPressのオリジナルテーマの開発の教材までデイトラのWeb制作コースに全て詰まっています。しかもコードレビュー（自分の書いたコードの良いところや改善すべきところを指摘してもらえる）してもらえる課題まであります。

市販の教材を組み合わせて必要なスキルを勉強することもできますが、あれもこれも全部揃えるのは意外と大変です。
デイトラのWeb制作コースは迷わずに必要なWeb制作の知識を一通り身につけられるようになっています。

また一般的なプログラミングスクールと異なり一度、購入したらずっとコンテンツは視聴でき、しかも内容もアップデートされていきます。もちろんアップデートされた追加コンテンツは無料です。

Web制作コースを買って迷わずに完走すれば完全未経験からでも必要なスキルを勉強できるんだね！

Web制作の学習法をもっと詳しく知りたい方はこちら！

「Web制作の学習法をもっと詳しく知りたい！」
そんな方はこちらの記事を参考にしてみてください。

おすすめの書籍や学習ステップ、デイトラWeb制作コースの特徴を詳しく解説しています！

▶︎Web制作の学習法をもっと詳しく知りたい！

今すぐ実践できるWeb制作フリーランスのポートフォリオの作り方

Web制作の勉強をしたら営業資料のポートフォリオを用意しないとね。

仕事を依頼する前に、どんなWebサイトをつくってくれる人なのか確認したいですからね！

Web制作の勉強を一通り終えたら営業資料のポートフォリオを用意するのが一般的です。
フリーランスとして独立するときもWeb制作会社に就職活動をするときにもポートフォリオの提出を求められます。

ポートフォリオを作るなら失敗したくないですよね！
Web制作、特にコーディングメインの方のポートフォリオ作りについて解説します。

ポートフォリオを作る理由

Web制作フリーランスがポートフォリオを作らないといけない理由はクライアントを不安にさせないためです。

依頼主はあなたが、どんなWebサイトを作れるのか？
あなたの技術力がどれぐらいあるのか？

お金を出す側のクライアントは知らない人に仕事を依頼するのは不安なのです。

Webサイトは決して安い買い物ではありません。
格安Web制作会社のランディングページでも１枚20万円前後することはざらにあります。

お金を出す依頼主の目線で考えてください。

これまで、どんなWebサイトを作ってきたのか分からない人に仕事を依頼するのは不安になるのも当たり前です。
過去にポートフォリオを見ずに仕事を依頼して失敗してしまった方もいるかもしれません。

こしば、お客様に後悔させたくないからポートフォリオをちゃんと作るよ！

具体的なポートフォリオ作成方法

デザインカンプを用意する
コーディングする
レンタルサーバーにアップする

Web制作でも特にコーディングの仕事もするならコード（HTML/CSS）を確認できるポートフォリオを用意するべきです。

Webサイトのポートフォリオをスクリーンショットでご用意しました！

コーディングの実力も確認してからじゃないとお仕事を頼めないよ…
画像だけのポートフォリオだと、どんなHTMLやCSSを書いているのか分からないから困る。

Web制作の仕事をする際には大きく分けて

Web制作会社のパートナーになって仕事をする
エンドクライアントを相手に仕事をする

２つに分かれています。

Web制作会社のパートナーになって仕事をする場合、Webサイトの見た目だけでなく中身まで見られます。エンドクライアントだけを相手に仕事をする場合もレンタルサーバーにWebサイトを公開した経験は無駄にはなりません。

独立当初はWeb制作会社にもエンドクライアントにも営業するケースが多いので、どちらでも通用するポートフォリオを用意しましょう。

Web制作のポートフォリオはデザインカンプからコーディングしたWebサイトをサーバーにアップして、本番環境に近い形で見せるようにするよ！

ちゃんとサーバーにアップされたWebサイトのポートフォリオだとコーディングの実力も確認できるので助かります！

ポートフォリオ作成で注意すること

１　ポートフォリオで『デイトラの課題』など固有名詞は書かない
２　スクールでやらされた課題という書き方はしない
３　ポートフォリオの元ネタを聞かれたら、正直に答える

ポートフォリオを用意する際はデイトラをはじめとしたスクールの課題であることを前面に押し出すのは避けた方が無難です。

どこかのスクールの課題？そんなの見飽きたよ。
そんなのでちゃんと仕事できるの？

と思われてしまうこともあるからです。
最初は独学で教材を買ってポートフォリオを作ったという説明を依頼主にした方が無難です。
ただし、元ネタを聞かれたら正直に答えましょう。

また注意点として、Web制作会社やクライアントによってはコーディングの力だけでなく、デザインのスキルを見たいケースもあります。デザインもコーディングも合わせて、お願いしたいケースもあります。

Web制作で特にコーディングをメインに活動する場合も、オリジナルのデザインカンプを用意した方が良いこともあります。
同じデザインのポートフォリオを使って営業する人が増えると

また同じデザインカンプのポートフォリオか…

とネガティブな印象をもたれてしまうことも残念ながらあるからです。
またデザインカンプを自作していないのにデザインも自分でやりました！と言うのは嘘なので絶対にやめましょう。

Web制作のポートフォリオを通して人柄や誠実さも見ています！

こしば、ちゃんとしたポートフォリオを用意して誠実な仕事をするよ。

Web制作のポートフォリオの作り方をもっと詳しく知りたい方はこちら！

「Web制作のポートフォリオの作り方をもっと詳しく知りたい！」
そんな方はこちらの記事を参考にしてみてください。

おすすめのレンタルサーバーやコーディングをする際に気をつけるべきポイントも詳しく解説しています！

▶︎Web制作(コーダー向け)のポートフォリオの作り方を詳しく知りたい！

Web制作フリーランスの営業方法とキャリア戦略

ポートフォリオを用意したら営業をしないとね！

完全未経験からWeb制作フリーランスとして独立するとなると営業が欠かせません。
技術だけを磨いても勉強沼にはまってしまい、いつまで経っても仕事をせずに永遠に勉強を続けてしまう人も少なくありません。

Web制作フリーランスとして独立するための重要なポイントは以下の３つです。

技術だけで磨いても仕事にならない
あなたを必要としてくれる人に見つけてもらう努力が必要
業務スキル×積極性＝成果

勉強も大事だけど、勉強だけじゃ独立できないんだね…!

具体的な案件獲得方法7選

友人からの紹介
クラウドソーシングの活用
プロダクト販売系サイトの活用
エンドクライアントへの営業
営業パートナーと組む
Web制作会社に営業
ブログ×LP×SNS

大きく分けて具体的な案件獲得方法は７つあります。

１：友人からの紹介

友人からの紹介は心理的なハードルも低く取りかかりやすいのではないでしょうか。
FacebookなどのSNSで「Web制作をはじめました！」と投稿したり、日常会話の中でWeb制作をはじめたことを伝えてみてください。意外に反応があるかもしれません。

初案件にちょうど良さそうだね！身近な人のWebサイトを作ってみようかな。

２：クラウドソーシングの活用

クラウドソーシングとはランサーズやクラウドワークスなどの仕事のマッチングサイトのことです。
手数料が約10%〜20%ほどかかりますが、仕事を発注したい人が集まっています。また仮払いというシステムがあり仕事の受発注が成立するとお金を確実に支払ってもらえる安心感もあります。

クラウドソーシングは手軽にはじめられるのが良いよね。

３：プロダクト販売系サイトの活用

ココナラなどの自分のサービスを登録できるサイトでWeb制作のサービスを販売する方法です。
登録してお問い合わせがあれば仕事につながります。うまくいけば待っているだけで仕事が入ってきます。
一般的にクラウドソーシングと同様に手数料が発生します。

登録するだけなら、そんなに手間じゃないしやって損はないね！

４：エンドクライアントへの営業

「エンドクライアントへの営業」は直接、Webサイトを必要としている企業や団体と契約してWeb制作をします。
新規開拓し続けるのが大変だったり契約まわりも全て自分で進めなければいけない大変さもあります。

しかし直接、顔を合わせて企業と仕事ができるのでやりがいがあります。

Webサイトを作ってほしいお客様を探し続けるのは大変だけど手数料はとられないし、お客様に近いところで仕事ができるのは良いね。

５：営業パートナーと組む

営業パートナーに案件を代わりにとってきてもらう方法です。
例えば営業パートナーに受注額の10%〜20%ほど支払い代わりに営業してもらう方法があります。
自分が営業が苦手だったりWeb制作に集中したい場合は営業パートナーと組むのもひとつの方法です。

お友達の保険の営業マンとかに声をかけてみようかな…!!

６：Web制作会社に営業

Web制作会社のパートナーになって案件を定期的にいただく方法です。
Web制作会社は制作の仕事が集まっており人手不足のところもあります。

中には案件があふれ外注先を探しているWeb制作会社もあります。
複数社と業務委託の契約をすれば安定して仕事が入ってきます。

ただしWeb制作会社の求める技術レベルは一般的に高めです。
しかし未経験で一緒に仕事をすると勉強になることも多いのではないでしょうか。

Web制作会社は仕事が集まるハブになっているんだね。

７：ブログ×LP×SNS

自分のブログやLP、SNSで情報発信をして見込み客を集め、お問い合わせフォーム経由で案件を受注する方法です。
Web制作関連のお役立ち情報を発信して認知を獲得して「この人に任せれば大丈夫！」と思ってもらえるようになれば、お問い合わせも気やすくなります。

ブログやLP、SNSで信頼を積み上げるのに時間はかかりそう。じっくり取り組まないとね。

信用を積み重ねることの大切さ

Web制作フリーランスが増えたことで営業のノウハウや情報発信も活発になりました。
一方で一部の未経験の駆け出しフリーランスの営業マナーが悪いことも指摘されるようになってしまいました。

【注意喚起】「経歴を偽れ」「他人の作品を実績として使え」。それは営業テクニックではなく、犯罪です。

例えば

・他人の作ったポートフォリオを自分が作ったと偽る
・経歴を偽る
・仕事を途中で無責任に投げ出してしまう
・デザインカンプ通りにコーディングせずにデザインカンプ通りにならないのが普通だと開きなおる

お客様に対して誠実な対応をせずに目先の売上ばかり追ってしまう事例も話題になりました。

同じWeb制作フリーランスを目指す立場として残念だね…

完全未経験で独立したばかりだと目先の売上にばかり目が行きがちな人も出てきます。

例えば同時期に勉強をはじめた人が案件獲得に成功し稼いでいるのを横目に、自分が稼げていないと焦ってしまうのも無理はないのかもしれません。

中には無計画に独立してしまい「生活費をすぐに稼がないとまずい」と焦っている方もいるかもしれません。
しかし自分の都合だけで誠実な対応をとらずに目先の売上だけを追ってしまうと長い目で見て信用を失います。

そしてWeb制作やフリーランスの世界は意外に狭いものです。
悪い評判はすぐに広まりますから最終的に仕事が回ってこなくなってしまいます。

何よりも不誠実な態度のWeb制作フリーランスが増えることで不幸になる人が沢山、出ててしまっても良いのでしょうか。また信用を積み重ねることが結果的にリピーターや紹介につながり結果的に仕事が入ってくるようになります。誠実に信用を積み重ねることが結果的に一番の営業になります。

また、お金を稼ぎたいなら『相手を稼がせること』が大切です。

お金を稼ぎたいなら『相手を稼がせる』ことです。WEBサイトを作って稼ごう！ではなく、WEBサイトを作って『お客さんを稼がせる』こと。
『GIVE』という言葉は広まっても、本当の意味でこれを実践できてる人は少ない。
少し意識を変えるだけで驚くほど結果が変わります。ベクトルは相手に向けよう。
— ショーヘー@デイトラ運営 (@showheyohtaki) April 10, 2021