Webコーダーになるにはどうすればいいのか。正しい学習手順で解決です

Webコーダー 転職・就職

こんにちはダイキです。

今回はWebコーダーになるにはどうすればいいのか?といった問題について書いていきたいと思います。

今の時代コロナ禍というのもありできるだけ在宅で過ごしたい。
そう思っている人も多いと思います。

そんな中Webコーダーは在宅で仕事するには最適な職種です。
ノートパソコン一台でなれますし学習環境も今では無料で手に入ります。

結論から言うと以下で達成可能です。

  • プロゲートでプログラミングを学ぶ
  • サイト模写・カンプコーディングをやる
  • ランサーズ・クラウドワークスで案件受注(ここはどちらでも)
  • 就職もしくはフリーランス

結果、僕は一年ほどプログラミングを学び、企業に就職したらWebコーダーとして採用されました。

27歳。高卒。労働経験は工場か倉庫のみ。
プロフィールはこんな感じです。

今思えば一年もいらなかったと思います。
一年かかった理由が知りたい方はこちらの記事をどうぞ↓
高卒の倉庫作業員がWebコーダーに転職できた話。約1年かかりました。


上記の感じで採用されたことをツイートしています。

信憑性に関しては過去のツイートを見てもらえれば分かると思います。

派遣社員ですがWebコーダーには違いありません。
それに紹介予定派遣ですので会社と合意があれば正社員になれます。

この記事を書いている段階では、まだWebコーダーになりたてですので派遣社員として活動していますが僕は正社員を目指します。

それはさておきWebコーダーになるにはどうすればいいのか?
というのが本題です。

端的に学習手順を書いていきますので参考までにどうぞ。

まずはプロゲートで学ぶ。Webコーダーになるには必要なこと


まずはじめにプロゲート(Progate)にて、プログラミングというものを触ってみてください。

プロゲートは月1,000円ほど課金しないといけませんが課金できない人は辞めた方がいいと思いますよ。

※少し厳しいことを言うと、これくらいの金額を課金できない気持ちなら、プログラミングの勉強はまず無理だと思ってください。

Webコーダーになるには HTML, CSS, JavaScript といったマークアップ言語とプログラミング言語を学ぶ必要があります

まずは HTML と CSS ですかね。
中級編・上級編・道場編まで頑張ってください。

はじめは大変かもしれませんが慣れると大したことないです。
毎日繰り返しコードを書き続ければ自然とできるようになります。

正直、この作業で挫折するならセンスは無いと思った方が良いです。
JavaScript に入ったらさらに厳しくなるので。

僕はプロゲートで中級編・上級編・道場編を完璧にからだに覚えるまで何度もやりました。

巷では「プロゲートは何周もやらなくていい」といった話がありますが、そんなことはないです。

もちろん。実践とかの方が価値は高いですが、まずはコードに慣れることが大事です。

プロゲートでは何度もコードを書くという動作が繰り返されるのでコードに慣れるという点では優秀なんです。

目安としては最低でも5週ずつはやった方が良いです。
暗記レベルでも大丈夫です。

それぐらいやれば勝手に指が動くようになります。

JavaScript の重要性

HTML, CSS が終われば、次は JavaScript です。
ここは軽くやるだけでいいです。

プロゲートで使用する JavaScript は深くやっても理解が難しいです。
実際の開発環境でやらないと身につきにくいと思います。

もし JavaScript を深く学びたいなら、ドットインストールを利用するといいです。

ドットインストールはプロゲートみたいなテキストベースではなく、動画でプログラミングを学習できるサービスです。

人によっては動画の方が理解しやすいと思いますのでプロゲートが苦手な人にはおすすめです。

※こちらも月1,000円ほどかかります。

JavaScript が終われば jQuery もやった方が良いですね。

後に勉強すると思うので詳しくは書きませんが jQuery は JavaScript を簡単にしたものです。

Web制作におけるWebコーダーでは、どちらかというと jQuery を使用します。
ですので、触っておいた方が後にプラスに働きます。

人によっては「JavaScript なんて勉強する必要はない」という人もいますが、個人的にはやっておいた方がいいと思っています。

むしろやらないと jQuery の本質的な使い方が理解できません。

ずっとテンプレのコピペだけなら良いですけどね。
それは珍しいケースです。

とはいえ、深く理解しようと時間を使いすぎても挫折率が上がるだけです。
なので、6割ぐらい理解できたら進んでください。

仮にWeb制作会社に入社したとしても、初めは JavaScript をゴリゴリ使うことは無いはずです。

基本は HTML と CSS を使うはずです。
そして徐々に JavaScript もしくは jQuery です。

理解度的には class と id の付与を理解できれば大丈夫かと思います。
それ以上は働きながら身につけて行ければ良いと思います。

Webコーダーになるにはサイト模写をやるべき

Webコーダーになるにはサイト模写が必要
一通りプロゲートもしくはドットインストールで学ぶことが出来た人は次のステップです。

サイト模写ですね。
これもWebコーダーになるには必要な過程です。

サイト模写というのは実際に存在しているサイトを見ながら、その見栄え通りに、自分なりにコーディングしていくことをいいます。

例えば有名なのは isara というサイトですね。
サイト模写をするには丁度いい素材です。

※このサイトはもう機能していないと思いますがサイトとしては存在しています。

実際に動作を同じように作るわけではなく、見た目の部分を同じように作っていければOKです。

余裕のある方はトグルメニューとかも挑戦してみてくださいね。

それと余談ですが Chrome のデベロッパーツールを使えるようになっておいた方が良いですよ。
Webコーダーになるにはサイト模写が必要
ページを開き、画面の何も無いところに右クリックすれば、「検証」という項目があるのでそれをクリックするとでてきます。

そこから画像を抜き出すことができるので、より実際のサイトに近づけます。

他にも HTML や CSS がわからない場合は見ることができるので便利です。
丸パクリはダメですが参考にするのは大丈夫です。

詳しくは自分で調べてくださいね。

Webコーダーになるにはググる力も必要になってくるので、何か分からない場合はすぐにググってください。

ググってググって、それでもわからない場合は知ってそうな人に聞いてみるのもありです。

基本は返答してくれるはずです。
僕でも大丈夫ですよ。
ツイッターのDMからOKです。
アカウント(daikiblog__

サイト模写は必要じゃない?

Webコーダーになる過程でサイト模写は必要かどうかといった話を聞いたことがあるかと思います。

これは賛否両論で必要ならやる感じでいいと思います。

個人的にはサイト模写をやってきた人なのでやることを推奨しますが、必要ないと思った人は飛ばしてくれても構いませんよ。

とはいえ、サイト模写から得るものも多いので、それはそれで勉強になることは間違いなしです。

例えば、デベロッパーツールで HTML の構造を参考にしたり、どのように CSS が付与されているのかを学ぶことができます。

自分なりに一から組むより、先行者のものを見ながら参考にした方が成長は早いとは思いますね。

デザインカンプからのコーディングこそWebコーダーになるには必須

デザインカンプからのコーディングこそWebコーダーになるには必須
Webコーダーになるにはデザインカンプからのコーディングができるようになっておいた方いいです。

フォトショップ(Photoshop)、イラストレーター(Illustrator)、XD 。
この3つは必須ですね。

何故かというと企業に就職するせよフリーランスで仕事を受注するにせよコーディングする前にはデザインが送られてきます。

そのデータとして送られてくるのが先程あげた3つ。
フォトショップ(Photoshop)、イラストレーター(Illustrator)、XD 。

カンプコーディングの詳しい説明はググってみてください。
「デザインカンプ コーディング」とかでググるとすぐ出てきます。

デザインデータは一からデザインを作れるまでの使用感は必要ないですが、フォントの読み取りや画像の書き出し、簡単の加工はできるようになるべきですね。

それぐらいできれば未経験で就職したとしても少し慣れるだけで活躍できると思います。

実際に僕がそうだったので大丈夫ですよ。

余談ですが僕と同じくらいに入ったWebコーダーの人はフォトショップやイラストレーターといったツールがあまり使えず、デバック作業ばかり任されていますからね。

ある程度の使用感は必要というわけです。

おすすめの学習用サイト

僕が実際にカンプコーディングをやるときに利用していたサイトを紹介します。

Codestep

PENGIN BLOG

この2つですね。
デザインデータをダウンロードしてそのまま書き出ししてコーディングできます。

あとに解説もついていたと思います。
なので分からなくても回答を見ながら学んでいけますね

何個もやる必要性はなくて、この2つやれば大丈夫かなと思います。
3枚ぐらいコーディングが終わったあとには勝手にコードが見えてくるようになりますよ。

Webコーダーになるには経験が必要。クラウドソーシングを利用しよう

Webコーダーになるには経験が必要。クラウドソーシングを利用しよう
クラウドソーシングはWebコーダーになるには便利なサービスです。

クラウドソーシングはインターネット上で会社が個人にまたは個人と個人が仕事を受発注することができるサービスです。

有名なところだとランサーズやクラウドワークスですね。
こちらを利用することによって実績を積むことができます。

未経験からWebコーダーになるのは意外と厳しい状況です。
ましてや年齢が30代を超えてくると難しいでしょう。

ですが実績があると違います。

ランサーズやクラウドワークスで案件を受注し、それを実績として企業に提出すると興味を持たれます。

面接の時の話題になりますし、何より自ら進んで挑戦していく行動力を魅せることができます

ただ注意があります。

フリーランスになるのかもと疑われるのでそこは明確にしておくべきです。

企業からすればお金を払って育ててくれるわけですから、それに応えてくれる人が欲しいわけです。

なので、たとえフリーランスを目指していても言うべきではないです。

フリーランス希望なら

もし仮にフリーランスを希望しているけど、まずは企業に就職したいという人がいるなら全力で恩返しはするべきです。

企業はお金を払って未経験に近い人を育ててくれるわけです。
それを無下に扱ってはいけません。

それにフリーランスになる前にしっかりとその企業で実績を残していれば、フリーランスとして案件を回してくれる可能性もあります。

なので、経験だけ出来たらいいと思う軽い気持ちは辞めておきましょう。

就職かフリーランスか。Webコーダーになるには決めるべきこと

就職かフリーランスか。Webコーダーになるには決めるべきこと
Webコーダーになるには2つの方法があります。
それは企業に就職するかフリーランスとして活動することです。

いきなりフリーランスとして活動するのもありですが僕はおすすめしません。
なぜなら未経験で仕事をいただけることなんて殆ど無いからです。

ランサーズやクラウドワークスを登録すると分かると思いますが一つの案件に対して50人以上が提案する状況です。

ということは未経験のプログラミング独学者が提案したところで弾かれるのが落ちです。

とはいえ、まったく取れないわけではないです。

現に僕は先程ランサーズやクラウドワークスで案件を取りましょうといったばかりですので。

未経験で案件を取る

実務未経験のWebコーダーが案件を取る方法は二つあります。

一つは格安で受けること。
もう一つは嘘をついてできる人と思われること。

僕は前者を実行しました。

確かLP案件を5,000円で受けた記憶があります。
作業時間は3日ほどかかりましたが無事納品することはできました。

計算すると1日5時間ほどかかっていたので時給は333円です。
少ないですね。

それでも実績は実績。
これを気に数件こなし、その実績をもって転職活動を進めたわけです。

面接の時に持っていった案件は WordPress で一から作ったサイトだったと思います。
URLがあれば載せたいのですが見当たらなかったのでご勘弁を。

以上がWebコーダーになるにはどうすればいいか?といった題材でお話してみました。

プロゲートで学ぶ → サイト模写をやる → デザインカンプコーディングをやる → ランサーズなどで案件を受ける → 就職活動

この流れで大丈夫です。

僕は他にも色々やってきましたが必要ないと思ったので省いています。

気になる方は以下の記事をどうぞ。

高卒の倉庫作業員がWebコーダーに転職できた話。約1年かかりました。