模写コーディングとは？やり方を練習サイトを元に解説【無料】

模写コーディングとは、実際に公開されているサイトをデベロッパーツールで見ながら、そっくり同じものをコーディングして作り上げる手法をことを指します。

一般的に初心者がコーディング学習に利用することの多い勉強方法です。

初学者さん

模写コーディングってどうやるの？どれぐらいやればいいのかな？練習サイトはどうしよう？

Web制作やコーディングの勉強を始めると「模写コーディング」という言葉に出会うと思います。

しかし「模写コーディング」は実はいたずらにやっても、いつまで経っても実践レベルにはなれない、しかし成長のために重要な過程だったりします。

そこで今回は「模写コーディングの役割と練習サイトと具体的なやりかた」を徹底解説します！

これを解説している私自身は、6年でWeb制作案件を200件以上こなしており、模写コーディングも一番最初に取り組んだ学習手段です。

今回の記事を読んでいただくことで、現役コーダーから見た模写コーディングとの付き合い方がよく分かるようになるので、初学者の方は是非最後まで見て欲しいです！！

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。2024年からは外資のWeb系企業でディレクター業も兼務。月数万PVのブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

2025年には「8日以内提出」という納期と「修正10箇所以内」という品質項目が課された、模擬案件編も追加

コーディングに自信をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

模写コーディングに意味はある、と今は思う
- 模写コーディングは橋渡しに過ぎない
- AI時代に模写コーディングは意味があるのか
そもそも模写コーディングとは？
模写コーディングに取り組む前提のレベル
- 教科書を一冊は終わらしておきたい
模写コーディング前の準備
- 拡張機能やエディターの準備
模写の題材はどこから取る？3つの入手先
模写コーディングの具体的なやり方【7手順】
模写コーディングはいつ卒業する？
まとめ：模写コーディングは短期集中で終わらせよう
模写コーディングに関するよくある質問
参考情報

模写コーディングに意味はある、と今は思う

私は2020年頃に、「【模写はやめてください】デザインカンプからのコーディングと模写は全く違う話」というブログ記事とYouTube動画を出しました。

このコンテンツでは、

しょーご

実務と模写はかけ離れすぎてるから、推奨しません！

ということを言っており、代わりに初学者向けの第一歩になれる、簡単なデザインカンプからのコーディング課題

【入門】デザインカンプからのコーディング練習【無料です】

を出したのですが、

まさひろくん

いきなりデザインカンプからのコーディングとか、難しすぎて挫折しそうです…

こういった声をずっと聞いてきて、初学者の方にとっての模写の重要性を再認識するに至りました。

つまり、模写で教科書のコード写経レベルを脱してからデザインカンプのコーディングに移れば、もっとスムーズなのではないかと。

そこで、いっそのこと今回は模写コーディングを徹底解説しようと思ったわけです。

模写コーディングは橋渡しに過ぎない

模写コーディングはあくまで「デザインカンプが行えるレベル感までの橋渡し」に過ぎません。

決してずっとやるものではないので、今回紹介する題材を1つでもこなしたら、次に「【入門】デザインカンプからのコーディング練習【無料です】」に取り組むことをおすすめします。

しょーご

模写とデザインカンプからのコーディングは全く違いますからね。

AI時代に模写コーディングは意味があるのか

スクショをAIに投げたらHTMLもCSSも出てくるのに、模写する意味ってまだあるんですか？

2026年になって、一番よく聞かれるようになった質問です。

結論から言うと、模写の価値は下がっていません。むしろ上がっています。 ただし「やる理由」が昔と変わりました。

昔の模写の目的：作れるようになること

以前の模写は「ゼロから1ページ組み上げられるようになる」ことが目的でした。この部分だけを見れば、たしかにAIのほうが速いです。

今の模写の目的：出てきたコードを判断できるようになること

いま実務で起きているのは、AIが出したコードのどこが間違っているかを人間が判断する仕事です。

AIが吐き出すHTMLは、放っておくと次のようになりがちです。

AI出力にありがちな崩れ

divの入れ子が無駄に深い。sectionやarticleが使われていない
クラス名が box1、wrapper2 のように意味を持たず、後から直せない
見た目は合っているのに、幅を狭めると崩れる
余白が全部marginで取られていて、親子関係が破綻している

しょーご

ここで問題なのは、「間違っている」と気づけるかどうかなんですよね。自分で一度も組んだことがない人は、崩れていても崩れていることに気づけません。

コードを読んで違和感を持てるかどうかは、自分の手で書いた経験の量に比例します。この経験を最短で積める手段が、いまだに模写なんです。

ただし「AIに答えを聞きながら模写する」のは無意味

一方で、注意点もあります。

分からない箇所をAIに聞くこと自体は問題ありません。私も実務で普通に使います。ただし先に自分で書いてから聞くのか、書く前に聞くのかで、身につくものが正反対になります。

これは昔から言われてきた「検証ツールでコードをカンニングして写すだけなら意味がない」という話と、まったく同じ構図です。カンニング先が検証ツールからAIに変わっただけですね。

AIとの付き合い方

まず自力で書く。20〜30分手が止まったら聞く
出てきたコードをそのまま貼らず、なぜそう書くのかを説明させる
説明を読んで納得できなかったら、その場で調べ直す

結論：本数は減らしていい、でもゼロにはできない

AIがある分、模写に何ヶ月もかける必要はなくなりました。1〜2本で十分です。

大事なのは本数ではなく、「AIが出したコードを見て、これはおかしいと言えるようになること」。そこまで来たら、さっさとデザインカンプからのコーディングに移りましょう。

しょーご

AIが書けるようになったからこそ、書けない人ほど価値が下がる時代になったと思っています。

そもそも模写コーディングとは？

模写コーディングとは、実際に公開されているWebサイトをデベロッパーツールで見ながら、なんとなく実サイトと同じようなものを作り上げる学習方法を指します。

Web制作の実務では、Photoshop、Adobe XD、Figmaなどで作られたデザインカンプからコーディングするのが一般的です（これをデザインカンプからのコーディングと呼びます）

しかしWeb制作の学習で言われる模写というのは、デザインカンプからではなく、既に公開されているサイトをそっくりそのまま再現しようとすることを指します。

以下の画像のように、検証ツールで元サイトの表示を見ながら、自分のエディターでコーディングして、できるだけ元サイトに近づけることを目指します。

模写コーディングに取り組む前提のレベル

教科書を一冊は終わらしておきたい

模写とは言え、HTML&CSSの基礎学習が終了している必要があります。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座を終わらせておきましょう。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

created by Rinker

この本をとりあえず一周できていれば、あとは模写の中で分からない部分を自分でググって解决できるようになります。

ありさちゃん

Progateだけじゃ足りないですか？

しょーご

う〜ん、それだと物足りないかもね…模写で一行目から書けなくて、絶望すると思います。

模写コーディング前の準備

拡張機能やエディターの準備

模写コーディングでは少しだけ事前準備が必要になるので、準備しておきましょう。

模写前の準備

Image Downloader（拡張機能）
VSCodeのセットアップ（エディター）
検証ツールに慣れておく

❶Image Downloader

https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj

模写コーディングでは、サイト上の画像が必要になりますが、その画像を簡単にダウンロードできる拡張機能になります。

❷VSCodeのセットアップ

VSCodeの最低限のセットアップは終わらせておきましょう。

特にまだLive Serverを使ったことがない人は、以下の記事で基本セットアップは終わらせておきましょう。

❸検証ツールに慣れておく

模写コーディングでは検証で元サイトを見ながら、サイズを合わせたり答え合わせをしていくことになります。

また、レスポンシブ対応も行うため、検証ツールの操作は必須です。

検証ツールの使い方に関しては、下記の記事に一通り目を通しておくと良いです。

Chromeデベロッパーツールの使い方まとめ【開き方やコンソール、ショートカットなど】

模写の題材はどこから取る？3つの入手先

模写の題材と言われるものには、実は性質の違う3タイプが混ざっています。ここを分けずに選ぶと、「模写のつもりがデザインカンプからのコーディングをやっていた」ということが普通に起きます。

タイプ	何を見ながら書くか	代表的な入手先
①実在サイトの模写	公開中のサイト＋検証ツール	iSara
②模写専用のデモサイト	用意されたデモページ	Codejump
③デザインデータから	Figma／XD／png のカンプ	模写修行・無料コーディング練習所・デイトラの練習課題

しょーご

厳密に言うと③は模写ではなく「デザインカンプからのコーディング」です。ただ名前に「模写」が入っているサービスもあるので、ここで整理しておきますね。

タイプ①：実在の公開サイトを模写する

バンコクのノマドエンジニア育成講座 iSara[イサラ]は有名な模写OKサイト（公式公認）です。

実は私自身も2018年のiSara出身で、このiSaraLPを模写して卒業しました。

ただ、このiSaraのページはかなり縦長になっており、ボリュームがすごいです。

そこで、iSaraの模写をするに当たっていくつかアドバイスをします。

❶ヘッダー6時間、ファーストビューに一日は普通

まず模写の段階の人は、最初のヘッダー完成まで半日かかっても普通だと捉えましょう。

私もヘッダーに5時間かかった記憶があります。

特にヘッダーはレスポンシブで表示が切り替わるので、そこも加味してコーディングする必要があります。

ただ、ファーストビューが終わるとコーディングのスピードが上がってくるので、意外にその後はスイスイ行けたりします。

❷ブロック分けを行うべし

ブロック分けの考えは実務に入っても重要です。

しょーご

私もブロックを思い描きながら、HTMLを書いています。

以下の図のようなブロック分けを頭の中でできればいいですが、最初のうちは図示してもいいかもです。

❸コードが正しいかは確認したい

今回久しぶりにiSaraのコードを見ていたら、hタグの中にpタグが入っていました…

これは文法上誤りになりますね。そもそもpタグの必要性を感じないです。

しょーご

ざっと見た感じ、ここだけ気をつければ良さそうかなと思います。

❹アコーディオンの開閉やフォーム機能は飛ばす

iSaraサイトではアコーディオンやフォームがありますが、これはjQueryやWordPressなどの勉強が必要になってきます。

なので、とりあえず見た目だけ再現できればいいかと思います。

また、非常に長いので、全部やる必要もないかと思います。

ファーストビューは最低でも、終わらせたいですね。

このタイプの利点は、検証ツールで答えをいつでも見られること。詰まっても必ず前に進めるので、一番最初の1本に向いています。

注意点は、模写OKと明示されているサイトを選ぶこと。無断で公開サイトを再現してネット上にアップするのは避けてください。

タイプ②：模写専用のデモサイト（Codejump）

Codejump（旧Codestep）は、模写用のデモサイトが難易度別に用意されている無料の学習サイトです。入門編・初級編・中級編・上級編・応用編と段階が分かれています。

実在サイトの模写との違いは、デモサイトがそもそも模写の練習用に作られている点です。実在サイトは商用の都合で複雑な作りになっていることが多いのですが、Codejumpのデモは学習に必要な要素だけで構成されています。

このタイプのメリット

難易度が明示されているので、自分のレベルに合ったものを選べる
各課題にレイアウト構成図（ヒント）とコーディング例のソースコードがある
制作したサイトはポートフォリオに掲載してOKと公式に明記されている

注意点

答えのコードがあるぶん、写経で終わらせてしまいやすい。必ず自力で書いてから開くこと

詳細は「HTML/CSSコーディング練習サイト7選【無料あり】」でも解説しています。

タイプ③：デザインデータから作る

模写修行は、名前に「模写」と入っていますが、実際にはXDのデザインデータをもとにコーディングする教材です。

初級から上級まで9教材が完全無料で、LINE登録でアクセスパスを受け取ると使えるようになります。

セクション単位でサンプルコードと解説が用意されているので、1サイト丸ごと作り切ってから答え合わせという形式で力尽きてしまう人には向いています。

無料コーディング練習所も同じくデザインデータ配布型で、入門編のカフェサイト1ページから上級編の企業サイト8ページまで用意されています。1課題あたり2万字級の解説がついているのが特徴です。

まさひろくん

結局どれからやればいいんでしょう？

しょーご

検証ツールで答えを見られる①か②から1本。それが終わったら、③には行かずにデザインカンプからのコーディングに進んでOKです。

③は実質もうカンプからのコーディングなので。

模写コーディングの具体的なやり方【7手順】

ここからは模写コーディングの具体的なやり方を、手順に沿って解説します。

模写コーディングの7手順

模写する範囲とルールを決める
作業ディレクトリと素材を揃える
サイトをブロックに分解する
HTMLの雛形を作成する
HTMLだけを最後まで書く
CSSを当てて表示を合わせる
レスポンシブと全体の見直し

❶模写する範囲とルールを決める

最初にやるべきなのは、どこまでやるかを決めることです。

縦長のLPを全部やろうとすると、まず終わりません。「ファーストビューまで」「3セクション目まで」と先に区切ってください。

あわせて、自分の中でルールも決めておきます。

元サイトのCSSは、何分詰まったら見ていいことにするか
jQueryが必要な動きは飛ばすのか、やるのか
フォームは見た目だけ作るのか

しょーご

ここを決めずに始めると、気づいたら元サイトのコードを写しているだけになりがちです。

❷作業ディレクトリと素材を揃える

まずは作業用ディレクトリ（フォルダ）を用意します。

一般的には以下のような構造になるかと思います(imgの中に画像やアイコンなどを入れるイメージ)

iSaraの場合、サイトからダウンロードした素材もimgに入れていきましょう。

❸サイトをブロックに分解する

いきなり書き始めず、先に元サイトを見ながらブロックに分けます。

ヘッダー／メインビジュアル／サービス紹介／実績／お問い合わせ／フッター、というように、大きな箱を上から順に並べていくイメージです。

このブロック分けの感覚は実務に入っても使うので、模写の段階から意識しておくと後が楽になります。

❹HTMLの雛形を作成する

HTMLの最初の雛形を作成しますが、忘れがちな以下の点は確実に押さえて下さい。

title	サービス名や企業の名称を入れる
description	説明文を入れる
リセットCSS	ブラウザデフォルトのCSSが邪魔なので消す。個人的にはdestyle.cssなどが好み。
自分のCSS読み込み	リセットCSSの後に読み込み。ファイルパスが異なると読み込めない

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ここにタイトルを入れる</title>
  <meta name="description" content="ここにディスクリプションを入れる。">
  <link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
</body>
</html>

❺HTMLだけを最後まで書く

ここが最も差がつくところです。

CSSを書きたくなるのを我慢して、まずHTMLだけを最後まで書いてください。

CSSを当てながらHTMLを書くと、見た目を合わせるためだけのdivが無限に増えていきます。文字だけが縦に並んだ状態で一度完成させると、構造そのものを考える時間が生まれます。

まさひろくん

見た目が何もできないと不安になりませんか？

しょーご

最初は不安になると思います。でもこの順番を守れる人は、クラス名の付け方が一気に上手くなりますよ。

❻CSSを当てて表示を合わせる

あとは、元サイトを見つつコーディングして表示を合わせていきます。

VSCodeのLive Serverを起動しながら進めましょう。

検証ツールで色や大きさ、余白、フォントなどを確認することができます。

font-familyについてはbodyに一括指定するのが一般的なので、bodyのCSSを確認して合わせておくといいですね。

難しい部分があれば、HTML,CSSのコードをカンニングしてもOKです。

模写コーディングはとにかく「それっぽくコーディングして成功体験を積んで、早めにデザインカンプからのコーディングに移動して正確性を高める」ことを主眼としています。

❼レスポンシブと全体の見直し

一通りコーディングができたら、レスポンシブの挙動など実際のサイトと見比べつつ、どれぐらい再現できているかを確認してください。

私がiSaraに通っていた時はメンターの方に模写作品のレビューをしてもらってましたが、レスポンシブでの崩れの指摘が特に多かった印象です。

タブレット付近（700px~1000px）とかは要注意ですね。

しょーご

模写の段階から、表示崩れに敏感になれると素晴らしいです。

模写コーディングはいつ卒業する？

模写コーディングは、あくまで「デザインカンプからのコーディング」に挑戦するための橋渡しでしかありません。

ここを勘違いして模写を5本、10本と続けてしまう人がいますが、時間の使い方としてはかなりもったいないです。

模写をいくら続けても身につかない3つのこと

デザインカンプを読む力：実務で渡されるのはFigmaやPhotoshopのカンプであって、完成したWebサイトではありません。模写では「カンプから数値を拾う」工程が一度も発生しないので、この力は永遠に身につきません。
余白と文字サイズの正確さ：模写は検証ツールで答えを見られるぶん、なんとなく合わせる癖がつきます。実務では1pxのズレを指摘されるので、感覚コーディングのままだと通用しません。
ポートフォリオになる制作物：模写は既存サイトの再現なので、そのまま実績として出すことはできません。作った時間が成果物として残らないんです。