Webサイト制作の学習マップ

プログラミングの初心者が、短期間でWebサイトの作成方法を学ぶには、どのような順番で勉強していけば良いでしょうか？

今回は、基本となる技術要素を検討してみます。

Webサイト制作に関わる知識はたくさんありますが、まずは基本となる骨格を作り、さらに周辺の知識を肉付けしていけば、時間の短縮になると思います。

分類の方法にも拠りますが、Web開発には主に３つの分野／技術要素があります。

1. Webデザイン
2. Webプログラミング
3. Webサーバー管理

それぞれに必要となってくる知識を見てみましょう。

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

イラスト図解式 この一冊で全部わかるWeb技術の基本

1周目：基本

1周目のWebデザイン

主にWebページの見た目を作る作業に注目してみます。

1. HTML
2. CSS

まずは、HTMLとCSSを学び、Webページを作れるようにします。

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉

初心者からちゃんとしたプロになる HTML+CSS実践講座

初心者からちゃんとしたプロになる Webデザイン基礎入門〈HTML、CSS、レスポンシブ〉

1周目のWebプログラミング

LAMPスタックで手軽に始めてみましょう。

1. XAMPPやMAMPの利用
2. PHP
3. MySQL
4. Apache

スラスラわかるPHP 第2版

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

いちばんやさしい SQL 入門教室

1周目のWebサーバー管理

Webサーバーは、設定が少ないものから始めて、徐々に設定が多くなるものへとステップアップしていけばスムーズに学べます。

最初はフルマネージドサーバーから始めて、2週目以降にVPSやクラウド、オンプレミス（自前のサーバー）も用意できるようにすればOK。

1. ドメイン名の取得
2. レンタルサーバーの用意
3. SSL
4. FTP

2周目：肉付け

1周目で扱わなかった内容を徐々に追加していきましょう。

2周目のWebデザイン

1. Adobe Photoshop
2. Adobe Illustrator

PhotoshopとIllustratorを学び、画像パーツなどを用意できるようにします。

（PhotoshopやIllustratorは有料ソフトですが、他の似たような無料ソフトでもOK）

デザインの学校 これからはじめるPhotoshopの本 [2020年最新版]

デザインの学校 これからはじめる Illustratorの本 [2020年最新版]

2周目のWebプログラミング

2周目では、WordPressなどのCMSや、JavaScriptを学びましょう。

1. WordPress
2. JavaScript
3. Vue.js

いちばんやさしい WordPress 入門教室

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)

WordPress標準デザイン講座 20LESSONS【第2版】

初心者からちゃんとしたプロになる JavaScript基礎入門

これからはじめるVue.js実践入門

Vue.jsのツボとコツがゼッタイにわかる本

2周目のWebサーバー管理

自分でWebサーバーを構築／管理できるように、Linuxやネットワーク技術の基本について学びましょう。

1. Linux
2. bash
3. ネットワークの基本知識（TCP/IP、DNSなど）
4. VPS

イラストでそこそこわかるLinux コマンド入力からネットワークのきほんのきまで

本気で学ぶ Linux実践入門 サーバ運用のための業務レベル管理術

初心者でもしっかりわかる 図解ネットワーク技術

DNSがよくわかる教科書

3周目

3周目以降は、他の関連技術やツールの使い方をどんどん肉付けして増やしていきましょう。

1. Git
2. Docker／Kubernetes
3. AWS
4. JavaScriptのエコシステム（Node.jsなど）

細かく列挙していくと、きりがないですね。

動かして学ぶ! Git入門 (NEXT ONE)

たった1日で基本が身に付く! Docker/Kubernetes超入門

AWSではじめるLinux入門ガイド

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

AWSではじめるインフラ構築入門 安全で堅牢な本番環境のつくり方

それぞれの項目を1日程度でカバーできる範囲にまとめ、まずは概要をつかみ、その後詳細を深掘りしていくスタイルにしないと、時間がかかってしまいますね？

JavaScriptだけでなく、関連知識を学ぶためのカリキュラムと教材を再検討してみたいと思います。