模写コーディングとは、既存の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（コード比較ツール） もご活用ください。
