Webサイト制作では、Webページを構成する見出し、文章、画像、リンク、フォームをHTMLで構造化し、CSSで見た目や配置を整えていきます。
このロードマップでは、最初に小さなページを完成させて全体像をつかみ、そのあとHTML/CSSの基礎、レイアウト、レスポンシブ対応、模写コーディングへ段階的に進みます。
環境構築や制作の流れもあわせて扱うので、はじめての方でも「学んだタグやプロパティが、実際のページづくりでどう使われるのか」を確認しながら進められます。
OVERVIEW
できるようになること
ページの構造を読み取れる
見出し、段落、画像、リンク、フォームなどの役割を理解し、WebページをHTMLの要素として整理できるようになります。
見た目をコードで調整できる
文字、色、余白、背景、ボックスモデルを理解し、デザインの意図に合わせてCSSを書けるようになります。
画面幅に合わせた配置ができる
Flexbox、メディアクエリー、CSS Gridを使い、PCでもスマートフォンでも見やすいレイアウトを作れるようになります。
ROADMAP
Webサイト制作の
学習ロードマップ
STEP 1
まずは体験
Web制作の流れをつかむ
最初に小さなプロフィールサイトを作り、HTMLとCSSがどのようにページになるのかを体験します。
はじめてのWeb制作
プロフィールサイトを作りながら、HTMLとCSSの役割、画像やリンクの扱い、公開前の確認までをひと通り体験します。
- HTML
- CSS
- プロフィールサイト
- 制作の流れ
STEP 2
環境を整える
手元で作る準備をする
自分のOSに合わせてエディタなどの制作環境を整え、ファイルやフォルダの扱い方も確認します。
Web制作の準備をしよう Windows編
WindowsでWeb制作を進めるために、必要なツールを用意し、ファイルを編集してブラウザで確認する流れを整えます。
- Windows
- VS Code
- フォルダ操作
Web制作の準備をしよう macOS編
macOSでWeb制作を始めるための基本環境を準備し、エディタとブラウザを使った確認方法に慣れていきます。
- macOS
- VS Code
- ファイル管理
STEP 3
基礎を固める
HTML/CSSの必修知識を順番に学ぶ
ページの構造、入力フォーム、見た目、CSSの仕組み、セレクタを順番に理解します。
PREMIUM
HTML入門 基本タグ編
見出し、段落、画像、リンク、リストなど、ページの構造を表す基本タグをひとつずつ学びます。
- 見出し
- 画像
- リンク
- リスト
PREMIUM
HTML入門 フォームタグ編
入力欄、ボタン、選択肢など、ユーザーから情報を受け取るフォーム部品の使い方を学びます。
- input
- button
- select
- label
PREMIUM
CSS入門 基本スタイリング編
文字、色、余白、ボーダー、背景など、HTMLで作った構造の見た目をCSSで整える基本を学びます。
- 色
- 余白
- ボーダー
- 背景
PREMIUM
CSS入門 応用スタイリング編
ボックスモデル、継承、優先順位など、CSSを理解するための重要な仕組みを深めます。
- ボックスモデル
- 継承
- 優先順位
PREMIUM
CSS入門 セレクター編
どの要素にスタイルを当てるかを指定する、セレクタの書き方と組み合わせ方に慣れます。
- class
- id
- 疑似クラス
- 組み合わせ
STEP 4
表現を広げる
レイアウトと動きの引き出しを増やす
基礎が固まったら、横並び、レスポンシブ、アニメーション、CSS Nesting、Gridへ進みます。
PREMIUM
CSS入門 フレックスボックス編
要素を横並びにしたり、余白や整列を調整したりする、実制作でよく使うレイアウト方法を学びます。
- 横並び
- 整列
- 折り返し
PREMIUM
CSS入門 メディアクエリー編
画面幅に合わせてCSSを切り替え、PCでもスマートフォンでも見やすいページに整える方法を学びます。
- レスポンシブ
- ブレイクポイント
- スマホ対応
PREMIUM
CSS入門 アニメーション編
transitionやanimationを使い、動きのある表現をCSSだけで実現する基本を学びます。
- transition
- animation
- keyframes
PREMIUM
CSS入門 入れ子編
関連するスタイルを入れ子で書き、コンポーネント単位でCSSを読みやすく整理する方法を学びます。
- Nesting
- &
- 整理
PREMIUM
CSS入門 グリッドレイアウト編
行と列を使った二次元レイアウトを学び、複雑なページ構成もすっきり組めるようにします。
- grid
- 行と列
- 配置
STEP 5
制作で定着
学んだことを模写コーディングで実践する
完成版を見ながらコードに落とし込み、学んだ内容を実際の制作で使える形にしていきます。
PREMIUM
実践！ポートフォリオサイトを模写しよう
プロフィール、制作実績、問い合わせ導線を持つサイトを組み立て、実用的なページ構成を練習します。
- プロフィール
- 実績一覧
- 問い合わせ
PREMIUM
実践！アプリのランディングページを模写しよう
ヒーロー、機能紹介、CTAなど、サービス紹介ページでよく使う構成を作り込みます。
- ヒーロー
- 機能紹介
- CTA
PREMIUM
実践！ECサイトを模写しよう
商品一覧、詳細ページ、サイトマップを含む複数ページの構成に挑戦し、制作の幅を広げます。
- 商品一覧
- 詳細ページ
- 複数ページ
STEP 6
課題で実践
自分で考えて作る
動画で学んだあとは、制限時間のある課題で「見本を観察して、自分の手で仕上げる」練習に進みます。
模写コーディングの課題に挑戦
参加型の課題で、見本を観察する力、HTML/CSSに分解する力、仕上げる力を鍛えます。
ENVIRONMENT
動画の手順に沿って
制作環境を整える
Web制作では、エディタでHTML/CSSを書き、ブラウザで表示を確認しながら進めます。WindowsとmacOSの両方に向けた準備レッスンを用意しているので、自分の環境に合わせて学習を始められます。
Webサイト制作入門の一部レッスンは、プレミアムプランに登録すれば視聴できます。
NEXT STEP
Web制作の次のステップへ
FAQ
よくある質問
どのレッスンから始めればよいですか？
初めてなら「はじめてのWeb制作」から始めるのがおすすめです。制作の全体像をつかんでから環境構築とHTML/CSSの基礎に進むと、あとから学ぶ内容を理解しやすくなります。
WindowsとmacOSのセットアップは両方必要ですか？
必要ありません。自分が使っているOSのレッスンだけ進めれば大丈夫です。
模写コーディングはいつ挑戦すればよいですか？
HTMLタグ、CSSスタイリング、CSSセレクタ、Flexboxをひと通り学んだあとがおすすめです。分からない部分が出てきたら、必要な基礎レッスンに戻りながら進めます。
JavaScriptも一緒に学ぶべきですか？
まずはHTML/CSSで静的なページを作れるようになると安心です。そのあと、メニューやタブ、カルーセルなどの動きを加えたい段階でJavaScriptへ進むと理解しやすくなります。
プログラミング未経験でも大丈夫ですか？
大丈夫です。このロードマップは未経験の方を想定して、小さなページ作りの体験から環境構築、基礎、模写コーディングまで順番に進む構成にしています。分からない部分が出てきたら、前のレッスンに戻りながら学べます。
学習にはどれくらいの時間がかかりますか？
1本あたり3分前後の動画で構成されているため、1日20〜30分のペースでも数週間ほどで入門から模写コーディングまで一通り進められます。手を動かす時間を多めにとると、より定着しやすくなります。
パソコンやソフトの準備は必要ですか？
制作を手元で進めるにはエディタとブラウザがあれば始められます。WindowsとmacOSそれぞれに向けた環境構築レッスンを用意しているので、動画の手順に沿って準備を整えられます。特別な有料ソフトは必要ありません。
プレミアムプランに登録しないとレッスンは視聴できませんか？
Webサイト制作入門の一部レッスンはプレミアム限定です。ただし無料で視聴できるレッスンもあるので、内容を確かめたうえでプレミアムプランをご検討いただけます。
学んだあとは何を作れるようになりますか？
ポートフォリオサイトやアプリ紹介ページ、ECサイトのような複数ページのWebサイトを、見本を見ながら自分の手で再現できるようになります。そこからJavaScriptや公開の手順に進めば、表現の幅をさらに広げられます。
LEARN NOW
