20代無職男が知識0からWeb制作を独学した結果

こんにちは！
リュウです！

今回は、当時、無職だった僕が、知識0の状態からWeb制作を独学して、フリーランスになった経緯をお話ししようと思います。

時系列ベースで、お話しして、その時に考えていたことや、学習内容など、Web制作学習中の方にも参考になるような情報もお伝えできればと思います。

1.　無職になる

大学を卒業後に、就職しましたが、肌に合わず、退職しました。
転職どころか、次に何をやるかも決めずに、勢いで辞めました笑

退職する時点ではWeb制作という業種のことも知りませんでしたね、

退職してから1週間くらいの間に、次は何をしようか考えていたところ、フリーランスやプログラミングというキーワードを知って、興味が湧き、調べるようになりました。

もちろんプログラミングなんて、何も知らないので、なんかかっこいいなーくらいの感覚でした笑

1週間ほど、フリーランスやプログラミングについて、調べているうちに、これをやろうと決めました。

この時点では、フリーランスになるかどうかは決めていなくて、とりあえず、プログラミングを始めようという感じだったと思います。

プログラミングの中にも、色々な種類があることを知りました。
Web系だと、
・Webサイト制作(企業のHPなどの開発)
・Webアプリ開発

いきなりアプリ開発は難しそうだったので、とりあえず、HP作成からできるようになろう思って、Web制作の学習から始めることに決めました。

2. Web制作の学習開始

Web制作の学習をすることに決めた僕ですが、当時はまだ今ほど情報はなく、Web制作のようにプログラミングをやろうとしたら、スクールに入るのが定石でした。

しかし、無職の僕にスクールに入るためのお金なんてありません笑
なので、独学でやるしかありませんでした。

ここから約2か月の1日12時間カフェ生活が始まります。

先に言ってしまいますが、学習開始から7週間ほどで、制作会社と業務委託契約を結んで、初案件を対応します。

ここからは、どんなロードマップで学習していたのか、どんな方法で営業して、初案件を獲得したのか、までを一気にお話ししたいと思います。

2-1. HTML / CSSの学習

独学の僕には、ググることしか出来ないので、とにかく全てググって進めていました。

まずは、プログラミングを始めるうえで、何かいい教材はないかをググりました。

出てきたのは、
・Progate
・ドットインストール
でした。

まずは、ProgateでHTML / CSSをやりました。
Progateとは、色々なプログラミング言語の学習をWebサイト上でできるサービスです。

おそらく、多くの未経験の人が一番最初にやるのがProgateだと思います。

基本的な学習内容なので、初学者向けだと思います。
全体を2周し、道場コースは3週くらいした気がします。
道場コースが意味不明でしたが、なんとかクリアしました笑

次にドットインストールの、Webサイトつくれるようになろう、というコースをやりました。

これは、Progateとは違って、実際に、自分のPCでプログラミングをしていきます。
コーディングするためのエディタのインストール方法から始まって、HTMLとCSSのファイルを作成し、コーディングを学習していきます。

ProgateのHTML / CSSとドットインストールは1周間くらいで終わらせたと思います。

2-2. JavaScriptとjQueryの学習

次にJavaScriptの学習を始めました。

これもProgateで学習しました。

しかし、1周もせずに、途中でやめました笑

当時の僕にとっては、本当に意味不明で、文法の学習をしていても、何も頭に入ってこなかったので、もういいや、と思って、Progateは途中でやめました。

jQueryもProgateのコースがあったので、やっていましたが、途中でやめました。

Progateすらも、まともに消化できていませんが、とりあえず何とかなるだろうと思って、次に進みます。

ここで、JavaScriptをおろそかにしたことが原因で、僕は初案件で地獄を見ます笑
これについては、後でお話しします。

2-3. HTML / CSS / JavaScriptでポートフォリオ制作

この時点で、HTMLとCSSは、簡単なことであれば、なんとなくできる程度のレベルなので、早く何かサイトが作りたい僕は、ポートフォリオ制作に入ります。

ポートフォリオの作り方なんて、全く知らないので、例によって、ググります。

色んな人のポートフォリオがでてきて、自分にも作れそうなサイトを参考にしながら、作り始めました。

HTMLは書けても、実現したいデザインのCSSを書くことが、中々できなくて、ググって、コードをコピペして、カスタムする、という流れで、対応していました。

せっかくポートフォリオを作るので、かっこいいものが作りたいと思ってしまい、モーダルやグロナビなどの、動きのあるUIコンポーネントを組み込もうとしました。

しかし、ここまで読んでいただけた方はわかると思いますが、動きのあるUIコンポーネントを作るには、JavaScriptが必要になります。
僕は、ほとんど学習していないので、書けるはずもなく、ググって、コードをコピーして、カスタムして、作りました。

1週間ほどかけて、なんとか、いい感じのサイトができたので、公開することにしました。

公開する方法もググって、サーバーを契約して、ドメインを取得して、FTPソフトを使って、公開しました。

ポートフォリオ作成のタイミングで、SassやEmmetについても学習して取り入れていたと思います。

ここで、ようやく一段落ついたと思って、達成感を味わいました。

とりあえず、簡単なサイトであれば、実装できて、公開することもできたので、次は何をするか、考えました。

Webサイト制作のロードマップをググっていると、Wordpressというものがあるということを知りました。
そして、Wordpress構築の案件が多いこと、単価が高いことを知りました。

次はWordpressをやろうと決めました。

2-4. Wordpressの学習

Wordpressの学習方法は、ググっても確立されていなかったっぽくて、どういう流れで学習すればいいかわかりませんでした。

どうしようか頭を悩ませていると、Udemyという学習プラットフォームがあることを知り、そこに評価の高いWordpress講座もありました。

すぐに購入し、学習を開始ました。
(確か値段は3000円くらいだったと思います)

Wordpressの学習を開始すると、PHPという言語についても学習する必要があることを知りました。

Progateに、PHPもあったので、やりました。が、意味が分からず、途中でやめました笑

PHPについての学習はせずに、Wordpressの学習を続けました。

実際、PHPを理解していないと、Wordpress構築ができないわけではなかったので、そこまで問題ありませでした。

2-5. Wordpressを使って、2つ目のポートフォリオ作成

Wordpressを使って、新しいポートフォリオサイトを作ることにしました。

架空のコーポレートサイトをHTML / CSS / JavaScriptでコーディングして、これをWordpress化しました。

Wordpressの機能としては、投稿を使ったブログセクションを入れたくらいですね。

これで、簡単なWordpressのオリジナルテーマ作成はできました。

学習はこれで終わりです。

ちなみに、模写は一度もやっていません。
これが、初案件で地獄を味わう最大の原因でした笑

3. 初案件対応

前回までで、学習を終了し、初案件を取りに行きます。

この段階では、Web系の企業にフロントエンジニアとして、就職するか、フリーランスをやろうか、考えていました。
とりあえず、フリーで仕事してみようかなと、軽い気持ちで始めました。

3-1. 営業開始

案件の取り方も、全く知らないので、ググってみると、クラウドソーシング(以下CS)というものがあることを知りました。

早速、いくつかのCSに登録して、活動していましたが、全く仕事が取れないので、ここでやることは諦めました。

並行して、地元のWeb制作会社に、仕事くださいと連絡していて、1件返信がきたので、オフラインで面談することになりました。

確か、数十件メールを送信して、この1件だけ返ってきたと思います。

3-2. 初案件獲得

面談当日、緊張しながら、会社に向かい、お話ししました。

経歴や、なぜWeb制作をはじめたのか、もし案件対応する場合は、どのくらいのリソースがさけそうか、などをざっくりとお話ししたと思います。

その場で、業務委託契約のお話をいただくことができて、初案件のお話もさせていただきました。

未経験なので、単価での対応ではなく、時給で対応することになりました。普通のバイトと比べると、時給が高かったので、とても嬉しかった記憶があります。

ここまでが、僕の知識0から、Web制作の初案件を獲得するまでの流れとなります。

次は、初案件対応した時のことについて、お話しします。

3-3. 初案件対応

では、僕の怒涛すぎたWeb制作初案件の話です。
知識0の状態から2ヶ月目に初案件を対応しました。

今でも鮮明に覚えてますが、マジでキツかったです笑。

まずは、案件の概要について、ディレクターの方から、内容を共有されました。
デザインも一緒に共有されて、アニメーションの多さと、複雑なレイアウトに、僕は半ば絶望しました笑

当時の僕は、模写をやったことがないので、サイト制作経験が、ポートフォリオの2つしかありません。

この状態で、いくつもの見たことがないアニメーションや、様々な要素が幾重にも重なって配置されているレイアウトのコーディングをするのは、さすがに厳しいなと内心思っていました。

ですが、やるしかないので、案件対応を開始ました。

納期も決められていたので、間に合わなかったらマズイと思って、初日から寝てるとき以外は稼働しました。

一旦、アニメーション以外を何とかコーディングして、アニメーションにとりかかりました。

ここからが、地獄でした笑

ほぼ全ての要素にアニメーションがついていました。

JavaScriptなんて本当に軽くしかやらなかったので、マジで意味がわかりませんでした笑。

ググって、似たサンプルを探して対応するのも、限界があり、終わった。。と思っていました笑

しかし、納品は絶対にしないといけないし、これが完成すれば、かなりの実績になると思っていたので、とにかく頑張りました。

自分一人では、さすがに品質担保できないと思い、メンターさんを自腹で契約して、助けていただきながら、なんとか、期限内に、納品できました。

納品した数日後に、クライアントから連絡がありました。

デザインやアニメーションが優れているWebサイトのみが掲載されるサイトに、僕が作ったサイトが掲載されるとのことでした。

このサイトのおかげで、この後の営業はすごく楽になりました。

結果的に、問題なく納品できたので良かったですが、本当に大変だったので、模写は必ず対応した方がいいと思いました。

最初にJavaScriptの学習をスキップしたことは、あんまり問題はないのですが、模写を対応しなかったせいで、かなり苦労しました。

模写を2,3個対応できれば、動きのあるコンポーネントも実装の練習ができるので、このタイミングで、JavaScript(jQuery)は必要な部分だけ、習得することができると思います。

みなさんには、模写をある程度やってから、実案件に臨んでもらえたらと思います笑

4. その後と、終わりに

初案件をなんとかクリアしたあとは、この実績をメインにして、複数のWeb制作会社と業務委託契約を結んでいくことができました。

同時に、開業して、フリーランスになることもできました。

知識0の状態で、独学でググりながら進めることは中々大変でしたが、意外になんとかなるので、学習中の方の参考になれば幸いです。

最後まで読んでいただき、ありがとうございました！