Webデザインの模写は、参考サイトを選んで構造を分析し、余白・色・フォントを観察してから再現する練習法です。初心者はLPや1ページ完結のサイトから始めると挫折しにくくなります。この記事では、サイト選びから振り返りまでを5ステップで解説します。
▶ 3日で初案件PR
この記事でわかること
Webデザイン模写の5ステップを具体的な手順で理解できます。余白・色・フォントなど観察すべき7項目と確認方法がわかります。完成後の差分メモで次回の模写の質を上げるサイクルを身につけられます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Webデザイン模写の上達は、観察の質が再現の精度を決めます。参考サイトを選んだら、まず目的・ターゲット・業界をメモし、構造をワイヤーフレームで整理してから手を動かすと、1回の模写から得られる気づきが大きく変わります。初心者はLPや1ページ完結のサイトを1本やりきることから始め、完成後に差分をメモするサイクルを繰り返すことが、実案件のスピードと質につながります。
最初に確認すること
模写を始める前に、手元にあるサイトが「LP・1ページ完結サイト・多ページ企業サイト」のどれかを確認してください。初回はLPか1ページ完結サイトを選ぶと、1回の練習で構造の全体像をつかみやすくなります（所要時間の目安：確認に2〜3分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めればいいか分からない | Webデザイン模写は5ステップで進める | 5分 |
| サイト選びで迷っている | 模写に適したサイト選びは業種と難易度で決まる | 4分 |
| 何を観察すればいいか分からない | 観察すべき7項目は余白・色・フォントから始める | 5分 |
| FigmaやCSS等のツール活用で迷っている | 検証ツールとFigmaを使った模写の進め方 | 5分 |
| 振り返り・答え合わせのやり方を知りたい | 模写は完成後の差分メモで次回に活かす | 3分 |
Webデザイン模写は5ステップで進める
何から手をつければいいか迷う時間は、ステップを先に決めておくだけで大幅に減ります。5つの手順を順番に踏むと、1回の練習から得られる学びが安定します。
ステップ1：参考サイトを選んで目的をメモする
模写を始める前に、題材を1つ選んでメモを書きます。書く内容は「このサイトの目的は何か（商品販売・採用・ブランディング等）」「ターゲットはどんな人か」「どの業界のサイトか」の3点です。この3点を書いておくと、後の観察フェーズで「なぜこのレイアウトなのか」を考える軸になります。サイトを見て「きれいだな」で終わらず、設計の意図を読む習慣がここから始まります。なお、フリーランスのWebデザイナーとしてポートフォリオを充実させたい方にとっても、模写で得た観察力は案件獲得に直結します。
ステップ2：サイト全体の構造をワイヤーフレームで整理する
参考サイトを開いたら、ヘッダー・ファーストビュー・コンテンツエリア・CTA・フッターという順に、手書きまたはFigmaで骨格を描きます（所要時間の目安：15〜20分）。この段階では細かいデザインを再現するのではなく、「どのブロックが何番目に来るか」「CTAがどこに置かれているか」を把握することが目的です。ワイヤーフレームを一度描くと、後でコーディングやデザインの実装順が決めやすくなります（Webデザインの模写の手順やメリット、注意点）。
ステップ3：余白・色・フォントを観察して記録する
構造を把握したら、デザインの細部を観察します。観察の順番は余白→色→フォント→行間→画像比率の順が作業しやすくなります。この段階で検証ツール（ブラウザの開発者ツール）を使うと、フォントサイズやカラーコードを正確に確認できます。スクリーンショットを画面の横に並べて表示しながら進めると、見比べる動作が減って観察に集中しやすくなります（正しいwebデザイン模写のやり方）。
ステップ4：FigmaまたはHTML/CSSで再現する
観察メモをもとに、Figmaでデザインを再現するか、HTML/CSSで実装します。HTMLで骨組みを先に組み、その後CSSで見た目を調整する順が、コードの構造を整理しやすくなります（WEB制作初心者のコーディング練習に「模写」）。余白の数値は最初から1px単位で合わせようとせず、見た目の印象を近づけることを優先します。数値の正確さは、次のステップの答え合わせで確認します。Webデザインの配色に迷う場合は、配色は3色70-25-5%のルールを参考にすると整理しやすくなります。
ステップ5：完成後に差分をメモして次回に活かす
再現が終わったら、参考サイトと並べて「どこがずれているか」を確認します。ずれた箇所は検証ツールで正確な値を確認し、メモとして残します。このメモが次の模写の出発点になります。「余白の数値を最初から確認せずに進めたら、フッターで大きくずれた」といった失敗も、記録しておくと次回の判断材料になります（WEBデザイン模写のやり方｜初心者向けの手順を紹介）。
CHECK
▶ 今すぐやること: 手元にある参考サイト候補を1つ開き、「目的・ターゲット・業界」の3点を紙またはメモアプリに書き出す（3分）
Q: 模写はトップページだけやれば十分ですか？
A： 初回はトップページ1ページを最後まで仕上げることを優先します。慣れてきたら、サービスページや採用ページなど目的が異なる下層ページを追加すると、観察の幅が広がります。
Q： FigmaとHTML/CSSはどちらで模写すべきですか？
A： 目的によります。デザインの配色・レイアウト・フォントを身につけたい場合はFigma、コーディングのスピードと構造理解を上げたい場合はHTML/CSSが向いています。両方を別の機会に試すと、それぞれの役割が明確になります。
模写に適したサイト選びは業種と難易度で決まる
選び方に基準を持つと、難しすぎて途中で止まるか簡単すぎて学びが少ない状態を避けられます。3つの判断基準を順番に確認してください。
初心者はLPや1ページ完結サイトから選ぶ
いきなり多ページのコーポレートサイトを選ぶと、ページ間の共通部品やナビゲーション設計まで対象になり、1回の練習が終わりません。最初はLP（ランディングページ）や、スクロールで完結する1ページ型のサイトを選びます（Webデザインの模写の手順やメリット、注意点）。ページが1枚に収まると、ヘッダーからフッターまでの流れを1回でつかめます。
実務で扱う業種または苦手な業種から選ぶ
「きれいなサイトを選ぶ」より「自分が案件で受けやすい業種のサイト」を選ぶと、練習が実案件に直結しやすくなります（Webサイト模写のやり方：Webデザイン力をアップしたい方に）。整骨院・カフェ・美容室など、よく依頼される業種か、自分が苦手と感じる業種のサイトを選ぶのが一つの判断基準です。苦手と感じたサイトほど早めに模写しておくと、後で楽になります。フリーランスとしてポートフォリオを充実させるうえでも、業種別の模写実績は説得力ある実績として機能します。
多ページサイトは2〜3ページをピックアップして進める
慣れてきて多ページのサイトを選ぶ場合も、全ページを模写する必要はありません。目的が異なるページを2〜3枚選び、それぞれの設計の違いを比較しながら進める方が、1ページあたりの学びが深くなります（Webサイト模写のやり方：Webデザイン力をアップしたい方に）。「トップページ＋サービスページ」の組み合わせで、CTAやビジュアルの扱いがどう変わるかを見比べると、設計の意図が見えてきます。
Q: 無料で模写題材を探すにはどうすればいいですか？
A： Awwwards・Behance・国内の制作会社のコーポレートサイトが参考になります。模写はあくまで練習目的に限り、成果物を公開する際には著作権に注意してください。
Q： 同じサイトを何度も模写してもよいですか？
A： 観察テーマを変えれば同じサイトを複数回使っても問題ありません。1回目は「余白だけに集中」、2回目は「配色のルールを言語化する」など、テーマを1つに絞ると繰り返しの練習が単調になりません（WEBサイト模写をFigmaでやってみる！）。
Q： 著作権上の注意点はありますか？
A： 模写は個人の学習目的に限り実施します。再現したデータを外部に公開したり、クライアントへの納品物として使用したりすることは著作権上の問題が生じます。成果物の扱いには注意してください。著作権の基本的な考え方を理解しておくと、実案件でのトラブル防止にもなります。
観察すべき7項目は余白・色・フォントから始める
観察項目を先に決めておくと、「雰囲気はそれらしいけれど何かが違う」という再現を防げます。7項目を3つのグループに分けて順番に確認すると、作業の抜けが減ります。
余白・行間・フォントサイズを先に確認する
観察の出発点は余白・行間・フォントサイズの3つです。この3つは、デザインの「詰まっている感」「余裕がある感」を決める要素で、コードの再現でも最初に影響が出やすい箇所です。検証ツールで値を確認しながら、自分が「感覚で見ていた余白」と実際の数値のズレを確かめると、数値を読む感覚が身につきます。余白の確認を後回しにするほどレイアウトが崩れる箇所が増えるため、最初に着手してください。
配色・コンテンツ幅・画像比率を記録する
次に、配色（メインカラー・サブカラー・アクセントカラーの3色構成）、コンテンツ幅（最大幅の設定値）、画像の縦横比を記録します。検証ツールを使うと、カラーコードとコンテンツ幅の数値を直接確認できます（超詳しいサイトトレースの方法）。画像の比率は「縦横どちらに統一されているか」を見るだけでも、サイト全体の統一感の作り方が分かります。見やすい配色の基本ルールも参照しながら観察すると、配色の意図を言語化しやすくなります。
レイアウトパターンとレスポンシブ時の変化を観察する
最後に、セクションごとのレイアウト（左右2カラム・全幅・カード型など）と、スマートフォン表示での変化を確認します。PCとスマートフォンで画像の縦横比やカラム数が変わる箇所を観察しておくと、CSSを書くときにブレークポイントの設定判断がしやすくなります（WEBサイト模写をFigmaでやってみる！）。「このセクションはPCで3カラムなのにスマートフォンでは1カラムになっている」という観察は、実案件のレスポンシブ設計でそのまま使える判断材料です。
Q: 観察に時間をかけすぎてしまいます。どう区切ればいいですか？
A： 7項目すべてを1回でやろうとせず、1回の模写で観察テーマを1〜2つに絞る方法があります。「今回は余白と行間だけ集中して見る」と決めると、観察の精度が上がります（デザイン力を加速する模写修行）。
Q： 検証ツールの使い方が分からなくて詰まります。
A: ブラウザで参考サイトを開き、右クリック→「検証」または「開発者ツール」を選択します。要素を選択すると、右側のパネルにfont-size・color・paddingなどの値が表示されます。最初は「フォントサイズだけ確認する」など用途を1つに絞って使い始めると、操作に慣れやすくなります。
PR提供: 日本デザインスクール（デザスク）
自分の模写レベルを3分で診断する
模写の練習を始める前に、今の自分の段階を確認すると、取り組む素材の難易度が決めやすくなります。
Q1: これまでWebデザインの模写を完了させたことがありますか？
Yesの場合はQ2へ進んでください。Noの場合はResult Aが該当します。
Q2: 完了した模写でHTML/CSSを使いましたか？
Yesの場合はQ3へ進んでください。No（Figmaのみ）の場合はResult Bが該当します。
Q3: 完了した模写でレスポンシブ対応まで実装しましたか？
Yesの場合はResult D、Noの場合はResult Cが該当します。
Result A: 初回の模写 → LP1ページをFigmaまたはHTML/CSSで完成させることを目標にする
LPや1ページ完結のシンプルなサイトを選び、ヘッダーからフッターまでを1回やりきることを優先します。完成度より「最後まで完了させた経験」を作ることが次のステップにつながります。
Result B: Figma完了 → 同じサイトをHTML/CSSで再現する
Figmaで再現できているなら、次は同じサイトをHTML/CSSで実装します。デザインと実装の両方を経験すると、コーディング時に「なぜこの余白なのか」を自分で判断できるようになります。
Result C: HTML/CSS完了・レスポンシブ未対応 → 過去の模写にブレークポイントを追加する
完成済みの模写データにスマートフォン対応を追加するだけでも、レスポンシブの実装パターンが身につきます。新しいサイトを選び直すより、知っているサイトにレスポンシブを追加する方が差分の理解がしやすくなります。
Result D: 全対応済み → 観察の言語化ステップへ進む
再現の精度より「なぜその設計か」を言語化する練習に移ります。模写後に「このCTAがここに置かれている理由は何か」を100文字程度でメモする習慣が、提案書や制作の根拠説明に直結します。
Q： 診断結果が実際の自分のレベルと合わない気がします。
A: 診断はサイズ感の把握が目的なので、合わないと感じたら1段階下の素材から始めてください。「もう少し簡単なものから」という判断は、挫折を防ぐための合理的な選択です。
Q： 模写を何本やれば実案件に使えるスキルになりますか？
A： 本数よりサイクルの質で変わります。「観察→再現→差分メモ」のサイクルを1本ごとに完了させることを繰り返す方が、10本やっても振り返りをしない状態より実案件への転用がしやすくなります。
検証ツールとFigmaを使った模写の進め方
道具の使い方が分からないまま進めると、観察で時間がかかりすぎて肝心な再現の練習時間が減ります。よく使う操作を2つに絞って覚えると、作業が安定します。
検証ツールで確認するのはフォント・カラー・幅の3値
ブラウザの検証ツール（開発者ツール）で模写中に確認すべき値は、フォントサイズ・カラーコード・コンテンツ幅の3つが中心です。操作の基本は、確認したい要素を右クリック→「検証」でパネルを開き、右側のStylesタブで値を読む流れです。慣れるまでは「1つの値だけ確認する」を繰り返すと、操作で詰まる場面が減ります（超詳しいサイトトレースの方法）。検証ツールは答え合わせにも使えるため、再現した後に「実際の値と自分の値を比べる」用途でも役立ちます。Chrome拡張機能を活用するとさらに効率的に値を確認できます。
FigmaではAuto LayoutとFrame設定を先に確認する
Figmaで模写する場合、最初にAuto Layoutの方向（縦・横）とFrameの幅をどう設定するかを決めると、後の配置がずれにくくなります。参考サイトを見ながら、まずフレームをヘッダー・FV・コンテンツ・フッターの単位で区切り、その中に要素を配置する流れが作業しやすくなります。フレーム構成を先に決める方が、「なんとなく要素を置き始める」より修正の手戻りが減ります（WEBサイト模写をFigmaでやってみる！）。
コードを読んで構造の意図を確認する
HTMLとCSSを読む練習として、再現後に検証ツールでclass名の付け方を確認する方法があります。「なぜこのclassにこの命名がされているか」を追うと、コード設計の考え方を観察できます。最初は1つのセクションのclassを読むだけで十分で、全コードを読もうとする必要はありません（コードを読みながら模写する考え方）。実案件でコーディングの打ち合わせをするときに、コードの意図を説明できると、クライアントやチームへの共有がしやすくなります。
CHECK
▶ 今すぐやること: 手元の参考サイトをブラウザで開き、任意のテキスト要素を右クリック→「検証」でfont-sizeの値を1つ確認する（2分）
Q: Figmaを使ったことがないのですが、模写に必要ですか？
A： 必須ではありません。デザインの再現を練習したい場合はFigmaが便利ですが、コーディングの練習が目的であればHTML/CSSだけで始められます。Figmaを使う場合、無料プランで基本的な模写練習に必要な機能を使えます（2025年時点。プラン内容はFigma公式サイトでご確認ください）。
Q： 検証ツールで見た値とFigmaの値が合いません。
A: 単位（pxとrem）の違いや、ブラウザのデフォルトスタイルが原因である場合があります。まずpx換算で比較し、それでもずれる場合は親要素のスタイルが影響していないかを確認します。
模写は完成後の差分メモで次回に活かす
模写を1本やりきっても振り返りをしないと、「なんとなく終わった」になります。差分の記録が、次の模写を意味のある練習にします。
完成後は参考サイトと並べてズレを確認する
再現が終わったら、参考サイトと自分の制作物を画面上に並べて表示し、ズレている箇所を目視で特定します。「余白が詰まっている」「テキストが大きい」など、感覚でズレを言葉にした後で、検証ツールを使って正確な差分の値を確認します。値のズレより先に「どこがズレているか」を言葉で特定する習慣が、自分の再現パターンの癖を見つけやすくします。
差分はテーマ別に短くメモして蓄積する
ズレを確認したら、「余白の数値は後から確認する」「行間は先に計算してから進める」などのテーマ別メモとして残します（デザイン力を加速する模写修行）。「なぜズレたか」を1文で書くだけで、次の模写での同じミスが減ります。「ファーストビューのコンテンツ幅をFigmaで先に確認していれば、後でCSSを2回書き直す手間がなかった」といった記録が積み上がると、自分が詰まりやすいポイントが分かってきます。
慣れてきたら設計意図を言語化する
ある程度再現ができてきたら、差分メモと並べて「なぜこの設計なのか」を短く書く習慣を追加します。「CTAボタンをファーストビューの中央に置くことで、訪問直後の離脱を防ぐ構造になっている」という観察を書き残すと、自分がデザインを提案する場面で根拠として使えます（正しいwebデザイン模写のやり方）。この段階になると、模写が「写す練習」から「設計を読む練習」に変わります。
Q: 差分メモはどんなツールに残すといいですか？
A： NotionやGoogleドキュメントなど、後から検索できるツールが使いやすくなります。模写した日付とサイト名を一緒に記録しておくと、自分の成長の変化が見返しやすくなります。
Q： 1回の模写でどのくらい時間をかければいいですか？
A： 題材の難易度と観察テーマの範囲で変わります。LP1枚でFigmaの場合、観察・再現・振り返りまで合計3〜5時間を目安にする練習者が多くいます。時間をかけすぎることより「1本完了させてメモを残す」サイクルを優先する方が、練習の継続につながります。
Webデザイン模写を上達させる：観察の質が次の一手を決める
Webデザインの模写は、参考サイトを選んで目的・ターゲット・業界をメモし、構造をワイヤーフレームで整理してから余白・色・フォントを観察し、再現後に差分をメモするサイクルを繰り返す練習法です。初心者はLPや1ページ完結のサイトを1本やりきることから始め、完成後の振り返りを1文でもメモに残すことが次回の練習の質を上げます。観察テーマを1〜2つに絞ると、1回の模写から得られる気づきが深くなり、実案件での判断スピードに直結します。
模写は「正確に写すこと」が目的ではなく、「設計の意図を読めるようになること」が目的です。最初の1本を完了させた経験が、次の難易度への判断基準になります。1サイクルを丁寧に回してください。
| 状況 | 次の一歩 | 所要時間 |
| 初めての模写 | LP1ページを選んで目的・ターゲット・業界をメモする | 3分 |
| サイト選びで迷っている | 実務で関わりやすい業種のサイトを1つに絞る | 5分 |
| 観察で詰まっている | 「余白だけ」などテーマを1つに絞って観察する | 5分 |
| ツールの使い方が分からない | 検証ツールを開いてfont-sizeを1つ確認する | 2分 |
| 振り返りをしていない | 完成後に差分を1文メモして保存する | 5分 |
Webデザイン模写のやり方に関するよくある質問
Q: 模写はどのくらいの期間続ければいいですか？
A： 「観察→再現→差分メモ」を1本ごとに完了させる習慣が定着してきたら、次の難易度の素材に移る判断をしやすくなります。本数で区切るより「1本完了→振り返り→次の素材」を繰り返すことを優先します。
Q： コードを読む練習は模写と並行してすべきですか？
A： 再現後に1セクション分のclass名を確認する程度から始めるのが作業しやすくなります。「完成した後に気になる箇所のコードを1箇所だけ読む」から始めると、コードを読む習慣がつきやすくなります（コードを読みながら模写する考え方）。
Q： Figmaで模写する場合、プラグインは必要ですか？
A： 必須ではありません。スポイトツールとAuto Layoutの基本操作を使えると、色の抽出とレイアウト構成の再現が進めやすくなります。基本操作に慣れてから必要に応じてプラグインを追加する順が、操作で詰まる場面が減ります（WEBサイト模写をFigmaでやってみる！）。