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

こしば
完全初心者だけどWeb制作フリーランスになって独立したい!!
こしば
でも勉強法やポートフォリオの作り方、営業方法まで完全未経験からやること多すぎて迷子になりそう…

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

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

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

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

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

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

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

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

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

  1. HTML/CSS
  2. Bootstrap
  3. サーバーとドメインの基礎
  4. JavaScript
  5. jQuery
  6. Sass(Scss)
  7. PHP
  8. SQLの基礎
  9. 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・・・オンライン学習プラットフォーム(買い切りの動画教材が販売されています。セールの時に買うとお得!)

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

勉強すること

  1. ProgateでHTML/CSSやjQuery、Sass等のコースを一通りする
  2. おすすめの参考書やUdemyなどの動画教材で学習
  3. デザインカンプからのコーディングや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制作会社のランディングページでも1枚20万円前後することはざらにあります。

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

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

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

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

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

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

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

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

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

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

2つに分かれています。

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

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

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

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

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

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

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

Web制作会社の人
どこかのスクールの課題?そんなの見飽きたよ。
そんなのでちゃんと仕事できるの?

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

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

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

Web制作会社の人
また同じデザインカンプのポートフォリオか…

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

依頼主
Web制作のポートフォリオを通して人柄や誠実さも見ています!
こしば
こしば、ちゃんとしたポートフォリオを用意して誠実な仕事をするよ。

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

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

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

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

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

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

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

  • 技術だけで磨いても仕事にならない
  • あなたを必要としてくれる人に見つけてもらう努力が必要
  • 業務スキル×積極性=成果
こしば
勉強も大事だけど、勉強だけじゃ独立できないんだね…!

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

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

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

1:友人からの紹介

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

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

2:クラウドソーシングの活用

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

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

3:プロダクト販売系サイトの活用

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

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

4:エンドクライアントへの営業

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

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

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

5:営業パートナーと組む

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

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

6:Web制作会社に営業

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

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

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

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

7:ブログ×LP×SNS

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

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

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

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

例えば

・他人の作ったポートフォリオを自分が作ったと偽る
・経歴を偽る

・仕事を途中で無責任に投げ出してしまう
・デザインカンプ通りにコーディングせずにデザインカンプ通りにならないのが普通だと開きなおる

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

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

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

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

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

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

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

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

Webサイトを作って稼ごう!ではなく、Webサイトを作って『お客さんを稼がせる』ことを意識しましょう。
営業では意識を自分に向けるのではなく相手に目を向けてましょう。

結果を出せれば自然にフリーランスとしての信頼と評判が積み上がります!

即独立する?それとも就職する?

こしば
いきなり独立するべきか一旦、Web制作会社に就職するべきか迷っているんだよね。
ショーヘー
僕、個人としては未経験からいきなり営業するよりもWeb制作会社に就職して最低2〜3年は経験を積んでから独立するのをおすすめします。

「未経験からフリーランスになりたい!」と考えている人は多いのではないでしょうか。
時間や場所にとらわれずに自由に働けるライフスタイルに憧れてWeb制作フリーランスを目指している方もいますよね。

こしば
正直、時間と場所にとらわれずに自由に生きたい!と思うところはあるよ。

もちろん未経験からWeb制作フリーランスとして独立することは不可能ではありません。
実際に未経験から独立して生計を立てている方もいます。

しかし、完全未経験から独立してWeb制作フリーランスを続けるのは大変です。
会社員のように必ずお給料が入る訳でもないので生活が安定する保障もありません。

そしてWeb制作フリーランスとして独立する前に就職するメリットにも注目してみてください。

ショーヘー
Web制作会社に入れば制作スキル・顧客対応・仕事の流れも身につきますそれに退職時に在籍していた会社の繋がりから案件をもらえることもありますしね。

完全未経験からWeb制作フリーランスとして独立するか就職するかは最終的に個人の判断です。
どうしても即独立しなければいけない理由がある人もいるでしょう。

しかしWeb制作フリーランスとして独立する前に就職するメリットにも目を向けて良いのではないでしょうか。

こしば
完全未経験からWeb制作会社に就職すること自体が難しいんじゃないの…?
ショーヘー
フリーランスとしてWeb制作の実案件の経験を積むと完全未経験じゃなくなりますよ。
Web制作フリーランスとして営業して実績を積むことで就職もしやすくなりますよ!
こしば
Web制作の実績をフリーランスで積んでから就職する方法もあるんだね。
こしばもWeb制作の営業をしながら自分がフリーランスに向いているか就職に向いているか考えてみるよ!

Web制作フリーランスとして独立された方がWeb制作会社に就職することもあれば、Web制作会社に就職した方が独立されることもあります。

フリーランスも就職も雇用形態や働き方の違いでしかなくボーダーレスに行来きできる時代になりました。
ご自身のキャリアに合わせてじっくり考えてみてはいかがでしょうか。

Web制作の営業法をもっと詳しく知りたい方はこちら!

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

それぞれの営業法のメリット・デメリットや営業をする際に大切な心構えをより詳しく解説しています!

【PR】Web制作を勉強するならデイトラがおすすめ!

東京フリーランスは未経験でも完走すれば、Web制作の仕事ができるレベルになるオンラインスクール”デイトラ”を運営しています。デイトラはWeb制作を本気で自分の仕事にしたい人のためのオンラインスクール

作っていてワクワクする制作課題やSlackを通じた学習コミュニティ、分かりやすい動画など楽しく続けられる工夫が詰まっています。

Web制作を実際に仕事をする際に求められる実践的なスキルを学べます!

デイトラのWeb制作コースは、仕事に必要な業務スキルから逆算して教材が作成されています。
一般的な多くのスクールが扱わないのに、実務ではよく使うツールの使い方や技術も扱っています。

本記事で紹介した

  • エンドクライアントへの営業
  • Web制作会社への営業

どちらの営業法でも使えるWeb制作のスキルを紹介しています。

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

実案件と同じようにデザインデータからコーディングする課題や、WordPressのブロックエディター を使った新しい制作方法までフリーランスで仕事をする際の、実案件から考えだされた実践的なカリキュラムは他のスクールにはないデイトラの強みです。

さらに、挫折させないメンター陣、アップデートされ続けて無期限で視聴できる講座内容、活発に活動しているオンラインの学習コミュニティなどデイトラの魅力は多岐に渡ります。

Web制作のポートフォリオの作り方に悩んでいる、あなたもデイトラをチェックしてみてくださいね!

 

【Webスキル診断】“一生使えるスキル”を60秒で診断しよう!

「フリーランスになりたいけど、どんなスキルを身につければいいかわからない」という悩みを解決すべく、東京フリーランスでは【Webスキル診断】をLINEで無料実施中です! Web制作・Webデザイン・アプリ開発・動画編集など「自分に合った理想の働き方は何か」を見極めていただけます。

Web制作カテゴリの最新記事