Webデザインの模写のやり方を解説！上達につながる進め方と練習サイトの選び方

Webデザインの勉強法として「模写がいい」とよく言われます。ただ、実際にやってみようとすると、どのサイトを選べばいいのか、どこまで似せればいいのか、完成した後に何をすればいいのかがわからず、途中で止まってしまう方が少なくありません。

模写は「似せて作ること」が目的ではなく、プロが下した判断の理由を自分の手で追体験することが目的であり、観察と振り返りをセットにしないと上達につながりません。

この記事では、模写の種類の違い、始める前に決めておくこと、具体的な手順、サイト選びの基準、そして著作権上の注意点までを順番に解説します。何となく真似するだけの状態から抜け出すための道筋として読んでください。

模写って「作業」になりがちなんだよね。手を動かす前に、何のためにやるかを決めておこう。

模写には2種類ある

デザイン模写とコーディング模写

まず、自分がどちらをやろうとしているのかをはっきりさせてください。目的も鍛えられる力もまったく違います。

デザイナー志望ならデザイン模写、実装まで担当したいならコーディング模写から入るのが自然な順序です。両方やる場合も、同時に始めると負荷が高いので片方ずつ進めてください。

コーディング模写に取り組む場合は、HTMLとCSSの基本を扱った入門書を手元に置いておくと、詰まったときに確認しやすくなります。

トレースとの違い

元画像を下に敷いて上からなぞる作業をトレースと呼びます。手を動かす練習としては有効ですが、それだけでは「なぜこの余白なのか」を考える機会がありません。トレースで感覚をつかんだら、次は元画像を見ずに再現する模写へ進むと学習効果が上がります。

始める前に決めておくこと

今回のテーマを1つに絞る

1回の模写で全部を学ぼうとすると、どれも中途半端になります。「今回は余白の取り方だけを徹底的に観察する」「今回はFlexboxの使い方に集中する」というように、テーマを1つ決めてください。

かける時間を先に決める

模写は際限なく細部を詰められてしまう作業です。1本あたり8時間、といった上限を先に設定しておくと、完成させる習慣がつきます。終わらせることを優先し、細部の精度は回数を重ねる中で上げていくほうが結果的に早く上達します。

模写の具体的な手順

手順1：サイト全体を観察する

いきなり作り始めないでください。まずはブラウザで対象サイトを開き、上から下まで通してスクロールします。そのうえで、次の点を紙かメモアプリに書き出します。

• セクションがいくつあるか
• それぞれのセクションが何を伝えようとしているか
• 使われている色は何色か（メイン・アクセント・背景）
• 見出しと本文のフォントサイズの差はどれくらいか
• 要素の間隔は何種類くらいに整理されているか

この段階で構造が見えていると、作り始めてからの迷いが大きく減ります。観察に30分かけても、後の作業でその倍は取り戻せます。

手順2：数値を計測する

ブラウザの開発者ツールを使えば、実際の余白や文字サイズを確認できます。Chromeなら要素を右クリックして「検証」を選ぶと、該当箇所のCSSが表示されます。

感覚で余白を置くのではなく、実際の数値を見てから作ることが、模写でいちばん学びが大きい部分です。プロは16px、24px、32pxのように一定の規則で余白を設計していることが多く、その規則性に気づけると自分の制作にも応用できます。

手順3：作る

デザイン模写ならFigmaでフレームを作り、上から順に再現していきます。コーディング模写ならHTMLの構造を先に組み、後からCSSで見た目を整える順序が扱いやすいでしょう。

CSSの書き方で詰まったときは、MDN Web Docsのリファレンスを確認する習慣をつけてください。個人ブログの断片的な情報より、プロパティの仕様が正確にまとまっています。

手順4：答え合わせをする

完成したら、元のサイトと並べて見比べます。ブラウザの開発者ツールで元サイトのCSSを開き、自分が書いたコードとの違いを確認してください。

同じ見た目でも、実装の方法は複数あります。自分がpositionで無理やり配置した箇所を、元サイトはFlexboxで素直に組んでいた、といった発見がここで出てきます。

手順5：気づきを言語化する

もっとも省略されやすく、もっとも重要な工程です。作り終えたら、次の3つを書き出してください。

• 今回できるようになったこと
• 調べても解決しなかったこと
• 次回意識したいこと

この記録を数本分ためると、自分の弱点が明確に見えてきます。模写を10本やって振り返りゼロの人より、3本やって振り返りを書いた人のほうが伸びるのは、この工程の有無が理由です。

振り返りを書かない模写は、写経で終わっちゃうんだ。3行でいいから残しておこう。

模写するサイトの選び方

最初は1カラムのシンプルなサイト

いきなり動きの多い大規模サイトを選ぶと、途中で止まりやすくなります。1本目は縦に情報が並ぶだけのシンプルな構成を選んでください。飲食店や美容室のサイトなど、ページ数が少ないものが向いています。

練習用に作られた教材を使う

実在サイトの模写は著作権上の配慮が必要になるため、練習向けに用意された素材を使うのが安全です。Codejumpは模写コーディング用の教材を公開しているサイトで、以前はCodeStepという名称で運営されていました。デザインカンプからコーディングする実務に近い課題も用意されています。

ギャラリーサイトから探す

参考になるデザインを探すなら、国内サイトを集めたSANKOU!のようなギャラリーサイトが便利です。業種やテイストで絞り込めるため、自分が作りたい系統のサイトを見つけやすくなります。

段階を上げていく順序

難易度は次の順で上げていくと無理がありません。

1. 1カラムのシンプルなランディングページ
2. ヘッダーにナビゲーションがある企業サイトのトップページ
3. 複数カラムを含むレイアウト
4. スライダーやアコーディオンなど動きのある要素を含むページ
5. レスポンシブ対応まで含めた完全再現

つまずきやすいポイントと対処

フォントが同じにならない

元サイトが有料フォントや独自のWebフォントを使っている場合、完全に同じにはできません。開発者ツールでフォント名を確認し、雰囲気の近い代替フォントを選んで進めてください。日本語なら、Google Fontsで提供されているNoto Sans JPやZen Kaku Gothic New系のフォントが扱いやすい選択肢です。

画像素材が用意できない

元サイトの画像をダウンロードして使うのは避けたいところです。無料の写真素材サイトから雰囲気の近い画像を探すか、色を塗ったプレースホルダーで代用してください。画像探しに時間を取られると本来の目的から外れるため、練習では割り切って進めるのが得策です。

レスポンシブでレイアウトが崩れる

PC表示を完成させてからスマートフォン対応に入ると、崩れて手が止まりがちです。最初からスマートフォン表示を基準に組み、幅が広がったときにレイアウトを変えていくモバイルファーストの順序にすると、崩れにくくなります。

完成させられない

途中で飽きるのは、選んだサイトが自分の実力に対して重すぎることが原因である場合がほとんどです。1本目は「ファーストビューだけ」に範囲を絞ってもかまいません。完成の達成感を得ることを優先してください。

サイト選びで9割決まると言ってもいいくらいだよ。背伸びしすぎない題材を選ぼう。

模写を習慣にするための工夫

時間を固定する

「余裕があるときにやる」という決め方だと、模写は後回しになります。平日は朝の1時間、休日は午前中、というように枠を先に押さえてしまうほうが続きます。1日で終わらせようとせず、数日に分けて1本を仕上げる進め方でかまいません。

進捗を見える形にする

模写の記録を1本ごとにまとめておくと、積み上がっている実感が得られます。対象サイト、かかった時間、今回のテーマ、気づきの4項目を表にして残すだけで十分です。停滞した時期に見返すと、自分が進んできた距離が確認できます。

誰かに見せる前提で作る

学習仲間やSNSのつながりに「今日はここまで作った」と共有する前提を作ると、完成率が上がります。ただし、実在サイトの模写画像をそのまま公開するのは避け、学んだ内容の説明にとどめてください。

学習環境の整え方

画面が狭いと模写は続かない

模写は、元サイト・自分の制作画面・開発者ツールの3つを行き来し続ける作業です。ノートPC1台だけだと、ウィンドウを切り替えるたびに集中が切れます。

24〜27インチのフルHD以上のモニターを1枚追加し、左に元サイト、右に制作画面という配置にするだけで、模写の作業効率は目に見えて変わります。中古やセール品でも十分に効果があるため、学習を続ける意思があるなら早めの導入をおすすめします。

入力環境と姿勢

コーディング模写では、長時間タイピングを続けることになります。テンキーレスのメカニカルキーボードや、手首の角度が自然になるパームレストがあると、作業中の疲労が変わります。ノートPCスタンドで画面の高さを目線に合わせるだけでも、首や肩への負担は軽くなります。

記録を残す道具

観察した数値や気づきをその場で書き留めるなら、方眼のノートやタブレット端末が便利です。手書きで構造を描いてみると、画面を見ているだけでは気づかなかったレイアウトの規則性が見えることがあります。

よくある質問

Q. 何本くらい模写すればいいですか

本数より、1本ごとの振り返りの質のほうが影響します。目安としては、テーマを変えながら5本ほど取り組めば、自分の弱点と得意分野がある程度見えてきます。そこからはオリジナル制作に移り、必要に応じて模写に戻る形が効率的です。

Q. Figmaでの模写とコーディング模写、どちらを先にやるべきですか

デザインの感覚を鍛えたいならFigma、実装力をつけたいならコーディングです。判断がつかない場合は、Figmaでの模写から始めることをおすすめします。デザインの構造が理解できていると、コーディング模写の段階で「なぜこの構造なのか」が読み取りやすくなるためです。

Q. 開発者ツールでCSSを見るのはズルではないですか

まったく問題ありません。むしろ、答えを見て自分の実装と比べる工程がないと、間違ったやり方が身についてしまいます。ただし、最初から見るのではなく、自分で組んでから確認する順序を守ってください。

Q. 模写した作品をポートフォリオに載せてもいいですか

実在サイトの模写は掲載を避けてください。著作権上の問題があるだけでなく、採用側から見ても「自分で考えて作ったもの」ではないと判断されます。ポートフォリオには、自分で要件を設定して作ったオリジナル作品を掲載してください。

Q. 模写だけでWebデザイナーになれますか

模写は基礎力を鍛える手段であり、それだけでは足りません。実務では、クライアントの要望を聞き取り、ゼロから構成を考える力が求められます。模写で身につけた感覚を土台に、オリジナル制作へ進んでください。

まとめ

Webデザインの模写は、観察して、計測して、作って、答え合わせをして、言語化する。この5工程をひととおり回すことで初めて学習として機能します。似せることそのものが目的になってしまうと、時間をかけた割に手応えが残りません。

1本目はシンプルなサイトを選び、テーマを1つに絞り、時間の上限を決めて完成させてください。練習用の教材が公開されているサイトを使えば、著作権の心配をせずに取り組めます。数本こなして自分の弱点が見えてきたら、オリジナル制作へ移行するタイミングです。

まずはファーストビューだけでいいよ。1画面分を最後まで作り切ると、次に進む足場ができるんだ。