この記事は、私が発信している「未経験からWeb制作で月20万円稼げるようになるロードマップ」の「STEP①：Web制作独学のための基礎知識を学ぶ」の学習内容をまとめた学習リストです。
Web制作やWebデザインを独学するために、「始めに覚えたい“基礎知識”」に関して解説している記事をまとめてあります。
また、こちらの学習リストに対応したワークシートを無料でお配りしています。
受け取り方法は、LINEを登録していただき、リッチメニューのアイコンをクリックするだけ！
無料で学べるワークシート配布中！
りほぜひ、無料で学べる教材としてご活用ください！
まずロードマップを見る
副業・在宅OK！ノーコードで稼ぐWeb制作入門（半年で月20万も可能！）
この記事では、WordPressのテーマを使用したノーコードWeb制作で、月20万円以上稼ぎたい方へ向けた「完全独学ロードマップ」を解説しています。 Web制作は独学可能です…
目次
「STEP①：Web制作独学のための基礎知識を学ぶ」学習リスト
①-1：Web制作の仕事についての基礎知識
Web制作の仕事の全体像を把握しよう！
Web制作の仕事を知る
【Webデザイナーとは？】Web制作の仕事の全体像を把握しよう！
Web制作の仕事の流れって？ この記事では、このような疑問にお答えします。 この記事でわかること Webサイト制作の一般的な流れ 職種ごとの分担の仕方 サイト制作を一…
キーワード：Webディレター/Webデザイナー/Webコーダー
①-2：WordPressの基礎知識
WordPressがおすすめな理由
WordPress基礎
【2026年最新】たくさんあるノーコードツールの中でWordPressをおすすめする理由
WordPressを学んだ方が良い理由は？ そんな疑問にお応えします。 この記事でわかること ノーコードツールとしてWordPressをおすすめする理由 WordPressのシェア 2026年…
キーワード：WordPress
WordPressとは？特徴と仕組みを知ろう
WordPressとは？
【図解】WordPress（ワードプレス）とは？特徴と仕組みを知ろう！
WordPress（ワードプレス）って何？ そこの記事では、このような疑問にお答えします。 この記事でわかること WordPressでできること WordPressサイトの動きの特徴 コア…
キーワード：WordPress/コア/テーマ/プラグイン
①-3：Webサイトの基礎知識
Webサイトの種類
Webサイトの種類
Webサイトにはどんな種類がある？目的別に理解しよう
Webサイトってどんな種類があるの？ この記事では、このような疑問にお答えします。 この記事でわかること ホームページとWebサイトの違い Webサイトの種類と目的 クラ…
キーワード：ホームページ/Webサイト
Webサイトのレイアウトに必要な基本パーツ
Webサイトのパーツ
Webサイトの「レイアウト」に必要な基本パーツを知ろう！
Webサイトを構成するパーツとは？ この記事では、このような疑問にお答えします。 この記事でわかること 基本パーツの名前や役割 Webサイトのレイアウトに必要な知識 「…
キーワード：ヘッダー/グローバルナビゲーション/キービジュアル/メインコンテンツ/サイドバー/フッター/ファーストビュー/コピーライト
セクションと見出し
コンテンツのパーツ
Webページの基本！「セクション」と「見出し」を学ぼう！
Webページはどのように構成するの？ この記事では、このような疑問にお答えします。 この記事でわかること 「セクション」と「見出し」について 見出しタグ（hタグ）の…
キーワード：見出しブロック/hタグ/セクション
①-4：Webデザインの基礎知識
デザイン4原則
デザイン4原則
【Webデザイン基礎】「デザイン4原則」について学ぼう！
この記事では、このような疑問にお答えします。 この記事でわかること デザイン4原則について デザイン未経験でもデザインセンスを付ける方法 Webサイトの見た目は、「…
キーワード：デザイン4原則/近接/整列/反復/対比
フォントとタイポグラフィ
「文字」について
【Webデザイン基礎】「フォント」と「タイポグラフィ」について学ぼう！
「フォント」や「タイポグラフィ」って何？ この記事では、このような疑問にお答えします。 この記事でわかること フォントとは何か？ 明朝体とゴシック体の違い タイポ…
キーワード：フォント/明朝体/ゴシック体/タイポグラフィ
Webサイトで使う色、カラーコード
「色」について
Webサイトで使う色の基本と「カラーコード」の見方・使い方
カラーコードって何？ この記事では、このような疑問にお答えします。 この記事でわかること 色が与える印象 カラーコードとは？ カラーコードの調べ方 Webデザインにお…
キーワード：カラーコード/16進数/ColorZilla
初心者でも迷わない配色の決め方（70:25:5の法則）
「配色」について
【実践！】初心者でも迷わない配色の決め方（70:25:5の法則など）
Webサイトの配色ってどうやるの？ この記事では、このような疑問にお答えします。 この記事でわかること 「ベースカラー」「メインカラー」「アクセントカラー」の使い…
キーワード：ベースカラー/メインカラー/アクセントカラー/70:25:5の法則
①-5：使いやすいWebサイトの基礎知識
UI/UX、ユーザビリティとは？
使いやすいサイトとは？
【初心者向け】「UI/UX」「ユーザビリティ」とは？わかりやすく解説！
勉強中のトリ 「UI」「UX」「ユーザビリティ」って何？ 使いやすいサイトとは？ この記事では、このような疑問にお答えします。 この記事でわかること 「UI」「UX」「…
キーワード：UI/UX/ユーザビリティ
レスポンシブデザインとモバイルフレンドリー
スマホ対応について
【初心者向け】レスポンシブデザインとモバイルフレンドリーとは？
勉強中のトリ レスポンシブデザインって何？ モバイルフレンドリーって何？ この記事では、このような疑問にお答えします。 この記事でわかること レスポンシブデザイ…
キーワード：レスポンシブデザイン/モバイルフレンドリー
りほSTEP①はここまでです。
お疲れ様でした！
6ステップを全て学べる教材作りました！
