模写コーディングとは、既存のWebデザインをHTML/CSSで再現する練習方法です。実務に近い形でコーディング力を鍛えられます。このページでは、レベル別に全31記事をまとめました。
初心者は初級 #001から順に取り組み、準中級 → 中級 → 上級とステップアップしてください。Figma模写シリーズではデザインツールの使い方も同時に学べます。
初級（5記事）
HTMLとCSSの基本を使ったシンプルなレイアウト練習。初めての模写にどうぞ。
- 模写初級 #001 — 初心者向けレイアウト
- 模写初級 #002 — LP・フォームレイアウト
- 模写初級 #003 — 初心者向けLPレイアウト
- 模写初級 #004 — ブログ一覧
- 模写初級 #005 — LPページトップボタン
準中級（5記事）
ヘッダーナビ・ヒーローセクション・Gridレイアウトなど、パーツ単位の模写練習。
- 模写準中級 #001 — ヘッダーナビ
- 模写準中級 #002 — ヒーローセクション
- 模写準中級 #003 — Gridセクション
- 模写準中級 #004 — フッター
- 模写準中級 #005 — AOS.jsスクロールアニメーション
中級（6記事）
複数セクションのサイトを丸ごと模写。レスポンシブ対応やBootstrap・Tailwindも。
- 模写中級 #001 — ポートフォリオサイト
- 模写中級 #002 — 茶屋サンプルサイト
- 模写中級 #003 — ジムサンプルサイト
- 模写中級 #004 — Bootstrapポートフォリオ
- 模写中級 #005 — Tailwind CSSで作る製品LP
- 模写中級 #006 — ScrollReveal.jsサンプルLP
上級（7記事）
GSAP・スクロールアニメーション・Next.jsなど、高度な技術を使った模写に挑戦。
- 模写上級 #001 — ポートフォリオ + GSAPスクロール
- 模写上級 #002 — 写真館サンプルサイト
- 模写上級 #003 — ポートフォリオ + pagepiling
- 模写上級 #004 — GSAPとScrollTriggerのリバースアニメーション
- 模写上級 #005 — ファッション雑誌風LP
- 模写上級 #006 — CTA特化LP（Next.js）
- 模写上級 #007 — 飲食店LP（Lism CSS）
Figma模写シリーズ（8記事）
Figmaの無料テンプレートを使った模写練習。デザインツールの操作も同時に習得。
- Figma模写 #1 — Figmaで始める模写コーディング入門
- Figma模写 #2 — 建築系ポートフォリオ風レイアウト
- Figma模写 #3 — 音楽系ランディングページ
- Figma模写 #4 — 旅行サービス系UI
- Figma模写 #5 — 山と自然テーマの中級レイアウト
- Figma模写 #6 — シンプルカードレイアウト3パターン
- Figma模写 #7 — 配色センスが身につく3色デザイン
- Figma模写 #8 — 広告バナーデザインの3色配色
模写の進め方
模写練習をもっと効果的にするためのガイドと添削サービス。
- 模擬案件プラン — デザイン＋コーディング添削付き。優秀作品はCodeQuestに掲載
関連ガイド
模写で使うHTML/CSS/JSの基礎も確認しましょう。
- JavaScript学習ガイド — 練習問題から実践アプリ開発まで12記事
- CSS実装テクニック集 — 基礎からアニメーションまで55記事を体系化
- SEO対策ガイド — 基礎からAI検索時代の最新手法・診断ツールまで
- WordPress実践ガイド — テーマ開発・CF7・サーバー構築まで全20記事
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
よくある質問（FAQ）
Q. 模写コーディングとは何ですか？
模写コーディングとは、既存のWebサイトやデザインカンプを見ながら、同じ見た目のページをHTML・CSSで再現する学習方法です。実際のデザインを分析しながらコードを書くことで、レイアウト構築力・CSS設計力・レスポンシブ対応力を実践的に身につけることができます。Web制作の学習法として最も効果的な方法の一つです。
Q. 模写コーディングの難易度はどう選べばいいですか？
HTML・CSSの基礎文法を理解した段階で初級（ヘッダー・フッターなどのパーツ単位）から始め、Flexboxを使ったレイアウトが組めるようになったら中級（ランディングページ全体）に進んでください。CSS Grid・JavaScriptを使ったインタラクションまで実装できる段階で上級（複数ページ・アニメーション付き）に挑戦するのが効率的な進め方です。
Q. Figma模写とHTML模写の違いは何ですか？
Figma模写はデザインツール上でレイアウト・配色・タイポグラフィを再現する練習で、デザインスキルの向上が目的です。HTML模写はデザインカンプや既存サイトをHTML・CSSでコーディングする練習で、実装スキルの向上が目的です。両方を行うことで「デザインを理解してコードに落とす」一連のスキルが身につきます。
