今回は僕自身の体験を交えてWeb制作の学習開始から初案件獲得までのロードマップを解説します。
個人的に後悔している部分がたくさんあるので、これから学習を開始する人の参考に少しでもなれば幸いです。
- Web制作で案件獲得までの最短ルートを知りたい。
- Progateが終わったけど何をすればいいか分からない...
- できるだけ無駄な勉強を省いて効率的に進めたい。
各ステップで学習のポイント・やらなくてもいいこと・実際に使用した教材も紹介しています。
はじめに
僕は2019年11月にWeb制作の学習を開始して、2020年2月に初案件を獲得しました。
大学も文系学部のため、完全未経験からのスタートです。
（「HTMLってなんだよ...」状態からProgateで学習を始めました。）
そこから約4ヶ月で特に人脈もない大学生の僕でも約19万円の初月売上を達成できました。
ここまでの約4ヶ月間実際にやってきた勉強法と「もっとこうすればよかった...」と後悔していることがたくさんあるので紹介していきます。
Progateで学習を進める
まずは無料で始められるProgateで学習を開始しました。
ただすべてのコースを受講するには有料コースが必要ですが、月額1,000円程度なので登録しちゃいましょう。
学習のポイント
「Web制作で最短で稼ぐ」ということを目標にした場合、まずはProgateでは以下の4つだけで十分だと感じています。
LP制作などの静的サイトコーディングでは以下のスキル習熟すれば問題なく案件をこなせるからです。
- HTML&CSS
- Sass
- JavaScript
- jQuery
特にSassに関しては導入すると作業効率が全然違うので、速い段階で身に着けましょう。
初心者が使うべき最低限の機能は以下の記事で解説しています。
僕は加えてRubyやRuby on Railsなどのサーバーサイド言語・フレームワークにも手を出しましたが「優先度を間違えたな...」と少し後悔しています。
もちろん無駄ではなかったですが、最短ルートを目指すなら目標を絞って学習しましょう。
勘違いしないでほしいのが、あくまで「Web制作で最短で稼ぐことを目標にした場合は上記の4つで十分」ということです。
本格的なエンジニア就職などが目標の方はもちろんその言語を学ぶべきですし、Gitなどの現場で必要なスキルの基礎も学んでおくべきです。
まずはプログラミング言語の特性を知り、自分の目標と照らし合わせるところから始めましょう。
やらなくて良いこと
Progateの周回
たまに「今Progate3周目で復習しています！」なんて人を見かけますが絶対におすすめしません。
Progate等の基礎教材はあくまで入り口で、何周しても成長はないので、50%くらいの理解度でどんどん次に進みましょう。
アウトプットしているうちに今までの知識が身になるのを実感できるはずです。
ノートやメモをとって暗記しようとする
プログラミングはわからなかったら調べればいいので、ノート等で暗記しようとするのは不必要です。
実際にどんどんコードを書くほうが、確実に学習効率は良いので、常にアウトプットを意識した学習をしましょう。
ドットインストールで補足学習
基本的にはドットインストールも基礎を学ぶ動画教材ですが、僕が感じたProgateとの大きな違いは以下の3つです。
- テキストエディタ（実際にコードを書くためのソフト）の使い方を学べる。
- 検証ツール（ブラウザ上でコードの挙動をチェックするツール）の使い方を学べる。
- レスポンシブデザイン（スマホ・タブレット対応）について学べる。
これらのスキルも案件では必ず必要になります。
特に検証ツールの使い方を学ばずに、次の模写に進むのは無謀です。笑
学習のポイント
ドットインストールは1本約3分の動画教材なので「ここは〜なので、こうすればOKですね。」みたいなスタンスでどんどん進んでいきますが、完全に理解する必要はありません。
何度も言いますが、出てきたらまた調べればいいのでどんどん先に進んで全体を俯瞰することが重要です。
僕の場合はHTML＆CSSのレッスンのみをすべて1周しました。
やらなくて良いこと
案件で出現頻度の低いスキルの学習
例えば、bootstrapは優秀なCSSフレームワークですが、Web制作の実案件に限って言えば使うことは殆どなかったです。
今回は最短ルートの学習法なので、もし必要になったら学習するスタンスで問題ないですね。
網羅的に学習しようとする
ドットインストールはかなりの量のレッスンがあり、すべてをやろうとすると時間がかかりすぎます。
Progateで基礎学習は終えているはずなので、より実務に近い、テキストエディタ・検証ツール・レスポンシブデザインを重点的に学ぶ意識で取り組んでみましょう。
模写コーディングでアウトプット
模写コーディングとは既存のWebサイトを見ながら全く同じように再現する練習です。
ここが最初の鬼門だと思います。
急に難易度が上がるのでかなり苦労すると思いますが、僕はコードの綺麗さは度外視で再現することを重視しました。
実案件ではデザインデータだけを渡されてコーディングすることがほとんどなので、答えのコード無しでデザインを再現する練習にもなります。
ここではタブレットサイズ、スマホサイズでも崩れが出ないようにするレスポンシブ対応もかなり労力を要しますが、実案件では必ず必要なスキルなのでしっかり身につけましょう！
この段階で「全然覚えてないプロパティがある...」「こんなコード見たこと無い」となった場合でも、Progateやドットインストールなどの基礎教材に戻るのはおすすめしません。
わからなくても調べながらとにかく形にしましょう！
模写するサイトとしてはiSaraのLPやAirbnbのサイトなどが挑戦している人が多く、Twitterで情報なども得られやすいと思います。
既存のサイト以外にも、今はnoteなどで模写コーディング用の教材も販売されているので、活用してみるのも良いかも知れません。
このステップを終えて、レスポンシブ対応までしっかりできるスキルが有れば静的サイトのコーディングの案件は問題なくこなせます。
ここからはクラウドソーシングで提案を続けつつ、単価を上げるための勉強に時間を使いましょう。
WordPressの基礎学習
次は実案件でもよく使うWordpressの学習を行いましょう。
すこし難易度が上がると思いますが、書籍にそって学習し、分からないところは調べつつ、適宜動画教材を使うなどして学習を進めました。
以下の書籍が評価も高く、僕も実際に使ってみて理解しやすかったのでおすすめです。
動画教材に関してはUdemyというサービスを利用しました。
基本的に有料ですが、質が高くて初心者〜中級者向けの教材も多く、定期的にセールをやっているのでチェックしてみましょう。
WordPressの学習に際して一番オススメは自分のブログを持つことです。
僕は実際に学習のためにブログを立ち上げましたが、具体的に以下のようなメリットがあったと思っています。
- WordPress管理画面の使い方に慣れる
- テーマのカスタマイズでPHPの初歩的な知識を得る
- サーバー・ドメイン周りの最低限の知識を得る
- 自分の発信の場を持てる
「ブログ開設は難しそう...」と感じている人も以下の記事に沿って行えば誰でもブログを始められるように解説しました。
クラウドソーシングで提案・案件を受注
WordPressの学習までを終えれば、クラウドソーシングでの案件も調べつつこなせるはずです。
僕が売上を立てるまで使用したクラウドソーシングは以下の3つです。
日本最大級、定番のクラウドソーシングサイトですね。
案件数がかなり多いイメージです。
こちらも定番のサービスです。法人案件も多く、継続発注も狙えるかも。
個人的にランサーズのUIが一番使いやすいです。
③ココナラ
これは上記2つよりもカジュアルな雰囲気でビジネス感は薄いです。
しかしその分幅広いユーザーが利用しているため、Web制作の案件も結構あります。
より多くの案件に応募するためにすべてに登録しておきましょう。
それぞれの特徴を理解し、使い分けするのが理想ですね。
このなかで、強いて僕のオススメを選ぶとしたらココナラです。
実際に上記の3つをすべて使っていますが、ココナラならではのメリットはこんな感じです。
- 競争率が比較的低い
- 継続受注しやすい
- 自分のサービスを出品できる
競争率の低い案件で実績を付けつつ、自分のサービスを購入してもらえるようになれば、安定して受注できます。
とはいえクラウドソーシングは総じて競争率が高く、単価も低いので案件受注にはコツが必要です。
正直ここで多くの人が挫折すると思います。闇雲に何十件と提案を送っても、ほとんど通らないのが現実だからです。（以前の僕もそうでした...）
受注のコツや継続的に案件を振ってもらうためのコミュニケーション術については別の記事で解説しようと思います。
さらにステップアップするには
HTML＆CSSコーディング自体は正しい勉強法を行えば誰でも習得できるものです。
そこからステップアップして、継続的に案件を獲得したい、収益を安定させたい場合はさらにスキルアップをして付加価値を付けていきましょう。
基礎学習を終えた段階で取り組みやすい、次のステップをいくつか紹介します。
デザインの基礎を学ぶ
Webデザインの構成から提案できるようになれば、案件の単価は上がります。
デザインに関しては「センスないし...」と思うかもしれませんが、関係ありません。
むしろ既存のデザインの分析や考察が重要なので、ロジカルな思考も必要です。
特に以下の書籍がデザインがイメージ・コンセプトごとにまとまっていておすすめです。
デザインの学習を本格的にやるつもりはない人も、1冊持っておけば何かと役立ちます。
CSS設計を学ぶ
制作会社などから案件を貰う場合は社内で保守・管理がしやすいようにCSSのクラスに命名規則などが定められている場合があります。
少しレベルが高いので、書籍などを一周して知識を付けて、案件の中で使いながら学んでいくのがおすすめですね。
僕はCSS設計を学ぶため以下の書籍・サイトで学習しました。
最後に
今回は完全独学でお金もできるだけかからない方法を紹介しました。
さらに効率化して最速で稼ぎたい人、スキルを付けて案件の幅を広げたい人はプログラミングスクールや有料のオンライン教材を利用するのもありですね。
下の記事では、僕が受講したPHPHacksという教材についてレビューしています。
現在では様々なプラットフォームで学習できる反面、情報が溢れていて何から始めれば良いのか分からない人が多いと思います。
できるだけ無駄な勉強を省いて最短で案件を獲得できるように頑張りましょう。
