Web制作は独学や自作で可能？ロードマップや期間も解説

Web制作を独学で身につけるロードマップ

ここでは、Web制作初心者の方にぜひ活用してほしい「独学でのWeb制作習得ロードマップ」を6ステップでまとめました。Web制作で活動するためには実に多様なスキルが求められるため、行き当たりばったりでは早々に挫折してしまうことも十分考えられます。「何からやればいいの？」と悩んだら、まずはこのステップを活用してみてください。

• ①Web・Webサイトの仕組みの理解
• ②HTML／CSSの学習
• ③JavaScriptの学習
• ④WordPressの学習
• ⑤Webデザインの学習
• ⑥制作・実績作り

①Web・Webサイトの仕組みの理解

何はともあれ、Web系の職種を始めるからには、Webに関する基本的な用語・仕組みについては理解しておくようにしましょう。

• Webサイトが成り立っている仕組み
• Webアプリが動作するための処理
• クラウド技術
• セキュリティ etc…

上記のようなWebの基礎を知っていなければ、そもそも開発ができなかったり、動作が不安定になったり、セキュリティ面で重大な欠陥が生じてしまったり…おおよそ使いやすいサービスを生むことはできないでしょう。

WebやWebサイトの仕組みの理解に便利な教材は以下の通りです。

②HTML／CSSの学習

Web制作の基礎の基礎ともいえるのが、マークアップ言語のHTML／CSSです。Web上にあるほとんどのサイトを構築している言語であるため、まずはここから始めていきましょう。

HTMLとCSS、それぞれの大まかな役割は以下の通り。基本的にどちらか一つでは成り立たないため、セットで習得するようにしましょう。

• HTML：Webサイトの枠組みを作る
• CSS：HTMLで作った枠組みに装飾を施す

HTML／CSSは歴史が長いこともあり、学習教材が非常に充実しています。以下は、その中でも特におすすめ度が高いものです。
関連記事：HTMLとCSSが学べるおすすめスクール

③JavaScriptの学習

HTML／CSSの次に習得しておきたいのが「JavaScript」です。プログラミング言語であることもありHTML／CSSと比べると学習コストはかさみますが、Webサイトに動的な処理を追加できるようになり、一気にWeb制作の幅が広がります。

なるべくストレスなく学習を進められるよう、可能な限り平易な表現でまとめられた初心者向け教材を利用するのがおすすめです。
関連記事：JavaScriptが学べるプログラミングスクール

③-1．必要に応じてjQueryにも挑戦してみよう

プログラミング言語には、開発によく使う機能をまとめた「ライブラリ」と呼ばれるものがありますが、JavaScriptライブラリの一つが「jQuery」です。JavaScriptよりも記述の簡素化を図っていたり、どのブラウザでも同じコードで動作する「クロスブラウザ」に対応していたりと、さまざまなメリットがあります。習得しておけると、より効率的な開発・制作が可能になるでしょう。

ただし、2006年のリリース当初はかなり勢いがあったものの、以下のような理由から現在は使われることが少なくなってきていることも確か。

• jQuery以外の優秀なライブラリの登場
• JavaScriptの機能の充実
• CSSの機能の充実　etc…

Googleトレンドを見てみても、2012年初頭にピークを迎えて以降、右肩下がりで下降していることが分かります。

トレンドの傾向から、jQueryがまた主流になる可能性は低いと言えるでしょう、もちろんまだまだjQueryを採用している現場もあるため、今から習得する価値がないわけではありません。学習コストに余裕があれば触れておいてみましょう。

④WordPressの学習

昨今は、HTMLやCSSに関する高度な知識がなくてもWebサイトを構築できる「CMS（コンテンツマネジメントシステム）」というものに注目が集まっています。その中の一つがWordPressで、数あるCMSの中でも世界トップシェア。WordPressを用いた開発・制作案件は非常に多いため、習得しておくことでスキルの幅をグンと広げられるでしょう。

WordPressに関して、習得しておきたい内容は主に以下の通り。

• インストール、環境構築
• カスタム投稿／タクソノミー／フィールド
  (オリジナルの投稿タイプ・カテゴリ・入力項目等を追加する機能)
• 各種プラグインの扱い
• オリジナルWordPressテーマの作成　etc…

関連記事：WordPressが学べるスクール

④-1．ドメイン・サーバー周りにも触れておくと◎

WordPress自体は無料のオープンソースソフトウェアですが、作成したサイトをWeb上に公開するためには「ドメイン」や「サーバー」に関する知識・構築技能が必要になります。

• ドメイン
  インターネット上の住所のようなもの（そのサイトがWeb上のどこにあるかを示す）
• サーバー
  インターネット上における土地のようなもの（Webサイトという家を建てるためには必須）

Web制作の現場では、完成したサイトをドメイン・サーバーごと管理する業務も少なからず存在します。ドメイン・サーバーの管理を誤るとサイトがWeb上に公開されなくなり、取引先に損失を与えてしまうことに。ぶっつけ本番になってしまわないよう、自分でドメイン・サーバーを借りてサイトを運営してみる等、実践形式で経験しておくのがおすすめです。

⑤Webデザインの学習

ここまででWeb制作のコーディング面の基礎が固まったと思いますので、次はWebデザイン面についても学習しておきましょう。大工さんが無計画で家を建てることがないように、Web制作においてもゼロからコーディングに取り掛かることはまずありません。「どんなサイトデザインにするか？」という案を考え形にするのがWebデザインです。
関連記事：独学でWebデザインの勉強

Webデザインについて学習する際にやっておきたいことには、以下のような内容があります。

• 魅力的なWebサイトをたくさん見る
• Webサイトの良い点・悪い点をユーザー目線で見る
• Webデザインツールの使い方を覚える(Adobe XD、Figmaなど) etc...

以下のような教材を用いつつ、学習を進めてみましょう。
関連記事：Figmaが学べるスクール
関連記事：Webデザインが学べるおすすめスクール

⑥制作・実績作り

コーディング・Webデザインの2つの柱が習得出来たら、Web制作の土台はあらかた固まったといっても過言ではないでしょう。ここからは得た知識を活かしてどんどん自主制作に取り組み、実績作りに励んでいきましょう。出来た作品はポートフォリオとして一つにまとめておくと、案件獲得のための営業時に効果を発揮します。

なお、自主制作した作品は出来る限りスキルのある人に見てもらい、フィードバックをもらうのがおすすめです。自分では分からないミスやより良くするためのポイント等を教えてもらうことで、成長スピードを2次関数的に伸ばすことができます。Webデザインスクールでの学習もおすすめです。
副業も狙うことができるのがWebサイト制作の魅力でもあります。
関連記事：Webサイト制作副業

Web制作を独学で身につける方法

ここでは、独学でWeb制作を身につける方法を紹介します。

本・参考書で学ぶ

書店等でWeb制作のスキルや知識を学べる本や参考書を購入し、熟読するのも1つ。
レベルや分野別に分けられていたり、網羅的に学べるようになっていたりと、書籍によって様々であるため、レビューを参考に自分にあった書籍を購読しましょう。

自分のペースで学び進めていくことができる一方で、アウトプットの機会を設けにくい側面があります。知識だけが増えていく状態にならないよう、書籍等で勉強しながらも自分でWeb制作に取り組む時間も意識的に設けましょう。
関連記事：Webデザインの本
関連記事：マーケティングの本

学習サイトを利用する

学習サイトを利用するのも1つです。
中には無料で閲覧できるサイトもあるため、「Web制作がどんなものか」「自分に合っているのか」など、サイトを見ながら自身とのマッチ度を確かめてみると良いでしょう。

また動画系SNSでは、無料で気軽にWeb制作について学ぶことができます。
様々な動画が発信されているため、お気に入りのコンテンツを探してみましょう。1つの動画だけでは分からない場合でも、複数の動画を閲覧することで、理解を深められることもあります。

Web制作が学べるスクールを活用する

Web制作について独学で勉強する場合、時には限界を感じたり、より高度なスキルを習得したいと思ったりすることもあるでしょう。その場合は、Web制作を学べるスクールに通ってみるのもおすすめです。

独学と比較して費用がかかるものの、現場で求められる知識をしっかり身に付けていくことができます。また不明点は講師に質問できるため、時間を無駄にすることなく、最短でスキル習得が叶います。

特にWeb制作に関する仕事に就職・転職したいと考えている人は、スクールでしっかり知識を身に付けることを推奨します。
関連記事：Webデザインスクール

独学でWeb制作が学べる学習サイトおすすめ5選

続いて、独学でWeb制作が学べる学習サイトを紹介します。

忍者CODE

独学でWeb制作を学ぶときに挫折が心配という人もいるでしょう。忍者CODEの3つのプランの中には、挫折させない独学プランがあります。

無期限のチャットサポートでは分からないことをすぐに質問可能ですし、実践課題のフィードバックを通してスキルアップも目指せます。

低価格で学べるのもポイント。完全買い切りで追加費用がかからないため、新たに追加されたコンテンツも見放題です。

デイトラ

デイトラではデザイン研究所の提供するカリキュラムで学習可能です。毎日10時間の対応時間には、現役デザイナーのメンターへ質問して、分からないことを解消しながら学習を進められます。

カリキュラムは初級編、中級編、上級編、UIデザイン編の4ステップ。段階を踏みながらスキルを身につけられます。

動画や解説を参考にしながら学習したら、添削を受けられる課題に取り組みフィードバックを受けましょう。

ドットインストール

ドットインストールは、全ての動画が3分以内に収まるように設計されたWeb制作学習サイトです。
3分という短さとスマートフォンからでも閲覧できる手軽さが魅力であり、初学者や独学の人でも無理なく勉強を継続できるでしょう。

なお、提供されているレッスンは全530種。8,015 本の動画にて提供されているため、Web制作について網羅的に学ぶことができます。Web制作の他にも、ゲーム制作やデータ分析・機械学習/AIに使われる言語に至るまで、幅広いスキルや知識をカバーしている点も特徴の1つと言えるでしょう。

さらにプレミアム会員であれば、レッスン中の不明点やプログラミング学習の不安を現役エンジニアに質問できます。
無料会員であっても74レッスン分の学習に取り組めるため、興味がある人は無料会員から始めてみてはいかがでしょうか。

Progate

Progateは、オンラインプログラミング学習サービスです。

紙の本よりも直感的かつ動画よりも学びやすい「スライド学習」を提供しているため、自分のペースで学習を進められる他、復習しやすい点が魅力です。さらにスマートフォンアプリでも学習できるため、まとまった学習時間の確保が難しい人でもスキマ時間を活用し、学び深めていくことができるでしょう。

Progateには一部無料コンテンツもあります。まずは無料プランから始めてみると良いでしょう。
また入門から基本まで学べる『プラスプラン』は、月額990円～です。公開されている全てのコンテンツに挑戦できるため、アプリであっても一通りのWeb制作知識を身に付けることができるでしょう。

模写修行

模写修行は、アウトプット重視のコーディング練習教材です。

無料課題が2つ、有料課題が7種類用意されており、レベルに合った教材を購入します。まずは購入教材のデザインを見ながら自分でコーディングに挑戦。その後、コードと解説で答え合わせをして学ぶというもの。

基本的には独学で取り組みますが、現役エンジニアによるメンタリングサービスも提供しています。独学にありがちな「不明点が解消されず
学習が進まない」といったデメリットも、メンタリングサービスを利用すれば、スムーズに学習を進めることができるでしょう。

独学でWeb制作を習得するにはどれくらいの期間がかかる？

Web制作の技術を独学で身につけるまでにかかる期間は「3か月～12か月(1年)程度」を見込んでおくといいでしょう。もちろん、1日当たりの学習時間を増やしてコミットすることができるなら、3か月程度の比較的短期間で習得することも不可能ではありません。

WEBデザインの勉強を始めた3か月前には予想できていなかった現状です👀

WixもFigmaも知らず、LPって何の略ですか？というレベルから、ありがたいことに今LP制作の実案件に取り組ませていただいていて...始めてよかった😭

次に繋げられるよう努力あるのみ💪

引用：https://twitter.com/c_web_designx/status/1757043347917849079

いずれにおいても「Web制作を独学しよう！」と思い立った暁には、いつまでにどれくらいのレベルに到達したいのかを明確にしておくことをおすすめします。ゴールがないとどれだけ学習しても自分の成長を感じることができず、やりがいを感じられずに途中で挫折してしまうことも考えられるからです。
関連記事：Web制作副業は稼げない？

もし独学での習得に自信がない場合には、必要に応じてWebデザインスクールを活用してみてもいいでしょう。

Web制作を無料で独学する方法は？

Web制作を無料で独学する方法としては、無料で利用できるWebデザイン学習サイトで学習する、もしくは無料のWebデザインスクールに通う方法が挙げられます。

無料で利用できるWebデザイン学習サイト及び、無料Webデザインスクールは次の通りです。

Web制作はオワコン？将来性を解説

インターネット上などでは「Web制作はオワコン」といったコメントを見かけることもあり、将来性を懸念視する人もいるかと思います。
2023年に経済産業省が発表したECサイトの市場規模は、下記グラフの通り右肩上がりで増加しています。

引用：経済産業省「電子商取引に関する市場調査の結果を取りまとめました」

本データからは、IT人材の需要が年々高まっている様子が伺えます。
ECサイトに欠かせないWeb制作の仕事もより一層需要が高まると考えられるでしょう。

「Web制作はオワコン」といったコメントを見かけることもありますが、IT人材需要の高まりからWeb制作も将来性の高い仕事であると言えるでしょう。

Web制作の独学まとめ

当記事では「Web制作を身につけたいけど、学習費用は出来るだけ抑えたい…」と考えている人に向けて、独学でWeb制作に必要なスキルを習得するためのロードマップをご紹介してきました。

やるべきことが分からないとやる気が出ず、せっかく沸き起こった「Web制作をやりたい」という気持ちもしぼんでしまいがち。何をしたらいいかわからなくなったら、本記事で紹介したロードマップに沿って、一つ一つ丁寧に習得してみてください。

EC市場の規模が拡大していたり、5Gの普及が進んでいたりと、Web業界はこれからも盛り上がりを見せることほぼ間違いなしです。独学が苦しい場合にはスクールも活用しつつ、ぜひ高需要なWeb制作スキルを身につけてみてくださいね。