はじめに

この記事はNuco Advent Calendar 2024の5日目の記事です。

Web制作に興味があるけれど、「何から手をつけたらいいのかわからない」「できればお金をかけずに学びたい」 と考えている方も多いのではないでしょうか？

この記事では、独学でプロを目指すための学習リソースを、Webデザイン、フロントエンド、システム開発 といったカテゴリに分けてご紹介します。ただ、これらの分野は重なる部分も多いので、「ここちょっと被ってるかも」と感じるところがあるかもしれませんが、そこはぜひ優しい目で見ていただければ幸いです。

これからWeb制作を学ぼうと考えている方が、自分に合った学び方を見つけるきっかけになれば嬉しいです！

弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

この記事の対象者

この記事は、「Web制作を始めたいけど、何から手をつければいいのかわからない！」という方から、「もっとスキルアップして実務に活かしたい！」という方まで、幅広い人に向けています。

たとえば、こんな方におすすめです：

初心者の方
「HTMLとかCSSってよく聞くけど、どうやって勉強すればいいの？」と迷っている方。
中級者の方
「JavaScriptやフレームワークに挑戦したいけど、どこから手をつければいいんだろう？」と思っている方。
スキルを実務に活かしたい方
「プロジェクトを通して仕事に活かせるスキルを身につけたい！」と考えている方。

この記事を通して、自分に合った学び方や学習サイトを見つけていただけたら嬉しいです！

デザインを学ぼう：Webデザインの基本から応用まで

Webデザインは、Web制作の第一歩ともいえる重要なスキルです。見た目の美しさだけでなく、情報が伝わりやすい構造や、使いやすさを考慮したデザインが求められます。このセクションでは、Webデザインを学ぶ上で役立つリソースをご紹介します。

web-design-textbook

学べる言語/技術
HTML、CSS、JavaScript

まずご紹介するのは、web-design-textbookです。

このサイトは、基本編から上級編までレベル別に学べる構成になっており、初心者から中級者、さらには上級者まで、それぞれのスキルに応じてステップアップが可能です。特に、豊富な図解による解説が特徴で、視覚的に学べるため独学でも挫折しにくい設計になっています。

内容は、Webサイトがどのように表示されるのかといった仕組みの解説から始まり、HTMLやCSSの基礎、そして実際のデザインテクニックに至るまで網羅的です。また、サイトには使えるデザインレシピやテクニック集も掲載されており、実践的なスキルを学ぶのに最適です。

すでにWeb制作に慣れている方でも、知識の抜け漏れを防ぐために一度チェックしてみるのはいかがでしょうか？

ドットインストール

次にご紹介するのは、ドットインストールです。

学べる言語/技術
HTML、CSS、JavaScript、PHP、Python、Ruby、SQL、WordPress、Gitなど

このサイトでは、約3分ほどの短い動画を積み重ねていく形式で、テンポよく学習を進めることができます。動画はカテゴリごとに整理されており、基礎から応用まで幅広く学べる構成になっています。短時間で完結するため、スキマ時間を活用した学習にも最適です。

一部のコンテンツは有料ですが、無料で視聴できる動画も充実しているため、まずは無料の範囲で基礎を習得するのがおすすめです。

また、学んだ内容を実際に手を動かしながら試せる構成になっているため、インプットだけでなくアウトプットを意識した学習が可能です。

Codejump

次にご紹介するのは、Codejumpです。

学べる言語/技術
HTML、CSS、JavaScript

Codejumpは、HTMLやCSS、JavaScriptの基礎を学び終えた方向けの学習サイトです。模写コーディングやデザインカンプを使った練習を通じて、実践的なWebサイト制作スキルを身につけることができます。「デモサイト」「レイアウト解説」「サンプルコード」が用意されており、効率よく学べる構成が特徴です。

さらに、サイト制作の単価目安が記載されているため、自分のスキルが仕事にどのように役立つか具体的にイメージしやすいのもポイント。基礎を終えた方がアウトプットを通じてステップアップしたいときにぴったりのリソースです！

chot.design

次にご紹介するのは、chot.designです。

学べる技術
HTML、CSS、Photoshop、Illustrator、STUDIOなど

chot.designは、Webデザインに挑戦してみたい初心者に特におすすめの学習サイトです。HTMLやCSSの基礎はもちろん、PhotoshopやIllustrator、STUDIOといったデザインツールの使い方を無料で学べるため、デザインの世界を手軽に試してみることができます。

これから本格的にデザインの勉強を始めようとしている方が、いきなり高額なスクールに通う前に、自分に向いているか適性を確かめるのにぴったりなコンテンツが揃っています。気軽に始められるのがこのサイトの大きな魅力です。

Google’s Web.dev

最後にご紹介するのは、Google’s Web.devです。

学べる技術
HTML、CSS、JavaScript、アクセシビリティ、SEOなど

Google’s Web.devは、Googleが提供する公式のWeb開発ガイドラインを学べるサイトです。他のデザイン学習サイトと比べて、デザインだけでなく、パフォーマンスやアクセシビリティなど、実際のWebサイト制作で重要な幅広い分野をカバーしているのが特徴です。

特に、Webデザインだけでなく、モバイル対応やSEO最適化など、Webサイトをユーザーにとって使いやすく、かつ検索エンジンにも評価される形に仕上げる方法が詳しく解説されています。また、実際にコードを書いて検証しながら学べるため、知識だけでなく実践力も同時に磨けます。

他のサイトが「デザインの基礎」や「コーディングの練習」にフォーカスしているのに対し、Google’s Web.devは「デザインの品質向上」と「総合的なサイト最適化」を意識した学習に最適です。

作り方を知ろう：フロントエンド開発入門

Webサイトの見た目を作るだけでなく、ユーザーの操作に応じた動きやインタラクションを実現するためには、フロントエンド開発のスキルが欠かせません。このセクションでは、HTML、CSS、JavaScriptといった基本技術から、最新のフロントエンドフレームワークまで、さまざまなスキルを習得できる学習サイトをピックアップしました。

freeCodeCamp

まず最初にご紹介するのは、freeCodeCampです。

学べる言語/技術
HTML、CSS、JavaScript、API、React、Pythonなど

FreeCodeCampは、無料でプログラミングスキルを磨きたい方に最適な学習プラットフォームです。HTMLやCSSの基礎から、JavaScriptやライブラリの使い方、API構築まで、幅広いスキルを実践的に学ぶことができます。

特に注目すべきは、無料で認定証を取得できる点です。学んだ成果を形に残せるため、モチベーションを維持しながら取り組めます。また、ゲームの作り方やオイラー問題といった、プログラミング好きの興味を引くトピックも充実しており、初心者から中級者まで楽しめる内容となっています。

ただし、日本語対応が一部に限られているため、英語力が必要な部分もありますが、それを「英語のスキルアップのチャンス」と捉えるのも良いかもしれません。プログラミングと英語を同時に学びたい方には、非常におすすめのリソースです！

Recursion

次にご紹介するのは、Recursionです。

学べる言語/技術
JavaScript、HTML、CSS

Recursionは、プログラミングだけでなく、コンピュータサイエンスの基礎を体系的に学べる学習プラットフォームです。プログラミングスクールとは少し異なり、データ構造や関数といった理論的な知識と実践的なスキルをバランスよく習得できるのが特徴です。

無料会員でも、HTMLやCSSなどWeb制作の基礎的なスキルや、コンピュータサイエンスの基礎を学ぶ45時間以上のコンテンツにアクセス可能です。本格的に学習を進めたい場合は、Premiumプランで全てのコースを受講できるほか、エンジニアへの質問やチーム開発への参加、コミュニティイベントなどの機会も得られます。

基礎から着実にスキルを身につけたい方や、より理論的な側面も含めてコンピュータサイエンスを学びたい方におすすめのプラットフォームです！

無料コーディング練習所

次にご紹介するのは、無料コーディング練習所です。

学べる言語/技術:
HTML、CSS、JavaScript、React など

無料コーディング練習所は、学んだスキルを実際に試しながら力を伸ばせるプラットフォームです。与えられた素材を使い、指定された構成やデザインに従ってWebサイトを作成する形式になっており、基礎から応用まで幅広いレベルの課題が用意されています。初心者が気軽に挑戦できる内容から、実務に近い複雑なプロジェクトまで対応しているため、自分のスキルを確認しながら段階的に成長できます。

入門編から上級編まで課題が分かれており、上級編では8ページ以上の大規模なWebサイトを作成する課題も用意されています。これに挑戦することで、実践的なコーディング力を養えるだけでなく、成果物としてポートフォリオにも活用できます。学びながら成果を形にしたい方におすすめです。

Codeacademy

次にご紹介するのは、Codeacademyです。

学べる言語/技術:
HTML、CSS、JavaScript、Python、SQL、Node.js、Reactなど

Codecademyは、登録無料で利用できるオンライン学習サービスです。カリキュラムは順を追って進める形式で構成されており、「どこから手をつければいいかわからない」という心配はありません。

学習形式としては、コードを入力すると即座に画面に結果が表示される仕組みを採用しており、「自分が今何をしているのか」「どう動いているのか」を理解しやすい作りになっています。実際に手を動かしながら体感的にスキルを習得したい方におすすめです。

忍者CODE

次にご紹介するのは、忍者CODEです。
（乃木坂46の久保史緒里さんがCMに出演していたことでも知られており、目にしたことがある方もいるかもしれません。）

学べる言語/技術
HTML、CSS、Vue、Rubyなど

忍者CODEは、個別対応を掲げたプログラミング学習サイトで、HTMLやCSSといった基礎から、VueやRubyなど幅広い技術分野を学ぶことができます。実際の問題を解きながら学ぶ実践型の学習スタイルが特徴で、初心者でも手を動かしながらスキルを着実に習得できます。

無料で利用できるコンテンツも充実しており、LINEに登録すれば問題集も利用可能です。さらに、わからない箇所はTwitterを通じて直接質問ができるサポート体制が（有料プランで）用意されており、疑問をその場で解消しながら学べる環境が整っています。まずは無料で試してみて、「もっと深く学びたい！」と思ったら有料プランを検討するのも良さそうです。

サバイバルTypeScript

最後にご紹介するのは、サバイバルTypeScriptです。

学べる言語/技術:
TypeScript

サバイバルTypeScriptは、TypeScriptを実務で活用するための知識を効率よく学べるオンライン教材です。基礎から応用までを丁寧に解説し、豊富な実践例を交えながら進めるため、初心者から中級者、さらには上級者まで幅広い層に対応しています。TypeScriptの基本的な使い方はもちろん、開発現場で役立つ小技や実践的なテクニックまで幅広くカバーしている点が特徴です。

また、各分野ごとに基礎的な内容をサンプルコードとともに解説しており、学んだ知識をすぐにアウトプットすることで、効率的に習得できます。「TypeScriptをもっと深く理解したい」「実務で使えるスキルを身につけたい」と考える方にとって、非常に頼りになる教材と言えるでしょう。

さらに奥深く：Webシステム開発の基礎と応用

Webシステム開発は、フロントエンドだけでなく、バックエンドやデータベース、APIの設計・運用といった幅広い分野を含みます。このセクションでは、WebサイトやWebアプリケーションを支える仕組みを学ぶために役立つ教材を紹介します。

具体的には、プログラミング言語（例: Python、PHP、Go）、データベース（例: SQL、MongoDB）、そしてサーバー構築やセキュリティに関する基礎と応用が学べるリソースをピックアップしました。

The Odin Project

まず最初にご紹介するのは、The Odin Projectです。

学べる言語/技術:
HTML、CSS、JavaScript、Ruby on Rails、Node.js、Git、SQLなど

The Odin Projectは、無料で利用できるオープンソースのプログラミング学習プラットフォームです。ウェブ開発に必要なスキルを、実践的なプロジェクトを通じて学ぶことができます。カリキュラムは、フロントエンドからバックエンドまで幅広くカバーしています。

各セクションでは、学んだ内容を実際のプロジェクトで応用する機会が提供されており、理論と実践をバランスよく学べる構成になっています。ただし、The Odin Projectの教材は主に英語で提供されているため、英語の読解力が求められます。英語に自信がない方は、他の日本語対応の学習リソースと併用することで、理解を深めましょう！

Envader

次にご紹介するのは、Envaderです。

学べる言語/技術
HTML、CSS、JavaScript、Linux基礎、セキュリティ

Envaderは、ターミナル操作を通じてハンズオン形式で学べる学習プラットフォームです。初心者がつまずきがちな環境構築も不要で、ブラウザ上で仮想システムを簡単に立ち上げられるため、スムーズに学習を始められます。各講座には動画解説も付いており、初めての方でも安心して進められる構成です。

無料コースでは、「Linux基礎コース」や「セキュリティ基礎コース」などを学ぶことができ、ネットワークやセキュリティ分野の基礎を押さえるのに役立ちます。さらに深く学びたい場合は、有料コースを利用してデータベース構築や操作方法まで学習を広げることが可能です。サーバー構築やセキュリティスキルを磨きたい方におすすめです！

SQLBolt

次にご紹介するのは、SQLBoltです。

学べる言語/技術:
SQL

SQLBoltは、SQLを練習問題形式で学べる学習サイトです。ブラウザ上で直接SQLクエリを入力し、その結果をリアルタイムで確認できるエディタが特徴で、SQLの基本操作を実践しながら学べます。初心者でも気軽に取り組める内容になっているため、初めてデータベースを学ぶ方にとって最適です。

サイトは英語で構成されていますが、簡単な表現が多く、Google翻訳などを活用すれば十分理解できます。また、登録不要で完全無料で利用できる点も大きな魅力です。特に、サーバーサイド技術を学ぶ上でデータベースとの連携は重要なスキルです。SQLBoltは、Webアプリケーション開発で必要なデータベースの基礎を習得するための第一歩としておすすめです。SQLの基本を学びたい方は、ぜひ試してみてください！

IBM SkillsBuild

次にご紹介するのは、IBM SkillsBuildです。

学べる言語/技術:
データベース管理、クラウドコンピューティング、サイバーセキュリティ、AI、ブロックチェーン、プロフェッショナルスキル

IBM SkillsBuildは、無料でさまざまなITスキルを学べるオンラインプラットフォームです。データベースやクラウド技術、バックエンド開発に加え、ビジネススキルやIT基礎知識もカバーしており、初心者から専門知識を深めたい方まで幅広い層に対応しています。約1,000本のオンライン学習コンテンツが無料で提供され、修了後にはデジタルバッジが発行されるため、学んだスキルを証明することができます。

さらに、IBMはUdemyと提携しており、「Udemy for SkillsBuild」のコースも無料で利用可能です。スキル診断やキャリアマッチングツール、専門家との1対1の対話といったサポートも充実しており、学習内容を実際のキャリアに活かすための仕組みが整っています。ITスキルを磨きたい方はもちろん、次のステップに進むためのキャリア支援を求めている方にもおすすめです。

Microsoft Learn

最後にご紹介するのは、Microsoft Learnです。

学べる言語/技術
Azure、C#、サーバー管理、データベース、Power BI、Microsoft 365

Microsoft Learnは、Microsoftが提供する無料のオンライン学習プラットフォームで、幅広い技術を学べます。特にAzureやC#、PowerShellを中心に、クラウド技術やサーバー管理といったバックエンドに関わるスキルを学べるのが特徴です。

コースはモジュール形式で、自分のペースで進められる設計になっています。また、学習を進めるごとにバッジや証明書を取得でき、スキルの可視化やキャリアのアピールに役立ちます。クラウドサービスやサーバー関連の知識を深めたい方、Microsoft技術を使う現場を目指している方にとって最適なプラットフォームです。

遊びながら学ぶ：スキルを磨くおもしろツール

Web開発やデザインを学ぶ際、真面目な勉強だけではなく、楽しみながらスキルを身につけられるツールもあります。このセクションでは、ゲーム感覚でWeb技術を学べる「遊び心のある」リソースを紹介します。息抜きとして気軽に取り組めるため、あくまで番外編として見ていただけると幸いです。

学習を始めたばかりの方にも、息抜きしながらスキルを磨きたい方にもぴったりです。

AWS Cloud Quest

最初にご紹介するのは、AWS Cloud Questです。

学べる内容:
クラウド技術（AWS）

AWS Cloud Questは、仮想空間内でタスクをクリアしながらAWSの基本技術を学べる、ゲーム形式の学習ツールです。クラウドアーキテクチャやセキュリティの基礎を実践的に学べます。クラウド分野に興味がある方におすすめです。

FLEXBOX FROGGY

次にご紹介するのは、FLEXBOX FROGGYです。

学べる内容:
CSSのFlexbox

FLEXBOX FROGGYは、カエルを正しい葉っぱに移動させることで、CSSのFlexboxの仕組みを学ぶゲーム形式のツールです。具体的なプロパティと値を入力しながら進むため、Flexboxのレイアウト特性を理解するのに役立ちます。

GRID GARDEN

次にご紹介するのは、GRID GARDENです。

学べる内容:
CSSのGridレイアウト

GRID GARDENは、CSS Gridレイアウトを学ぶためのゲームです。野菜畑を管理する設定の中で、プロパティを入力して正しい位置に作物を植えることを目指します。Gridの行・列の設定やエリア指定を遊びながら学べます。

CSSBATTLE

最後にご紹介するのは、CSSBATTLEです。

学べる内容:
CSSのコードスキルとデザインの再現力

CSSBATTLEは、与えられたデザインをCSSコードのみで再現する競技プログラミング形式のツールです。他のプレイヤーとスコアを競いながら、CSSスキルを磨くことができます。

質問してみよう：Web制作の相談や交流ができるコミュニティ

Web制作の学習や技術習得において、Qiita以外のプラットフォームも非常に役立ちます。それぞれの特徴を活かして、自分に合った情報を収集することで、スキルアップや問題解決の幅を広げることができます。ここでは、私がWeb制作に役立つと感じた記事や情報が見つかるプラットフォームをいくつかご紹介します。

Zenn

日本語の技術共有プラットフォーム

Stack Overflow

世界中のエンジニアが投稿する問題に対する答えを検索できるQ&Aサイト

Dev Community

エンジニアによって投稿されたブログ記事が集まるプラットフォーム
英語版のQiita

英語圏の掲示板サイトで、Web開発に関するサブレディット（コミュニティ）

YouTube

動画形式でのチュートリアルや解説

アキユキ/Web制作チャンネル

Hiko Pro

まとめ

今回は、Web制作を学ぶために活用できる学習サイトやツールを紹介しました。タイトルに「無料」とあるにも関わらず、一部には有料プランが含まれるものもあり、完全に無料ではない点についてはお詫び申し上げます。それでも、無料で利用できる範囲内でも十分にスキルを磨ける内容が揃っていると考えています。

また、この記事で紹介した以外にも「こんな学習サイトがあるよ！」というおすすめがありましたら、ぜひコメントで教えてください！可能な範囲で調査し、追記やアップデートしていきます。この記事が、皆さんのWeb制作スキル向上の助けになれば幸いです。