フロントエンジニア(web制作)のフリーランスの現状

LifeHack

フリーランスという働き方

コロナのパンデミックが現実になった昨今、如何お過ごしだろうか。

最近では働き方改革だとかなんだとかで在宅ワークという働き方が注目されるようになった。

フリーランスも、そんな働き方に数えられる働き方の一つだ。フリーランスは会社に縛られない……というイメージから憧れる人もそこそこいる職業形態だ。

その為、ここ2-3年でweb制作のフリーランスを目指す人も多いが、実際はどうなのか見ていこう。

フリーランスの現実

メリット/デメリットメリット

  • 出勤時間ゼロ
  • 直接他人と顔を合わせる必要なし
  • 実力があれば楽
  • 実力があれば稼げる

デメリット

  • 全部自己責任
  • 実績がないと相手にされない
  • 完全実力主義
  • 簡単な仕事だと供給が多く、相場が崩壊

フリーランスは信頼が一番の武器であり、一番大事にしなければいけない。それは実績と評価で判断されることになるからだ。

フロントエンドエンジニアのフリーランスには上級者、中級者、駆け出しの3つの層に別れており、これから勉強するのであれば勿論、駆け出しの層になる訳だ。

駆け出し層が、progateで勉強を頑張って基礎的なhtml/cssを習得したとしよう。次はflexboxを使いこなせるようにして、最後にbootstrapまで習得出来たら、最後にsassのscss記法をマスターすればhtml/cssに関しては問題ない。よう頑張った。

長かったね!でもこれでフリーランスとして働けるんだね!!……とはならない。youtubeだとかで散々煽った人が多かったせいか、フロントエンドエンジニアのフリーランスを始める人が多く、駆け出し層が団子になっている状態なんだよね。そうなるとどうなるか。

高単価な依頼は安定の信頼の上級者へ。中単価・そこそこ楽な依頼は実績があり上級者よりもリーズナブルな中級者へ。面倒で単価の低い依頼に駆け出し層が……殺到する!w

自分でも見てもらえればわかると思うが、例えばフリーランスで有名なランサーズというサイトで調べてみるといい。依頼料1~5万円の依頼に駆け出し層が殺到しているせいで、倍率50-100倍とかザラだ。この倍率を勝ち抜いて依頼料5万円以下……?あかん死ぬぅ!!

話を戻そう。フリーランスとして仕事をしたいが客の依頼は上級者・中級者に持っていかれてしまう。どうやって打開するか?過去の実績がなくて選ばれないのであれば……

結局は自分で営業をかけるしかない訳だ。色々な会社に電話したり、知り合いに紹介してもらったり、メールしたりして「実績は乏しいですが激安でやりますんで仕事ください!」と。

そんなん会社勤めの方が楽やん……。

更には、運よく依頼にありつけたとしても、html/cssだけではフリーランスとして生きていくことは絶対に無理だ。フロントエンジニアとしての普通レベルになる為にはhtml/css、javascript、sass、React or Vue、Git この5つは抑えておきたい。

本当にフロントエンドとして生きていくのなら上記に加えてwordpressをいじるためのPHPも出来るようになればフリーランスとして受ける仕事も幅が広がり安泰だろう。というかそこまで出来るようになったら普通に会社に勤めろw

さらっと書いたが、javascriptとphpはプログラム言語だから気合を入れて学ばないと挫折することになる。だがjavascriptは非常に人気のある言語(常にトップ3に入る)だし、アプリ開発を出来たり、RPGツクールのプラグインを作ったり、ティラノスクリプトのプラグインを作ったりと万能なプログラム言語なので、エンタメの制作に興味のある人によっては勉強して損になることはないだろう。

勉強のやりかた

ではどうやって勉強すればいいのかを紹介しよう。

html/css ➡ progate

Step1

言わずもがな。proのgateと名乗るだけのことはあるprogateである。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

ここでhml/cssのレッスンをしよう。コースを2周することを進めるが、2周が終わった時点でも道場がわからなくても気にする必要はない。今は雰囲気を掴むだけでいい。

Step2

自分でhtmlを書いてみよう。htmlで大事なのは要素の包み方、それに尽きる。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

VScodeをダウンロードしてインストール。プラグインは様々あるが、それはググって入れてくれ。絶対に入れるべきなのはLiveServerというプラグインだ。これを入れるだけで初心者の作業効率は2倍になる。リアルタイムでhtmlを反映してくれるプラグインだよ。

Step3

headerとかmainとか要素がどこにあるのかわからないよってかたに朗報。最強のツールを紹介しよう。それはブラウザのgoogle chomeで使えるデベロッパーツールと、拡張機能のUI Build Assistantだ。デベロッパツールはF12で使用。拡張機能はchromeウェブストアからインストールだ!

UI Build Assistant
You can create layouts easily!

初心者のうちは要素の配置されている場所や、marginなどが非常にわかりずらい。なのでcssで背景に色をつけて見やすくするという作業が必要になるのだが、この拡張機能さえあればボタン一発で要素が丸わかりなので初心者なら作業効率が3倍になる。どんな記述をすると、どんな動きになるのかを確認することが出来る非常にありがたいプラグイン。無料でいいんですか!?

Step4

よし、ある程度html書いてみたか?じゃあ次は動画だ。しまぶーのIT大学さんという方が公開している動画を見て行こう。

Bevor Sie zu YouTube weitergehen

HTML講座、CSS講座、HTML&CSS講座の順に視聴しよう。動画というのは文章で勉強するよりも効率がかなり高いと言われている。最後の追い込みとして、しっかりと勉強させてもらおう。

Step5

ここまでくればもう一息。flexboxの練習だ。

日本語対応!CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており

flexboxのチートシートはブックマークしておこう。

Flexbox Froggy
A game for learning CSS flexbox

ゲーム形式でも学べる

Step6

Sass、Github、bootstrapのことは一旦置いておいて、自分の今の実力を確認してみよう。ここまで理解出来ていれば簡単なページは作れるはずだ。html/cssやプログラムで大事なことは、覚えるまでひたすら周回することは愚行だということだ。プロでさえgoogleで検索しながら作業を進めていく世界だ。駆け出しのひよっこが全部を覚えることに意味なんてない。google検索を存分に使いながらまずは簡単なページでもいいので一つ完成させてみよう。

Step7

完成したページをgitへ。ポートフォリオを充実させていこう。終わり。

JavascriptとReact or Vue ➡動画

ReactとVueはjavascriptのフレームワークと呼ばれるものだよ。作業を効率化させるためのものだね。んでまぁ、javascriptの勉強なんだけど動画で勉強するってなるとUdemyやプログラミングスクールが有名だったりする。でも結構お高い。そこで金豚がオススメするのは……

Bevor Sie zu YouTube weitergehen

またなんだよなぁ。わかりやすいから仕方ないよね。javascript講座をやろう。youtubeには他にも良質な講座動画があるので自分でも探してみるといい。書籍でオススメするとすれば、やさしいJava 第7版。中古でいいならメルカリで1000円前後で買えると思うよ。

まとめ

初めから独学でフリーランスになろうとしては駄目。どっかでweb制作をして働いていた人が、独立してフリーランスになるものなので、最初から実績のない人がweb制作のフリーランスで飯を食おうとするのは良くない判断。大抵は実績がないという部分で大変な苦労をする。

それでも未経験者でフリーランスのwebエンジニアになりたいんだ!という人はweb制作とは関係ない部分(仕事を取ってくる)が一番辛いということを肝に銘じておこう。

コメント

タイトルとURLをコピーしました