プログラミング独学ロードマップ【サイト模写編】サンプル改造から模写までの6ステップ（2026年版）

PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。

Progateで HTML/CSS を1周したのに、まっさらなエディタを開くと1行も書けない。この状態から抜け出す道は、いきなりサイト模写に挑むことではなく、すでに完成しているページを改造することから始めることです。改造で「どこを触ると何が変わるか」が体に入ってから模写に進むと、途中で手が止まりにくくなります。

この記事は、独学ロードマップ全3回の第2回（サイト模写編）です。HTML/CSS の基礎を1周した人が、実際のWebサイトを自分で組めるようになるまでの順番と、模写の具体的な手順をまとめました。2020年1月に公開した記事を、2026年9月22日の状況に合わせて全面的に書き直しています。教材・ツールの料金と提供状況は公式ページで確認しました。情報確認日：2026年9月22日。

サイト模写までの6ステップ（全体像）

この記事で進める順番は次のとおりです。上から順に手を動かすと、最後の「実際のサイトの模写」が現実的な難易度になります。

1. 完成済みのサンプルを改造して、コードを触る感覚をつかむ
2. Emmetで入力を速くする
3. CSSフレームワーク（Bootstrap）の仕組みを理解する
4. 書いたコードを記録して使い回せるようにする
5. JavaScriptで動きを付ける
6. 実際のサイトを模写する

基礎レッスンを1周した直後の状態は、「読めば分かるが、白紙からは書けない」ところにあります。模写は「見本を見て、白紙から全部書く」作業なので、その間には大きな段差があります。1〜5はその段差を埋めるための階段だと考えてください。順番を入れ替えると、たとえばフレームワークから始めた場合に「自分で書いたCSSと、フレームワークが当てているCSSの区別がつかない」といった詰まり方をしやすくなります。ここは筆者の進め方の提案です。

1. 完成済みのサンプルを改造して、コードを触る感覚をつかむ

最初にやることは、すでに動いているHTML/CSSを手元で開いて、少しずつ書き換えることです。ゼロから考える負荷がないので、「この値を変えると、画面のどこが変わるのか」だけに集中できます。

改造する題材は、無料で手に入る3つから選ぶ

2020年版のこの記事では、Progateの「HTML & CSS 上級編」の復習画面からサンプルコードをZIPでダウンロードする手順を紹介していました。2026年9月22日に公式ページを見直したところ、この手順は公開ページからは確認できませんでした（レッスン画面はログインが必要で、コース紹介ページにダウンロードの記載がありません）。そのため手順の紹介はやめて、確認できた題材を挙げます。

• 自分がProgateで書いたコード：レッスンで自分が書いたHTML/CSSを、エディタに写して手元のファイルにする。内容を全部知っているので、改造の効果がいちばん分かりやすい題材です
• MDNの学習エリアのサンプル：MDNのウェブ開発の学習で使われるサンプルコードは mdn/learning-area にまとまっていて、ZIPでまとめてダウンロードできます。2026年9月22日時点でライセンスは CC0 1.0（著作権を放棄した公開）で、練習用に改造しても問題になりません
• 自分で書いた小さなページ：見出し・画像3枚・ボタン・フッターだけの1画面を自分で作り、それを改造台にする。作るところまでで前回（第1回）の復習にもなります

Progateの教材を使う場合、HTML & CSS のレッスンは初級編から Flexbox編までの7レッスンで、いずれも有料のプラスプラン以上が対象です（2026年9月22日に Progate のHTML & CSSコースページで確認）。料金は記事の後半に表でまとめました。

改造は「やりたいことを決める → 調べる → 実装する」

改造の内容は、できるだけ自分で決めてください。手順書の通りに写す作業と違い、「やりたいことを決める → 調べる → 実装する」の3手順を自分で回すと、次に別のサイトを作るときにも同じ回し方が使えます。何を変えるか思いつかないときは、次のような小さな課題から始めてください。

• ページ上部の背景を、色から画像に変える（またはその逆）
• 横並びに4つ置いてある要素を3つに減らし、幅を整える
• 見出しの文字の色・大きさ・フォントを変える
• ヘッダーの高さを、PCとスマートフォンで変える
• ボタンにリンクを付けて、別のタブで開くようにする
• ボタンにマウスを乗せたときだけ色が変わるようにする

改造は凝り始めると終わりがありません。大小あわせて10か所ほど変えられたら、次のステップに進んで構いません。

2. Emmetで入力を速くする

Emmetは、短い省略記法を書いて展開すると、HTMLやCSSのまとまりが一気に出てくる仕組みです。Visual Studio Code には最初から組み込まれていて、拡張機能を入れる必要はありません（VS Code公式ドキュメントのEmmetの項で2026年9月22日に確認）。

たとえば、次の1行を書いて展開すると、

ul>li*3

このHTMLになります。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

> は「この中に入れる」、* は「この回数くり返す」という意味です。クラス名を付けたいときは .、IDなら #、同じ階層に並べるなら + を使います。

section.cards>div.card*3>h3+p

記号の一覧は Emmet公式ドキュメントの省略記法の構文にまとまっています。全部覚える必要はなく、> * . # + の5つを使えるようになると、模写のときのHTMLを組む速さが変わります。

3. CSSフレームワーク（Bootstrap）の仕組みを理解する

Bootstrapは、あらかじめ用意されたCSSのクラスを HTML の class に書くだけで、ボタンの見た目やレイアウトが整うライブラリです。2026年9月22日に Bootstrap日本語ドキュメントで確認した最新版は 5.3.8 でした。2020年当時によく参考にされていた解説記事は、クラス名に col-xs- が出てくる3系・4系向けのものが多く、今からまねすると動かないクラス名を覚えることになります。学ぶときは公式ドキュメントの5系を見てください。

この段階で理解しておくと効果が大きいのは「グリッドシステム」です。container の中に row を置き、その中の col-* で横方向を分割します。1行は12分割が基本で、col-6 を2つ並べれば半分ずつ、col-4 を3つ並べれば3等分になります。画面幅ごとに分割数を変えられるので、レスポンシブ対応の考え方も一緒に身に付きます（Bootstrap 5.3のGrid systemのページ）。

4. 書いたコードを記録して使い回せるようにする

一度書いたコードは、次のページでもほぼそのまま使えます。ヘッダー、ハンバーガーメニュー、カードを横並びにする部分などは、毎回ゼロから書き直す必要がありません。「名前を付けて保存し、あとで探して取り出せる」状態にしておくと、学習が進むほど手持ちが増えていきます。

2020年版のこの記事では、記録先として Boost Note を勧めていました。2026年9月22日に確認したところ、公式サイト boostnote.io はHTTPS接続がエラーになって内容を確認できず、GitHubの公式リポジトリ BoostIO/BoostNote-App はアーカイブ（読み取り専用）になっていました。提供が続いているか確認できないため、この記事では勧めません。代わりに、同じ目的に使えて手順を確認できたものを挙げます。

• VS Codeのユーザースニペット：エディタの中で完結する方法です。「File」→「Preferences」→「Configure Snippets」から言語を選ぶと、JSON形式のスニペットファイルを編集できます。よく使うHTMLのまとまりを登録しておけば、短い単語を打つだけで呼び出せます（VS Code公式ドキュメントのSnippetsのページで確認）
• GitHub Gist：コードの断片をGitHub上に保存する機能です。公開／非公開（secret）を選べて、後から検索できます。GitHubのアカウントを作る練習にもなります（GitHub Docsの「Gistの作成」）
• Notionなどのメモアプリ：コードブロックが使えるメモアプリなら、「なぜこう書いたか」の説明を一緒に残せます。つまずいた理由まで残すと、同じ失敗を繰り返しにくくなります

どれを選んでも、記録のしかたは同じです。「ヘッダー」「スマホのメニュー」のように後から探せる名前を付け、HTML・CSS・JavaScriptをセットで保存し、探すためのタグや見出しを付けておきます。貼るだけで動く状態で保存しておくのが大事で、断片だけを残すと次に使うときに組み立て直しが必要になります。

5. JavaScriptで動きを付ける（jQueryは後回しでよい）

スライドショー、マウスを乗せると拡大する画像、スマートフォンのハンバーガーメニュー。こうした動きはJavaScriptで作られています。HTML/CSSが「構造と見た目」なら、JavaScriptは「操作への反応」を担当します。変数・条件分岐・関数といった、プログラミング言語らしい知識が出てくるのはここからです。

学ぶ順番は、まず素のJavaScriptです。jQueryはJavaScriptを短く書けるようにするライブラリで、2020年当時はWeb制作の入口として広く勧められていました。今から始める人にとっては、素のJavaScriptで書ける範囲が広がっていることと、jQueryの学習素材が古い書き方（ES5）を前提にしていることから、先にjQueryへ進む理由が薄くなっています。jQueryは「既存サイトの保守や修正で出会ったときに、読めて直せればよい」という位置づけで十分です。

Progateで学ぶ場合、2026年9月22日時点の構成は次のとおりでした。

• JavaScript：全7レッスン（基礎文法編・繰り返し処理編・関数編・クラス基礎編・npmパッケージ編・配列メソッド編・コールバック関数編）。2020年版で紹介した「JavaScript I・II・III」という名前は使われていません
• jQuery：全4レッスン（初級編・中級編・道場中級編・上級編）。コースページに「このレッスンで使われるJavaScriptのバージョンはES5です」と書かれています

どちらのレッスンも有料のプラスプラン以上が対象です。無料で進めたい場合は、MDNのウェブ開発の学習にJavaScriptの章があり、費用はかかりません。

6. 実際のサイトを模写する

ここからが本番です。模写は「公開されているWebサイトを見本にして、同じ見た目のページを自分のHTML/CSSで作る」練習で、基礎レッスンでは出てこない判断（この余白は何pxか、この並びはFlexboxか、画面が狭いとどう折り返すのか）を自分で下すことになります。

模写の5手順

1. 対象を決めて、範囲を区切る。1ページ全部ではなく「ファーストビューだけ」のように範囲を決めます。見本のスクリーンショットを撮って、画面を上から順にブロック（ヘッダー／見出し部分／特徴3つ／お問い合わせ／フッター）に分け、紙かメモに書き出します
2. HTMLで構造だけを組む。まだ色も余白も付けません。ブロックの区切りを header section footer に置き換え、中の見出し・文章・画像・ボタンを並べます。この時点では縦一列に崩れて表示されて正常です
3. CSSで見た目を合わせる。文字の大きさ・色・行間 → 余白 → 横並び（Flexboxやグリッド）→ 背景や装飾、の順に進めると迷いにくくなります。1ブロック仕上げてから次のブロックへ移ると、どこまで終わったか分かります
4. レスポンシブを合わせる。ブラウザの幅を狭めて、見本のスマートフォン表示と比べます。横並びを縦に落とす、文字を小さくする、はみ出しを直す。ここは第1回で扱ったメディアクエリの復習になります
5. JavaScriptで動きを足す。スマートフォンのメニュー開閉、スクロールで現れる動き、スライドショーなど。見本と完全に同じ動きにならなくても、同じ役割を果たせば十分です

検証ツールでCSSの値を見る

模写で「この余白は何px？」と悩む時間は、ブラウザの検証ツール（デベロッパーツール）で短くできます。Chromeなら、見本のページで調べたい部分を右クリックして「検証」を選ぶと、その要素のHTMLと、当たっているCSSが右側に並びます。使い方は Progateの「検証ツール（デベロッパーモード）の使い方」が無料で読めます（2026年9月22日に確認）。

見るポイントは3つです。1つ目は「Styles」に並ぶプロパティで、font-size や color の実際の値が読めます。2つ目は「Computed」で、継承や打ち消しの結果として最終的に効いている値が分かります。3つ目は要素を選んだときに出るボックスの図で、padding（内側の余白）と margin（外側の余白）のどちらで空いているのかが区別できます。

ただし、検証ツールの値をそのまま写すだけの作業にすると、模写の効果が落ちます。まず自分で「だいたい20pxくらい」と当てを付けて書き、その後に検証ツールで答え合わせをする順番にしてください。数字を当てる感覚は、見本のないデザインを渡されたときに必要になります。

模写したページは公開しない

最初の1本は「1画面だけ」か「LP1枚」から

2020年版のこの記事では、模写の対象として Apple（日本）と Airbnb のトップページを挙げていました。どちらもデザインとUIの参考になるサイトですが、初めての模写にはかなり手強い相手です。細かいアニメーションや、複雑な条件でのレイアウト変化が多く、途中で止まると「自分には向いていない」という結論になりがちです。

おすすめの進め方は、次の3段階です。

1. 1画面だけ：好きなサイトのファーストビュー（スクロールせずに見える範囲）だけを写す。半日〜1日で終わる大きさにします
2. LP（ランディングページ）1枚：1ページで完結する縦長のページを、上から下まで通しで写す。ページ全体を組み上げる経験になり、ヘッダーやフッターの使い回しも覚えられます
3. 大きなサイトのトップページ：AppleやAirbnbのように作り込まれたサイトへ。ここまで来ると、分からない部分を検証ツールで調べて再現する力が付いています

この段階でのAIの使い方

2020年版のこの記事では、分からないところは「ググって調べる」と書いていました。2026年は、そこにAIへの質問が加わります。ただし、この段階で気を付けたいのは、AIに作らせるのではなく、AIに説明させるという使い分けです。改造も模写も、手を動かして身に付ける練習なので、完成品をもらってしまうと練習そのものが消えてしまいます。

• 改造で詰まったとき：コードを貼って「この変更をするには、どこを直せばいいですか。直す場所と理由だけ教えてください」と聞きます。答えのコードをそのまま書いてもらうより、場所と理由を聞いて自分で直すほうが、次に同じ形が出てきたときに自分で解けます
• 模写で知らないCSSに出会ったとき：検証ツールで見つけたプロパティを貼って、「このプロパティは何をしていますか。これを外すと見た目はどう変わりますか」と聞きます。外したときの変化を聞くと、役割が具体的に分かります
• 自分のコードを説明させる：自分が書いたCSSを貼って「この指定で意図どおりに動きますか。まずいところがあれば理由つきで指摘してください」と聞きます。レビューしてくれる人が身近にいない独学では、ここが効きます

エディタの補完（GitHub Copilotなど）も同じ考え方です。書こうとした行の先を勝手に提案してくれるので便利ですが、この段階で Tab キーを押すだけの作業になると、自分では書けないまま進んでしまいます。改造と模写の期間は補完を切って、詰まったときだけチャットで聞くほうが力が付きます。どんなツールなのかを知っておきたい場合は、GitHub Copilotの使い方をまとめた記事を読んでいただくと、無料で使える範囲と、提案を受け入れるかどうかの判断のしかたが分かります。

Progateにも「ChatGPTを使ってコードの意味を理解しよう」「エラーメッセージの読み方を知って、味方につけよう！」といった記事が用意されていて、2026年9月22日時点では HTML & CSSのコースページから一覧で読めます。Web制作と並行してAIの使い方そのものも学びたい場合は、生成AIスクールの比較記事を読んでいただくと、スクールごとの学べる範囲と料金が分かります。

使う教材・ツールの料金（2026年9月22日確認）

この記事で挙げたものの費用を、公式ページで確認した範囲でまとめました。

Progateの年額は2026年9月22日に 有料会員プランのページで確認した金額です。月額での契約もでき、キャンペーンや対象者によって条件が変わる場合があると同じページに書かれているため、申し込む前に公式ページで確認してください。

まとめ：今日やる1つを決める

基礎1周からサイト模写までは、6ステップに分けると段差が小さくなります。

1. 完成済みのサンプルを改造する（自分のコード、MDNのサンプル、自作の1画面）
2. Emmetで入力を速くする（> * . # + の5つから）
3. Bootstrap 5系のグリッドの考え方を知る
4. 書いたコードを名前とタグを付けて記録する（VS Codeのスニペット、Gist、メモアプリ）
5. 素のJavaScriptを学ぶ（jQueryは保守で出会ってから）
6. 1画面 → LP1枚 → 大きなサイト、の順で模写する

最初の一歩は、改造する題材を1つ決めてエディタで開くところです。AIには「作らせる」ではなく「説明させる」使い方をして、手を動かす順番を守ってください。

教室やオンラインの個別指導で、講座単位で学びたい人へ（PR）

Winスクールは、全国の教室とオンラインで個別指導の授業を行うパソコン・ITスクールです。生成AI（ChatGPT・Copilot）の入門、Excel・PowerPoint と生成AIを組み合わせた講座、Webデザインやプログラミングの講座などを、講座単位で受けられます。

• 無料カウンセリング・受講相談は約1時間で、教室に行くかオンラインで受けられます。目的に合わせた講座の提案を受けられ、公式サイトでは参加後の過度な勧誘はしないと案内されています。
• 受講費用は講座ごとで、入学金・受講料・教材費の合計です（例：生成AI〔ChatGPT・Copilot〕は90分×3回で税込40,700円）。
• 1回分の授業を無料で受ける体験レッスンは行っていないと案内されています。

ほかのスクールと料金や学び方を比べてから決めたい方は、生成AIスクールの比較記事で、料金・学べる範囲・無料相談の有無を同じ軸で確認できます。

Winスクールの講座と無料カウンセリングを見る

料金とカウンセリングの内容は2026年10月14日に公式サイトで確認したものです。申込み前に最新の表示を確認してください。

シリーズの前後の記事

このロードマップは全3回です。HTML/CSSの基礎とレスポンシブ対応がまだ不安な場合は、第1回（HTML/CSS/レスポンシブ編）を読んでいただくと、模写の3〜4手順目で必要になるメディアクエリの考え方を先に固められます。模写まで終えた人は、第3回（ポートフォリオ作成編）を読んでいただくと、練習を「人に見せられる作品」に変える手順と、模写と作品の線引きが分かります。