「Web制作の技術を独学で学んで、いつかはフリーランスとして独立したい」
「副業で稼げるぐらいのWeb制作スキルが欲しい」
副業を認める企業が増えている今、Webサイトを作成して副収入を得たいと考えている人も多いと思われます。
そして副業が軌道に乗れば、Web制作を本業とするために独立してフリーランスになりたいと考える人も少なくはないでしょう。
そこでこの記事では、独学のみで、フリーランスや副業という形で受注から納品までこなすことができるようになるためのロードマップについて解説していきます。
Web制作に必要なスキルを知る
独学でWeb制作を学ぶためにまずやらなければいけないことは、「一人でWeb制作をするにはどんなスキルを身に付ければよいのか」を知ることです。
フリーランスや副業として一人でWeb制作を請け負うには、以下のスキルが必須となります。
- HTML
- CSS
- Javascript
- jQuery
- WordPress
まずはWeb制作の土台となるHTMLとCSSについて学び、次にサイトに動きをつけるためにjQueryとJavaScriptを学びます。
最後に、世界中のサイトの約3割を占めるWordPressについても対応できるようにしておいた方が良いでしょう
これで、ひとまずWeb制作を請け負うことが可能な状態となりますので、最初はお金にこだわらず、自分にできそうな案件を探して実績を作っていくという流れになります。
HTML／CSSを学習する
Web制作を独学で身に付けるためにまず学ぶべきは、HTMLとCSSです。
サイトの土台となるこの2つを理解せずに、先へ進むことはできません。
HTMLとは
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略称で、サイトを構築するためのマークアップ言語です。
マークアップとは、文章構造や文章の役割などをコンピュータに理解させるため、見出しタグや段落タグ、テーブルなどを使用することを指します。
これらを正しく入力していくことで、コンピュータはサイトの構造を正しく理解し、指定された形で表示します。
いわば、サイトの骨格を作るための言語であり、稀にPHPなどのプログラミング言語のみで構成された動的サイトもあるものの、世の中のほとんどのサイトにはHTMLが用いられています。
骨格無くして肉付けはできません。
そのため、Web制作を行なおうと考えるのならば、避けては通れない言語です。
なお、言語としてはかなり簡単であり、視覚的にもわかりやすく、独学のみでもここで挫折するケースは少ないでしょう。
HTMLの詳しい勉強法はこちらの記事で解説しておりますのでこちらをご覧ください。
CSSとは
CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略称で、サイトの細かなスタイルについて設定していくための言語となります。
HTMLと組み合わせて使用するものなので、一緒に学習してしまうのが効率的です。
CSSの主な役割としては、「サイトの装飾」です。
文字色を変えたり、テーブルの見た目を設定したり、文字や画像の位置を指定したりしつつ、サイト全体のレイアウトを整えていくことができます。
HTMLだけではレイアウトに限界がありますし、記述も煩雑になってしまうので、Web制作を行う上でCSSの学習も必須となります。
CSSの詳しい学習手順についてはこちらの記事で解説しております。
学習するための教材
HTMLとCSSを学ぶには、以下の2サイトがおすすめです。
Progate
Progate（プロゲート）は、100か国以上の国で提供されている初心者向けのプログラミング学習サービスです。
「独学でプログラミングを学ぶならまずはProgateから」という考えは、半ば共通認識になりつつあります。
Progateには、以下のような特徴があります。
- 初心者向けに作られているので全体的にわかりやすい
- 環境構築の必要がない
- 多数の言語がフォローされている
- 学習のためのロードマップがイメージしやすい
ProgateにてHTML＆CSSコースをすべて受講することで、Webを作るために必要な基礎知識についてはしっかり学ぶことが可能です。
無料でも使用できますが、学習内容が限られてしまうので、本気でWeb制作を学ぶ気がある場合は課金することをおすすめします。
有料版は月額980円となっています。
Web制作関連の本は1,000円以上することが多いので、本を一冊買ったと思えば決して高い金額ではないでしょう。
ドットインストール
ドットインストールとは、国内で非常に多用されている初心者向けプログラミングサービスを提供しているサイトです。
現在、478レッスンを7,179本の解説動画にて提供中です。（2022年8月時点）
同じ初心者向けサービスであるProgateと性質は似ているものの、以下のような違いがあります。
| Progate | ドットインストール | |
| 学習方式 | スライド教材 | 動画教材 |
| コード | コピペがメイン | 自分で書く |
| 環境構築 | 不要 | 必要 |
| スマホでの学習 | やりやすい | やりにくい |
どちらかというと、ドットインストールの方が難易度が高いので、Progateでの学習を終えてからドットインストールでさらに知識を固める、という流れが理想でしょう。
学習期間
HTMLとCSSの学習期間の目安は、約20～30時間ほどです。
「平日：2時間」＋「土日：5時間」と考えると、一週間で20時間の勉強時間が確保できるので、早ければ一週間で学習を終えられます。
「意外と早いな」と感じる方も多いかと思われますが、これはあくまで「基礎的な部分を抑えるための学習時間」であり、20～30時間勉強すればHTMLとCSSを完璧に理解できる、という意味ではありません。
学習段階で、すべてを網羅しようとするのはまず不可能です。
HTMLとCSSについて完璧に覚えようとしてしまうと、その量は膨大となってしまいますし、実務ではまず使わないような知識まで学ぶことになってしまいます。
従って、学習段階では「基礎」や「頻繁に必要となる知識」のみ抑えておけばそれでよいのです。
その後案件を受注できるようになってから、案件に応じて必要となる技術・知識について都度調べていき、仕事をこなしながらスキルを高めていくという形が一般的です。
JavaScript／jQueryを学習する
HTMLとCSSの学習を終えたら、次はJavaScriptと、そのライブラリであるjQueryについて学習していきましょう。
JavaScriptとjQueryの役割
JavaScriptやjQueryは、サイトに動きをつけるために必要となるものです。
ポップアップ画面を出したり、アニメーションを流したり、といった動きはJavaScriptやjQueryによって行われています。
なおjQueryとは、JavaScriptのライブラリの一つであり、JavaScriptでよく使われる機能を短いコードで実現できる技術です。
例として、JavaScriptならば10行以上記述しなければいけないところ、jQueryならば3行程度で済んでしまう、ということもあります。
もちろんメリットだけではなく、jQueryを用いることで処理が遅くなってしまったり、フレームワーク導入時に注意が必要だったりといったデメリットも存在します。
学習方法と学習の順番
学習方法については、前述した「Progate」と「ドットインストール」を利用する形で問題ありません。
どちらの学習サイトでも、HTMLとCSSだけでなく、JavaScriptとjQueryについてもしっかりフォローされています。
なお学習の順番については、より難易度の低いjQueryから学び、その後にJavaScriptへ進むようにした方が良いです。
どこまで学習すべきか
jQueryとJavaScriptについてどこまで勉強すべきかは、最終的に何を目指しているのかによって異なります。
フロントエンジニアレベルのスキルを求めるのならばかなりの学習時間が必要となりますが、Web制作の一端として身に付けておくということならば、Progateとドットインストールでの学習を通じて以下のようなことが理解できるようになればとりあえずは充分です。
- 変数・定数
- ループ処理
- 分岐
- 配列
- オブジェクト
関数やクラスについてまで深く学ぼうとすると、独学では心が折れてしまう可能性が高いです。
最初からすべてを覚えようとせず、まずは基本をきっちりと理解し、あとはHTML／CSS同様、案件に応じて必要になった技術を都度学んでいく形が好ましいでしょう。
繰り返しになりますが、最初から完璧を求めないということが非常に重要です。
学習時間についても、この段階ではあまり時間をかけすぎても意味はないので、Progateとドットインストールの講座が終わればそれで一区切り、としてしまって問題ありません。
ひたすら写経する
ここまで進めば、HTML／CSSとJavaScript／jQueyの学習は一通り終わり、基礎については身に付いている状態になっているはずです。
しかし、あくまで基礎は基礎。
まだWeb制作を請け負えるレベルではありません。
従ってここからは、モデルとなる既存のサイトを選び、そのソースコードをひたすら写経しながら実際のWeb制作のイメージを固めていく作業を繰り返してください。
写経とは、ソースコードをひたすら書き写すことです。
なお、ただ書き写すだけでなく、一つ一つのコードが何を意味しているのか考えながら写経すると、より一層効果的です。
余裕があれば、既存サイトに変更を加えてみるのも成長に繋がります。
レイアウトを自分なりに変えてみたり、目を引くようなアニメーションが流れるようにしたり、といったような変更です。
そして最後は、自分独自のサイトを一つ作り上げてみてください。
どのようなサイトを作成するのか企画し、HTMLでサイトの骨格を作り、CSSでデザインを整え、jQueryとJavascriptで動きをつける、という作業をゼロから行うというアウトプットは非常に重要です。
何より、こうして一つのサイトを自分で作り上げることができたという事実は、大きな自信となります。
WordPressを学習する
写経も終え、独自のサイトを作成できるようにもなれば、いよいよ案件獲得に動いてもよいのですが、その前にWordPressに対応できるスキルも身に付けておくべきです。
今や、世界中のサイトの※43.0%はWordPressによって構築されています。
当然、募集案件の中にWordPressが絡んだものも非常に多い状況です。
学習方法
以前はドットインストールにWordPressの講座があったのですが、今ではサポートが終了しています。
よって、学習するには「Udemy」のような有料学習サイトか、書籍を購入して体系的に学んでいくのがよいでしょう。
そして、わからない部分についてはネットで検索すれば問題ありません。
WordPressに関する情報は非常に多いため、大抵の疑問はググることで解決します。
目標はオリジナルテーマ作成
WordPress独学における最終目標は、これまで学習してきたことの集大成として、オリジナルのテーマを作成できるようになることです。
テーマ作成を自力でできるようになれば、WordPressの仕組みについてだいぶ理解できていることの証となります。
これまでの学習同様、テーマ作成についても最初から作りこもうとせず、まずは簡単なものでいいので完成させることが大事です。
細かいカスタマイズは、必要な時がきたら学べばよいだけです。
クラウドソーシングで実績を作る
ここまでこなせば、一通りのWeb制作はできるようになっているはずです。
あとは、クラウドソーシングで実際に案件を受注しながら経験を重ねていき、実績を作っていきましょう。
クラウドソーシングから始める理由
独学での学習をやりきり、Web制作を受注できる状態となったことで、早速いろいろな会社に営業をかけたいと考える人も多いでしょう。
しかし、独学のみで実績がまったくない人間がいきなり営業をかけたところで、ずば抜けた話術や経歴でもなければ、興味を示してくれる会社などまずありません。
ところがクラウドソーシングならば、零細企業や個人のクライアントも数多くいるため、「そんなに技術がなくてもいいから安く請け負って欲しい」と考えている層も一定数存在します。
通常ならば、こうした零細企業や個人を見つけ出すのは非常に困難ですが、クラウドソーシングならば比較的容易に探すことができます。
- ランサーズ
- クラウドワークス
- ココナラ
こういったクラウドソーシングサイトに登録し、自分でもできそうだと思える案件に対して積極的に応募していきましょう。
単価にはこだわらない
クラウドソーシングに登録したばかりで実績がない、もしくは実績が少ない場合、まずは採算度外視で、とにかく案件をこなすことを強く意識してください。
明らかに割に合わないような仕事であろうと、どんどん応募すべきです。
ある程度の実績がなければ、単価の良い案件に応募したところで相手にされないというケースがほとんどですので、まずは実績を作っていき、ポートフォリオを充実させることを優先すべきです。
Web制作はWeb開発に比べて参入障壁が低いため手を動かす作業者の価格は低下してしまいがちです。
ポートフォリオを武器に直接契約を目指す
クラウドソーシングで実績を積み、クライアントに対して自信をもって提示できるポートフォリオが構成されたら、いよいよ高単価案件を獲得するために動き出します。
具体的には、クラウドソーシングを使わず、求人サイトで業務委託として募集している案件を探して応募していく、という形です。
クラウドソーシングの場合、運営側にシステム手数料を取られてしまうため、なるべく早く脱却してマージンの取られない契約を目指すべきです。
また、クラウドソーシングで仕事を請け負ったクライアントから、「これからは直接取引したい」という申し出を受けることもあるでしょう。
クラウドソーシング上で募集されている案件に対して、直接取引に切り替えることは規約違反となりますが、一旦掲載されている案件を消化した後は自由です。
クライアントが、今後も引き続き依頼したいと考えた場合は、次の案件からは直接の取引とすることも可能です。
相手から連絡が来なくとも、これまでに納品した成果物に自信があれば、自分から売り込んでいくということも積極的にやった方がよいでしょう。
SNSやブログを活用する
直のクライアントを抱えられるようになれば、それだけ実力も評価されているということですし、ポートフォリオもさらに充実しているはずです。
これを周知しないのは非常にもったいないので、是非TwitterなどのSNSを使って成果をアピールし、案件獲得のツールにすべきです。
現在は、SNS経由で案件を獲得できるというケースも非常に多いので、疎かにすべきではありません。
また、独学でWeb制作の仕事を獲得できるようになった経緯を綴ったブログを運営するのも有効です。
そういった体験談を求めている人は多いですし、そこでさりげなく実績を掲載することで、興味を持ったクライアントから仕事が舞い込むということもあります。
SNSやブログなど、案件に繋がりそうなチャネルは一つでも多く持っておくべきです。
まとめ
以上、独学でWeb制作を学ぶためのロードマップについて解説しました。
なお、一口に「Web制作」といっても、どこまでを指すのかは曖昧です。
今回解説したのは、あくまで「Web制作案件を受注するための最低限のスキルを身に付けるロードマップ」と「その後の案件獲得方法」となります。
より高度で高単価な案件を受注するためには、WebデザインやSEO、PHPやRubyなどのプログラミング言語などについても学んでいき、できる仕事の範囲を広げていくことが大事になってきます。
- HTML／CSS ⇒ jQuery／Javascript ⇒ 既存サイトの写経 ⇒ 独自サイト作成の順に学習を進めていく
- 仕事の幅を広げるためにWordPressの学習もすべき
- 学習段階では変に完璧を求めず、ある程度理解できたらどんどん先へ進む
Web制作を学習するなら、Web開発も選択肢として入れることをおすすめします。先ほども書きました通り参入障壁が低いです。
Web開発は複雑で学習コストは高いものの、参入障壁が高い分高単価で将来性も高いです。
Web制作とWeb開発を「【 Web開発会社が語る】Web制作かWeb開発どっちを選ぶべきか徹底解説」の記事で詳しく比較しております。
こちらを参考にしてみてください。
