「Web制作を独学で学ぶのにおすすめのサイトはある？」
「実際にサイトを選ぶときは何に注目すればいい？」
インターネットが発展してから、Web制作を独学で学べるサイトは徐々に増えています。
しかし、実際に学習するにあたって、どのサイトを選べばいいか悩む人も多いのではないでしょうか。
そんな人のために、この記事ではWeb制作を独学で学ぶのにおすすめのサイトを10サイトまとめました。
あわせて、サイト選びのポイントや学習の流れについても紹介しています。
ぜひ参考にして、自分に適したサイト選びに役立ててください。
Web制作を独学で学ぶのにおすすめのサイト10選
Web制作を独学で学ぶなら、サイト選びも非常に重要になります。
選ぶサイトによって特徴や学べる内容が異なるため、自分にあったサイトを選ぶのが大切です。
ここでは独学をする際におすすめのサイトとして、以下の10サイトを見ていきましょう。
- ドットインストール
- Progate
- サルワカ
- JavaScript Primer
- chot.design
- Schoo
- Skillhub
- CODEPREP
- Cocoda!
- Daily UI
ドットインストール
ドットインストールは、HTML・CSSをはじめとしてさまざまな言語を取り扱っているサイトです。
すべてのレッスン動画が3分以内にまとめられており、空き時間を活用してWeb制作を学べます。
用意されているコンテンツは有料・無料のものがありますが、初めて学習する場合には無料のもので問題ありません。
物足りなさを感じたら、月1,080円の有料コンテンツを視聴すればよいでしょう。
コンテンツのクオリティも高く、量も十分あるため、初めてWeb制作を独学で学ぶ人にはおすすめのサイトです。
Progate
Progateは、Web制作を学習できるサイトの中で非常に有名です。
Web制作に必要なHTM・CSS・JavaScriptをしっかりと基礎から学べるため、独学する際にも困らないでしょう。
さらにRubyやRuby on Rails、Web開発パスなども学習できるため、さまざまな知識を身につけられます。
ただし、Progateは初めてプログラミングに触れる人向けのサービスです。
本格的な勉強目的にはあまり活用できないため、初心者が利用するのにおすすめのサービスといえるでしょう。
サルワカ
サルワカは、Webデザイン・Web制作がメインのオウンドメディアとして運営されています。
誰でもわかるをコンセプトにして、図解で説明されているため、初心者でも視覚的に理解できるのがメリットです。
猿若のコンテンツは、Webデザイン以外にもコーディング・Wordpress関連の内容がまとまっています。
そのため、デザイン全般を一から学びたいと考えている人にもおすすめです。
オウンドメディアであるため、利用料金も一切かかりません。
Webデザインがどのようなものか知りたい人は、他のサイトと並行して利用するのが良いでしょう。
JavaScript Primer
JavaScript Primerは、元々書籍で出ていた内容がWeb版として提供されているサイトです。
利用料金がかからないにもかかわらず、書籍の内容はすべて掲載されています。
それだけでなくメンテナンスも随時されているため、新しい機能や仕様に関する内容も学べるのはメリットです。
ただし、JavaScript Primerはある程度知識を持っていなければ、なかなか理解するのは難しいかもしれません。
利用する際は、事前に他のサイトや初心者向けの書籍を使って、最低限の知識を取り入れておくのが良いでしょう。
chot.design
chot.designは、オンライン上でWebデザインを学べるサイトとして運営されています。
元々は有料サイトでしたが、事業譲渡によってすべてのコンテンツが無料になりました。
基本的にはテキストで学習するスタイルですが、コンテンツによってはgif画像や動画が用いられています。
そのため、分かりやすさを求める人にもおすすめのサイトといえるでしょう。
コンテンツは基礎・応用・実践の3つに分かれており、段階的にデザイン関連の知識を学べます。
初めてWebデザインを学ぶ人や、1年以内に基礎を固めたいと考えている人におすすめのサイトの一つです。
Schoo
Schooは、とにかく無料でWeb制作を学びたいと考えている人におすすめのサイトです。
毎日新しいレッスンを生放送で配信しており、参加する際に費用は掛かりません。
また、さまざまな業界から講師を招いているため、一つ一つの専門的な内容を身につけられるでしょう。
主な内容はWebデザインですが、デザインの理論や考え方、アプリケーションの使い方やコーディングといった幅広い内容を学べます。
毎月980円を支払えば過去の授業も視聴し放題になるため、気になる口座がある人は検討してみるのもおすすめです。
Skillhub
Skillhubは動画コンテンツでの学習を主としている、初心者から学べるオンラインスクールの一つです。
フリーランスとして独立したい人はもちろん、転職や起業したい人など、さまざまなユーザーが利用しています。
すべてのレッスンはオンラインで完結し、14講座98レッスンが無料で公開されているコンテンツ量の多さも魅力です。
有料プランも用意されていることから、無料講座で基礎知識をつけた後に移行するのも選択肢となるでしょう。
内容としてはプログラミングに関するものが多いため、まずは無料プランで口座を確認してみることをおすすめします。
CODEPREP
CODEPREPは、実際に手を動かしながらプログラミングの知識をつけたい人におすすめのサイトです。
学習できる内容は他のサイトにも似たものがありますが、Webデザインの基礎知識やコーディングをメインに学べます。
そのため、一度利用してみて自分に合っているかを比較・判断してみるのが良いでしょう。
また、初心者だけでなく中級者が学べる内容も数多く用意されています。
他のサイトのコンテンツが簡単に感じ始めたら、CODEPREPに移行するのも選択肢としておすすめです。
Cocoda!
Cocoda!は、Webデザインの基本から実践までを一貫して学べるサイトです。
独学するのにぴったりのサイトであり、実際に手を動かしながら知識を身につけられるのはメリットといえるでしょう。
さらにWebデザインの求人や仕事先を見つける機能も搭載しているため、案件探しにもぴったりです。
Web制作の案件を獲得するのに必要なポートフォリオについても、サイト内で制作した課題をそのまま利用できます。
初心者向けではあるものの、料金がかからないため、気軽に独学を始められるサイトといえるでしょう。
Daily UI
Daily UIは、Web制作に関するUIを学びたい人におすすめのサイトです。
100日間連続で課題が送られてくるため、毎日違ったUIに取り組めます。
また、SNS上で「#DailyUI」と検索すれば、他の人が同じ課題でどのようなデザインを作成しているのかも確認可能です。
自分にはない発想を取り入れられるのは、Daily UIの特徴といえるでしょう。
知識をつけるのはもちろんですが、実際に手を動かしながらUIに関する実績を作りたいと考えている人は、ぜひDaily UIを利用してみてください。
Web制作を独学で学ぶサイトを選ぶ3つのポイント
Web制作を独学で学ぶ際は、自分にあったサイトを選ぶのが大切です。
ここでは独学できるサイトを選ぶ際のポイントとして、以下の3つを見ていきましょう。
- 学べる内容で選ぶ
- 料金が必要かで選ぶ
- サイトの実績で選ぶ
学べる内容で選ぶ
Web制作を独学できるサイトを選ぶ際は、学べる内容で選ぶようにしましょう。
Web制作とひとまとめにしても、実際はデザインやコーディングなど、さまざまなジャンルに分類されます。
サイトによってコンテンツの内容がデザインやプログラミングなどに特化していることが多いため、自分の目的と一致するかどうかが大切です。
もちろん内容を網羅しているサイトもあるため、初心者は色々な内容を学べるサイトを選ぶのも良いでしょう。
自分の目的と学べる内容が一致していないと、Web制作の知識はなかなか身につきません。
必ずどのような内容を学べるかに注目して、サイト選びを進めてください。
料金が必要かで選ぶ
Web制作を独学で学ぶ際は、料金が必要かどうかも注目してみましょう。
基本的には、初めて使うサイトに料金を支払う必要はありません。
理由として、ほとんどのサイトが無料のコンテンツを充実させていることがあげられます。
独学で学ぶサイトを選ぶときは、まず無料コンテンツでどのような内容が学べるかを確認するのが良いでしょう。
サイトが自分に合っていると感じ、それ以上の内容を同じサイトで学びたいと感じた場合に有料プランへ移行すれば問題ありません。
料金を掛けずにWeb制作の知識を身につけることは十分可能ですので、料金に注目しながらサイトを比較して選びましょう。
サイトの実績で選ぶ
Web制作を独学で学べるサイトを選ぶ際は、サイトの実績にも注目してみてください。
たとえば運営している企業が数多くのWeb制作実績を持ち合わせていれば、信頼できる可能性が高いでしょう。
もし個人で運営しているようなサイトであれば、管理者の実績を確認しておくと安心です。
基本的に実績がしっかりとあるサイトであれば、掲載されている内容も信頼できます。
逆にサイト運営者の実績を隠しているようなサイトであれば、あまり利用しないほうが良いかもしれません。
自分自身が正しい知識を得られるよう、サイトの実績確認は忘れないように心がけましょう。
Webサイト制作を独学で学ぶ際に覚えておくとよい5つのスキル
Web制作をする際は、覚えておくとよいスキルがいくつか存在します。
それぞれがどのような場面で必要になるかを知っていれば、知識も自然と取り入れやすくなるでしょう。
ここではWeb制作を独学で学ぶ際に覚えておくとよいスキルとして、以下の5つを紹介します。
- Webサイトの仕組み
- HTML/CSS
- JavaScript
- jQuery
- WordPress
Webサイトの仕組み
Web制作を学ぶなら、まずはWebサイトの仕組みについて理解が必要です。
Webサイトがどのように動作しているのか、インターネットにはどう接続されているのかなど、理解しておくべき項目は数多くあります。
Webサイトの動作について理解できていれば、実際にサイトを制作する際にも何をすべきかがわかりやすくなるでしょう。
なお、Webサイトの仕組みについては丸々覚えておく必要はありません。
あくまでも知識として持っておき、理解できるようになったら次に必要となる知識の習得につなげてください。
HTML/CSS
HTML/CSSは、マークアップ言語と呼ばれるものであり、Webサイトの見た目を構成するのに用いられます。
今回紹介しているスキルの中でも最初に学ぶべき項目であり、HTML/CSSが使えないとWebサイトの制作はかなり難しいでしょう。
実際に現在公開されているWebページのほとんどは、HTML/CSSの双方が用いられています。
HTMLがなければ見出しや段落の区別をつけるのが難しくなりますし、CSSがなければWebページのデザインが指定できません。
HTMLとCSSが上手く使えていないWebサイトは、検索エンジンからも評価されにくくなります。
もちろんユーザーからもわかりにくいサイトとなってしまうため、2つの言語は必ず使えるようになっておきましょう。
JavaScript
JavaScriptは、HTMLとCSSを学んだあとに勉強しておきたいスキルです。
Webサイトに動きをつけられるプログラミング言語であり、視覚的にわかりやすいサイトを作るのに役立ちます。
たとえばサイト上の文字にカーソルを合わせると色が変わったり、メニューが表示されたりするのは、JavaScriptの働きによるものです。
HTMLやCSS同様、JavaScriptは多くのWebサイトで活用されています。
世界的な開発プラットフォーム「GitHub」でも利用者が多い言語であり、初心者が学ぶべき項目の一つといえるでしょう。
jQuery
jQueryはJavaScriptと密接な関係にあり、JavaScriptでできることをより簡単に実現できるライブラリです。
JavaScript単体だと数十行が必要になるコードが1行で完結するため、Web制作の効率が高まります。
コード量が少なくなればエラー発生時の対応もしやすくなり、結果として開発時の時短にもつながるでしょう。
また、jQueryはどのブラウザでも使用できるライブラリです。
そのため、環境によって使用可否が左右されません。
知識として持ち合わせていれば、さまざまな案件やプロジェクトに活用できるため、ぜひ覚えておきたいスキルの一つです。
WordPress
WordPressは、オープンソースのポピュラーなブログ作成ツールです。
現在公開されているWebサイトの約3分の1がWordPressで作成されているといわれており、実際に募集されている案件でもWordPressを用いたものが多々あります。
特にクラウドソーシングに掲載されている案件は、WordPressが使用できると獲得しやすいといえるでしょう。
初心者はクラウドソーシングを経由して案件を獲得することが多いため、覚えておいて損はありません。
WordPress自体の利用料金はかからず、無料のサーバーを使えば完全無料でWebサイトを制作できます。
独学できるサイトにもWordPressに関するコンテンツが掲載されているため、他のスキルと併せて学んでおきましょう。
サイトを活用してWeb制作を独学で学ぶ際のロードマップ
Web制作を学ぶ際は、順序良く学ぶことで効率的にスキルを身につけられます。
ここではWeb制作を学ぶ際のロードマップとして、以下の6項目を見ていきましょう。
- ①基礎を学習する
- ②言語・フレームワークを学習する
- ③JavaScript・jQueryを身につける
- ④静的コーディングを経験する
- ⑤PHPを学習する
- ⑥WordPressを学習する
①基礎を学習する
Web制作を独学で学ぶ際は、まず基礎を学習することから始めましょう。
基礎を学ぶことでWeb制作が自分に合っているかも判断しやすくなり、継続できるかどうかも変わってきます。
基礎の学習については、今回紹介したサイトを使用すれば問題ありません。
ただし、プログラミングやデザインなど、サイトごとに得意としている内容が異なる点には注意が必要です。
Web制作に必要な知識にどのようなものがあるのか、そもそも仕組みはどうなっているのかなどを学び、Web制作が自分の肌に合うかどうか確認してみましょう。
②言語・フレームワークを学習する
Web制作の基礎を身につけたら、言語やフレームワークの学習に移ります。
言語については、HTMLやCSSを最初に学べば問題ありません。
ほとんどのWebサイトで使用されている言語であり、実際の案件でも利用頻度の高いマークアップ言語です。
Web制作を始める人の多くはHTML・CSSから学習を始めており、必ずクリアしておくべき言語ともいえるでしょう。
また、HTMLやCSSに関する知識が深められたらSassについても学習してみてください。
CSSを拡張した言語であり、より分かりやすくしたものとなります。
Web制作の効率も高まるため、学んでおいて損はありません。
③JavaScript・jQueryを身につける
HTMLやCSSの基礎を身につけたら、次はJavaScript・jQueryの学習が一般的です。
JavaScriptはWebサイトに動きをつけられるようになる言語で、ユーザーの視認性向上につながります。
ほとんどのWebサイトで利用されている言語であり、JavaScriptが使えるかどうかで選べる案件の数も大幅に変わってくるでしょう。
jQueryはJavaScriptのライブラリであり、コードそのものを分かりやすくするのに用いられます。
Web制作の効率アップや、エラー対応時の負担軽減につながるため、2つはセットで覚えておきたいスキルといえるでしょう。
④静的コーディングを経験する
ここまで学習した内容が身についているかを確認するために、デザインカンプからの静的コーディングを経験してみましょう。
自分でコーディングをして再現していくことで、これまで学んできた言語の使い方やライブラリのルールを再確認できます。
実際に経験を積むために適した方法でもあり、自分のスキルを確認するためには欠かせないといえるでしょう。
なお、ここで作成したサイトは自分の制作実績としても公開できます。
そのため、案件を獲得する際のポートフォリオを作るといった意味でも、こなしておきたい手順の一つです。
⑤PHPを学習する
PHPはWebサイトに動きをつけられる言語で、ユーザーがアクセスした際に表示内容が変わるページを作成できます。
たとえば掲示板や問い合わせフォームに用いられ、ユーザーが書き込みできるページに活用することの多い言語といえるでしょう。
PHPは他の言語に比べて文法が簡単とされており、比較的覚えやすい言語の一つです。
また、HTMLとひとまとめにできるため、WordPressのテーマやプラグインの作成に用いられています。
PHPの学習には、あまり時間をかけすぎる必要はありません。
1〜2日の学習をすれば、PHPの大まかな基礎知識は十分身につけられるでしょう。
⑥WordPressを学習する
PHPの学習まで完了したら、WordPressの使い方を学びます。
WordPressが使えるようになれば、多くの案件にアプローチできるようになるでしょう。
どこまで覚えるべきかは案件にもよりますが、企業に直接応募する場合は最低でも「WordPressテーマのカスタマイズ」「ローコードによる制作」が必要です。
Web制作会社に応募する場合は「固定ページ・投稿ページの作り方」「カスタム投稿・カスタムフィールド・カスタムタクソノミーの作り方」「メインループ・サブループの書き方」が実務で通用するレベルが求められます。
自分がどの方向性を目指すかに合わせて、効率的にWordPressの使い方を身につけていきましょう。
Web制作をサイト以外で独学で学ぶ3つの方法
Web制作の学習方法は、サイトを使う以外にも数多くあります。
ここではWeb制作をサイト以外で独学で学ぶうえで、おすすめの方法を2つ見ていきましょう。
- 書籍を活用する
- YouTubeを活用する
書籍を活用する
Web制作を独学で学ぶ代表的な方法として、書籍を活用するものがあげられます。
書籍には初心者〜上級者までのレベルのものが用意されているため、自分にあったものを活用するのが良いでしょう。
何から始めれば良いかわからない場合は入門書、学びたいことがはっきりしているなら専門の書籍を用いるのがおすすめです。
また、書籍はサイトと異なり、Amazonやレビューサイトなどで口コミを確認できます。
どの本を選べばいいか悩むケースは珍しくないため、実際に書店で目を通したり、レビューサイトを確認したりしながら選んでみてください。
YouTubeを活用する
Web制作のイメージを掴みやすい学習方法として、YouTubeを活用するのもおすすめです。
YouTubeにはさまざまな動画が投稿されており、中には実際の作業画面を移しながら解説しているものもあります。
そのため、動きや画面などが視覚的にわかりやすく、知識として身につけられるでしょう。
また、解説動画であれば音声を聞くだけで学習できるため、移動時間を活用して学習を進められます。
中には案件獲得方法や仕事の探し方を解説しているものもあるため、積極的に取り入れたい学習方法の一つです。
Webサイトの制作を独学で学ぶ際の3つのポイント
Webサイトの制作を効率よく学ぶためには、学習に関するポイントを押さえておく必要があります。
ここでは独学で学ぶ際のポイントとして、以下の3つを見ていきましょう。
- 学習の時間をまとめて確保する
- 質問・交流ができる環境を整える
- 学ぶだけでなく実際に制作する
学習の時間をまとめて確保する
Web制作を学ぶ際は、学習時間をまとめて確保するようにしましょう。
Web制作は、ある程度まとまった時間で学習しなければなかなか身につきません。
一度勉強を後回しにしてしまうと、必要な知識を忘れてしまったり、そもそも勉強しなくなってしまったりします。
たとえば朝30分早く起きて勉強したり、入浴前の30分は勉強時間に充てたりして、習慣づけてしまうのが良いでしょう。
日ごろの勉強に加えて、休日の空き時間を活用すれば、効率よくWeb制作の知識を身につけられます。
質問・交流ができる環境を整える
Web制作を独学で学ぶ際は、質問や交流ができる環境を整えるのも大切です。
独学で学ぶとはいえ、常に一人ではやる気がなくなってしまうかもしれません。
そんなときに質問や交流ができる仲間や先輩がいれば、モチベーションの維持につながります。
また、切磋琢磨しながらWeb制作を学ぶことで、成長スピードも速くなるでしょう。
実際に調べるだけでは、なかなか理解できないことも出てくると思います。
調べてもわからないことや、自分の知識が正しいか不安なときに頼れる環境を整えて、Web制作の学習を行っていきましょう。
学ぶだけでなく実際に制作する
いくら知識をつけていても、実際に制作をしなければ使えるスキルにはなりません。
そのため、学ぶだけでなく実際に制作してみるのも、学習する際には重要なポイントとなります。
一つずつで構いませんので、学んだスキルが実践で活かせるようになっているかを確認してみましょう。
テーマを決めて自主制作してみたり、コンペに参加してみたりすれば、自分の実力を測れます。
制作物はそのまま実績として公開できるケースも多いため、ポートフォリオに乗せられるものを作りたいと考えている人にもおすすめの方法です。
Web制作を独学で学ぶならサイトを活用するのがおすすめ
今回はWeb制作を独学で学ぶのにおすすめのサイトを10サイト紹介しました。
Web制作の独学方法にはさまざまなものがありますが、その中でもサイトを活用するのがおすすめです。
パソコンやスマホがあれば誰でも始められますし、基本的に料金はかかりません。
特にサイトでWeb制作を学ぶ場合は基礎的な内容が多いため、初心者には特におすすめの方法といえるでしょう。
なお、Web制作は学ぶだけではなかなか身につきません。
実際に手を動かして初めて、スキルとして身につくようになります。
本記事で紹介した内容をもとに、自分にあったサイトでしっかりとWeb制作を学んでください。