- フリーランスエンジニアになるため何をしていったらいいの?
- フリーランスになるにはどれくらいの期間がかかるの?
という疑問に対して解説していきます。
ちなみに自分のことを軽く紹介すると気のような経歴になります。
- ステップ1営業大学卒業後、眼科機械の営業
- ステップ2webデザイナー自社開発のベンチャー企業で未経験からデザイナー
- ステップ3コーダー上記ベンチャー企業でコーディングも経験
- ステップ4フロントエンドエンジニア(会社員)制作会社でフロントエンドエンジニア
- ステップ5フリーランスのフロントエンドエンジニアフロントエンドエンジニアのフリーランス2年目
この記事読み進める際に、前提として以下の注意点があります。
- 自分はフロントエンドエンジニアなのでフロントエンド(html,css,JS)のフリーランスになる想定のロードマップですが、プログラマーであっても同じような道のりを辿ることは可能かと思います。
- 主に対象となる方はhtml,cssをこれから始めようとする方、始めてみたけどいまいち何をしたらいいかわからない方、フロントエンドエンジニアとその他webエンジニアを目指してる方です。
- いきなりフリーランスは精神的にも金銭的にもきついので、安全で再現性ある方法です。
- お金を稼ぐが前提でエンジニアになるのは、あまり好きではないですが1~2年で年収600万は可能(あくまで目安)
対象となる方は続きを読んでいただければと思います。
STEP1:学習(〜3ヶ月)
何事も初めが肝心ですがエンジニアも同じです。初めに面白くなさそう、難しいと感じては挫折して終わりです。
自分としては初動の動きとして以下を提案します。
職業訓練校かドットインストール、もしくは両方やるのがよいです。
順序として、ドットインストールを一回やってみて自分に合いそうだったら職業訓練校に行く流れです。
以下それぞれ理由を挙げます。
ドットインストール
もし職業訓練校には行けない、行くまでに時間があるという方はまずドットインストールで学びましょう。
ドットインストールは自分がhtmlを覚えたころから存在していて(つまり2012年くらい)未だに圧倒的な人気を誇るプログラミング学習サービスです。
有料版もありますが無料版でも十分初歩的な勉強はできます。主に以下の動画を学習しましょう。
- はじめてのHTML(全15回)
- はじめてのCSS(全17回)
- 実践!ウェブサイトを作ろう (全16回)
- はじめてのJavaScript (全11回)
必須であるレスポンシブデザインは有料なので、有料版に移ってもいいのですが、書籍で学ぶのもおススメです。
以下の書籍は個人的におすすめです。
progateもいいですが、progateはあくまで初歩の初歩なので次にどうしたらいいんだろうという人も多いようです。
サイト作成できるようになるためには、人から教えてもらう方が圧倒的に効率的です。
職業訓練校
職業訓練校とは、国が再就職を斡旋する施策で、雇用保険をもらいつつ手に職系の技術を学ぶことができます。
オフィシャルサイトが少しわかりづらいような気がしたので最寄りのハローワークへ行って聞いてみるとよいです。
実はというと自分自身、7年前何しようかな~と悩んでいた時、ハローワークでWebデザイナー科の職業訓練校を見つけ応募しました。それで今があるので、職業訓練校には感謝しています。
また余談ですが、ハローワークのおばさんにオススメしないとか言われて帰らされる人もいるようですが、熱意はアピールしとくべきです。
職業訓練のメリット
- 時代に合わせて学ぶべきものをアップデートしている
- 同じ境遇の一緒に学ぶ仲間がいる
- 人の目があるのでモチベーションを下げることなく課題に向き合える
- 卒業制作があるのでそれをそのままポートフォリオにできる
- 雇用保険をもらいながら勉強ができる
以上、メリットは沢山ありますが、個人的には一人ではないというのが一番のメリットだと思います。
スクールもスクールによってはオンラインだったり教室へ行っても毎回知らない人ばかりなので知り合いはできず孤独を感じます。
職業訓練校は学校のように同じメンバーが週5で授業形式で学ぶので仲間ができやすいですし、モチベーションが上がります。
ただ仕事を辞めないと職業訓練校に通う資格はないので、仕事を続けつつ学びたいという人は難しいかもしれません。
ですが、ロードマップを見てる方は生半可な気持ちでやろうとしてる方ではない人が多いと思いますので、仕事を辞めた方が時間が使えるので本当にエンジニアとして生きていくという覚悟ができているなら全然ありだと思います。
もし、独学は辛いし、仕事しながら学びたいという方はスクールもありです。
スクールは、バックエンド言語が強いのでサービスを作りたいという方はおすすめです。
▼【リスクなし】最強の無料プログラミングスクールはこちら▼

その他参考になるサイト
その他初学者の方に参考になるサイトを挙げます。
- MDN←フロントエンドエンジニアにとっての教科書
- コリス←更新頻度高い、古くからあって今も人気
- クリエイターボックス←この業界で知らない人はいないManaさんのサイト
- サルワカ←その名の通りサルでもわかるようにわかりやすく解説してくれるサイト
- はにわまん←今の若い初学者から絶大な人気を誇るサイト、わかりやすい
- フロントエンドメモ←私のサイト、業務で躓いた時の備忘録
- photoshopvip←デザインで役立つサイト
参考サイトはこの他にもあります。
検索することで見つかっていくと思うので、参考になるサイトをブックマークしていくといいです。
またfeedlyというアプリは更新された記事をまとめてくれるので、便利です。
入社前に覚えておくべきコーディングのTIPSを下記カテゴリにまとめていますので、知らないことがないかチェックしてみてください。
はじめの3ヶ月間で持つべきマインド
マークアップも含めプログラミングは、長期戦です。
終わりがありません。
自分はこの業界7年くらいいますが未だ駆け出しエンジニアだと思って勉強してます。
そのくらい長い戦いではあるんですが、1番覚えるのが大変なのはやはり最初の数ヶ月です。
ただこの時期にがむしゃらに頑張った経験は無駄にならないですし、逆にだらだらやってしまうと多分覚えられずに終わってしまいます。
なのでこの3ヶ月は他の何よりも学習を優先することをおすすめします。
知識は上塗りしていけばいいので、完璧でなくてもまず終わらせることも大事です。
それを繰り返すことでより完璧に近づいていきます。
学習を習慣化させるためには以下の記事を参考にしてみてください。
SNSでアウトプット
学習においてアウトプットは記憶を定着するのに有効な手段です。
SNSで簡単に成果をアウトプットしましょう。
大体1日8時間を週5でやります。
土日も空いてる時間があれば学習しましょう。
計480時間くらいです。
STEP2:制作物、ポートフォリオ作成(3ヶ月目or4ヶ月目~)
ポートフォリオとそれに載せるサイトの作成に入ります。
個人差はありますが、学び始めてだいたい2〜3ヶ月でポートフォリオと制作物の作成に取りかかれると思います。
ちなみに最近流行りの模写は個人的にポートフォリオに含めない方がいいと思ってます。
何故なら模写はそれはそれで勉強にはなるのですが思考停止でコピペで出来てしまうため、面接官へのアピールとしては1番低いレベルになってしまいます。
サイトであれば命名ルールから自分で考えるため見る側としてもその人の実力がわかりやすいですね。
模写を含めずサイトを2つ作りましょう。
サイト制作
いきなりサイトを作ると言われても難しいかもしれませんが、自分が作ってみたいサイトなら何でも構いません。やり方としては以下です。
- ステップ1作りたいジャンルの参考サイトを3つ探す(10Pほどの小規模サイトがベター)
- ステップ2ページ構成、デザインをある程度真似する
- ステップ3photoshopでデザイン
- ステップ3コーディング
詳細は下記記事に書きました。
ポートフォリオ
ポートフォリオの簡易テンプレートは以下に載せました。

注意点
ここで注意点ですが、オリジナルサイトを作るときは教科書がない状態になるので必ず躓きます。そういう場合自力で解決できない場合は人に聞いた方が早いです。
またサイトを作成したと思った方も経験者に見てもらってクオリティをを上げることで面接に持って行けるレベルになると思いますので、是非恥ずかしがらずレビューを依頼しましょう。
STEP3:面接
ポートフォリオが出来たら面接開始です。
面接や企業選びで気を付けるべきことは下記記事に書いていますので良ければ参照ください。
職務形態ですがバイトでも全然OKです。
大事なのはその企業がレガシー(古い)な技術を採用していないことです。
企業選びでこの後の道が変わってしまいますので、慎重に企業選びをしましょう。
ただ企業選びで失敗しても辞めてまた転職すれば大丈夫なので、迷ったら入ってみましょう。
STEP4:Web制作会社or自社開発企業に入社(1~2年間)
ここの年数は個人差ありです。長ければ長いほどしたずみが長いので、技術力が高まると思います。自分の場合はここに6年費やしました。
いきなりフリーランスになりたいという方もいるかもですが、自分はおすすめしません。
企業に就職することのメリット
なぜなら企業に入社することは様々なメリットがあります。
- 仲間ができる
- 先輩に教えてもらえる
- 否が応でも幅広く業界のスキルを身につけられる
- 精神的にも金銭的にも安定している
独学後すぐにフリーランスという方もいるのは事実なのですが、上記のメリットを抜かしてフリーランスになるのはもったいないです。
フリーランスになってからの金銭的な伸びやベースのスキル、そして精神状態が全然違うからです。
Web制作会社を選ぶことのメリット
フロントエンドエンジニアが主に働く現場は2つあってWeb制作会社と自社開発系企業です。
どちらもメリットデメリットはあるのですが、1からサイトを作れるというメリットがあるのはWeb制作会社です。自社開発だと部分的な開発になってしまうので総合的な技術が身につきません。
自社開発に興味があるなら1年間Web制作会社、2年目を自社開発系企業というのもおすすめです。
もちろんここの年数は人によってばらつきはあるので、あくまで目安になります。
ちなみに自分の場合自社開発系企業を1年、その後Web制作会社を5年務めています。
企業選びはWeb専門の転職エージェントがおすすめです。
- レバテックキャリア
:フリーエージェント【レバテック】の転職エージェント
- マイナビクリエイター
:業界最大手【マイナビ】のIT専門エージェント
- WORKPORT:【IT業界・ゲーム業界】に強い、転職決定人数 No.1
STEP5:業務委託のフリーランス
こうして晴れてフリーランスの仲間入りです。
フロントエンドエンジニアのフリーランスは大きく分けて2つ働き方があります。
- クラウドソーシングなどで1件、1件受注して在宅や好きな場所で働くノマド系フリーランス
- 主に週3~週5、企業に常駐し働く業務委託系フリーランス
ノマド系フリーランス
フリーランスと言えば前者を思い浮かべがちだと思うのですが、ノマド系フリーランスはかなりきついです。
ブログ等で大きな収入があれば別ですが、単発のWebサイト制作だけで食っていくのは最初の1~2ヶ月はいいかもしれませんが、全然楽にならないのでおススメしません。。
その辺の理由は下記記事に書いています。
業務委託系フリーランス
業務委託はフリーランスエージェントという紹介業をしている会社とコンタクトをとり斡旋先の企業を紹介してもらいます。
先日どのくらいの経験で業務委託系のフリーランスになれるのか聞いたところ1~2年の経験での案件もあるようだったので、驚きました。
もちろん年数だけではないので企業が求める技術に到達していればの話ではありますが、全然可能になっているという現実があります。
ちなみにその案件では月の単価60万円でしたので年収換算すると720万円ですね。
エンジニアになって1年そこらで年収720万近く稼げるってすごくないですか?
うらやましい限りです。
フリーランスエージェントは、何社かあって下記記事でまとめていますので宜しければ参照ください。
最もおすすめは知名度No1のレバテックフリーランスです。
注意点
最後に年収の話になりましたが、稼げる=プログラミングという思考でいる人は注意です。
上記のように結果的には自分も月収60〜90万程稼げるようになったのですが、もちろんそれまでには多少のいばらの道はありますし、伸び悩み辛い時期もあります。
その時稼ぐだけがモチベーションの原動力だけだと続かないと思います。なぜならすぐに稼げると思っちゃってるからです。
自分も自分の周りのエンジニアもですが、稼げるからプログラミングを選択したという人は少ないはずです。
稼げるからという理由があってもいいのですが、純粋に楽しい、好きである、興味がわくという思考がないとできない仕事(というかそういう人の方がうまくいくはず)です。
なので、ドットインストールを少しやってみて、面白いなっと思ってゆくゆくはフリーランスになりたいなという方はこのロードマップを是非参考にしてみてください。
コメント