模写練習に使うべきサイトは、目的（LP・ホームページ・バナー）と習熟度によって変わります。本記事では国内外のギャラリーサイト・練習サイトを目的別・難易度別に12サイト紹介し、実務に直結する選び方から振り返りまで解説します。
▶ 3日で初案件PR
この記事でわかること
模写の目的別に最適なサイトを12選で一覧できます。実務提案に使える業種別ストックの作り方と差分メモで成長を加速させる具体的な手順、ポートフォリオへの公開可否の判断基準も確認できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
模写練習の効果は、サイト選びの精度で大きく変わります。初心者はまず1ページで完結するLPから始め、余白・配色・フォントを観察してから再現する順番が実務のスピードアップに直結します。目的別に参照するギャラリーサイトを3〜5本に絞り込み、毎回同じ基準で観察することが、案件提案の引き出しを増やす最短経路です。
最初に確認すること
模写に使うサイトを探し始める前に、「何を学ぶための模写か」を1行で書き出してください。「LPの余白感覚を身につける」「バナーの文字組みを鍛える」など目的が決まると、使うサイトと観察ポイントが自動的に絞られます。所要時間は2分です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 何から始めればよいか分からない | Webデザイン模写は目的別に選ぶと上達が早い | 5分 |
| LP・ホームページ・バナーの練習先を探している | 目的別おすすめ模写サイト12選 | 8分 |
| 実務案件に近い感覚で練習したい | フリーランスが模写を実務につなげる5つの方法 | 7分 |
| 模写後に何を振り返ればよいか分からない | 模写の効果を高める観察チェックリスト7項目 | 4分 |
| ポートフォリオへの公開可否を確認したい | Webデザイン模写に関するよくある質問 | 3分 |
Webデザイン模写は目的別に選ぶと上達が早い
模写の練習先に迷う人は多いです。「とにかく良さそうなサイトを全部ブックマーク」という状態で練習を始めると、観察のポイントが分散して何も定着しないまま時間が過ぎます。目的を先に決めると、使うサイトと観察する要素が自然と絞られます。
模写とは何か・何が身につくか
模写とは、既存の優れたWebサイトのデザインやコーディングを真似て作成し、プロの技術を体験する学習方法です（Webデザインの模写の手順やメリット、注意点）。完成品を見ながら再現する過程で、余白の取り方・フォントサイズの対比・色の使い方・要素の配置順序を体で覚えられます。
デザインの本を読むだけでは得られない「判断の速さ」が身につきます。フリーランスとして案件提案をするとき、「このトンマナはあのサイトの構成が参考になる」と即座に引き出せる状態が目標です。模写の蓄積がそのまま提案の語彙になります。フリーランスのWebデザイナーとして実務につなげる方法については、キャリアの作り方と組み合わせて考えると見通しが立ちやすくなります。
模写対象は3種類で考えると迷わない
模写対象はLP・ホームページ・バナーの3種類に分けて考えると選びやすいです（Webデザインの練習には模写がおすすめ！）。それぞれ鍛えられる要素が異なります。
LPは1ページで完結するため情報量が制限され、余白・見出し・CTA配置の基本的なパターンを集中して観察できます。ホームページはグローバルナビ・ファーストビュー・各セクションの導線設計を複合的に学べます。バナーは限られた面積で配色・文字組み・余白感のバランスを取る訓練になります。実務の基礎感覚をつかみやすいという点で、初心者が最初に取り組むならLPが入り口として機能します。
難易度の目安を3段階で把握する
模写サイトの難易度は、要素数・アニメーション・レスポンシブ対応の3軸で判断できます。要素数が少なく静的なLPが入門、複数セクション・インタラクションを含むホームページが中級、パーティクルや複雑なアニメーションを含む海外サイトが上級という目安です（レベル別の模写コーディングおすすめサイト）。
難易度が合っていないと、模写途中で詰まって完成しないまま放置するパターンに入ります。「なんとか8割完成したが残り2割でつまずいて止まる」という状態を経験した人は少なくありません。入門で全完成を繰り返してから次の難易度に進む方が、長期的なスキル定着に有利です。
CHECK
▶ 今すぐやること: 模写の目的（LP余白感覚・バナー文字組み・ホームページ導線のいずれか）を1行でメモし、次のセクションで対応サイトに直行する（2分）
Q: 模写はデザインツールなしでもできますか？
A： はい、ブラウザとスクリーンショットツールがあれば始められます。FigmaやXDがあると余白・フォントサイズの数値を確認しやすくなりますが、最初は目視と感覚で再現することから始めて問題ありません。
Q： 模写した作品をそのまま公開してよいですか？
A： 著作権の問題があるため、そのままの公開は原則として避けてください。ポートフォリオへの掲載可否はサイトごとに異なります。詳細はよくある質問のセクションで解説します。
目的別おすすめ模写サイト12選
模写素材を探す時間を短縮するため、目的別（LP・ホームページ・バナー・コーディング練習・海外トレンド参照）に分類して12サイトを紹介します。
LP模写向け：国内ギャラリー3選
LP模写の出発点として使いやすい国内ギャラリーを3つ紹介します。いずれも日本の実務で見るトンマナが揃っているため、実案件との距離が近い練習になります（Webデザイン参考ギャラリーサイト11選）。
SANKOU!は、国内のLP・ホームページを業種別・テイスト別に豊富に収録しています。「飲食」「医療」「不動産」などカテゴリでフィルタリングできるため、想定案件のトンマナに近いサイトをすぐ見つけられます。日本の実務に直結するデザインが多く、観察の起点として使いやすいです。
MUUUUU.ORGは縦長LPを中心に掲載しており、スクロールに合わせたセクション構成を観察するのに向いています。デザインの質が揃っているため、余白の取り方やフォントの対比パターンを比較しながら観察できます。「きれいなLPとはどういうものか」を目で覚えるための教材として機能します。
81-web.comは、国内Webサイトをカテゴリ・配色・テイスト別に検索できるギャラリーです。ターゲット配色（白系・暗色系など）を先に決めてから模写対象を探せるため、配色の観察訓練に向いています。
要点整理
SANKOU!は業種フィルタリングで実案件に直結、MUUUUU.ORGは縦長LPのセクション構成観察、81-web.comは配色別の観察訓練に適しています。
ホームページ模写向け：構成観察に使えるサイト3選
ホームページ模写では、グローバルナビの構成・ファーストビューのメッセージ・セクション間の導線設計を複合的に観察することが重要です（デザイン模写のやり方とおすすめサイト10選）。
Web Design Clipは、国内の企業サイトを多数収録しており、業種・ページタイプ・カラーで絞り込めます。コーポレートサイトの標準的な構成パターンを把握するのに適しており、「国内の普通のホームページとはどういう構成か」を理解するのに役立ちます。
Awwwardsは、世界中の受賞サイトを掲載しており、UIのクオリティが高い作品が揃っています。ただし、日本の実務では採用しにくい大胆なレイアウトも多いため、「トレンドの吸収」と「実務への応用」を分けて考えながら観察してください。
Webdesign Inspirationは、海外サイトを中心にスタイル別・業種別に収録しており、ランディングページからポートフォリオまで幅広くカバーしています。Awwwardsより実用的な難易度のサイトが多く、中級者が模写対象を探す際に使いやすいです。
要点整理
Web Design Clipは国内コーポレートサイトの構成把握、Awwwardsはトレンド吸収、Webdesign Inspirationは中級者の実用的な模写対象探しに適しています。
バナー模写向けサイト2選
バナー模写は、配色・文字組み・余白感の基礎訓練として有効です。限られた面積に情報を収める判断力が鍛えられます（初心者向けのバナートレース実践記）。
バナートレースを実践したWebデザイナーは「最初はバナーのサイズも分からない状態で、参考サイトを見ながら文字の大きさや余白を何度も調整していました」と振り返っています。
BANNER LIBRARYは、国内バナーをサイズ・業種・配色で絞り込める専門サービスです。実際の広告バナーを大量に収録しており、「このサイズのバナーをどう構成するか」を観察するのに向いています。バナー制作案件が増えてきたタイミングで活用すると実務との距離が縮まります。
バナー広場は、国内バナーを無料で閲覧できるサービスで、サイズ別・業種別に整理されています。業種ごとのトンマナの違いを比較するのに使いやすく、「食品バナーと金融バナーでは色の使い方がこれだけ異なる」という観察訓練に適しています。
要点整理
BANNER LIBRARYはサイズ・業種・配色の絞り込みで実務直結、バナー広場は業種別トンマナ比較観察に適しています。
コーディング模写練習サイト2選
デザインだけでなくHTML・CSSまで含めて再現するコーディング模写では、構造と装飾の役割を分けて考えることが重要です。
Codejumpは、コーディング模写専用の練習サイトで、デザインカンプ（見本）が用意されており、自分でHTMLとCSSを書いて再現する形式です。模写対象の著作権問題を回避しながら練習できるため、ポートフォリオへの掲載も問題なく行えます。入門・初級・中級のレベル別に用意されており、初めてコーディング模写をする方に向いています（模写コーディング練習サイト集）。
LPアーカイブは、国内LPを大量に収録したギャラリーで、カテゴリ・業種・配色で検索できます。コーディング模写の対象を探す際に使いやすく、スマートフォン表示も確認できるためレスポンシブ対応の観察にも利用できます。
要点整理
Codejumpはポートフォリオ公開OKのレベル別カンプで安心して練習でき、LPアーカイブはレスポンシブ観察も兼ねたコーディング対象探しに適しています。
海外トレンド参照サイト2選
日本の実務案件で求められるデザインと海外トレンドには差があります。海外サイトの観察は「引き出しを増やす」目的で使い、そのまま模写対象にするかどうかは分けて判断してください（現役WEBデザイナーによるギャラリーサイトリスト）。
海外ギャラリーを活用する現役Webデザイナーは「海外のギャラリーで見つけたレイアウトをそのまま国内クライアントに提案したら、『派手すぎる』と言われた経験があります」と語っています。
Dribbbleは、世界中のデザイナーが作品を公開するプラットフォームで、UIデザイン・カラーパレット・タイポグラフィのトレンドを観察するのに使いやすいです。完成したWebサイトではなく部品レベルの作品も多く、コンポーネント単位の模写訓練に適しています。
Behanceは、AdobeのデザイナーポートフォリオプラットフォームでWebデザインから印刷物まで幅広い作品が掲載されています。制作プロセスを公開しているプロジェクトも多く、「どういう思考でこのデザインに至ったか」を読み取る訓練にも使えます。
要点整理
Dribbbleはコンポーネント単位のトレンド観察、Behanceは制作プロセスも読み取れる上級者向けの参照先として機能します。
CHECK
▶ 今すぐやること: 上記12サイトのうち目的に合うサイトを1〜2つ開き、最初に模写するページを1枚スクリーンショットで保存する（5分）
Q: 国内と海外のギャラリーはどう使い分ければよいですか？
A： 国内ギャラリー（SANKOU!、81-web.com、Web Design Clip等）は実務案件に近いトンマナの観察に使い、海外ギャラリー（Awwwards、Dribbble、Behance等）はトレンドや表現の幅を広げる目的で使い分けると整理しやすいです。案件提案では国内基準を軸にしながら、海外からエッセンスを取り込む形が実務では多く見られます。
Q： 模写サイトをどれだけブックマークすればよいですか？
A： 数を増やすより、使い続けられるサイトを3〜5本に絞る方が観察の継続につながります。定期的に同じサイトを見ることでデザイントレンドの変化にも気づけます。
模写を始める前に確認する3つの判断基準
模写を始めようとしてサイトを開いたはいいが、「さてどこから観察すれば」と止まった経験がある人は少なくありません。始める前に判断基準を決めておくことで、観察のスタートが早くなります。
判断基準1：目的（何を学ぶか）を先に決める
「なんとなく良さそうなサイトを模写する」より「バナーの文字組みを鍛える」と決めてから始める方が、観察のポイントが絞られて練習の密度が上がります（Webデザインの模写の手順やメリット、注意点）。
余白の基礎感覚を身につけたい場合はMUUUUU.ORGのLP、文字組みを鍛えたい場合はBANNER LIBRARYのバナー、導線設計を学びたい場合はWeb Design Clipのコーポレートサイトが、観察の出発点として使いやすいです。
目的が決まると、模写終了後の振り返り軸も自然に決まります。「余白を鍛える」と決めていれば、完成後に「元サイトとの余白の差はどこか」を比較することが振り返りになります。
判断基準2：難易度が自分の現在地に合っているか
難易度が高すぎると途中で詰まって完成しません。難易度が低すぎると学べるものがなくなります。現時点で「Figmaなどで形は作れるがコードに自信がない」のか「コーディングまで含めて再現できる」のかで、選ぶべきサイトが変わります（レベル別の模写コーディングおすすめサイト）。
コーディングに自信がない段階ではCodejumpのデザインカンプを使って手順通りに再現することから始めるのが、つまずきの少ない入り方です。デザインツールで形を作ることが目的であれば、LPアーカイブやSANKOU!から好みの1ページを選んでFigmaで再現する方法が取り組みやすいです。
判断基準3：ポートフォリオ公開の可否を確認する
実在するWebサイトを模写した作品をポートフォリオに掲載する場合、著作権の観点から注意が必要です。「練習として再現した」という事実があっても、公開については各サイトの利用規約や著作権法の解釈が関係します（ポートフォリオ公開OKも含む模写おすすめサイト紹介）。
公開を前提に練習したい場合は、Codejumpのようにポートフォリオ公開OKと明示されている練習サイトを使うのが安全です。実在サイトを模写した作品をポートフォリオに掲載したい場合は、「模写練習として制作した作品です」と明記したうえで、クライアント提案用の非公開ポートフォリオとして使う形が無難です。また、著作権とはわかりやすく｜侵害を避ける5つの実務ルールも参考にしてください。
要点整理
目的を1行で決める、難易度を現在地に合わせる、ポートフォリオ掲載可否を確認する。この3点を模写開始前に確認してください。
Q： 模写した作品はクライアントへの提案に使えますか？
A： 「このトンマナを参考にしたい」という提案の補助資料として見せる分には実務上よく行われています。模写作品をクライアント納品物として提出することは問題になるため、あくまで提案のイメージ共有用に留めてください。
Q： Figmaのコミュニティファイルを模写対象にしてもよいですか？
A： Figma Communityのファイルは公開されている作品ですが、個々のライセンスが異なります。該当ファイルのライセンス表記を確認してから使用してください。練習目的であれば個人利用の範囲で問題ない場合が多いですが、公開用途は別途確認が必要です。
PR提供: 日本デザインスクール（デザスク）
フリーランスが模写を実務につなげる5つの方法
模写を繰り返しているのに案件獲得や提案の質が上がらないという悩みは共通です。練習と実務の間にある距離を縮めるには、模写の使い方を変えることが先決です。
方法1：業種別に模写素材をストックする
【対象】: フリーランスとして複数業種の案件を受注したい、またはこれから受注を増やしたいWebデザイナー
【手順】: まずSANKOU!や81-web.comで業種（飲食・医療・IT・不動産など）を選んでギャラリーを開きます（2分）。次に各業種で「このトンマナは実案件に使えそう」と判断したサイトを3〜5本スクリーンショットし、業種ごとのフォルダに保存します（5分）。最後に各スクリーンショットに「配色の特徴・フォントの傾向・余白の特徴」を3行でメモしておきます（3分）。
【ポイント】: 多くの人は「良さそうなサイトをとりあえずブックマーク」するだけで終わります。業種別にストックしたうえで観察メモを残すことで、提案時に「この業種のデザインはこういう傾向がある」と即答できるようになります。業種別の引き出しが増えると、提案に使う参考サイトを探す時間が削減されます。
【注意点】: ストックの量を増やすことに時間をかけすぎないようにしてください。ブックマークが100件を超えると探す手間が増えて逆効果になります。業種ごとに3〜5本に絞り、「気になったら保存してから絞り込む」ではなく「最初から絞って保存する」習慣の方が実務では続きます。
方法2：余白・フォント・色の数値を測ってから模写する
【対象】: 模写で「なんとなく雰囲気が似ているが数値が違う」という状態が続いているWebデザイナー
【手順】: 模写対象のスクリーンショットをFigmaに貼り付け、余白（上下左右のpx）・本文フォントサイズ・見出しとのサイズ対比・使用色数を記録します（10分）。次に記録した数値を見ながら、同じ数値でFigmaまたはHTML/CSSを使って再現します（30〜60分）。最後に元サイトと並べて差分を探し、「どこが違うか」を3箇所以上メモします（5分）。
【ポイント】: 「目で見ながら感覚で再現する」模写より「数値を測ってから再現する」方が、数値の感覚がコードに直結します。余白16px・32pxなどのグリッド単位を体で覚えると、コーディング時に数値の迷いがなくなります（Webデザインの練習には模写がおすすめ！）。
【注意点】: Figmaのスポイトツールや検証ツール（DevTools）で数値を拾う操作に時間のほとんどを使ってしまうと、デザインの観察よりツールの操作練習になってしまいます。数値の記録は10分以内に済ませ、再現作業に時間を集中させてください。
方法3：スマートフォン表示まで再現してから完了とする
【対象】: PC表示の模写はできるが、レスポンシブ対応が苦手なWebデザイナー
【手順】: 模写対象のサイトをスマートフォン表示（デベロッパーツールのデバイスシミュレーター）で確認し、PC表示との違い（ナビの変化・カラム数・フォントサイズの変化）をスクリーンショットに記録します（10分）。次にCSS（メディアクエリ）を使ってスマートフォン表示を再現します（30〜45分）。最後に実機またはシミュレーターで表示を確認し、元サイトと並べて差分を確認します（5分）。
【ポイント】: PC表示だけ完成させて「模写完了」としている人は多いですが、実案件のほとんどはレスポンシブ対応が前提です。スマートフォン表示まで含めて再現することで、メディアクエリの書き方とブレイクポイントの設定が実務レベルに近づきます（ホームページの模写でスキルアップ！）。
【注意点】: 最初からレスポンシブを完璧に作ろうとすると、PC表示の完成前に詰まります。PCを先に完成させてからレスポンシブに取り組む順番が詰まりにくいです。スマートフォン対応は「やらなくてよいこと」ではなく「後半に回してよいこと」として位置づけてください。
方法4：模写完了後に「差分メモ」を残す
【対象】: 模写をしても次の制作に活かせていないと感じているWebデザイナー
【手順】: 模写完成後に元サイトと並べ、「デザインの差分（似ていない箇所）」を3〜5つ書き出します（5分）。次にその差分が「なぜ生まれたか」を考えます。技術的な限界なのか、観察が甘かったのか、意図的に変えたのかを分類します（5分）。最後に次回の模写で意識するポイントを1行でメモして保存します（2分）。
【ポイント】: 入門書では「模写を完成させること」が目標とされていますが、実務につなげるには「差分から学ぶこと」の方が成長が早いです。「何が似ていないか」を言語化すると、次の案件で「この余白が気になる」と気づけるようになります。気づきの解像度が上がると、クライアントへのデザイン説明も具体的になります（Webデザインの模写の手順やメリット、注意点）。
【注意点】: 差分を「失敗リスト」として捉えると続きません。「発見リスト」として記録する意識の方が継続しやすいです。差分がゼロの模写は「学べるものがなかった」可能性があるため、意図的に難易度を上げることも検討してください。
方法5：参考サイトを案件提案の引き出しとして使う
【対象】: 実案件の提案時に「どんなデザインを提案すればよいか」迷うことが多いフリーランスWebデザイナー
【手順】: 新しい案件の問い合わせが来た段階で、業種・ターゲット・色のトンマナのキーワードをSANKOU!や81-web.comで入力し、参考サイトを3〜5本抽出します（5分）。次に参考サイトのスクリーンショットを提案資料に貼り付け、「このようなトンマナを想定しています」と1行のコメントを添えます（5分）。クライアントの反応を見てトンマナの方向性を確認したうえで制作に入ります（打ち合わせ中）。
【ポイント】: 「デザイン制作はヒアリング後にスケッチ」と推奨されることが多いですが、「参考サイトを見せながらヒアリング」の方がクライアントのイメージが具体化されやすく、方向性のズレを早期に検知できます。修正コストを減らす観点から、参考サイトの提示は提案段階で行う方が合理的です。参考サイトを最初に共有することでヒアリング時間が短縮されるケースは実務上少なくありません。フリーランスWebデザイナーのポートフォリオ作成でも、参考サイトの活用方法と実績の見せ方を詳しく解説しています。
【注意点】: 参考サイトを提示する際に「このデザインを作ります」と伝えると模写の納品と誤解される場合があります。「こういうトンマナを参考にします」という方向性の共有であることをクライアントに明示してください。参考サイトの著作権はクライアントには移譲されないため、提案資料への掲載は内部共有の範囲に留めることが実務上の注意点です。
CHECK
▶ 今すぐやること: 今日の模写練習で使うサイトを12選の中から1本決め、スクリーンショットを保存して模写開始前に余白・フォント・色数を3項目だけ記録する（10分）
Q: 模写の頻度はどのくらいが適切ですか？
A： 毎日でなくても、週に1〜2本完成させるペースで継続することが重要です。週1本のペースで6ヶ月続けると約25本の積み上げになり、観察の基準が安定してきます。量より完成と振り返りの質を優先してください。
Q： 同じサイトを複数回模写することに意味はありますか？
A： あります。1回目は完成させることが目標でも、3ヶ月後に同じサイトを模写すると「最初は気にならなかった余白のバランスが気になる」という変化に気づけます。自分の成長を確認する手段として使えます。
模写の効果を高める観察チェックリスト7項目
模写前後に使えるチェックリストを7項目で整理します。
模写前に確認する3項目
模写を始める前にこの3項目を確認してから作業に入ることで、観察のポイントが最初から定まります。
確認1：目的を1行で書いたか。「このサイトのどこを学ぶか」を書き出します。書けない場合は、「余白」「配色」「文字組み」「導線設計」の4つから1つ選ぶことから始めてください。
確認2：難易度が自分の現在地に合っているか。初めて模写する場合はLP1ページから始めてください。アニメーションや複数カラムのレイアウトを含む場合は中級以上の難易度になります。「とにかく完成させられる難易度」であることが基準です。
確認3：ポートフォリオへの掲載可否を確認したか。公開を前提に使う場合は、ポートフォリオ公開OKと明示されているCodejumpなどの練習サービスを使ってください。実在サイトの模写作品を公開用ポートフォリオに使う場合は、制作意図を明記することが一般的です。
模写中に観察する4項目
模写中に迷ったときの判断基準として使ってください。
確認4：余白を数値で把握しているか。「なんとなく広い」ではなく「16px、32px、64pxのどれか」を確認してから再現してください。数値で把握すると次の制作でも再現できます。
確認5：フォントサイズの対比を確認したか。見出しと本文のサイズ差・行間・字間を確認します。多くのサイトでは見出しと本文のサイズ比がおよそ1.5〜2倍の範囲に収まっています。
確認6：使用色数を数えたか。プロが制作したサイトは多くの場合、メインカラー1色・アクセントカラー1色・背景色1〜2色の範囲に収まっています。それ以上の色数があれば「なぜその色を使っているか」を考えながら観察します。Webデザイン配色は3色70-25-5%で決まるも合わせて参照すると、配色の基本が体系的に理解できます。
確認7：スマートフォン表示も確認したか。デベロッパーツールでスマートフォン表示に切り替え、PCとの違い（ナビの変化・カラム数・フォントサイズ）を把握してから作業に入ると、レスポンシブ対応の設計がスムーズになります。
CHECK
▶ 今すぐやること: 今の模写作業で「目的」を1行書いているか確認する。書いていなければ「余白・配色・文字組み・導線設計」の4つから今日学ぶ1つを決める（1分）
Q: チェックリストのすべての項目を毎回確認すべきですか？
A： 最初は確認1・確認4・確認7の3項目に絞って始めてください。慣れてきたら項目を増やしてください。チェックが目的化すると模写の作業時間が減るため、あくまでも補助として使ってください。
Q： チェックリストはデジタル・紙のどちらが向いていますか？
A： 作業環境に合わせてどちらでも問題ありません。Notionやスプレッドシートにチェックボックスを作成して使う方法が、振り返りメモと一元管理できて使いやすいです。
模写を積み上げて実務力を底上げする
模写練習の効果は、サイト選びの精度と観察の解像度で変わります。「何を学ぶか」を1行で決めてから参照するサイトを選ぶことが、実務に直結する練習の第一歩です。本記事で紹介した12サイトを目的別・難易度別に使い分けることで、模写素材を探す時間を削減しながら観察の質を上げられます。
フリーランスのWebデザイナーとして、模写は単なるスキル訓練ではなく提案の語彙を増やすための観察習慣でもあります。業種別のストック・差分メモ・参考サイトの提案活用を組み合わせることで、模写の時間が実案件の準備時間として機能するようになります。フリーランス案件獲得のための営業と実績の作り方と組み合わせることで、模写で蓄積した観察眼を直接案件獲得に活かす道筋が見えてきます。
| 状況 | 次の一歩 | 所要時間 |
| 今日から模写を始めたい | SANKOU!かCodejumpを開き、LPを1本選んでスクリーンショットを保存する | 5分 |
| バナー模写を始めたい | BANNER LIBRARYで業種を選び、観察メモを3行書いてから再現を開始する | 10分 |
| コーディング模写を始めたい | Codejumpの入門レベルのカンプを1枚開き、HTMLから書き始める | 15分 |
| 海外トレンドを観察したい | DribbbleかBehanceで気になる作品を3本ブックマークし、配色と余白を比較メモする | 10分 |
| 実案件に模写を活かしたい | 直近の案件の業種でSANKOU!を検索し、参考サイト3本を提案資料に貼り付ける | 10分 |
Webデザイン模写 おすすめサイトに関するよくある質問
Q: 初心者が最初に模写すべきサイトはどれですか？
A： LPを対象に、MUUUUU.ORGかSANKOU!から1ページを選んでください。1ページで完結するLPは情報量が限られており、余白・配色・フォントの観察ポイントが集中しているため、初めての模写に取り組みやすい素材です。コーディングまで含めて練習したい場合はCodejumpの入門レベルから始めてください。
Q： 模写した作品をポートフォリオに掲載できますか？
A： 実在するWebサイトを模写した作品の掲載については、サイトごとに利用規約の確認が必要です。Codejumpのように練習専用のデザインカンプを提供しているサービスでは、ポートフォリオへの掲載を明示的に許可している場合があります。実在サイトの模写作品を掲載する場合は「模写練習として制作した作品です」と明記したうえで、非公開ポートフォリオとして扱うことが実務上多く見られる対応です。
Q： 海外のギャラリーサイトを参考にしても実務に使えますか？
A： トレンドや表現の幅を広げる目的では有効です。ただし、日本の実案件ではクライアントが求めるデザインが国内基準である場合が多く、海外サイトをそのまま提案するとトンマナが合わないと指摘されることがあります。海外サイトから配色や構成要素のエッセンスを取り入れながら、日本のユーザーに合わせて調整する使い方が実務では適しています。