「独学でWeb制作を学ぶロードマップは？」
「どのように勉強するのがおすすめ？」
Web制作を独学で学ぶにあたり、上記のような悩みを抱える人は少なくありません。
実際、ロードマップを知らずに勉強して、失敗してしまうケースもあるでしょう。
そのため、まずは独学で身につけるためのロードマップを知っておくことが大切です。
この記事ではWeb制作を独学で身につけるロードマップについてまとめました。
学ぶべき内容別の勉強法についても紹介していますので、ぜひ参考にしてください。
Web制作を独学で身につけるロードマップ
Web制作を独学で身につける際は、勉強する順序が大切です。
ここでは独学で身につける具体的なロードマップとして、以下の6つを見ていきましょう。
- ①事前準備をする
- ②Web制作の基礎を学ぶ
- ③HTML・CSSを身につける
- ④JavaScriptを身につける
- ⑤WordPressを身につける
- ⑥ドメイン・サーバーについて学ぶ
①事前準備をする
まずは自分のパソコンに、以下のツールをインストールしておきましょう。
- Google Chrome
- Visual Studio Code
表示確認をする際はさまざまなブラウザを用いて行いますが、制作自体はGoogle Chromeで実施するのがおすすめです。
理由として、Google Chromeにはさまざまな拡張機能がある点があげられます。
拡張機能を導入すれば自分が使いやすいブラウザにカスタマイズでき、中でも以下の拡張機能がWeb制作の際に人気です。
- ato-ichinen
- Create Link
- DeepL翻訳
- GoFullPage
- PerfectPixel
- Wappalyzer
- Lighthouse
- Video Speed Controller
Visual Studio Codeに関しても拡張機能を導入すると便利になるため、自分に必要なものがあれば合わせて用意しておきましょう。
②Web制作の基礎を学ぶ
事前準備をしたら、Web制作の基礎を学びましょう。
Web制作の基礎として、サイトの仕組みやインターネットにつながる仕組みなどがあげられます。
この部分を理解しておかなければ、Web制作の際に困りごとが出てくる可能性もあるでしょう。
また、基礎を学ぶことでWeb制作が自分の肌に合っているかを判断するのにも役立ちます。
この段階で違和感があるようなら、Web制作が自分に合っていない可能性があることも覚えておきましょう。
③HTML・CSSを身につける
HTML・CSSは、Web制作に携わるなら必ず身につけておくべき言語です。
マークアップ言語と呼ばれるもので、インターネット上に公開されているほとんどのサイトで使用されています。
HTML・CSSはWebサイトの見た目を構成する言語となっており、それぞれの役割は以下の通りです。
- HTML：Webサイトに必要な部品を配置するための言語（文字・表・画像・リンクなど）
- CSS：Webページの見た目を整えるための言語のこと
そもそもHTML・CSSが使えないと、ほとんどのWeb制作案件を受けられません。
まずはHTML・CSSをしっかりと身につけてから、次の段階に進むようにしましょう。
④JavaScriptを身につける
HTML・CSSが身についたら、次はJavaScriptの学習を進めましょう。
JavaScriptはHTML・CSSと比べると難しいと感じる人が多いため、入門編の書籍から勉強を始めるのがおすすめです。
いきなり難しいことを学ぼうとすると、自分自身が挫折してしまう可能性があるため、注意してください。
なお、JavaScriptはWebサイトに動きをつけるための言語として活用されます。
カーソルをあわせた文字の色が変わったり、特定の箇所でメニューを表示したりするなどの役割をもつ言語と理解しておきましょう。
⑤WordPressを身につける
JavaScriptの学習が済んだら、WordPressの勉強を行いましょう。
WordPressは全世界で使用されているポピュラーなブログツールであり、公開されているWebサイトの3分の1に使用されています。
実際にWordPressを使用した案件は数多く募集されており、クラウドソーシングの案件は特に該当することが多いです。
WordPressが使えるようになれば、Web制作も比較的簡単に行えます。
WordPress自体が極端に難しいといったことはないため、Web制作をするならあわせて覚えておきましょう。
⑥ドメイン・サーバーについて学ぶ
Webサイトの制作ができるようになってきたら、ドメインやサーバーについて学んでおくと安心です。
実際の仕事でサーバー周りのトラブルにつながることもあるため、実際に触っておくのが良いでしょう。
なお、ドメインとサーバーはそれぞれ以下のようなものです。
- ドメイン：WebサイトのURLに含まれる「www」以下の部分
- サーバー：ユーザーの（要求）に対応したデータを提供するコンピュータ・プログラムのこと
Web制作をするなら必ず触れることになる部分であるため、しっかりと学んでおくようにしましょう。
【項目別】Web制作を独学で学ぶ際の勉強方法
Web制作に関することを独学で学ぼうとしても、勉強方法がわからなければなかなか学習できません。
ここでは具体的な勉強方法についてまとめましたので、参考にして自分に合った方法を見つけてください。
- Web制作の勉強法
- HTML・CSSの勉強法
- JavaScriptの勉強法
- WordPressの勉強法
- ドメイン・サーバーの勉強法
Web制作の勉強法
Web制作を勉強する際は、オンラインサービスや書籍などを活用するのがおすすめです。
オンラインサービスであれば無料で利用できるものも多く、実際に手を動かしながら勉強できるため、自分の知識を確認できます。
ただし、オンラインサービスには数多くのサービスがあるため、自分に合っているかを判断しながら利用するものを選びましょう。
書籍については、実際に書店で試し読みしてから購入することをおすすめします。
また、オンラインサービスとは異なり、実際に購入した人のレビューを確認しながら選べるのも強みです。
ただし、コードがコピペできなかったり、自分に不要な情報が多かったりする点には注意しましょう。
HTML・CSSの勉強法
HTMLやCSSを勉強する際は、1～3か月の期間を想定してスケジュールを組む必要があります。
勉強方法としてはオンラインサービスを活用するのがおすすめで、以下のSTEPに沿って勉強を進めるのが一般的です。
- ドットインストールで雰囲気を確認
- Progateを使って勉強
- YouTubeを活用して復習
- 本で復習しつつ、実際にWeb制作にチャレンジ
- デザインカンプのコーディングに挑戦
ドットインストールとProgateを使えば、HTML・CSSについてはある程度の基礎知識をつけられるでしょう。
なお、勉強する際は自分が無理なく進められるペースを維持する必要があります。
自分が理解できたと感じたら、次のSTEPに進んでいくようにしましょう。
JavaScriptの勉強法
JavaScriptを勉強する際は、まず基礎を理解することが大切です。
他の言語や項目にも言えることですが、基礎を理解していなければ、実際のWeb制作に用いることはできません。
JavaScriptの基礎をしっかり固めたら、よくあるUIを作ったりよく使うライブラリの勉強をしたりしましょう。
また、JavaScriptを勉強する際は、jQueryについても学習しておくのがおすすめです。
jQueryを使えばコードの記述がシンプルになるため、あわせてチェックしてみてください。
WordPressの勉強法
WordPressは、基礎を学んだあとにカスタム3兄弟やプラグインについて勉強するのがおすすめです。
カスタム3兄弟とは以下3つのことを指し、実際の案件でも用いられることが非常に多くなっています。
- カスタム投稿タイプ：オリジナルの投稿タイプを作成可能
- カスタムタクソノミー：カテゴリーやタグといったオリジナルの分類を作成可能
- カスタムフィールド：タイトルと本文以外のオリジナル入力項目を作成可能
WordPressは実際に手を動かしながら勉強するのがおすすめです。
利用料金がかからないため、無料のサーバーを活用してデザインやコーディングにチャレンジしてみましょう。
ドメイン・サーバーの勉強法
ドメイン・サーバーを勉強する際は、実際にサイトを公開したり、Basic認証・リダイレクトをかけたりしてみましょう。
知識として持ち合わせていても、実際に利用してみることで理解できているかを再確認できます。
あらかじめドメインやサーバー周りを触っておかないと、案件を受けた際のトラブルにつながることもあるでしょう。
自分自身が困ったり、クライアントに迷惑を掛けたりしないためにも、ドメインやサーバーについてもしっかり勉強しておいてください。
Web制作を独学で身につける際に学んだほうがいいその他の5つの項目
Web制作を独学で身につけるなら、さらに学んでおいた方が良い項目が多数あります。
ここでは具体的な項目として、以下の5つを見ていきましょう。
- SEO
- アクセシビリティ対応
- Git/GitHub
- ビルドツール
- Prettier/ESLint
SEO
SEOとは、検索エンジンがWebサイトを評価し、ユーザーに有益なページを検索上位に表示させる仕組みのことをいいます。
せっかくWebサイトを作っても、ユーザーに見られなければ収益にはつながりません。
そのため、Web制作をするなら覚えておきたい項目の一つです。
なお、SEOについては常にGoogleのアルゴリズムや評価基準が変動し、そのタイミングで順位が入れ替わることもあります。
常に最新の情報を理解しておく必要があるため、一度覚えればOKといった項目でないことも覚えておきましょう。
アクセシビリティ対応
アクセシビリティ対応とは、年齢・性別・身体的な特徴・障害の有無などを問わず、ユーザーが使いやすいサービスや製品を作ることです。
インターネットは関係ないと思われがちですが、日常生活に密接に関係していることから、求められることが非常に多くなっています。
アクセシビリティ対応については、書籍ではなかなか学べません。
実際に書店に足を運んでも、知りたい情報が掲載されている書籍は見つからないでしょう。
アクセシビリティ対応を学ぶ際はインターネットを活用して、地道に情報を収集するのがおすすめです。
Git/GitHub
Git/GitHubは、Web開発を行う際にはどのプロジェクトでもほぼ必須の項目です。
1人ですべてを制作する際は用いないこともありますが、基本的には使ったほうが良いとされています。
特に複数人が制作にかかわる案件や、GitHubで管理している既存サイトの改修をする際は必須となるため、必ず勉強しておきましょう。
なお、Gitは「ソースコードのバージョンを管理するツール」の名前です。
GitHubは「Gitを利用した、開発者を支援するWebサービス」のことを指すため、それぞれの違いについても理解しておきましょう。
ビルドツール
ビルドツールは、高速で快適にコーディングできるようになるWeb制作のツールです。
代表的なツールとして「Vite」があげられ、使用することで下記のような項目を実現できます。
- 画像の圧縮
- webpの自動生成
- コードの圧縮
- Sassのコンパイル
- ベンダープレフィックス自動付与
ビルドツールが使えるかどうかでWeb制作の効率も大幅に変わってくるため、時間を見つけて学習しておくべきといえるでしょう。
なお、ここでnpmやyarnと呼ばれるパッケージマネージャも使うことになるのも、あわせて覚えておいてください。
Prettier/ESLint
Prettier/ESLintは、コードを自動でフォーマットしたり、JavaScriptのコードが正しいか自動でチェックしたりするものです。
ESLintが導入されているプロジェクトは非常に多く、使用できないことで困る場面も出てくるでしょう。
また、Prettierは単体でも利用できますが、ESLintとセットで用いられることが大半です。
ソースコードの品質を保ったり、Web制作の効率を良くしたりできるため、覚えておいて損のない項目となっています。
Web制作を独学で身につけるロードマップ外でやるべき2つのこと
Web制作を独学で身につけるためには、ロードマップ外でやっておくべきこともあります。
ここからは具体的な項目として、以下の2つを見ていきましょう。
- ポートフォリオを制作する
- クラウドソーシングに登録する
ポートフォリオを制作する
Web制作を身につけた後は、案件の獲得に向けて動く必要があります。
案件の獲得に大切といわれているのが、自分の実績やスキルをまとめたポートフォリオです。
ポートフォリオの有無によって案件の獲得しやすさも変わってくるため、できる限り制作しておくようにしましょう。
なお、ポートフォリオを制作するうえでの注意点として、以下の2つがあげられます。
- 制作には時間をかけない
- 公開した後にも随時アップデートする
制作には時間をかけない
ポートフォリオを制作する際は、あまり時間をかけすぎないように注意しましょう。
ポートフォリオの制作に時間をかけるのは、非常にもったいないです。
ポートフォリオの制作に時間をかけるなら、案件を受注するために動いたり、実際に制作実績を作ったりしたほうが案件の獲得につながります。
なお、ポートフォリオについては実際に動作するものを見てもらえるようにしておきましょう。
サーバーにアップして公開しておくのが、ポートフォリオとしては非常に効果的です。
また、サーバーに公開する手順も同時に学べるのもメリットとなります。
公開した後にも随時アップデートする
ポートフォリオを制作した後も、公開したものを随時アップデートするようにしましょう。
アップデートしたほうが良い理由として、以下の2つがあげられます。
- 自分のできることが増えているため
- 制作実績が増えることでクオリティが高まっているため
ポートフォリオのクオリティが高ければ、クライアントからの見栄えも良くなるでしょう。
案件を受注しやすくもなるため、ポートフォリオを放置するのは非常にもったいない行為です。
もちろんアップデートに時間をかけすぎる必要はありませんが、手が空いているときはぜひ一度見直してみてください。
クラウドソーシングに登録する
Web制作を独学で学んだあとは、クラウドソーシングに登録しておきましょう。
クラウドソーシングは「企業や個人がインターネット上で不特定多数の人に業務を依頼するビジネス形態」で、代表的なサービスに以下があげられます。
- クラウドワークス
- ランサーズ
実際にWeb制作に関する案件も数多く掲載されているため、なかなか仕事が見つからずに悩んでいる場合には有効活用しましょう。
クラウドソーシングに登録するうえで知っておきたい項目として、以下の2つがあげられます。
- クラウドソーシングがおすすめの理由
- 最初のうちは単価にこだわりすぎない
クラウドソーシングがおすすめの理由
クラウドソーシングへの登録がおすすめの理由として、案件を取得しやすい点があげられます。
そもそも独学でWeb制作を学んでも、実績がなければ話を聞いてもらえません。
特筆すべき経歴や話術があれば話は別ですが、実際に興味を示してもらえるケースはほとんどないでしょう。
対してクラウドソーシングであれば、零細企業や個人のクライアントも数多く人材を募集しています。
そのため、自身のスキルにあった案件を見つけやすくなるのもメリットです。
初心者や未経験でも受注できる案件も掲載されているため、実績作りの場としてもクラウドソーシングは適しているといえるでしょう。
最初のうちは単価にこだわりすぎない
クラウドソーシングで案件を受注する場合、最初のうちはあまり単価にこだわりすぎないようにしましょう。
というのも、クラウドソーシングで募集されている案件の単価は、他の案件探しの方法に比べて低めです。
単価が高い案件があったとしても、数多くの人が受注のために応募するため、なかなか獲得にはつながりません。
クラウドソーシングは案件を獲得するためにかなり実績を重視されます。
同じスキルを持っていたとしても、実績が多い人の方が案件を受注しやすいことは覚えておきましょう。
なお、未経験や初心者OKの案件であれば、実績はあまり重視されません。
実績作りを目的とするなら、これらに該当する案件を探してみましょう。
Web制作を独学で身につけるロードマップをこなした後に案件を見つける方法
Web制作を独学で学んでも、案件を見つけなければ収入は得られません。
ここからはロードマップをこなした後に案件を見つける方法として、以下の5つを見ていきましょう。
- 制作会社に応募する
- 知り合いを経由する
- 営業パートナーを探す
- フリーランスエージェントを使う
- TwitterやSNSを活用する
制作会社に応募する
案件を探している場合は、人材募集している制作会社に応募してみるのがおすすめです。
Web制作を請け負っている会社であるため、案件が急に途切れてしまう心配はほとんどありません。
また、複数の制作会社と契約できれば、営業を掛けなくて済むようにもなるでしょう。
直契約になるため、比較的単価も高めに設定されています。
ただし、実績を持っていない場合は、そもそも興味を示してもらえません。
ある程度実績を持ち合わせており、自身のスキルを磨いている人におすすめの案件獲得方法の一つです。
知り合いを経由する
Web制作の実績がない場合は、友人や知人を経由して実績を作るのも一つの手段です。
SNSやインターネットを見ているとWeb制作ができる人は多くいるように感じるかもしれません。
しかし、実際に身近な人でWeb制作ができる人がいるケースは非常にまれです。
そのため、声をかけてみて損することはまずないでしょう。
知人・友人経由であれば、赤の他人に依頼するよりも信頼できると考える人もいます。
クオリティに満足してもらえれば、さらに別の人を紹介してもらえる可能性も高いです。
営業パートナーを探す
自身で営業を掛けるのが苦手な人は、営業パートナーを探してみるのもおすすめです。
営業そのものを別の人にお願いできるため、自身が営業で感じるストレスがありません。
また、営業に割く時間が必要なくなるため、その分を制作やスキルアップに充てられます。
営業パートナーの探し方はさまざまですが、基本的には自分の仲が良い人で、営業を得意としている人にお願いするのが良いでしょう。
どうしても見つからない場合は、SNSや個人ブログなどを辿り、依頼できる人を見つけるのがおすすめです。
フリーランスエージェントを使う
フリーランスとして活動するのであれば、フリーランスエージェントを利用するのも一つの手段です。
フリーランスエージェントは利用者のスキルや希望にマッチした案件を紹介してくれるため、ミスマッチのリスクが少なくなります。
また、営業を掛ける手間もなくなるため、案件探しの時短につながるでしょう。
クラウドソーシングと比べて単価も高めに設定されているため、稼ぐといった意味でもおすすめです。
ただし、サービス選びにこだわらなければ、なかなか良い案件が見つからない点には注意しましょう。
X（旧Twitter）やSNSを活用する
X（旧Twitter）やSNSを活用するのも、案件探しの方法としておすすめです。
Web制作を請け負っているフリーランスは、基本的にSNSアカウントを開設し、発信しています。
常に発信し続けて信頼できる人と感じてもらえれば、自身から営業を掛けなくても声がかかることもあるでしょう。
また「コーダー 募集」のようなキーワードで検索すると、人材募集の投稿が見つかることもあります。
SNSを活用しないのは非常にもったいないため、積極的に活用してみてください。
まずはWeb制作を独学で学ぶためのロードマップをこなすことが重要
本記事ではWeb制作を独学で学ぶロードマップについて解説しました。
独学でWeb制作を身につけるには、ロードマップをこなすことが大切です。
ロードマップをこなせば基本知識や必要なスキルが身につき、Web制作案件の受注を目指せるでしょう。
また、案件を探す際はポートフォリオやクラウドソーシングへの登録を忘れてはいけません。
やるべきことをやらなければ、せっかくスキルを身につけても案件が得られず、収入にもつながりません。
本記事で紹介した内容をもとに、ぜひWeb制作を独学で学ぶロードマップを実践してみてください。