Web制作独学の最短学習ロードマップを解説【2024年最新版】
「Web制作を独学で学びたいけど、どういう順番で学習すればいいかわからない」
「具体的にどんな方法で勉強すればいいか知りたい」
これからWeb制作を独学で勉強しようと考えている方の中には、このような疑問を抱えているケースも多いでしょう。
そこでこの記事では、Web制作を独学で学ぶための正しいロードマップや、具体的な学習方法、身に付けることで付加価値が高くなるWeb制作スキルなどについて詳しく解説していきます。
Web制作の独学に対して不安を感じている方は、本記事を読むことでほとんどの不安を解消できるはずですので、是非最後までお読みください。
目次
Web制作はオワコン？
Googleの検索窓で「Web制作」と入力すると、一番上の予測検索ワードとして「オワコン」が表示されます。
こういった現象が起こっている理由としては、以下のような方々がWeb制作に対してネガティブな感情を持ったからかもしれません。
- Web制作の学習に挫折した
- Web制作のフリーランスとして活動したものの結果を出せなかった
- 副業としてWeb制作案件を獲得しようとしたが無理だった
結果として、Web制作に対してネガティブな発信を続ける人が増えたことで、「Web制作 オワコン」というキーワードが一番上に出てしまう、という状況になっている可能性が高いです。
しかし実際には、多くのクライアントがWeb制作会社を必要としています。
だからこそ、今でも数多くのWeb制作会社が存在しているわけです。
したがって、Web制作に興味を持ち、「フリーランスとしてWeb制作で稼ぎたい」「スキルを身に付けてWeb制作会社に就職したい」という気持ちがあるのならば、何も気にすることなくWeb制作スキル習得を目指すことをおすすめします。
独学でWeb制作の学習を始める前の準備
Web制作の独学を始める前には、下準備として、以下のような点についてクリアしておくようにしてください。
- 挫折を避けるために目的を明確にする
- 周囲の理解を得る
- 学習期間を決める
挫折を避けるために目的を明確にする
Web制作スキルを独学で習得するためには、学習を開始する前に最後までやり切るための覚悟を決める必要があります。
Web制作を行うためのスキルは、簡単に手に入るわけではありません。
だからこそオワコンなどではなく、いまだに需要が高いのです。
そういった貴重なスキルを独学のみで習得しようとするのですから、Web制作を学ぶ目的を明確に定めた上で「将来的にこうなりたい」という姿を具体的にイメージしなければなりません。
特に目的を持たず、「身に付けておいたら便利かもしれない」程度の気持ちで学習に取り組んでも、途中で挫折してしまうリスクが高いので要注意です。
周囲の理解を得る
独学でのWeb制作学習は、「数週間頑張れば完結する」というものではありません。
どれくらい学習にコミットするのかにもよりますが、働きながら勉強するのであれば、ある程度長い期間に渡って学習する必要があります。
そのため、周囲の理解がなければ継続することが難しいでしょう。
恋人や配偶者がいる場合、学習期間中は一緒に過ごせないことも多くなりますので、その点について納得してもらえなければ心置きなく学習することができなくなります。
また、仕事をやめて学習に専念するとなると、家族の支えも必要となるでしょう。
本気でWeb制作の独学に取り組むと決めた場合は、周囲からの理解を得ることも重要です。
学習期間を決める
「のんびり勉強して、いつかWeb制作スキルが身に付けばいいな」
「いつか制作会社に採用されるくらいのレベルになれたらいいな」
このようなアバウトな気持ちでWeb制作の独学に入っても、ダラダラとした勉強が続いてしまうだけで、なかなか目標には届きません。
したがって、以下のように明確な学習期間とゴールを決めておきましょう。
- 3か月間は学習にコミットし、3か月後には副業案件を獲得する
- 半年間、今の仕事と両立しながら勉強し、半年後に制作会社へ就職する
最初に決めた指針に沿って行動しようとすることで、学習期間は自然と短くなることでしょう。
もちろん、最初に想定した学習期間で収まらないこともあるかもしれませんが、何も決めずに独学を開始するよりは遥かに期間を短縮できるはずです。
Web制作を独学で学習するための最短ロードマップ
独学でWeb制作を学ぶ場合、「どのような流れで学習を進めていけばいいのかわからない」という悩みを持っている人が非常に多いと思われます。
そこでこの項目では、完全未経験からWeb制作を学ぶためのロードマップについて紹介していきます。
- 無理のない学習計画を立てる
- 初心者向けの書籍を読む
- HTML/CSSを学習する
- JavaScriptやjQueryを学習する
- WordPressについて学ぶ
- ポートフォリオを作成する
- 案件獲得／就職のための活動を行う
無理のない学習計画を立てる
Web制作の独学で一番怖いのは「挫折」です。
独学は、誰からも干渉されないという自由さがあるものの、この自由さは逆にデメリットにもなります。
他人から干渉されないことで「勉強しなければ」という強制力が働かないため、強い意志を持っていなければ、なんとなくで学習をやめてしまうというリスクがあるのです。
特に、無理な学習計画を立ててしまうと、挫折する確率は高くなってしまいます。
せっかく一定のWeb制作スキルを身に付けられたのに、途中で挫折してしまうのは非常にもったいないことです。
それまでの努力を無駄にしないよう、ある程度余裕を持った学習スケジュールを立てて、独学を継続しやすい環境を整えるようにしましょう。
初心者向けの書籍を読む
学習スケジュールを立てた後は、いきなり本格的な勉強に取り掛かるのではなく、まずは「Web制作とは何か」について学ぶために初心者向けの書籍を読むようにしましょう。
書籍は、ネットの情報とは違い、その道の専門家が体系的にまとめてくれているという特徴があるため、Web制作についてまったく何も知らないという方が入り口として活用するのは非常に有効です。
専門的な学習をするための書籍もありますので、最初はそういった書籍を避け、入門書のようなものを選んで一読してみるとよいでしょう。
HTML/CSSを学習する
ホームページを制作するには、HTML（Hyper Text Markup Language）とCSS（Cascading Style Sheets）という言語が欠かせません。
静的なサイトであればHTML/CSSだけで制作できますし、HTMLもCSSも言語の中では難易度が低いので、まずはHTML/CSSの学習から入るべきです。
ポイントとしては、HTMLとCSSとを分けて勉強しない、という点です。
この2つの言語は非常に関連性が高いため、まとめて学習してしまう方が効率的なのです。
なお、CSSを学習する際は一緒に「Sass（Syntactically Awesome Style Sheets）」も学んでおきましょう。
Sassとは、CSSを拡張した言語のことです。
Sassを習得することで、「コード量を減らせる」「ファイルを分割できるので管理しやすい」といったメリットを得ることができます。
JavaScriptやjQueryを学習する
動きのあるサイトを作るには、JavaScriptというプログラミング言語の習得も必須です。
JavaScriptを習得すれば、以下のようなことを実現できるようになります。
- ポップアップウィンドウの表示
- 入力フォームの制御
- アニメーションの追加
- 非同期通信機能の活用 …など
また、JavaScriptを学ぶ場合は、一緒にjQueryについても習得しておきましょう。
jQueryとは、JavaScriptのライブラリのことで、JavaScriptでの開発を大幅に効率化してくれるものです。
jQueryを活用すれば、JavaScriptでコーディングする際に「頻繁に使うコード」が事前に用意されているため、都度自分でコードを書く必要がありません。
プログラミングにおいてライブラリの存在は欠かせないので、jQueryの学習も怠らないようにしてください。
WordPressについて学ぶ
現在のWeb制作の現場では、WordPressを使った制作が非常に多いです。
世界中にあるWebサイトの約4割がWordPressで構築されていると言われていることからも、そのニーズの高さが伝わることでしょう。
WordPressが支持されている理由は、主に以下の通りです。
- 初心者でも運用しやすい
- 無料のデザインテンプレートが豊富
- プラグインの数が圧倒的
- SEOに強い
- 用途に応じてカスタマイズしやすい …など
このように多くの強みを備えているため、WordPressは日本だけでなく世界中で高い人気を誇ります。
したがって、WordPressに関する知識やスキルも身に付けておくべきでしょう。
ポートフォリオを作成する
ここまでの段階でWeb制作に必要なスキルは身に付いているはずですので、いよいよポートフォリオ作成に取り掛かります。
ポートフォリオとは、自分のスキルを証明するための作品集のようなものです。
実務未経験の状態では、就職するにしても、フリーランスや副業として案件を獲得するにしても、アピールできる材料がありません。
したがって、自分が学習してきた成果をすべて詰め込んだポートフォリオを作成し、それを武器に就活や案件獲得に挑むわけです。
Web制作のポートフォリオは、アイデア出しからサイト構築、デザイン、コーディング、テストなど、すべてを一人で行わなければなりません。
実務経験がない人ですと、かなり大変でしょう。
しかし、未経験者の場合ポートフォリオでスキルを判定されますので、どんなに大変であろうとポートフォリオ作成は必須です。
時間をかけて、「このWebサイトなら評価してもらえるはず」と自信が持てるレベルのものを制作するようにしてください。
案件獲得／就職のための活動を行う
ポートフォリオが完成したら、最終段階である「案件獲得」や「就活」です。
案件獲得が目的ならば、クラウドソーシングサイトやSNSなどで仕事を探し、ポートフォリオを提示しつつ自分をアピールしていきましょう。
なお、案件獲得に動く際は、「自分にはまだ実績がない」ということを強く意識すべきです。
したがって、割に合わないような安い案件でも積極的にこなしていくという姿勢が重要になります。
最初から高単価な案件にこだわるようなことは避けましょう。
そして、確かなスキルと実務経験を積むためには、Web制作会社に就職するというのも非常に有効です。
個人での案件獲得を繰り返しても、仕事が属人的になってしまい、「通用する場が限られる」という状態になってしまうリスクがあります。
しかし会社組織の中でWeb制作を行うことで、正しいWeb制作の流れや在り方、スキル、クライアントとの折衝など、多くのことを実務として学ぶことができます。
「個人での案件獲得」か「Web制作会社への就職」、どちらが正解ということはありませんので、自分が望む方を選択するとよいでしょう。
Web制作における付加価値のあるスキル
この項目では、Web制作において必須のスキルではないものの、身に付けておくことで付加価値がつくスキルについて紹介していきます。
PHPやRubyといったプログラミング言語
- ログイン／ログアウト機能
- 検索機能
- 予約システム
- API連携
- SNSサービス
- 決済機能
上記のような高い機能を搭載したWebサイトを制作する場合、PHPやRubyといったプログラミング言語が必要となります。
特にPHPは、習得する価値が非常に高いと言えるでしょう。
なぜならば、PHPを扱えるようになればWordPressのカスタマイズも自由自在になるからです。
一般的なWeb制作スキルだけでなく、PHPやRubyも扱えるようになっておけば、人材価値はさらに上がることでしょう。
UI/UX
UIとは「ユーザーインターフェース」のことで、Web制作の世界においては「サイトの操作性」のことです。
UXとは「ユーザーエクスペリエンス」のことで、「ユーザーがサービスを利用した時に得られる体験」のことを指します。
この「UI/UX」の概念を踏まえてWeb制作を行うことは大変重要なため、本来ならばUI/UXデザイナーが必要になります。
しかし、UI/UXデザインに関する知識を持っておくことで、UI/UXデザイナーなしでもWeb制作が可能となるため、重宝される機会が増えることでしょう。
SEO
制作するWebサイトの種類によっては、SEOに関する知識が必要になることもあります。
SEOとは、検索エンジンにてサイトを上位表示させるための技術です。
広告による集客も大変有効なのですが、「広告出稿をやめるとアクセスが止まる」「競合が強いと広告コストが嵩みやすい」といったデメリットがあります。
しかし、SEO対策を行い検索エンジンで上位表示できるようになれば、広告費用を使うことなく継続的なアクセスを見込めるようになるのです。
広告と違い、SEOの場合は「結果が出るまで時間がかかる」というデメリットがあるものの、長期的な運用を考えているクライアントはSEOを重視することが多いので、身に付けておいて損はないスキルです。
コミュニケーション
「コミュニケーションスキル」と言われても、一見Web制作とは関係ないと感じる方も多いかもしれません。
しかし、コミュニケーションはあらゆる場面で用いられるツールであるため、当然Web制作においても重要なスキルとなります。
- クライアントに対するヒアリング
- チームのメンバーたちとの意思疎通
- わかりやすいプレゼン
コミュニケーションスキルが低いと、上記のようなことがスムーズに進まず、問題が起きやすくなってしまいます。
コミュニケーションに自信がない場合は、関連書籍を読んだり、できるだけ人と接するような場へ積極的に参加したりしながら、コミュニケーションスキルを磨いていくことをおすすめします。
Web制作の独学における具体的な学習方法
ここまで、Web制作を独学で習得するためのロードマップについて紹介してきましたが、HTML/CSSやJavaScriptの勉強などについて、具体的にどのように学習すればいいのかわからない、という方も多いでしょう。
そこでこの項目では、実際どのような方法でスキルを習得していくのかについて解説していきます。
オンライン学習サイトを活用する
Web制作の独学を行う際は、オンライン学習サイトを活用するのがおすすめです。
安い月額料金で質の高い学習を実現できるサービスが多いため、独学には最適な学習教材と言えるでしょう。
特に、以下のようなオンライン学習サイトは利用者が多く、評判も良いです。
- Progate
- ドットインストール
- paizaラーニング
- Schoo
Progate
Progateは、「Web制作やプログラミングの初心者がまず利用すべき学習サイト」と言われており、大変人気の高い学習サイトとなっています。
動画教材を用意している学習サイトが多い中、Progateではイラスト中心のスライドを使って学ぶ形であるため、1つ1つ理解しながら、自分のペースで学習することができるでしょう。
また、プログラミングをするための環境構築が不要で、特に何も準備することなくすぐにブラウザ上でコードを書くことができるのもProgateの強みです。
Progateの月あたりの利用料は以下の通りです。
| 1ヶ月プラン | 1,490円／月 |
|---|---|
| 6ヶ月プラン | 1,290円／月 |
| 12ヶ月プラン | 990円／月 |
⇒ Progate
ドットインストール
ドットインストールは、1レッスン約3分の動画でWeb制作やプログラミングが学べるオンライン学習サイトです。
1つの動画が3分という短い時間で完結する作りになっているので、「電車移動中にスマートフォンで動画を閲覧する」といったように、ちょっとした隙間時間を利用して学習を進めることができるというのがドットインストールの良いところです。
レッスン動画は約8000（2024/3時点）もの数が用意されているため、Web制作について幅広く学ぶことができるでしょう。
また、有料会員であれば現役エンジニアに質問できる、という点にも注目です。
Web制作の独学は、「壁にぶつかって挫折してしまう」というリスクと常に隣り合わせなのですが、いつでも質問できるプロがいれば、挫折リスクを大幅に減らせるはずです。
なお、有料会員になった際の月額料金は1,280円となっています。
paizaラーニング
paizaラーニングは、ドットインストール同様約3分の動画で学ぶことができるオンライン学習サイトです。
paizaラーニングの最も大きな特徴は、「就職に直結している」という点です。
転職エージェントサービスも提供しているため、学習しながら就職活動も平行して行うことができるのです。
勉強の成果を表すスコアやスキルチェックの結果次第では、企業からスカウトメールが届くこともあるため、就活にかかる時間や労力をカットできる可能性があります。
就職も視野に入れながらWeb制作を学びたい、という人にはありがたい仕組みだと言えるでしょう。
なお、paizaラーニングの月あたりの利用料は以下の通りです。
| 1ヶ月プラン | 1,078円／月 |
|---|---|
| 6ヶ月プラン | 748円／月 |
| 12ヶ月プラン | 600円／月 |
Schoo
Schooとは、社会人向けのオンライン学習コミュニティで、生放送で授業を受けることができるサービスです。
生放送なので、わからないことがあればその場で講師に質問することもできます。
生放送授業だけでなく、約8,000本（2024/3時点）もの録画授業も閲覧できるため、自分の生活ペースに合わせて勉強したいという場合は録画授業メインで学習を進めることも可能です。
7日間の無料お試し期間があるので、Schooのサービス内容が気になっている場合は、まず無料で使ってみて肌に合いそうかどうか確かめてみるとよいでしょう。
なお、有料会員となった際の月額は980円（年額払いなら9,800円）となっています。
⇒ Schoo
理解できない部分はYouTube動画で補う
オンライン学習サイトを利用することで、Web制作に必要なスキルについては大体習得できるものの、「このあたりがよく理解できない」ということもあるはずです。
その場合は、YouTube動画で知識の補足を行っていきましょう。
YouTubeにアップされているWeb制作関連の動画には、無料で閲覧できるものとは思えないクオリティの動画も数多く存在します。
ただ、体系的に解説されているわけではなく、「特定の疑問を解決することに特化している動画が多い」という点がデメリットだと言えます。
したがって、まったくの初心者状態からいきなりYouTubeで学習しようとしても、どの動画から観ればいいのかわからず、混乱してしまうことでしょう。
しかし、ピンポイントでわからないところを解決するには大変役立ちますので、是非YouTube動画も有効活用してください。
メンターを探す
「学習計画の立て方がわからない…
「壁にぶつかった時にどうすればいいかわからない…」
「学習モチベーションを維持できない…」
このようなことが原因で、Web制作の独学に挫折してしまう人は非常に多いです。
初心者が一人だけで、学習計画から学習内容の管理、モチベーション管理、情報収集などなど、すべてを完璧にこなすのはかなり難しいので、挫折率が高くなってしまうのも当然のことでしょう。
しかし、メンター（指導してくれる人）を探して一緒に伴走してもらえば、学習を最後までやり遂げられる確率はかなり高くなるはずです。
なお、メンターを探す方法としては以下のようなものがあります。
- Web制作スキルを持つ友人や知人にメンターを依頼する
- SNSでメンティー（教わる人）を募集している人を探す
- メンターを探すことのできるマッチングサイトを利用する
メンターを探すためのマッチングサイトとしては、「MENTA」というサービスが有名ですので、Web制作に詳しい人が周囲にいなかったり、SNSで探すことに抵抗があったりする場合は、是非利用してみてはいかがでしょうか。
コミュニティに参加する
Web上には、多種多様なジャンルのコミュニティが存在します。
当然Web制作に関するコミュニティも数多く存在するため、一人での学習に限界や寂しさを感じているようならばコミュニティへの参加を検討してみてはいかがでしょうか。
コミュニティに参加すれば、以下のようなメリットを享受することができます。
- Web制作についてわからないことをメンバーたちに質問できる
- 就職先について相談できる
- 勉強仲間ができる
- 交流会やイベントを通して学習モチベーションを維持できる
Web制作の独学は孤独ですので、仲間ができたり、同じ志を持った人たちとイベントで盛り上がることができたりすることには大きな意味があります。
スキルアップのための情報共有はもちろん、最後まで学習をやり切るためのモチベーション維持などに大変役立つことでしょう。
検索エンジンで「Web制作 コミュニティ」と検索するだけで多くのコミュニティがヒットしますので、興味のある方は、自分にマッチしそうなコミュニティを探してみてください。
勉強会やセミナーに参加する
コミュニティに入ると、継続的な付き合いができるというメリットがあるものの、これをデメリットと捉える人もいるかもしれません。
「変に慣れ合いたくない」「基本的には一人で学習を進めたい」という考え方を持っている場合、コミュニティへの参加は向かないと言えます。
とはいえ、一時的にやる気が低下している時には、モチベーションを取り戻すきっかけが必要でしょう。
そんな時は、Web制作に関する勉強会やセミナーに参加してみてはいかがでしょうか。
コミュニティも、そこまで厳しい縛りはないことがほとんどですが、スポットで勉強会やセミナーに参加する方が、より気兼ねなく利用できると思われます。
Web制作スキルを活かして稼ぐ方法
身に付けたWeb制作スキルで稼ぐには、「副業・フリーランス」か「Web制作会社に就職」のどちらかに絞られます。
それぞれのメリット・デメリットを考慮して、自分に合う方を選ぶとよいでしょう。
副業として案件を獲得する／フリーランスになる
Web制作スキルを身に付けることができれば、本業を持ちながら副業としてWeb制作案件を獲得したり、フリーランスになって専業として稼いだりすることができます。
「案件が取れなければ利益にならない」というリスクはあるものの、「やりたい案件だけに絞って応募できる」というメリットもあるため、仕事を選びたい人は副業やフリーランスといった働き方が向いているでしょう。
なお、副業やフリーランスとして案件を獲得する場合、以下のようなサイトを利用すると便利です。
- ランサーズ
- クラウドワークス
- ココナラ
- Wantedly
- レバテックフリーランス
Web制作案件が豊富に掲載されているため、自分の得意としている案件を自由に選んで応募することが可能です。
実績が少ない時は案件獲得に苦戦することが多いものの、実績が増えてくればどんどん案件も取りやすくなってくるでしょう。
Web制作会社へ就職する
最もおすすめなのは、「Web制作会社へ就職する」という方法です。
Web制作会社への就職をおすすめする理由は以下の通りです。
- 組織の中で正しいWeb制作スキルを伸ばすことができる
- 協調性や社会性も養われる
- 実績として評価されやすい
副業やフリーランスの場合、自己流で仕事を進めることになるため、Web制作スキルが我流となってしまう恐れがあります。
しかし制作会社へ就職すれば、「実務における正しいWeb制作スキル」をしっかり学べる可能性が高くなります。
また、組織の中で働くため、自然と協調性や社会性も養われていきますし、フリーランスとして働くよりも実務経験として評価されやすい点も見逃せません。
独学で一通りのWeb制作スキルを身に付けた後は、Web制作会社で実務レベルのスキルを磨くという選択肢もあることを念頭に置いて、進むべき道を選ぶようにしてください。
まとめ
以上、Web制作を独学で習得するためのロードマップを中心に、独学を開始する前の準備や、身に付けることで人材価値の上がるスキルなどについて詳しく紹介してきました。
Web制作スキルは、独学でも十分に習得可能ですので、本記事で紹介したような正しいロードマップに従って順序よく学習するようにしてください。
完全に一人で学習するのが難しければ、挫折を避けるために、メンターやコミュニティ、セミナーといった存在を利用することも重要です。
[reblex id=’343′]
