コーディング学習のロードマップ【Web制作初心者向け】
こんにちはTERUです。
フリーランスでWEB制作（コーディング と ディレクション業務）をしています。
読者の悩み
- コーディングの勉強方法が知りたい
- コーディングで案件獲得までのロードマップが知りたい
本記事では、こういった疑問に答えます。
僕の場合、３０代未経験でWeb制作会社に入ったので、初めはコーディングにかなり苦労しました。
周りの方や先輩に助けてもらいなんとか仕事に使えるレベルまで身につけることができました。
現在は、フリーランスとして生活できている状況です。
ただ、自分の経験を今振り返ると無駄な勉強も多く、かなり遠回りしたなと言う感覚です。。
本記事では、自分の経験をもとに初心者向けにコーディングの学習方法から案件獲得方法、その後のキャリアについてロードマップをまとめたいと思います
Web初心者でこれからコーディングを学んでみたいなと思ってる方の参考になれば幸いです。
目次
スポンサードサーチ
STEP1:コーディングの勉強方法【結論：まずは無料で学ぼう】
結論、まずは無料で学べるサービスを使って勉強しましょう。
なぜなら、無料でも質の高い学習ができるサービスが増えてきたからです。
詳細は下記の記事にまとめています。
コーディングを無料で学べるWebサービス４選【練習用デザインあり】
こんにちはTERUです。 フリーランスでWEB制作（コーディングとディレクション業務）をしています。 読者の悩み コーディングを無料から学べるサービスが知りたい コーディング練習用のデザインデータが欲
まずは、コーディングってこういう仕事のことなんだと感覚を掴むことが重要です。
細かいスキルは、案件で経験を積むことで身につきます。
よくある質問1：模写コーディングは必要なの？
結論、特に必要ではないと思います。
決して模写コーディングをすることに意味がないわけではありません。
自分の好きなサイトがある場合は、模写をすることにより経験を積むことができます。
ただ、案件対応できることを優先的に考えると模写コーディングは必要ではないです。
なぜなら模写コーディングのやり方は、案件作業のコーディングとやり方が大きく違うからです。
模写コーディングの場合
- 模写するサイトを決める
- 模写するサイトを見ながら、同じ見た目になるようにコーディング
- 模写するサイトをブラウザの検証ツールでチェックして答え合わせ
実際の案件作業の場合
- 実際の案件作業の場合
- デザインデータから情報を読み取り、コーディング
- コーディングしたサイトを検証ツールでチェックしながら微調整
このように実際の案件では、デザインデータを下にコーディングを行うことがほとんどです。
逆に模写コーディングのように、別サイトを見ながらなんとなく見た目を同じにする作業は少ないです。
たまにデザインデータがなく、「あのサイトと同じ感じにコーディングして」と言われることはあります。
※なので検証ツール（Chrome）の使い方はしっかりマスターしておきましょう。
コーディングの練習をするのであれば、実際のサイトを見ながら制作するのではなくデザインデータを下に、コーディングする練習をすべきです。
下記の記事にデザインデータからのコーディングについてまとめています。
photoshoopからのコーディング
Photoshop（PSDデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 プログラミング初学者Aさん「デザインデータからどうやってコーディングするの？」「デザインデ
Adobe XDからのコーディング
Adobe XD（xdデータ）からコーディングする具体的な方法
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 読者の悩み Adobe XDのデザインデータからどうやってコーディングするの？ デザインデ
コーディング練習用のデザインデータ（架空サイト）はこちらからダウンロードできます。
よくある質問2：コーディングを効率化する方法はないの？
結論、あります。
ある程度コーディング（デザイン通りに）が出来るようになったら、次のステップとして積極的に効率化に取り組むべきです。
なぜならコーディング速度は練習や案件をこなして経験を積むことで上がっていきます。
ただ、効率化に取り組むことで同じ時間で対応できる作業量を飛躍的に増やすことができます。
※時給単価が大きく変わってきます。
Web制作（コーディング）は効率化しよう【具体的な時給の上げ方３選】
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 Aさん（制作会社勤務）「コーディングは出来るようになったけど、、こんなに時間かかるものなの
よくある質問3：コーディングができれば案件対応できるの？
結論、無理です。
なぜなら、コーディング案件を請け負った際にコーディング以外のスキルも必要になってくるからです。
コーディング案件のよくある流れとコーディング以外で最低限必要になるスキルを下記の記事にまとめています。
案件受注の前に、自分は問題ないかチェックしておきましょう。
Web制作でコーディング以外に最低限必要なスキル３選【具体的な制作案件の流れ付き】
こんにちは、TERUです。 SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。 プログラミング初学者Aさん「制作案件では、コードを書く以外にどんな作業が発生するの？実際の
スポンサードサーチ
STEP2:コーディングの案件受注方法
コーディングの案件受注方法は大きく5つあります。
- クラウドソーシング
- 友人/知人
- SNS/ブログ
- 制作会社
- エージェント
人によって向き不向きがあるので、自分にあった受注方法を実践しましょう。
各方法の詳細は下記の記事にまとめまています。
Web制作勉強したけど、どうやって案件獲得するの？【初案件に向けた具体的な営業方法5選】
こんにちはTERUです。 フリーランスでWEB制作をしています。 プログラミング初学者Aさん「web制作の勉強はしたけど、どうやって初案件を獲得すればいいんだろう？」 「クラウドソーシング以外にどんな
スポンサードサーチ
STEP3:コーディングを習得した後のキャリア
結論、コーディングに関連性が高い＋αのスキルを身に付けて市場価値を上げることです。
なぜなら、コーダーとして制作会社で働くなら別ですが、コーディングだけでフリーランスをするのは正直しんどいからです。。
コーディングのスキルを身につけた上でステップアップしながらキャリアアップしていくのが理想です。
コーディングの相場や＋αのスキルに関しては、下記の記事に詳しくまとめています。
コーディングスキルからのキャリア設計【Web系フリーランス】
こんにちは、TERUです。 SEとして10年会社に勤め 現在はフリーのWEBエンジニアとして活動しております。 フリーランスで独立を目指している人A「これからコーディングを勉強したいが、、どれくらい稼
今回は、Web初心者向けにコーディングの学習方法から案件獲得方法、その後のキャリアについてロードマップを説明しました。
何かご質問がありましたら、気軽にご連絡ください。
以上です。
スポンサードサーチ