こんにちは、Masaです。
将来デザインを仕事にしたい方――Webデザイナーや、バナー・ロゴ制作を目指している方の中には、
「自分のデザインに自信がない」
「どうやってデザインを勉強すればいいのか分からない」
そんな悩みを抱えている方も多いと思います。
実は、僕も同じで、日々デザインの勉強を続けながら試行錯誤しています。
たとえばモーショングラフィックスを制作したとき。
動きの演出は悪くないのに、肝心のデザインが弱くて作品全体の完成度がガクッと下がってしまう……そんな経験を何度もしてきました。
その悩みを少しでも解消するために取り入れたのが、見本をそっくり真似して作る「模写」というデザイン勉強法です。
今回は、僕が実際にやってみて効果を感じた模写の方法――書籍『デザインのドリル』を使った学び方を紹介します。
MASAこの記事を読めば、あなたのデザイン力を底上げする具体的な練習法が見つかります
では、いってみましょう。
※『デザインのドリル』を用いた模写には、Adobe Illustratorを使用しています。
＼アドバンスクールなら、Adobe Creative契約が通常よりもお得！／
デザインを勉強する最良の方法は「模写」
デザイン力を伸ばすうえで大切なのは、センスを磨くことよりも、良いデザインの型を自分の中に増やすことです。
その近道になるのが、見本を見ながら同じものを作る「模写」。
そして、その模写を続けやすい形にしたのが「デザインのドリル」だと考えています。
ここでは、なぜ「デザインのドリル」がデザインの勉強に向いているのかを、ポイントを絞って簡単に解説します。
※すぐに「デザインのドリル」模写方法を知りたい方は、こちらからどうぞ。
模写がデザインの勉強に向いている理由
デザインの勉強で遠回りしやすいのは、いきなりオリジナルを作ろうとすることです。
基礎が固まっていない段階では判断材料が少なく、「なんとなく配置した」「なんとなく色を選んだ」という状態になりがちです。
その点、模写はスタート地点が明確です。見本を再現する中で、自然と次の点に意識が向きます。
- 配色：なぜこの色の組み合わせなのか
- 余白：なぜここはあえて空けているのか
- 文字組み：サイズや太さの差はどんな役割か
- 整列：どこを基準に揃えているのか
こうしたルールを、手を動かしながら覚えられるのが模写の強みです。
模写は、「知識はあるけど作れない」を突破しやすいデザイン勉強法です。
バナー模写は効果的だが初心者には続けにくい
模写といえば、バナー模写が有名です。
効果は高いですが、初心者には少しハードルがあります。
理由は、始めるまでの準備が多いこと。
- 参考バナー探し
- 写真素材探し
- ロゴ素材の準備
- フォント探し
これだけで疲れてしまい、肝心のデザインの勉強に入る前に止まってしまうケースも少なくありません。
バナー模写は効果的ですが、初心者には「続けにくい構造」になりやすいのが実情です。
MASA僕もトライしてみましたが、準備が面倒でした
「デザインのドリル」はすぐデザインの勉強に入れる
ここで「デザインのドリル」の強みが活きてきます。
模写に必要な要素がそろっているため、すぐにデザインの勉強を始められるのが特徴です。
素材探しやフォント選びに時間を取られないので、
- 配置
- バランス
- 見せ方
といった、本当に鍛えたい部分に集中できます。
たとえるなら、
- バナー模写：準備から始まるトレーニング
- デザインのドリル：すぐ始められるトレーニング
という違いです。
この「始めやすさ」が、継続につながります。
継続できるからこそ、デザインの型が増えていきます。
考えながら手を動かせるから力がつく
「デザインのドリル」は、ただ手を動かすだけで終わりません。
模写の中で、自然と「なぜ？」を考えるようになります。
- なぜこの情報は上にあるのか
- なぜここだけ文字が強調されているのか
- なぜ余白を詰めていないのか
こうした疑問を持つことで、「見た目を作る」から「意図を考える」作業へと変わっていきます。
この考え方は、Webデザインだけでなく、動画編集やサムネ制作にも応用できます。
「なんとなく置く」から卒業できる。
それが、「デザインのドリル」を使ったデザイン勉強の大きなメリットです。
デザインのドリルを使って模写をやってみよう
手順は以下の通りです。
- 素材をダウンロードする
- 新規ドキュメント作成
- 見本画像配置
- カラー準備
- フォント準備
- 素材画像配置
- テキスト入力
MASA今回は「デザインのドリル #1」Lesson1 を例に、模写の進め方をわかりやすく解説します
本に記載されているサイトURLから、素材をダウンロードします。
※デザインのドリル＃１では、p4に記載されています
指定サイズを選択し、アートボード「３つ」で新規ドキュメントを作成します。
作成後は以下のようになりますが、作業しやすいようにレイアウトを変更します。
アートボードパネル➡アートボード２を選択➡アートボードツールでアートボード１の真上に移動
アートボードツールは、ツールメニューの中にあります（以下）
アートボードツールを選択した状態で、ドラッグして移動させます。
同様に、
アートボードパネル➡アートボード３を選択➡アートボードツールでアートボード１の左側に移動
ドラッグして移動するときは、表示メニューからスマートガイドにチェックを入れておくとよいです。
アートボードの座標は、上部パネルで確認できます。
上下左右の位置関係が下記の条件と一致していれば問題ありません。
一致していない場合はズレがあるため、アートボード1を基準に調整(同じ座標を入力)します。
アートボード2 の X座標 ＝ アートボード1 の X座標
アートボード3 の Y座標 ＝ アートボード1 の Y座標
アートボード1で模写を行うために、あらかじめダウンロードしておいた完成サンプル画像を、アートボード2とアートボード3に配置します。
上のように定規を表示させ、ガイド線を引いておくと画像や文字の位置関係が正確になります。
カラー用のレイヤーを新規作成します。
続いて、アートボードの外側に長方形ツール 
などを使って任意のシェイプを作成し、塗りの色を書籍で指定されたカラーに設定します。
色を変更する場合は、選択ツール 
で作成したシェイプを選び、カラーウィンドウから色を調整できます
フォント用のレイヤーを作成します。
続いて、アートボードの外側にテキストツール 
を使って文字を入力し、書籍で指定されたフォントに設定します。
フォントを変更する場合は、選択ツール で作成したテキストを選び、文字パネルなどから変更できます
あらかじめダウンロードしておいた画像素材をアートボード1に配置します（配置方法はSTEP3と同じです）。
配置後は、選択ツール で画像を選択したまま、ガイド線に合わせて縮小します。
画像のはみ出した不要部分は、クリッピングマスクを使って非表示にします。
表示したい画像と同じサイズの長方形を、長方形ツール を使ってその上に作成します。
この時、色はどれでもOKです。
長方形は、必ず画像の上に置くこと
続いて、作成した長方形と画像を両方選択し 、クリッピングマスクします。
テキストツール を使って、必要な文字をどんどん入力していきます。
入力が終わったら、文字を選択し STEP4とSTEP5で設定したカラーやフォントの部分をスポイトツール 
でクリックすると、同じ色・同じフォントが適用されます。
見本と同じにしたい場合
文字のトラッキング（全体の長さ）やカーニング（字間）を見本と同じにしたい場合は、見本画像の上に文字を重ね、alt（option）キー＋方向キー（←・→）で微調整します。
その際、文字色を一時的に見本とは異なる目立つ色に変えておくと、ズレが確認しやすくなります。
あわせてフォントサイズや行送り（縦の文字間隔）は文字パネルで調整します。
あとは上記を繰り返し、すべての文字を入力すると完成です。
必要に応じてガイド線を引き、文字の位置を見本と合わせましょう！
「手の中にあるもの」という文字の横にある線は直線ツール 
で書きました
補足１：見本をよく観察することが大切（デザインの勉強の第一歩）
模写は手を動かす練習だと思われがちですが、実はそれ以上に大切なのが、見本をよく観察する時間です。
ここを丁寧に行うだけで、デザインの勉強の質は大きく変わります。
見本全体を眺めながら、次のポイントを確認してみましょう。
観察するポイント（全体）
- 配色：使われている色は何色くらいか
- 文字：どこから情報が目に入り、どんな順番で読ませているか
- 余白：なぜスッキリして、まとまって見えるのか
MASA先に手を動かす手順を紹介しましたが、実際には見本をしっかり観察してから模写するのが正しい進め方です
配色のルールを観察する
配色は、デザイン全体の印象を大きく左右します。
感覚で決めているように見えても、実際には役割があります。
チェックしたいポイントはこちらです。
- メインカラーは何色か
- 使われている色は、役割ごとに整理されているか
- サブカラー・アクセントカラーはどこに使われているか
色の役割を意識して観察すると、「なぜこの配色だと見やすいのか」が理解しやすくなります。
これは、デザインの勉強を進めるうえで欠かせない視点です。
配色に迷ったときは、配色に特化した参考書を1冊持っておく と安心です。
👉 配色の考え方を学ぶのにおすすめの書籍はこちら
文字サイズとフォントの使い分けを観察する
次に注目したいのが、文字の見せ方です。
ここでは、文字サイズの強弱とフォント選び をセットで観察します。
まずは、文字サイズを確認してみましょう。
- 視線はどの順番で流れるか
- 一番大きい文字はどこか
- 見出し・本文・補足テキストのサイズ差はどれくらいか
これだけでも、情報の優先順位が見えてきます。
次にフォントです。「なぜこのフォントが使われているか」を考えてみてください。
- やわらかい印象か、かたい印象か
- 情報を伝えるためか、雰囲気づくりか
- 見出しと本文で役割分担されているか
フォントは、おしゃれに見せるためだけのものではありません。
情報の性質に合った文字を選ぶことで、読みやすさが生まれます。
文字サイズとフォントをあわせて観察することで、デザインの勉強に欠かせない 情報設計の感覚 が身についていきます。
👉 フォント選びの基礎が学べるおすすめ書籍はこちら
余白の取り方を観察する
最後にチェックしたいのが、余白です。
余白は「何もない部分」ではありません。
次の点を意識して見てみましょう。
- 文字同士の間隔は適切か
- 要素と要素の距離にメリハリがあるか
- あえて何も置いていない空間はどこか
余白がしっかり取られていると、情報が整理され、全体が読みやすくなります。
これも、デザインの勉強では欠かせない基本要素です。
余白の考え方は、文章だけでは分かりにくいので、図解が多い本を参考にする のがおすすめです。
👉 余白・レイアウトの理解に役立つおすすめ書籍はこちら
補足２：同じ素材で違うパターンをつくる（デザインの勉強を一段深める）
「デザインのドリル」には、1つの演習の中に複数の作例があります。
まずは見本どおりに1つ作り、慣れてきたら 残りの作例にも挑戦してみましょう。
同じ素材でも、配置や文字の扱い方が変わるだけで、デザインの印象は大きく変わります。
これは、デザインの勉強でぜひ体感しておきたいポイントです。
基本は、次の流れを繰り返すだけです。
- 本の解説を読む
- 見本を観察する
- 手を動かして再現する
このサイクルを回すことで、配色や文字サイズ、余白といった基本が少しずつ身についていきます。
余裕が出てきたら、同じ素材でアレンジ してみましょう。
- フォントを変える
- 配色を変える
- 文字の配置を変える
小さな変更でも、見え方は大きく変わります。
「どれが一番伝わるか」を考えることが、デザインの勉強につながります。
また、本と似た雰囲気のポスターやバナーを参考にし、本とは違うパターンを作ってみる のもおすすめです。
MASA模写 → 別パターン → アレンジ
この流れを意識することで、「真似する練習」から「考えて作る練習」へと自然にステップアップできます
まとめ：デザインの勉強は「デザインのドリル」を使った模写から始めよう
今回は、「デザインのドリル」を使って、初心者でも効率よくデザインの勉強ができる模写の方法 を紹介しました。
デザインの勉強では、いきなりオリジナルを作るよりも、まずは良いデザインを真似して、型を身につけることが大切です。
その点で、模写は取り組みやすく、効果を実感しやすい勉強法だと言えます。
見本をよく観察し、そっくりそのまま模写する。
さらに、同じ素材で別パターンを作る。
この流れを繰り返すだけで、デザイン力は少しずつ積み重なっていきます。
デザインはセンスで決まるものではありません。
正しい方法で手を動かせば、初心者でも確実に成長できます。
まずは「デザインのドリル」を使って、デザインの勉強を始めてみてください。