デザイン模写とトレースのやり方｜5ステップと題材の選び方

「模写がいいらしい」と聞いて始めたけれど、なぞって終わってしまう。よくある止まり方です。

模写とトレースは、やり方を決めないと写経で終わります。逆に、見る場所と手順を決めてから始めると、1枚でかなり伸びます。差がつくのは枚数ではなく進め方のほうなんですね。

ここでは題材の選び方、トレースの5ステップ、模写への進み方、時間の配分までまとめます。今日1枚やるところまで持っていきましょう◎

トレースと模写は別の練習

同じ意味で使う人もいますが、分けたほうが上達が早いです。

	トレース	模写
やり方	お手本を下に敷いて、上からなぞる	お手本を横に置いて、見ながら作る
分かること	正確な位置・サイズ・余白の数値	自分が何を見落とすか
向いている人	作りはじめの人	トレースを3枚以上やった人

トレースは「答えを写して数字を知る」練習です。プロが何pxの余白を取っているのか、文字サイズの差が何倍なのかが、実測で分かります。

模写は「見て再現する」練習です。横に置いて作ると、必ずズレます。そのズレが、自分の見落としている場所そのものです。

順番はトレースが先です。数字の感覚がないまま模写をすると、ズレの原因が分からず「なんか違う」で終わります。

題材の選び方（ここで9割決まる）

好きなデザインを選ぶと、たいてい難しすぎます。最初の題材は次の3つで選んでください。

1. 要素が10個以下：文字・画像・図形を数えて10個まで。写真1枚＋見出し＋説明＋ボタンくらいが理想
2. 1枚で完結している：サイト全体ではなくバナー1枚、名刺1枚、チラシ1面
3. お手本として整っている：大手企業の広告、有名サービスのバナー。素人の作品を選ぶと、崩れごと写します

探す場所は、企業の公式サイト、アプリのストアの画像、電車の中吊りの写真で足ります。素材サイトの見本も使えます。

お題そのものが浮かばないときは、バナーデザインのお題20選に具体的な題材をまとめています。作る対象が決まっていると、探す時間がまるごと消えます。

逆に、最初に避けたほうがいいのは次のものです。

• 写真の加工が凝っているもの（合成・光の演出）
• 手描きのイラストが主役のもの
• 要素が20個を超える情報量の多いチラシ

これらは再現に時間がかかるわりに、レイアウトの学びが少ないです。腕が上がってからで大丈夫です。

トレースのやり方（5ステップ）

ツールはCanvaでもFigmaでも構いません。無料のもので足ります。手順は共通です。

1. お手本を敷く：キャンバスをお手本と同じサイズにして、画像を背景に置く。透明度を30〜50%まで下げて、上に作るものが見えるようにする
2. 大きい枠から置く：写真の位置、色の面、ボタンの箱。四角い塊を先に置く。文字は後回し
3. 文字を乗せる：フォントは似たものでOK。サイズと太さの差だけは合わせる
4. 数字を測って記録する：余白は何px、見出しは本文の何倍か。ここがトレースの本体
5. お手本を消して見比べる：背景の画像を非表示にして、自分のものだけを見る。そのあと並べて差を探す

4番を飛ばす人がとても多いです。なぞるだけなら30分で終わりますが、それだと何も残りません。測って書き出したものが、次に自分で作るときの持ち札になります。

測るのは3つで足ります。

• 外側の余白：端から中身までの距離
• グループの間隔：情報のまとまりどうしの距離
• 文字サイズの比率：いちばん大きい文字は、本文の何倍か

この3つをメモに残していくと、10枚たまるころには自分の中に基準ができます。「見出しは本文の2倍前後」のような感覚が、体感ではなく数字で持てるようになります💡

模写のやり方（見ないで再現する）

トレースを3枚ほどやったら、模写に進みます。手順は変わりますが、やることはシンプルです。

1. お手本を30秒見て、いったん閉じる
2. 覚えている構成をラフに描く（紙でもツールでもOK）
3. お手本を横に開いて、見ながら作る。下には敷かない
4. 完成したら並べて、違いを3つ書き出す
5. その3つだけを直す

ここでの狙いは、完璧に似せることではありません。4番で書き出した3つが、今の自分の弱点です。余白が狭い、文字の差が足りない、色数が多い。出てくる弱点は、人ごとにだいたい決まっています。

同じ弱点が3回続けて出たら、その項目を次の作品で最初にチェックしてください。それだけで作品の質が変わります。

1枚にかける時間の目安

時間を決めずに始めると、細部で沼にはまります。バナー1枚なら60〜90分で区切ってください。

工程	時間	やること
準備	5分	題材を開く、キャンバスを作る
枠を置く	20分	写真・色面・ボタンの位置
文字を組む	25分	サイズと太さの差を合わせる
測って記録	10分	余白・間隔・比率をメモ
見比べ	10分	並べて差を3つ書く

時間が来たら未完成でも止めます。細かい飾りを再現しても学びは増えません。時間内に終わらないなら、題材が難しすぎたということなので、次はもっと要素の少ないものを選んでください。

やる前に知っておくこと（公開のルール）

模写もトレースも、元になる作品は他の人のものです。練習として手元でやるぶんには自由ですが、外に出すときは気をつけてください。

• 作品集には入れない：自分で組み立てたものではないので、実力の証明になりません
• SNSに載せるなら「模写」と明記する：元の作品が分かる形で出すなら、練習だと書き添えます
• ロゴや写真素材はそのまま使わない：練習では仮のロゴ、フリー素材の写真に置き換えます
• 仕事には流用しない：構成をそのまま持ち込むのは事故になります

作品集に載せたいなら、練習で覚えた組み方を使って、自分でお題を決めて作り直します。模写は仕入れ、作品集は自分で作ったもの。この線を引いておけば迷いません。

ミニ実践：今日の1枚を決める

読み終わったら、5分で題材を決めてしまいましょう。手順はこれだけです。

1. スマホで、目に入る広告やアプリの紹介画像を3枚撮る（またはスクリーンショット）
2. 3枚の要素を数えて、いちばん少ないものを選ぶ
3. 選んだ1枚を、次にトレースする題材としてメモに貼る
4. やる日時を決める。土曜の午前など、日付まで決める
5. 当日は5ステップの手順どおりに進める

できあがったら、次のチェックで自分の1枚を確認してください。

• お手本を消した状態で、レイアウトが成立している
• 余白・間隔・文字の比率を数字でメモした
• お手本と並べて、違いを3つ書き出した
• 60〜90分で切り上げた

4つとも埋まっていれば、その1枚はちゃんと練習になっています。

よくある質問

トレースは本当に練習になりますか？

なぞるだけなら、ほとんど効果はありません。効果が出るのは、余白や文字サイズの差を数字で測って記録したときです。
プロが取っている余白の量は、見ているだけでは分かりません。実際に測ると「思ったより3倍空いている」と気づきます。この気づきが、自分の作品の余白を変えます。測る工程を入れるかどうかで、同じ1時間の価値が変わります。

何枚くらいやれば上達しますか？

トレース3枚で数字の感覚がつかめます。模写を10枚やると、自分の弱点が言葉で言えるようになります。
枚数より、1枚ごとに違いを3つ書き出すほうが効きます。書き出さずに30枚やった人より、書き出しながら10枚やった人のほうが伸びます。同じ弱点が繰り返し出るので、そこを直せば全体が上がります。

フォントがお手本と同じものを持っていません

似た系統のもので大丈夫です。明朝には明朝、ゴシックにはゴシックを当てて、太さの差だけ合わせてください。
トレースで見るのは書体そのものではなく、サイズの比率と太さの使い分けです。同じフォントを探す時間があったら、その時間で1枚多く作ったほうが得します。

イラストや絵のトレースとは違うものですか？

やり方の考え方は同じですが、見る場所が違います。絵のトレースは線や形を追いますが、デザインのトレースで追うのは配置と余白です。
デザインの練習としてやるなら、イラストが主役の題材は避けてください。絵の再現に時間を取られて、レイアウトの学びが薄くなります。写真と文字で構成されたバナーのほうが向いています。

次に学ぶこと

まとめます。

• トレースが先、模写があと。順番を逆にしない
• 題材は要素10個以下・1枚完結・整っているものを選ぶ
• トレースの本体は「測って記録する」工程
• 模写では違いを3つ書き出す。それが自分の弱点
• 1枚60〜90分で切り上げる
• 模写は作品集に入れない

模写だけを続けても、途中で伸び方が鈍ります。直す練習や、条件を変えて比べる練習を混ぜると、また動き出します。

組み合わせ方はデザイン練習の進め方にまとめました。4つの型をどう配置するかの話です。
模写しながら見る場所を決めたい方はデザインの4原則を横に開いておいてください。近接・整列・反復・対比の4つが、そのままお手本を読む視点になります。

コース全体の並びはデザイン基礎コースの目次から確認できます。