コーディング学習のロードマップ【Web制作初心者向け】

コーディング学習のロードマップ【Web制作初心者向け】

こんにちはTERUです。
フリーランスでWEB制作(コーディング と ディレクション業務)をしています。

読者の悩み

  • コーディングの勉強方法が知りたい
  • コーディングで案件獲得までのロードマップが知りたい

本記事では、こういった疑問に答えます。
僕の場合、30代未経験でWeb制作会社に入ったので、初めはコーディングにかなり苦労しました。

周りの方や先輩に助けてもらいなんとか仕事に使えるレベルまで身につけることができました。
現在は、フリーランスとして生活できている状況です。

ただ、自分の経験を今振り返ると無駄な勉強も多く、かなり遠回りしたなと言う感覚です。。
本記事では、自分の経験をもとに初心者向けにコーディングの学習方法から案件獲得方法、その後のキャリアについてロードマップをまとめたいと思います
Web初心者でこれからコーディングを学んでみたいなと思ってる方の参考になれば幸いです。

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
  • WordPressを使ったWeb制作を数多く経験(2年で約60件)
  • Web制作会社にてディレクターの経験もあり
目次

STEP1:コーディングの勉強方法【結論:まずは無料で学ぼう】

STEP1:コーディングの勉強方法【結論:まずは無料で学ぼう】
結論、まずは無料で学べるサービスを使って勉強しましょう。

なぜなら、無料でも質の高い学習ができるサービスが増えてきたからです。
詳細は下記の記事にまとめています。

まずは、コーディングってこういう仕事のことなんだと感覚を掴むことが重要です。

細かいスキルは、案件で経験を積むことで身につきます。

よくある質問1:模写コーディングは必要なの?

結論、特に必要ではないと思います。

決して模写コーディングをすることに意味がないわけではありません。
自分の好きなサイトがある場合は、模写をすることにより経験を積むことができます。

ただ、案件対応できることを優先的に考えると模写コーディングは必要ではないです。
なぜなら模写コーディングのやり方は、案件作業のコーディングとやり方が大きく違うからです。

模写コーディングの場合

  1. 模写するサイトを決める
  2. 模写するサイトを見ながら、同じ見た目になるようにコーディング
  3. 模写するサイトをブラウザの検証ツールでチェックして答え合わせ

実際の案件作業の場合

  1. 実際の案件作業の場合
  2. デザインデータから情報を読み取り、コーディング
  3. コーディングしたサイトを検証ツールでチェックしながら微調整

このように実際の案件では、デザインデータを下にコーディングを行うことがほとんどです。

逆に模写コーディングのように、別サイトを見ながらなんとなく見た目を同じにする作業は少ないです。
たまにデザインデータがなく、「あのサイトと同じ感じにコーディングして」と言われることはあります。
※なので検証ツール(Chrome)の使い方はしっかりマスターしておきましょう。

コーディングの練習をするのであれば、実際のサイトを見ながら制作するのではなくデザインデータを下に、コーディングする練習をすべきです。
下記の記事にデザインデータからのコーディングについてまとめています。

photoshoopからのコーディング

Adobe XDからのコーディング

コーディング練習用のデザインデータ(架空サイト)こちらからダウンロードできます。

よくある質問2:コーディングを効率化する方法はないの?

結論、あります。
ある程度コーディング(デザイン通りに)が出来るようになったら、次のステップとして積極的に効率化に取り組むべきです。

なぜならコーディング速度は練習や案件をこなして経験を積むことで上がっていきます。
ただ、効率化に取り組むことで同じ時間で対応できる作業量を飛躍的に増やすことができます。
※時給単価が大きく変わってきます。

具体的な効率化方法については下記の記事にまとめています。

コーディングを助ける便利ツールも合わせてどうぞ!

よくある質問3:コーディングができれば案件対応できるの?

結論、無理です。

なぜなら、コーディング案件を請け負った際にコーディング以外のスキルも必要になってくるからです。
コーディング案件のよくある流れとコーディング以外で最低限必要になるスキルを下記の記事にまとめています。
案件受注の前に、自分は問題ないかチェックしておきましょう。

STEP2:コーディングの案件受注方法

STEP2:コーディングの案件受注方法
コーディングの案件受注方法は大きく5つあります。

  • クラウドソーシング
  • 友人/知人
  • SNS/ブログ
  • 制作会社
  • エージェント

人によって向き不向きがあるので、自分にあった受注方法を実践しましょう。
各方法の詳細は下記の記事にまとめまています。

STEP3:コーディングを習得した後のキャリア

STEP3:コーディングを習得した後のキャリア
結論、コーディングに関連性が高い+αのスキルを身に付けて市場価値を上げることです。

なぜなら、コーダーとして制作会社で働くなら別ですが、コーディングだけでフリーランスをするのは正直しんどいからです。。
コーディングのスキルを身につけた上でステップアップしながらキャリアアップしていくのが理想です。

コーディングの相場や+αのスキルに関しては、下記の記事に詳しくまとめています。

今回は、Web初心者向けにコーディングの学習方法から案件獲得方法、その後のキャリアについてロードマップを説明しました。

サイト制作のご依頼について

フリーランスチームにて、ホームページ・ECサイトの制作も行っております。
計画立案から制作、納品、運用までトータルでサポートいたしますのでお気軽にご相談ください。
※初回相談無料

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次