Springfalfal

【2026年最新】完全無料独学でWeb制作１年ロードマップ

コードエディタにコードを書いている様子

2025年からWeb制作学習をスタート。

2026年5月にポートフォリオサイトを完成。

知識０の状態からポートフォリオサイト(案件取得レベルへ)を作成するまでの学習方法をまとめました。

【ステップ０】　情報収集（Web制作に必要なプログラミング言語とは？）

まずは情報収集。

プログラミング言語にはたくさんの種類があります。

なので、正確な数を特定するのは非常に難しいのです。

一般的には「数千から数万種類」存在すると言われています。

Web制作 (HP/WP)HTML/CSS, PHP, JavaScript
Webサービス開発TypeScript, Ruby, Go, Python
AI・機械学習Python, R
スマホアプリDart, Swift, Kotlin
ゲーム開発C# (Unity), C++ (Unreal Engine)

初心者からすると何が何だかさっぱりわかりません。

そこで、まずはWeb制作に必要な言語を調べるところから。

当時は、AIを使う習慣がなかったので無料かつ学習しやすいYoutubeで調べました。

私が参考にした動画

自分が欲しかったWeb制作に必要な言語、学習手順まで大まかにまとめてくれています。

この動画では、

  1. １　HTML / CSSを学ぶ (サイトに文字を表示したり、文字の大きさや色を変えたりする言語）
  2. ２　ノーコードでサイトを制作する（プログラミング言語を使わずにサイトを制作できるアプリ）
  3. ３　環境構築する（プログラミング言語を扱うためのツールなどを用意）
  4. ４　Progate 道場コースに挑戦する (プログラミング言語学習ツール)
  5. ５　JavaScript / jQueryを学ぶ （アニメーションなどの動きを追加する言語）
  6. ６　サイトを写経する (既にあるサイトのコードを真似して再現する）
  7. ７　ポートフォリオサイトを作る
  8. ８　Sassを学習する (CSSの入力時間を短縮するためのサポート言語)
  9. ９　デザインカンプをコーディングする (コードを書く前につくる大まかなデザイン）
  10. １０　PHP SQLを学ぶ(WordPressというツールを扱うための事前学習）
  11. １１　WordPress自作テーマを学ぶ
  12. １２　WordPress既存テーマを学ぶ

ところで、最終段階のWordPressとはなんでしょうか？

WordPressとはノーコードでサイトの制作、運営をするためのツールです。

手順１１の自作テーマは自分でコードを書いて０からサイトを作る。

そして、手順１２の既存テーマは元から用意された枠の中でサイトを作ることです。

有名どころだと、Cocoonという既存テーマがあります。

これがCocoonで元から用意された枠組みです。

Cocoonの基本画面

よく使われている既存テーマなのでこういうサイトを多分みたことがあると思います。

この枠組みをもとにカスタマイズしていくのが既存テーマを用いたサイト制作になります。

実際の学習手順

この学習手順をもとに学習を進めていくのですが、実際に私が行った手順の詳細は

のように、ほぼYoutubeで学びました。（全て無料です。）

動画を参考にしながら最速でゴール（実際の案件を受注すること）に辿り着くために変更した手順です。

大まかに手順をまとめたので次は手順の詳細をまとめます。

【ステップ１】　HTMLの基礎をYoutubeで学習する。

まずはWeb制作の一番の基礎。

サイトに文字や画像（これらを要素と呼びます。）を表示するためのHTMLを学習します。

無料でいい教材がないかな〜と探している時に見つけたのがのHTML入門講座でした。

1章ごとに短くまとめられているのでストレスなく隙間時間でも学習できます。

私は２〜３週はこの講座を再生したと思います。

集中するため、飽きないためにも一緒にキーボードを叩いてました。

そうしてHTMLの基礎を叩き込んだ後に、全く同じ方法でCSSの基礎を叩き込みます。

【ステップ２】　CSSの基礎をYoutubeで学習する。

CSSとはHTMLで表示した要素の色やサイズを変更するための言語です。

HTMLとCSSを扱えるだけでもそれなりのWebサイトは制作できるようになります。

楽しんで学習しましょう！

こちらもHTML同様TechAchademy様のCSS入門講座です。

HTML / CSSの基礎はTechAcademy様の動画で学習させていただきました。

【ステップ３】　HTMLとCSSのみで作成されたサイトの模写コーディングを複数行う

手順２までで、英会話でいう挨拶レベル程度は学べたと思います。

ただ、実際のサイトはもっといろんなタグやプロパティ（英単語のようなもの）を扱います。

ここからは語彙力を高めていくステップです。

とはいえ、ここからはかっこいい画面で学習することになるのでワクワクすると思います。

漫画やアニメなどで見るハッキングをするシーンみたいですよね。

コードエディタにコードを書いている様子

このステップに必要なツール

まず、コーディングを行うために必要なツールがコードエディタ

（プログラミング言語を理解してくれるツール）です。

コードエディタにもたくさん種類がありますが、

最も使われているのがVs Code(Visual Studio Code)です。

設定など細かく説明するとたくさんあります。（便利な設定などを別記事として投稿します。）

ただ、この段階ではコーディングが行えればそれでいいので、

私はこちらの動画を参考にインストールしました。

ともすた様の動画はこれから何度も活用させていただきます。

模写コーディング

そして、本題の模写コーディングは、

【模写コーディング】おすすめの練習サイト【入門編～上級編】

こちらのサイトを参考に進めていきます。

上記の入門編〜上級編までのサイトのコードを真似してVsCodeにコーディングしていく形です。

応用編〜はこの後JavaScript jQueryを学習後に取り組みます。

コードを見る方法

実際に模写コーディングを行う際はSafariでもChromeからでもコードを見ることができるのですが、

Safariは設定が必要なのでChromeがおすすめです。

サイト上を右クリックして「検証」を選択します。

検証ツールのHTMLコードが書かれている場所を示す

すると、このような画面が開かれ、コードを見ることができます。

HTMLコードは赤線で囲っている枠の中に、

CSSコードはソースという画面から選択して一気に見ることもできますし、

要素毎にCSSコードを見たい場合は、

HTMLコードの各要素を選択するとスタイルという項目から見ることができます。

これらのコードを模写しながら学習を進めていくのですが、

先ほども言ったように動画で学んだのは基礎ですので、

知らないコードがたくさん出てくると思います。

初めて見るコード、わからないコードが出てきたら

AIに

「このコードの意味を教えて」

と質問して自分で扱えるコードの数を増やしていくようなイメージです。

１回の模写で完璧か

模写コーディングは一回で終えるのではなく、複数回行います。

１回目は知らないコードだらけなので時間がかかると思います。

ですが、

２回目以降は理解できていないコード、思い出せないコードだけを

調べていくので回数を重ねるごとにスピードはどんどん上がっていきます。

これを初級編から上級編まで全て行いましょう。

気づいたらスラスラとコードが書けるようになっているはずです。

ここまでで静的なサイト（誰が閲覧しても同じ内容のサイト）は作れるようになりました。

【ステップ４】　JavaScriptの基礎をYoutubeで学習する。

次は動的なサイト（アニメーションなどを用いて変化するサイト）を作るための学習です。

JavaScriptの基礎を学べば、 スライドショー、スクロールエフェクトの実装など

今まで作ったサイトに動きをつけることができます。

この言語は、現代のWeb開発において「最も汎用性が高い言語」の一つです。

もともとはブラウザに動きをつけるための言語でしたが、

現在はサーバー、アプリ、AIなど、あらゆる分野で活用されています。

なので、Web制作だけでなく将来役立つ可能性大な言語になります。

私が学習に使ったのはお馴染みTechAcademy様のはじめてのJavaScriptシリーズです。

【ステップ５】　jQueryの基礎をYoutubeで学習する。

jQueryとはJavaScriptのライブラリの一つで、JavaScriptを短く早く書くためのものです。

画像を自動で横にスライドさせるSlickスライダーなどもこのjQueryで書かれています。

JavaScriptを簡易的に扱えるようになるため、今後のWeb制作に大きく役立ちます。

【ステップ６】　HTML CSS JavaScript jQueryで作成されたサイトの模写コーディングを行う

ここまでの総復習

ここまででHTML CSS JavaScript jQueryの４つの言語を学びました。

短期間で来れた人は大丈夫だと思います。

しかし、時間をかけてここまできた場合、最初に学んだHTML CSSを忘れかけている人もいると思います。

なので、手順４で扱った模写コーディングの応用編でこれまで学んだ言語を総復習しましょう。

実践編に関しては必要があると感じたら挑戦してみてください。

私はお金をかける余裕がなかったため、スルーしました。

【模写コーディング】おすすめの練習サイト【入門編～上級編】

コードを見る方法

検証ツールは、Chromeからサイトにアクセスし、右クリック->「検証」で開くことができましたね。

では、JavaScript jQueryのコードはどこで見るかというと、

CSS同様ソースという項目に「~~.js」というファイルがあるのでこれをクリックします。

簡単なアニメーションの実装なので、思ったより短いコードが表示されると思います。

その短いコードが大きな役割を担っています。

あなたの書いたHTML / CSSコードを元にサイトが表示されます。

「~~.js」ファイルの短いコードがあなたの書いたHTML / CSSコードをサイト表示後に書き換えることでサイトに動きをつけることができます。

手順４同様、何度も繰り返しコーディングをし、

その都度、理解できていないコードは調べるようにします。

特に、「~~.js」というファイルに書かれたコードが

HTML CSSのコードとどのように関わっているかしっかり理解しましょう。

【ステップ７】　Sassの基礎をYoutubdeで学習する。

Sassとは？

SassとはCSSを早く簡単に書くためのプリプロセッサーです。

標準的なCSSは、シンプルで分かりやすい反面、大規模なサイト制作では

「同じコードを何度も書くのが面倒」

「コードが長くなって管理しにくい」という課題があります。

プリプロセッサーを使うと、

通常のCSSにはない「便利な機能」を使って効率的にコーディングし、

最終的にブラウザが読み込める「普通のCSS」へ

自動書き出し（コンパイル）することができます。

ものすごく簡単にいうとJavaScriptとjQueryの関係に似たようなものです。

異なる点はSCSSをもとにCSSコードを機械が書き直してくれるという点です。

header {~~~ : ~~~;}
header nav {~~~: ~~~;}
header div {~~~: ~~~;}

と何度もheaderと入力してnavやdivを指定して書いてきたと思いますが、

Sassを用いると…

header {
　　　　~~~: ~~~;
　　　　nav {~~~: ~~~:}
　　　　div {~~~: ~~~;}
}

このように書くことができます。

このコードを上記の様なCSSコードに書き直してくれる機能があるので、

コーディングのスピードアップができます。

Sassの学習コスト

小さい規模のサイトを模写してきたので

わざわざ学習するほどのものか？

と思うかもしれません。

しかし、扱うサイトの規模が大きくなるにつれて、コーディング時間が短縮できるようになります。

是非、学習しましょう。

CSSのコードを理解していれば学習コストはそれほど高くないです。

私がSassを学習に使用したのはともすた様の次の動画シリーズです。

ここでSassの基礎を学んだら実際にSassを使うことに慣れていきましょう。

【ステップ８】　手順３と６で行ったCSSのコードをSassを用いて書き直す

手順３と６で扱ったサイトのCSSコードをSassを使って書き直します。

Sassに関しては何度も繰り返さなくても初級編から応用編まで一周すれば十分です。

一番難易度の高い応用編だけでも足りるかもしれませんが、

私はしっかり身につけるために一周しました。

【ステップ９】　SQLの基礎をYoutubeで学習する

SQL・PHPとは？

今までのステップでは、誰が閲覧しても同じサイトを制作してきました。

次に、SQLとPHPを学ぶことで

「サイトの閲覧者によって表示する内容を変える」

といったことができるようになります。

Amazonをイメージするとわかりやすいです。

Amazonにはたくさんの商品のデータが登録されており、おすすめ商品などそれぞれのユーザーに合わせた情報が表示されています。

また、会員登録、ログイン、ショッピングカートに入れる、購入するなどユーザーが行えるアクションはたくさんあります。

この商品データや会員情報を保管しておくためのものがデータベースです。

このデータベースを操作するための言語がSQL、

データベースから情報を取得しユーザーに表示するための言語がPHPです。

ちょっとややこしいですね。

1. SQLはプログラミング言語ではなく、データベースを操作する言語（情報を登録するなど）

2. PHPを使って登録された情報をユーザーに表示させる

これくらいに理解していれば学習していくうちに違いがわかります。

ですので、先にSQLを学習してからPHPを学習するのがいいと思います。

私はともすた様のDB + SQL入門シリーズで学習しました。

環境構築まで教えてくれるのでおすすめです。

【ステップ１０】　PHPの基礎をYoutubeで学習する

SQLでデータベースの操作を学んだら、PHPまでセットで学びます。

SQLを学習したことで

データベースを操作するための言語

という意味がわかったと思います。

PHPは学習したデータベースを実際にWeb制作で使うための言語になります。(他にもできることは多い）

PHPの学習に使用したのはプログラミングアカデミー様のPHPシリーズです。

【ステップ１１】　ここまで学習した言語を全て用いた掲示板やクイズサイトを作る

模写コーディングに使える教材がない・・・

PHPとSQLの基礎を学んだので、

実際に使ってみようと思ったのですが、

これまでのように模写コーディングに適したサイトが見つかりませんでした。

模写するためには検証ツールで閲覧できるソースコードと違い、

データベースにアクセスしてデータベースの構造や会員情報などを閲覧する必要があります。（もちろん、そんなことは不正アクセスになるためできません。）

なので、生成AI（Geminiがおすすめ）を使用します。

ログイン機能を合わせた掲示板とクイズサイトを作成しました。

Geminiに

「ログイン機能のある簡単な掲示板のコードを作成して」

と頼むとスラスラとコードを書いてくれます。

【ステップ１１】は必須ではない

このステップ１１は、これまでの学習の総復習 + WordPressで自作テーマを扱う際にWordPressが目に見えないところでどのような動きをしているのかイメージしやすくするために行います。

WordPress投稿画面

WordPressのサイトに記事を投稿するための画面です。

この編集画面に記事を書いて公開するとサイトにこの記事が表示されます。

ざっくり流れを説明すると、

WordPressはこの記事のタイトル、本文、サムネイル画像など、

たくさんの種類の情報をデータベースに一度保存します。

そこに保存したデータを取り出してサイトに表示する。

このあと学習する自作テーマではPHPコードで

the_title(); と書くだけでこの投稿のタイトルだけを表示したり、

サムネイル画像だけを表示するなどが可能なわけですが、

このコードを実行した後の

WordPressが裏側で何を行なっているのかイメージできるようになります。

なので、

「裏側は知らなくてもいいかな」

という方は飛ばしても問題ないかもしれません。

どのみち、SQL以外はWordPress学習の際に使うことになります。

ただ、データベースに直接触れる機会は少ないです。

なので、この手順はせっかく学習したデータベースをしっかり理解するための手順になります。

他にも、今までなんとなく使っていたログイン機能や掲示板やSNSの投稿と表示の流れ

など興味がある人はぜひチャレンジしてみてください。

ステップ１２　WordPressの基礎(既存テーマ）を本で学ぶ

みなさん、お待ちかねのWordPressです。

なぜWordPressを学習するのか

世界中に存在するすべてのWebサイトのうち、

約43%〜45% がWordPressで構築されています。

  • 全Webサイトの約3枚に1枚以上がWordPressで作られている計算になります。
  • この数字には、個人ブログから「NASA」や「ホワイトハウス」のような政府機関、さらに「ディズニー」などの大企業の公式サイトまで含まれています。

また、WordPressのような「サイトを管理するシステム」のことをCMSと言います。

Shopifyは聞いたことがあるかもしれませんが、

これもCMSに分類されます。

CMSを使っているサイトだけに絞ると、その割合はさらに跳ね上がります。

  • CMS市場におけるシェアは約60%〜65% に達しています。
  • 2位以下のShopifyやWixといった競合サービスに圧倒的な差をつけており、実質的に「Web制作の標準インフラ」といえる状態です。

ですので、これからサイトを制作したいという人も

WordPressを使ったサイトを作る確率がものすごく高いわけですね。

つまりWeb制作において必須なスキルになると思ってください。

冒頭でも説明した通り、

WordPressはコードがわからない人でもサイトを公開できるように

既存テーマというものが存在します。

ここまで学習してきた方は

既存テーマじゃなくて自作テーマを学びたいと思うかもしれません。

ですが、いきなり自作テーマ学習に取り掛かると覚えることが多過ぎるので、

まずはWordPressの操作方法を学ぶつもりで取り組んでください。

私はWordPressに関しては本で学習したので

おすすめのYoutube動画はありませんが、実際に学習に使用した本を載せておきます。

WordPressの基礎と基本操作を学べればいいので、

本に従って一周したら次の自作テーマ学習に取り掛かって大丈夫です。

【ステップ１３】　WordPressの自作テーマを本で学ぶ

続いて、WordPress自作テーマ学習です。

既存テーマとは違い、

皆さんが今まで学習してきたようにコーディングしたサイト

これをテーマ化してWordPressで管理するための学習です。

その名の通りテーマを自作するわけです。

HTMLサイトをWordPressのテーマにするためには様々なルールがあります。

新しくWordPress専用の関数なども学ばないといけません。

(とは言っても簡単なPHPコードなのでご安心を)

自作テーマはカスタマイズも自由自在なのですが、

自分でコードを書くだけではなく

プラグインといったWordPress内のアプリのようなものを使って簡単にカスタムすることもできます。

それらを学ぶために私が使用したのが次の本です。

この本で自作テーマの基本的な部分がだいたい学習できると思います。

【ステップ１４】　Figmaの基礎をYoutubeで学習する

手順１３まででWordPressを用いたサイトを自力で作れるようになったところで、

「さっそくポートフォリオサイトを作ろう！」

と意気込んでいましたが、肝心なデザインをどうするかを忘れていました。

今まで模写コーディングをした以降、

簡単な掲示板、クイズサイトは作りましたが、

デザインには特に拘らずにここまできたのでデザインについて調べます。

デザインカンプ作成に使うツールにもAdobe製品など色々あるのですが、

今はFigmaが使われることが多いです。

理由は「一つのデザインプロジェクトを多人数で共有しそのプロジェクト内にコメントを残して他のメンバーに知らせる」などできることがとても多いです。

なのでこれから学習する方はFigmaを使うのをお勧めします。

（基本的な機能は完全無料で公式サイトからインストールできます。）

私が学習に使用したのはあやか様の二つの動画です。

まずは基本操作を学ぶために模写デザインしているのを真似します。

多少説明が抜けている部分もあるのでわからないときはAIに相談しましょう。

そして、絶対にやっておいて欲しいのが

オートレイアウトの学習です。

私はこれをやらずにポートフォリオサイトのデザインカンプを作成してしまったため、

レスポンシブの段階で大きくつまずきました。

オートレイアウトとは複数の要素をFigmaがある程度自動でレイアウトしてくれる機能です。

CSSのflexboxのようなイメージで

サイト全体をPCサイズからスマホサイズにしても綺麗にまとまるように調整してくれます。

これでポートフォリオサイトの大まかなデザインは作れるようになったと思います。

【ステップ１５】　Affinityの基礎をYoutubeで学習する

次に必要になるのが画像編集ツールです。

主流はAdobe製品のPhotoshopやIllustlatorなどの有名なツールなのですが、

サブスクリプション制で結構な金額になります。

なので対抗馬としてAffinity製品というものがあるのですが、

比較するとこんな感じです。

ソフト名AdobeのライバルWeb制作（Nagataさん）での主な用途
Designer (買い切り 10,400円）Illustrator 3,280円/月 (年間プラン)和の装飾パーツ、ロゴ、アイコン、図解制作
Photo (買い切り 10,400円）Photoshop 3,280円/月 (年間プラン)写真の明るさ調整、合成、背景画像のテクスチャ加工
Publisher (買い切り 10,400円）InDesign 3,280円/月 (年間プラン)ポートフォリオの構成案、パンフレット制作

このように結構コストがかかります。

ですが、Affinityが

Designer

Photo

Publisher

の３つの機能をまとめたAffinityというツールを2025年10月末に完全無料化しました。

現在は誰でも無償でプロ版の全機能を利用できるという、

クリエイティブ業界でも非常に大きな変化が起きています。

Affinityは公式サイトのダウンロードページからインストールできます。

画像編集ツールに関しては主流がAdobe製品にはなります。

なので、どちらがおすすめとは言えないのですが、

お金を払ってでもプロと同じツールで学習したいという方はAdobe製品

まずは無料で編集を学びたいという方はAffinity

という感じです。

私の場合はフリー画像や画像生成AI(Canvaがおすすめ)で生成した画像のテイストをポートフォリオサイトに合わせたものに変えたり、

画像から使いたい部分だけを切り抜いて

透過画像やwebpに変換するために使っています。

AffinityはAdobe製品と違って使い方などの動画が少ないのが問題ではあるのですが、

AIに質問するとある程度答えてくれるので今のところは困っていません。

切り抜きに関しては

Canvaデザイナー Sayaka様の切り抜き法５選

という動画を使用して学びました。

特にチャンネルを利用した切り抜きは

繊細な切り抜きが必要な場合などに役立つのでぜひ習得しておいてください。

当サイトのサイトロゴやSNSのプロフィール画像などもAffinityを使って制作したものです。

【ステップ１６】　ポートフォリオサイトを制作する

ここまで学習すればあなたのイメージするサイトはある程度作ることができると思います。

ぜひ、ポートフォリオサイトを作ってみてください。

あとはポートフォリオサイトを作って案件を受注するだけ。

と言いたいですが、まだ経験が足りない部分が大きいです。

単純なデザイン力に関してもそうですが、

デザインからサイトのWordPress化までにどれくらいの制作期間がかかるのか、

UI / UXデザインなどもそうですし、

SEOやセキュリティ対策などあげればキリがありません。

今ポートフォリオサイトを完成させてすぐにこの学習記録をまとめています。

次は、ポートフォリオサイト制作で得た学習記録、

その次はまた別の方法で得た学習記録

などを上げていくつもりです。

とにかく何かを制作して、知識や経験を得る。

これを繰り返していけば案件受注に辿り着けると思います。

ぜひ皆さんもここで諦めずに、挑戦し続けてください。

Web制作のことをさらにもっと深く知りたいという方にはおすすめの本があるので載せておきます。

休憩がてら、読んでみてください。

業界1年生が必ず身に付けたいウェブ制作・運用のリテラシー

イラスト図解式 この一冊で全部わかるWeb制作と運用の基本 

Web制作の歴史、実際に制作に使われる最新ツール、セキュリティなど

たくさんのことを学ぶことができるので「ただサイトをつくる」からレベルアップできます。

学習記録一覧へ

Coding

関連記事