Webデザインの模写は「3つの卒業基準」を満たした時点が区切りです。絶対的な本数基準は存在せず、「一部なら自力で組める」「構成を説明できる」「崩れの原因を追える」状態になれば次のステップへ進めます。この記事では、段階別の模写範囲と、フリーランスの実務につながるやめどきの判断方法を解説します。
▶ 3日で初案件PR
この記事でわかること
「何本やれば卒業か」ではなく「3基準で区切る」考え方を理解できます。5段階の範囲設定で模写の進め方を具体化できます。ポートフォリオ掲載の可否を4点で判断できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
模写は「完璧に再現すること」が目的ではなく、構成・余白・実装の意図を理解することが目的です。「何ページやれば卒業」という固定基準はなく、自力で部分的に組める、構成を言語化できる、崩れの原因を特定できる——この3つが揃った段階で次の学習に移るのが実務的な判断です。ポートフォリオへの掲載は学習目的であれば可能ですが、公開方法には注意が必要です。
最初に確認すること
模写を始める前に「何を理解したいか」を1つ決めます。レイアウト構成なのか、余白の取り方なのか、HTML/CSSの実装手順なのかを先に決めると、どこまでやれば十分かの判断が3分でできます。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 模写を始めたばかりで何をどこまでやるか分からない | Webデザイン模写は5段階で範囲を広げる | 5分 |
| 模写のやめどきが分からず延々と続けてしまっている | 模写のやめどきは3基準で判断する | 3分 |
| ポートフォリオに載せてよいか迷っている | 模写作品のポートフォリオ掲載は条件付きで可能 | 3分 |
| フリーランスの実務に直結する模写をしたい | 実務直結の模写5つのノウハウ | 5分 |
Webデザイン模写は5段階で範囲を広げる
模写は最初から1ページ丸ごと再現しようとすると、どこで詰まっているかが分からなくなります。部分から全体へ広げる順序で進めると、学習の進捗が見えやすくなります。
段階1: 文字とボタンだけの単純なバナーから始める
最初の模写対象は、テキストとシンプルな図形で構成されたバナーや1カラムのLPセクションが適しています。画像が少なく、装飾も最小限のものを選ぶと、フォント・文字サイズ・余白の関係だけに集中できます。最初に複雑なビジュアルのTOPページを選んで進め方に迷い、結果的にバナー1枚に戻るケースは珍しくありません。
模写対象の選び方として、業界や目的を先に調べる方法が有効です（参考サイトの目的・ターゲット調査｜ジャパンデザイン）。「この会社は誰に何を伝えたいサイトか」を把握してから手を動かすと、なぜそのデザインになっているかの理解が深まります。
CHECK
▶ 今すぐやること: 模写するサイトを1つ選び、「このサイトの目的」を1文で書き出す（3分）
Q: バナーの模写とサイト模写は別物として考えるべきですか？
A： 別物として区別する必要はありません。バナーもサイトも「なぜその構成か」を理解する練習という点では同じです。バナーはパーツが少ないぶん、1つの要素に集中しやすい利点があります。
Q： 練習するサイトはどんな基準で選べばよいですか？
A： 初心者であれば、文字量が多すぎず、アニメーションや動画がない静的なサイトを選ぶと進めやすいです（初心者向けの模写手順と部分模写の考え方｜webdeza）。
段階2: ヘッダー・フッター・メインビジュアルの部分模写
1ページ全体を一気に模写しようとするより、ヘッダーだけ、フッターだけと部品単位で再現する方が詰まった箇所を特定しやすくなります。
ヘッダーはロゴ・ナビゲーション・レイアウトの3要素で構成されることが多く、この部分だけでも余白・フォントサイズ・配色の判断が数十個含まれています。1つの部品を丁寧に再現する経験が、後のページ全体模写の速度を上げます（初心者でもできる！デザイン模写のやり方｜webdeza）。
部分模写で迷いやすいのは「この細かい線は再現すべきか」という判断です。1px程度の細部よりレイアウトの骨格を先に完成させてください。細部への迷いが30分以上続くようなら骨格に戻るのが正解です。
Q： 部分模写だけでは不十分ですか？1ページ全体もやるべきですか？
A： 部分模写の積み重ねで1ページ全体の模写と同等の学習効果を得ることは十分可能です。ただし、ページ全体を通した流れ（情報の優先度やスクロール体験）を理解したい場合は、TOPページ全体を1本通す経験も有効です。
Q： メインビジュアルの画像は自分で用意する必要がありますか？
A： 著作権上の観点から、元サイトの画像をそのまま使うことは避け、フリー素材に差し替えるか、同サイズのグレーのプレースホルダーで代替するのが無難です。
段階3: TOPページ全体を1本通す
部分模写を数回経験したら、TOPページ全体を1本通す段階に移ります。この段階で重要なのは「完璧な再現」ではなく「デベロッパーツールで比較して修正する」サイクルを回す経験です。
再現後の比較手順として、Chrome DevToolsを使って元サイトのフォント・余白・色コード・要素サイズを確認し、自分の再現物との差分を特定します（比較と修正による上達方法｜ririan-dsn）（模写コーディングの実践手順｜mikimatsunaga）。差分を3か所以上特定して修正するサイクルを1本のTOPページで完結させることが、この段階の目安です。
制作時間を記録しておくと次の模写との比較になります。TOPページの模写に要する時間は個人差が大きく、回数を重ねるごとに短縮されます。ただし速度よりも「修正サイクルを回せたか」が先の指標です。
Q： デベロッパーツールの使い方がわからなくても模写はできますか？
A： デベロッパーツールなしでも模写自体はできます。ただし、比較と修正のサイクルが難しくなるため、基本的な使い方（要素の検証と数値確認）は模写と並行して習得する方が効率的です。
Q： TOPページ全体の模写は何本やればよいですか？
A： 1〜3本が現実的な目安です。ただし「本数」より「修正サイクルを回しながら差分を特定できたか」を判断基準にしてください。同じミスを繰り返していると感じるなら、本数より振り返りの質を変える方が先です。
段階4: 下層ページを数ページ選んで模写する
TOPページだけで模写を終える人が多いですが、実際のWebサイトは下層ページで情報の密度が変わり、レイアウトパターンも異なります。TOPページを1本終えたら、同じサイトの下層ページを2〜3ページ追加で模写すると、TOPと下層の設計の違いが見えてきます（TOPだけでなく下層ページも含める考え方｜tane-be）。
下層ページを選ぶ基準は「サービスページ・記事ページ・お問い合わせページ」から1種類ずつ選ぶと、情報量とレイアウトの幅を両方経験できます。お問い合わせページは要素が少ないため短時間で完成しやすく、フォームのスタイリング練習にもなります。
TOPで使った要素がそのまま再利用される箇所と、新しいパターンが出る箇所の両方を経験することで、コンポーネントの考え方が身につきます。
Q： 下層ページは必ず模写しなければなりませんか？
A： 必須ではありませんが、フリーランスのWebデザイナーとして実案件を受ける場合、クライアントから下層ページの制作も依頼されるケースが多くあります。TOPだけで終わると、実案件で初めて下層ページのレイアウトに悩むことになるため、練習段階で1〜2ページ経験しておく方が実務への移行がスムーズです。
Q: どのサイトの下層ページを選べばよいですか？
A： TOPページを模写したサイトと同じサイトの下層ページを選ぶのが最初は現実的です。一貫したデザインシステムの中で、ページごとの違いを観察できます。
段階5: レスポンシブ表示を確認して崩れの原因を特定する
スマートフォン表示まで確認すると、CSSの理解度が明確に分かります。PC表示では問題なく見えた要素が、ビューポートを狭めると崩れる箇所が必ず出てきます。崩れた箇所を放置せず、原因を特定して修正する練習がこの段階の目的です。
Chrome DevToolsのデバイスモードで320px・375px・768pxの3サイズを確認し、崩れた箇所をリストアップする方法が実務でも使われます（模写の正しい手順と答え合わせ｜stand-4u）。崩れの原因がwidth指定なのかflexboxの設定なのかmarginなのかを特定できるようになると、実案件のデバッグ作業に直接つながります。
レスポンシブ確認まで含めると1本の模写に要する時間は増えますが、この段階まで終えた模写1本は、レスポンシブを省いた模写3本より実務に近い経験になります。
Q： レスポンシブまで再現できなかった場合は失敗ですか？
A： 失敗ではありません。「なぜ崩れたか」の原因特定に価値があります。修正しきれなくても、「width: 100%を設定していなかった」「overflow: hiddenが必要だった」という原因を記録しておくと、次の模写での再発を防げます。
Q： スマートフォン表示はどこまで再現すれば十分ですか？
A： 要素が縦に並ぶ、テキストが読みやすいサイズで表示される、ボタンがタップしやすい位置にある——この3点が確認できれば実務的には十分な目安です。ピクセル単位の完全一致よりも、ユーザーが使えるレベルの再現を優先してください。
CHECK
▶ 今すぐやること: Chrome DevToolsのデバイスモードで模写済みページを375pxに設定して崩れ箇所を1か所特定する（10分）
模写のやめどきは3基準で判断する
「もう少し続けるべきか、次に進むべきか」という迷いは、模写を続けている人なら共通して経験します。3つの基準を確認すると、続けるか進むかの判断が明確になります。
判断基準1: 部分的に自力で組めるか
ゼロから全部は難しくても、「ヘッダー部分なら見本なしで作れる」「カード型のレイアウトなら自力で組める」という状態が1〜2か所あれば、模写の効果が出ています（模写のやめどきの考え方、卒業基準の体験談｜note）。
確認方法として、模写したページの特定のセクションだけを、元データを閉じた状態で再現してみます。見ながらなら作れるが見ずには作れない状態は、理解よりも写経に近い状態です。見ずに骨格まで組めるセクションが1つできれば、基準1をクリアとみなしてよいです。
判断基準2: 構成の意図を言語化できるか
「なぜメインビジュアルが画面幅いっぱいなのか」「なぜこのページはカラムが2列なのか」という問いに対して、自分なりの説明ができるかを確認します。答えが「そういうデザインだから」にとどまる場合は、構成の理解より再現作業が先行している状態です。
言語化の練習として、模写が終わった後に「このサイトのデザインで意図的だと思う判断を3つ書き出す」作業を追加します。「余白が広めなのはターゲットが上位層だから」「ボタンが目立つ色なのはCVRを上げるため」といった仮説でよく、正解は問いません。この作業が5分以内に書けるようになれば基準2をクリアとみなしてよいです（学習目的での模写と、目的設定・カスタマイズの考え方｜note）。
この言語化の習慣は、フリーランスのポートフォリオに作品を掲載する際の「制作意図の説明」にそのまま活用できます。
判断基準3: 崩れの原因を自力で追えるか
レスポンシブ表示が崩れた、意図した余白が出ない、といったトラブルが起きたとき、DevToolsを使って「どこの何の値が原因か」を10〜15分以内に特定できるかを確認します。毎回「なぜか分からないが直った」で終わっている場合は、デバッグの理解よりも試行錯誤に依存している状態です。
崩れの原因追跡を練習するには、自分の模写済みデータの特定のCSSを意図的にコメントアウトして崩れを作り、そこから原因を特定して戻す練習が有効です。この逆算練習を3回できれば、基準3の感覚が身につきます。
CHECK
▶ 今すぐやること: 模写したデータの1つのセクションだけを、元データを閉じた状態で再現してみる（15〜20分）
Q: 3基準がすべて揃わなくても次に進んでよいですか？
A： 1〜2基準を満たしていれば次の学習と並行する形で進んでよいです。3基準すべてを完全に満たすまで模写だけを続けると、学習全体の進行が遅れるリスクがあります。7割達成したら次も始めるという運用の方が実務的です。
Q： 何本の模写で3基準に達しますか？
A： 個人差が大きく、1本で達する人も5本かかる人もいます。本数より「修正サイクルを回したか」「言語化を試みたか」という行動の質が到達の速さに影響します。
模写でどこまで理解できているかを5項目で診断する
模写を続けているが「どこまで理解できているか」が見えにくい状況は多くあります。以下の5問に答えると、今の理解段階が分かります。
Q1: 模写したページのヘッダー部分を、元データなしでもう一度作れますか？
できる場合はQ2へ進みます。難しい場合は基礎の部分模写をもう1セット行う段階です。ヘッダー・フッター・カードの3パターンを「見ながら→見ずに」の順で繰り返してください。
Q2: 模写したサイトの「なぜこのデザインか」を3つ言語化できますか？
できる場合はQ3へ進みます。難しい場合は模写後の言語化作業を5分追加します。仮説でよいので「余白が広い理由」「ボタンの色の意図」を書き出す習慣をつけてください。
Q3: DevToolsで余白・フォントサイズ・色コードを元サイトと比較しましたか？
した場合はQ4へ進みます。していない場合は比較と修正のサイクルを段階3（TOPページ全体）で行います。差分を3か所以上特定する作業を追加してください。
Q4: スマートフォン表示を確認して崩れた箇所の原因を特定しましたか？
した場合はQ5へ進みます。していない場合は段階5（レスポンシブ確認）を追加します。崩れた箇所の原因を記録するだけでも次の模写に活きます。
Q5: 模写後に1か所でも自分なりにカスタマイズしましたか？
した場合は3基準の確認に進む段階です。やめどきの判断が可能な状態に近いです。していない場合は模写後に色かフォントを1か所変えてみます。変えることで「この要素がここに影響している」という理解が生まれます。
Q： Q1でできないと判断したら最初からやり直しですか？
A： やり直しではなく、「見ながら作る→見ずに骨格を作る」の2段階を追加するだけです。最初から再現しようとせず、レイアウトの骨格（大枠のボックス配置）だけを見ずに作ることから始めると現実的です。
Q： Q5のカスタマイズはどの程度の変更ですか？
A： フォントを1種類変える、メインカラーを別の色に変えるといった小さな変更で十分です。大規模な変更よりも「変えた結果が理解できるか」が重要です（学習目的での模写と、目的設定・カスタマイズの考え方｜note）。
CHECK
▶ 今すぐやること: Q1〜Q5を順番に確認し、最初に「No」となった設問のアクションを今日中に実施する（20〜30分）
PR提供: 日本デザインスクール（デザスク）
ポートフォリオ掲載は条件付きで可能
模写作品をポートフォリオに載せてよいか迷う人は多くいます。
学習目的の模写を掲載する際の4つの確認点
学習目的の模写をポートフォリオに載せること自体は、条件を満たせば可能とする考え方があります（模写デザインのポートフォリオ掲載注意点｜webdeza）。ただし、以下の4点を確認してから公開してください。
掲載前確認1: 元サイトのURLと「学習目的の模写」であることを明示する
模写作品として公開する場合、オリジナル作品と誤認されないよう「〇〇サイトの模写練習」と明記します。誤認させた状態での公開は、著作権上のリスクがあります。
掲載前確認2: 元サイトの規約に模写や再配布の制限がないかを確認する
サービス規約や利用規約に「商用利用禁止」「複製禁止」が含まれている場合、学習目的でも公開を控える方が安全です。規約が見つからない場合は運営元に問い合わせる方法があります。
掲載前確認3: 画像・テキストを元サイトからそのまま使っていないかを確認する
画像は著作権の対象になるため、フリー素材や自分で用意した素材に差し替えます。テキストもそのままでは元サイトのコンテンツになるため、ダミーテキストや自分で書き直した文章を使います。著作権の基本ルールを把握しておくと、こうした判断がスムーズになります。
掲載前確認4: 模写であることを踏まえた解説を加える
「このサイトを模写した理由」「学んだこと」「実装で詰まった点と解決方法」を3〜5文で添付すると、採用担当者に学習のプロセスが伝わります。模写だけの掲載より、分析・実装・振り返りのセットで見せる方が実力を示しやすくなります。
Q： 模写作品はポートフォリオの何割程度にすべきですか？
A： オリジナル作品と学習目的の模写作品を半々以下にとどめる方が安全です。模写が多い場合は、デザインアレンジを加えたものをオリジナルに近い扱いで追加する方法もあります。
Q： 企業のポートフォリオ選考で模写作品を見せることに問題はありますか？
A： 模写であることを明示したうえで提出する分には問題になることは少ないです。ただしフリーランス受注の文脈では、クライアントが依頼したい案件に近いオリジナル作品がある方が説得力が増します。模写と並行してオリジナル作品も1〜2点制作してください。ポートフォリオの作り方を参考にすると、実務につながる構成を設計しやすくなります。
CHECK
▶ 今すぐやること: 掲載予定の模写作品について4つの確認点を1項目ずつチェックする（30分）
実務直結の模写5つのノウハウ
【対象】: 模写を終えても構成の意図が分からないまま終わることが多い、初心者から中級者の方
【手順】: 模写するサイトのスクリーンショットを撮ります（2分）。紙またはFigmaの上でレイアウトの大枠だけをボックスで書き出します（10〜15分）。「なぜこの順番か」を書いたボックスごとにメモします（5分）。ワイヤーフレームを手元に置いた状態でHTMLの構造を組みます。CSSで再現した後、ワイヤーフレームと実装の差分を確認して記録します。
【コツと理由】: ワイヤーフレームを先に書くと、HTML構造を書く前に「divの入れ子がいくつ必要か」が見えてくるため、実装中のやり直しが少なくなります。実際の制作現場でもワイヤーフレームからHTML構造を決める流れは一般的であり、模写段階でこの順序を習慣化すると実案件への移行がスムーズになります。
【注意点】: ワイヤーフレームの完成度を上げることに時間をかけすぎる必要はありません。ボックスと矢印だけのラフで十分です。構造を頭に入れるための手段として5〜10分以内に切り上げてください。
ノウハウ2: デベロッパーツールで元サイトと3点比較して差分を記録する
【対象】: 模写が「完成した気がするが本当に合っているか確認できない」状態の方
【手順】: Chrome DevToolsを開き、元サイトの要素を選択して数値を確認します。自分の再現ファイルを隣に並べて、フォントサイズ・余白（paddingとmargin）・色コードの3点を比較します（10分）。差分を3か所以上リストに書き出します。リストの差分を1か所ずつ修正します。修正後に再度比較し、差分が2か所以下になったら完成とみなします。
【コツと理由】: 数値で比較すると「余白が8px違う」「フォントサイズが2px違う」という具体的な差分が見えます。この差分の特定と修正サイクルを繰り返すことで、デザインの精度感覚が身につきます。実務では細かな差分がレビューで指摘されることもあるため、「なんとなく」から「数値で確認する」習慣が実案件での修正回数を減らします（比較と修正による上達方法｜ririan-dsn）。
【注意点】: 全要素を完全一致させることはやらなくてよいです。色が多少違う、余白が数px違う程度であれば、それ以上の調整より次の模写に進む方が学習効率は高くなります。完全一致を目指して1つの模写に長期間かけた場合、後半の時間は収穫が少なくなります。
ノウハウ3: 模写後に色かフォントを1か所変えてカスタマイズする
【対象】: 模写は終わるがオリジナル制作への移行で止まってしまう方
【手順】: 模写が一通り完成した段階でデータを複製します。複製したデータのメインカラーを別の色に変えます（5分）。色を変えた結果、サイト全体の印象がどう変わったかを3文で書きます。フォントを別の書体に変えて同様に観察します。「この変更はこのターゲットには合わない」「この色ならこの業界に合う」という仮説を記録します。
【コツと理由】: 1か所のカスタマイズを加えると「この値を変えるとここが変わる」という変数への理解が生まれます。完全な模写だけでは気づきにくい「この要素がデザイン全体にどう影響するか」を体験的に理解できるため、オリジナル制作への橋渡しになります（学習目的での模写と、目的設定・カスタマイズの考え方｜note）。
【注意点】: カスタマイズの範囲を広げすぎる必要はありません。1〜2か所の変更に留めてください。変えすぎると「模写」でなく「リデザイン」になり、元のデザインの意図を見失います。最初は色だけ、次はフォントだけと1変数ずつ変える方が観察が明確になります。
ノウハウ4: 模写後に「なぜこの構成か」を3つ言語化して記録する
【対象】: 模写は終わるが次の案件制作で「どんなデザインにすればよいか」で詰まる方
【手順】: 模写が完成した直後に10分の振り返り時間を確保します。「このデザインで意図的だと思う判断」を3つ書き出します（例: 「余白が広いのはターゲットが上位層だから」）。書き出した3つについて「なぜそう判断したか」を1文ずつ追記します。合計6文の振り返りメモをファイルに保存します。次の模写を始める前に、前回の振り返りメモを1回読んでから開始します。
【コツと理由】: 実務では「なぜこのデザインにするか」をクライアントに説明する機会が必ずあります。言語化を模写のたびに行うと、デザインの根拠を説明する語彙が増えます。これはポートフォリオの説明文や、フリーランスとしての提案書にそのまま使えるストックになります（模写のやめどきの考え方、卒業基準の体験談｜note）。
【注意点】: 言語化の内容が「正解かどうか」を気にする必要はありません。「なぜか分からないが格好良いから」という記録でも、次の模写後に見返すと後から接続されることがあります。完全な説明より「仮説を記録する習慣」を先に作ることで、3本目以降の言語化の質が自然に上がります。
ノウハウ5: 制作時間を記録して再現精度と速度の両方を振り返る
【対象】: 模写を繰り返しているが「上達しているかどうか」が実感できない方
【手順】: 模写を始める前にタイマーを起動します。セクションごとに完了時刻をメモします（「ヘッダー: 40分」「メインビジュアル: 1時間20分」等）。模写全体の総時間を記録します。次の模写終了後に、前回と同じセクションの時間を比較します。時間が短くなっていないセクションがあれば、その箇所の原因を振り返ります。
【コツと理由】: セクションごとの時間を記録することで「どの部分でまだ詰まっているか」が数値で見えます。フリーランスの実案件では制作時間の見積もり精度が収入に影響するため、模写段階から時間を意識する習慣をつけることは、デザイン技術と切り離せない実務スキルになります。
【注意点】: 短時間での完成だけを目標にする必要はありません。速度よりも「前回詰まった箇所が今回スムーズになったか」を確認することが目的です。時間を短くしようとするあまり比較と修正のサイクルを省くのは逆効果です。「早く作れたが差分を確認していない」模写より「時間はかかったが差分を3か所修正できた」模写の方が実力向上につながります。
CHECK
▶ 今すぐやること: 次の模写を始める前にタイマーを起動し、セクションごとの完了時刻を記録する準備をする（5分）
Webデザイン模写は3基準で区切り次へ進む
模写のやめどきは「一部なら自力で組める」「構成の意図を言語化できる」「崩れの原因を追える」の3基準が目安です。絶対的な本数はなく、修正サイクルと言語化の習慣を積んだ段階で次の学習に移ることが実務的な判断です。
フリーランスのWebデザイナーとして実案件に取り組む際、模写で身につけた「構成を分析する目」「数値で差分を確認する習慣」「制作時間を記録する感覚」が直接使える場面があります。模写を練習と割り切らず、実案件のワークフローを模した形で進めることが、学習期間を短縮する現実的な方法です。
| 状況 | 次の一歩 | 所要時間 |
| まだ1本も模写をしていない | バナー1枚またはヘッダーの部分模写から始める | 1〜2時間 |
| 模写は終わるがやめどきが判断できない | 3基準の確認を1セット行う | 20〜30分 |
| TOPページだけ繰り返している | 同じサイトの下層ページを2ページ追加する | 2〜4時間 |
| 模写をポートフォリオに使いたい | 4つの掲載前確認を行い明示する | 30分 |
| 模写が終わったが次に何をすべきか分からない | カスタマイズ+言語化の2つを1本に追加する | 30〜45分 |
Webデザイン模写に関するよくある質問
Q: 模写はWebデザインの勉強に本当に必要ですか？
A： 必須かどうかは学習目標によりますが、既存のデザインを分析する目を養う方法として有効です。自力でゼロからデザインを考えることと、優れたデザインを分解して理解することの両方が実務では使えます。模写で分析力を上げながらオリジナル制作も並行する方法が多く採られています（Webデザインの模写の手順やメリット、注意点｜coeteco）。
Q： HTMLとCSSのコーディングができない状態でも模写はできますか？
A： デザインツール（FigmaやAdobe XD）を使った模写であれば、コーディング不要でレイアウトや配色の練習が可能です。ただしフリーランスとしてWeb制作の仕事を受ける場合、HTML/CSSでの実装模写も学習範囲に含める方が実務への移行がスムーズです（WEB制作初心者のコーディング練習に模写｜mikimatsunaga）。
Q： 1日どのくらいの時間を模写に使えばよいですか？
A： 集中して取り組める時間であれば1〜2時間が現実的な単位です。それより長くなる場合は、セクションを区切って「今日はヘッダーだけ」と範囲を決めると進捗が見えやすくなります。模写だけに全時間を使うより、言語化・カスタマイズ・振り返りの時間を合わせて確保する方が学習の質が上がります。
【出典・参照元】
学習目的での模写と、目的設定・カスタマイズの考え方｜note
Webデザインの模写の手順やメリット、注意点｜coeteco
初心者でもできる！デザイン模写のやり方と部分模写の考え方｜webdeza