模写コーディングとは、公開されているWebサイトやデザインカンプを見ながら、同じ見た目のページをHTML・CSSで組み直す練習方法です。作るものが最初から決まっているので、何を作るか悩む時間がゼロになり、書いたコードの正解・不正解をその場で見比べられるのが最大の利点です。
ただし「見本を開いて上から書き写す」だけだと途中で止まります。止まる原因はレベル選びを外しているか、どこまでやれば終わりなのかを決めていないかのどちらかです。このページには課題そのものに加えて、レベルの判定表・1本を終えるまでの手順・詰まりやすい箇所・「終えた」と言える判定基準を置きました。まず判定表で始点を決め、その一覧から1本選んでください。
どのレベルから始めるかを決める
模写でいちばん多い失敗は、実力に対して重すぎる課題を選んで途中で止まることです。逆に軽すぎると、写経になって学習になりません。次の表で、いまの自分に当てはまる行を1つだけ選んでください。当てはまる行が2つあるときは、上の行（やさしいほう）を取ります。
いまの状態から始点を決める判定表
| いまの状態 | 始めるレベル | 最初の1本 |
|---|---|---|
| タグを調べながらならHTMLが書ける。CSSはコピペが中心 | 初級 | 模写初級 #001 |
| 1枚のページは組めるが、部品ごとの作り分けが曖昧 | 準中級 | 模写準中級 #001 |
| Flexboxで横並びは作れる。CSS Gridに自信がない | 中級 | 模写中級 #001 |
| 複数セクションのLPを崩さず組める。JSライブラリは未経験 | 上級 | 模写上級 #001 |
| コードは書けるが、デザインの読み取りに自信がない | Figma模写 | Figma模写 #1 |
迷ったら初級 #001 から始めてください。軽ければすぐ上に飛べますが、上級から入ると詰まった原因が実力不足なのか課題の粒度なのかを自分で切り分けられません。
レベルが上がると何が増えるのか
レベルの違いは「見た目の派手さ」ではありません。同時に面倒を見なければならない要素の数が増えます。所要時間は各課題ページに書かれている目安で、実装量から見積もった値です（計測値ではありません）。
| レベル | 増える要素 | 1本の目安 |
|---|---|---|
| 初級 | パーツ単位。HTMLとCSSだけで完結する | 2〜3時間 |
| 準中級 | 状態を持つ部品（開閉・固定・現在地の表示） | 2〜4時間 |
| 中級 | 複数セクション・CSS Grid・フレームワーク | 3〜6時間 |
| 上級 | JSライブラリ・アニメーション・画像最適化 | 6時間以上 |
| Figma模写 | デザインデータから数値を自分で読み取る作業 | 3〜4時間 |
Figma模写だけは軸が違い、デザインデータを開いて余白・比率・色の値を自分で拾う作業が主役です。コードは書けるのに再現できない人は、先にこちらを1本やると詰まりの正体が見えます。
初級（5記事）
HTMLの構造とCSSの基本レイアウトだけで完結する課題です。#001から#005まで順に進めると、1ページに必要な部品がひととおり揃います。
- 模写初級 #001 初心者向けレイアウト — 見出し・段落・画像を縦に積む最小構成。模写の進め方をここで覚える
- 模写初級 #002 LPのお問い合わせフォーム — 入力欄とラベルを for と id で結び、type をブラウザの挙動から選べるようになる
- 模写初級 #003 初心者向けLPレイアウト — ナビ付きの1ページをセクション単位に分けて組めるようになる
- 模写初級 #004 ブログ一覧（記事カードを並べる） — 同じ形のカードをCSS Gridで並べ、枚数が増減しても崩れない一覧を作れる
- 模写初級 #005 ページトップボタンの作り方 — 戻り先の指定・画面への固定・出し入れの切り替えを分けて実装できる
タグやセレクタの意味があやふやなときは、CSSセレクタ一覧を開いたまま進めて構いません。調べながら書くのは反則ではありません。
準中級（5記事）
実務でそのまま使い回せる部品を1つずつ仕上げる課題です。初級との違いは、開閉・固定・現在地の表示といった「状態」を持つ要素が出てくることです。
- 模写準中級 #001 ヘッダーナビ（キーボード対応まで） — 横並びの土台に加え、閉じたメニューのキーボード操作まで作り込める
- 模写準中級 #002 ヒーローセクション — ページ最上部の見せ場を、背景画像と文字の重ね方から組める
- 模写準中級 #003 Gridセクション — 見出し・本文・画像の配置をCSS Gridで設計できる
- 模写準中級 #004 ページ最下部に貼り付くフッター — 本文が1行のページでも、フッターを画面最下部まで届かせられる
- 模写準中級 #005 AOS.jsでスクロールアニメーション — HTMLの属性を足すだけでスクロール連動の動きを付けられる
中級（6記事）
複数セクションのサイトを1ページ丸ごと組む課題です。ここからは画面幅を変えても崩れないことが合格条件に入ります。#004以降はフレームワークやJSライブラリに乗る側の作法も扱います。
- 模写中級 #001 CSS Gridで作るポートフォリオ — グリッドのライン番号を自分で決め、hoverやクラス付与で見た目を切り替えられる
- 模写中級 #002 茶屋サイトで学ぶ縦書きと日本語組版 — 縦書きの見出し・行間・日本語の折り返しを読みやすさから逆算して組める
- 模写中級 #003 ジムサイトの交互配置レイアウト — 画像とテキストを左右交互に並べ、狭い画面で正しく縦積みへ戻せる
- 模写中級 #004 Bootstrapでポートフォリオ — フレームワークのグリッドとクラス名に乗ってレイアウトを組める
- 模写中級 #005 Tailwind CSS v4とSwiperで作るスマホ製品LP — ユーティリティクラスだけで組み、ライブラリのバージョンを自分で固定できる
- 模写中級 #006 ScrollReveal.jsのサンプルLP — スクロールに応じて要素を出現させる演出を軽量ライブラリで足せる
中級で最初に立ちはだかるのはCSS Gridです。ライン番号や領域名から確認したいときは、グリッドレイアウト完全ガイドを先に読んでから課題に入ってください。
上級（7記事）
アニメーションライブラリ・画像最適化・Next.jsなど、見た目の再現だけでは合格にならない課題です。動く分、原因を切り分ける手数も増えます。1本6時間以上を見込んでください。
- 模写上級 #001 ポートフォリオ＋GSAPスクロール — スクロール位置に連動する演出をGSAPで組み込める
- 模写上級 #002 写真館サイトで学ぶ画像最適化 — 画像の出し分け・読み込む順番・比率の固定まで含めて仕上げられる
- 模写上級 #003 pagepilingのポートフォリオ — スクロールで1画面ずつ切り替わるページ送りを実装できる
- 模写上級 #004 GSAPとScrollTriggerのリバースアニメーション — 下げたときだけでなく、上に戻したときの動きまで制御できる
- 模写上級 #005 ファッション雑誌風LP — 固定サイドナビと雑誌的なタイポグラフィを余白の設計から再現できる
- 模写上級 #006 CTA特化LPをNext.jsで作る — 行動を促すボタンをどこに何個置くかを設計として説明できる
- 模写上級 #007 飲食店LPをHTML/CSSとLism CSSで — フレームワークが効く範囲を見分け、崩れの原因を1箇所に特定できる
Figma模写シリーズ（8記事）
Figma Community の無料テンプレートを見本にする課題です。HTML模写と違い、余白・比率・色の値をデザインデータから自分で読み取るところから始まります。ツールの操作も同時に身につきます。
- Figma模写 #1 Figmaで始める模写コーディング — テンプレートの選び方から画像・テキストの取り出し方まで一周できる
- Figma模写 #2 建築系ポートフォリオの余白と画像比率 — 装飾に頼らず、余白と写真の比率だけでレイアウトを成立させられる
- Figma模写 #3 音楽系ランディングページ — 大きなヒーロー画像とフォーム・告知セクションを1ページにまとめられる
- Figma模写 #4 旅行サービス系UI — 検索フォームとカードUIが混在する情報量の多い画面を組める
- Figma模写 #5 山と自然テーマの縦長レイアウト — 全面写真とナンバリング付きセクションで縦に長いページの流れを作れる
- Figma模写 #6 シンプルカードレイアウト3パターン — カード1枚から取り組める最小単位で、模写の型を確かめられる
- Figma模写 #7 3色で配色センスを鍛えるポートフォリオ模写 — どの色をどれだけの面積に置くかを実測値をもとに判断できる
- Figma模写 #8 広告バナーの3色配色 — 模写で終わらせず、自分でコンセプトを決めて配色と素材を選べる
配色の決め方に迷ったら、Webデザインの基礎9つで余白・整列・配色の考え方を押さえると、テンプレートから拾う値の意味が分かります。
模写1本を終えるまでの手順
どのレベルでも進め方は同じ6手順です。順番に意味があります。HTMLとCSSを行き来しながら書くと、崩れたときに原因が構造なのか装飾なのか切り分けられなくなるからです。各手順に「ここまでできたら次へ」の判定を付けました。
手順1 見本をセクションに割る
見本を上から下までスクロールし、横一線で切れる場所で区切ります。ヘッダー・ヒーロー・サービス紹介・料金・フッター、という具合です。このときいくつに割れたかを数字で書き出してください。全体像があると、どこまで進んだかが分かります。
次へ進む判定：セクションの数を言えて、それぞれに一言の名前が付いている。
手順2 CSSを書かずにHTMLだけを最後まで書く
手順1で割ったセクションを、上から順にHTMLだけで書き切ります。色も余白も無視して構いません。この段階のページは装飾のない、縦に長い状態になります。それが正しい姿です。見出しが見出しに、リストがリストになっているかを、装飾抜きで確かめられます。
ここで手が止まる人は「見た目のためのdiv」と「意味のあるタグ」を混ぜています。まず意味だけで書き、divは後から必要な分だけ足してください。
次へ進む判定：CSSを1行も読み込んでいない状態で、上から読んで内容の順序が通じる。
手順3 土台のCSSを先に置く
装飾に入る前に、ページ全体で共通する土台を書きます。コンテンツの最大幅・左右の余白・箱の計算方法・画像のはみ出し防止の4つです。ここを先に決めると、後半の「なぜか幅が揃わない」が減ります。
:root {
--content-width: 1120px;
--gutter: 24px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
img,
video {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
max-width: var(--content-width);
margin-inline: auto;
padding-inline: var(--gutter);
}box-sizing: border-box は、要素の幅に padding と border を含めて計算する指定です。MDNによれば既定値の content-box は width が中身の領域だけを指し、border-box では padding と border が width の内側に収まります（MDN box-sizing／2026-08-02取得）。模写で「余白を足したら幅がずれた」が起きるのはここです。
コンテンツ幅やカラムの決め方に根拠が欲しいときは、デザインカンプ前に決めるWebデザインのルールを先に読むと、見本から拾う数値の意味が変わります。
次へ進む判定：どのセクションにも同じ左右余白が付き、ブラウザ幅を広げてもコンテンツが一定幅で止まる。
手順4 上から1セクションずつ寄せる
1つのセクションを寄せ切ってから次へ移ります。同時に何箇所も触らないでください。崩れたときに、直前に書いた数行だけが容疑者になる状態を保つのが目的です。
寄せる順番は、並び方（縦か横か・何列か）→ 余白 → 文字 → 色と影です。色から入ると、レイアウトが崩れているのか色が違うだけなのかが分からなくなります。
次へ進む判定：いま触っているセクションだけを見本と並べて、要素の並び順と間隔が一致している。
手順5 画面幅を320pxまで狭める
全セクションを寄せ終わったら、開発者ツールで画面幅を320pxまで狭めます。この幅の根拠はW3CのWCAG 2.2「Reflow」の解説にあります。横書きの内容は320 CSSピクセル相当の幅に狭めたときに折り返して収まることが求められ、この値は基準の起草当時に一般的だった小型端末の報告ビューポート幅に合わせて選ばれたと説明されています（W3C Understanding SC 1.4.10 Reflow／2026-08-02にW3C公式のWCAGソースリポジトリで本文を確認）。
つまり320pxは「小さいスマホ」の話ではなく、ここで横スクロールが出なければ、より広い幅では基本的に破綻しないという下限の基準です。見本がPC表示しかない課題でも、この確認は自分で回してください。
次へ進む判定：幅320pxで横方向のスクロールバーが出ない。文字が箱からはみ出していない。
手順6 見本と自分のコードを突き合わせる
最後に、自分のコードと見本のコードを並べます。ここは答え合わせではなく、違いの理由を言語化する工程です。「同じ見た目なのに書き方が違う」箇所ほど学びが多くなります。
差分を目で追うのが大変なときは、Diff Checker（コード比較ツール）に貼り付けると違う行だけが色分けされます。開発者ツールの使い方そのものに不安がある場合は、Chrome DevToolsで仮説と検証を回す手順を先に一読してください。
次へ進む判定：見本と自分の書き方が違う箇所を3つ挙げ、それぞれ理由を一言で説明できる。
詰まるのはだいたいこの5か所
レベルが違っても、手が止まる場所はほとんど同じです。当てはまるものが無いときは、直前に書いた数行をいったん消して、崩れが直るかどうかで切り分けます。
| 症状 | 原因として多いもの | 最初に試すこと |
|---|---|---|
| 画面を狭めると横スクロールが出る | 固定px幅の要素、または画像・表のはみ出し | 幅指定を max-width に替え、画像に max-width: 100% を当てる |
| 余白を足したら幅がずれた | padding と border が幅の外側に加算されている | box-sizing: border-box を全体に当てる |
| 画像が伸びる・潰れる | width と height を両方指定して比率が崩れている | object-fit と aspect-ratio で比率を保つ |
| 上下の余白が消える・二重になる | 隣り合う margin が相殺されている | 余白の向きを片側に統一する |
| 中央に寄らない | margin の auto に対して幅の上限が無い | 親要素に max-width を付けてから auto を効かせる |
3行目の object-fit は画像などの中身を box にどう収めるかの指定で、cover なら比率を保ったまま box を埋めるよう切り抜かれます（MDN object-fit／2026-08-02取得）。4行目の余白の消失は不具合ではなく、隣接ブロックの上下 margin が1つにまとめられるCSSの仕様です（MDN Margin collapsing／2026-08-02取得）。
画像の出し分けでつまずいたときは、pictureタグで画像を画面サイズごとに切り替えるにデモ付きの実装があります。上級 #002 の予習にも使えます。
「1本終えた」と言える基準
「見た目が似ている」で終わらせると、次の課題に何も引き継げません。他人に見せなくても自分で合否を出せる基準を4つ置きます。
合否を判定する4つの基準
- 幅320pxで横方向のスクロールが出ない。開発者ツールのコンソールで
document.documentElement.scrollWidthとdocument.documentElement.clientWidthを比べ、前者が大きくなっていない - 画像をすべて別のサイズの画像に差し替えても、レイアウトが崩れない
- マウスを使わず、Tabキーだけでリンクとボタンをすべてたどれて、いまどこにいるかが画面上で分かる
- 自分のHTMLを、CSSを外した状態で上から読んで内容の順序が通じる
1つ目で使う scrollWidth は、要素の内容の実際の幅（あふれている部分を含む）を返すプロパティで、clientWidth は見えている表示領域の幅を返します（MDN Element.scrollWidth／2026-08-02取得）。2つが同じならあふれは無く、scrollWidth のほうが大きければ何かがはみ出しているという判定になります。目でスクロールバーを探すより確実です。
判定が外れたときに最初に疑うところ
1つでも外れたら、次の1手だけ試します。直らなければ課題ページの「つまずきポイント」に戻ってください。深追いすると模写そのものが止まります。
| 外れた基準 | 最初に疑うところ |
|---|---|
| 幅320pxで横スクロールが出る | 固定px幅・長いURL文字列・table・はみ出す画像のいずれか。開発者ツールで要素を1つずつ非表示にして犯人を絞る |
| 画像を差し替えると崩れる | 画像の実寸に依存したレイアウトになっている。比率指定に置き換える |
| Tabでたどれない・現在地が分からない | ボタンをdivで作っている、または focus の表示を消している |
| CSSを外すと順序が通じない | 見た目の位置を優先してHTMLを並べ替えている。意味の順に戻す |
タップ領域やコントラストまで含めて数値で合否を出したい場合は、UIの合否を数値で出す手順に測り方がまとまっています。模写の課題を「提出できる作品」に引き上げる段階で使ってください。
模写を終えたあとに何をするか
模写は見本がある状態で書く練習、実務は見本が無い状態で要件から決める仕事です。この段差を埋める方法は2つあります。
- 模写した課題を1つ選び、構造は変えずに色・文字・写真だけ自分で差し替える
- 要件だけを渡された状態でLPを1枚作り、他人に見てもらう
1つ目は今日から一人でできます。2つ目は見てくれる相手が要ります。要件定義から始めてデザインと完成後の2回の添削を受けられるのが模擬案件プランです。
模写で作った静的なページに動きを付けるのがJavaScriptのDOM操作です。ブラウザ上でコードを書いてその場で実行できる〈JavaScript DOM操作クイズ〉なら、タブUIやモーダルなど模写ページにそのまま足せるUIパーツを20問で練習できます。
模写で使う解説記事と道具
課題の途中で「そもそもこの書き方でいいのか」が気になったときに開く記事です。全部読む必要はありません。詰まった項目だけ拾ってください。
- CSS実装テクニック集 — レイアウトからアニメーションまで逆引きできる
- レスポンシブデザイン入門 — 画面幅で表示を変える考え方とメディアクエリの書き方
- グリッドレイアウト完全ガイド — 中級以降で必須のCSS Gridの設計と実装
- Webデザインの基礎9つ — 見本の「なぜそうなっているか」を読み解く土台
- JavaScript学習ガイド — JSに入る前の練習問題と実践アプリ
- Chrome DevToolsで仮説と検証を回す手順 — 崩れの原因を自分で特定できる
課題ページの一覧は模写練習カテゴリからも辿れます。コードの差分比較にはDiff Checkerを使ってください。
よくある質問（FAQ）
Q. 模写コーディングとは何ですか？
模写コーディングとは、公開されているWebサイトやデザインカンプを見ながら、同じ見た目のページをHTML・CSSで組み直す学習方法です。作るものが決まっているため題材選びに悩まず、書いたコードの正しさを見本と見比べてその場で判断できます。レイアウト構築・CSS設計・レスポンシブ対応を、実務に近い順序でまとめて練習できます。
Q. 模写コーディングのやり方が分かりません。何から始めればいいですか？
見本をセクションに割る、HTMLだけ最後まで書く、土台のCSSを置く、上から1セクションずつ寄せる、幅320pxまで狭める、見本とコードを突き合わせる——この6手順を順に回してください。HTMLとCSSを行き来しながら書くと、崩れたときに構造の問題か装飾の問題かを切り分けられなくなります。
Q. どのレベルの練習サイトから始めればいいですか？
タグを調べながらHTMLが書ける段階なら初級、Flexboxで横並びは作れるがCSS Gridに自信がなければ中級、複数セクションのLPを崩さず組めてJSライブラリ未経験なら上級が目安です。迷ったらやさしいほうを選んでください。初級は1本2〜3時間が目安なので、合わないと分かった時点ですぐ上へ移れます。
Q. 模写を1本終えたと判断する基準はありますか？
見た目の一致ではなく、次の4点で判定します。幅320pxで横スクロールが出ない、画像を差し替えても崩れない、Tabキーだけでリンクとボタンをたどれて現在地が分かる、CSSを外しても読む順序が通じる。いずれも他人の評価を待たずに確認できるため、独学でも合否を出せます。
Q. Figma模写とHTML模写の違いは何ですか？
Figma模写はデザインデータを開いて余白・比率・色の値を読み取るところから始まり、デザインの読解力を鍛えます。HTML模写は見本ページをHTML・CSSで再現する練習で、実装力を鍛えます。コードは書けるのに似せられない人はFigma模写を、デザインは読めるのに実装で止まる人はHTML模写を先に回すと、詰まりの正体がはっきりします。
Q. 見本のコードを見ながら進めても意味はありますか？
あります。ただし順番を守ってください。まず自分で書き、詰まってから見るなら学習になりますが、最初から見ながら書き写すと写経になり、次の課題で同じ場所に詰まります。目安は、同じ箇所で15分手が動かなければ見本を開き、読んだあとに「なぜその書き方なのか」を一言で説明できるところまで戻すことです。
Q. 模写した成果物をポートフォリオに載せてもいいですか？
見本サイトの写真・ロゴ・文言をそのまま使ったものは掲載を避けてください。デザインや素材には権利者がいるためです。掲載するなら、レイアウトの構造だけを再利用し、写真・文言・配色をすべて自分で用意したものに差し替えます。この作業自体が、見本の無い状態で作る練習になります。