バナーの模写をしよう！

INDEX

バナーの模写をしよう！

教材全体の目安学習時間：2時間10分

この章で到達できるゴール：

優れたバナーデザインを分析し、その意図を言語化できるようになる
Pinterestを活用し、目的に合った参考バナーを効率的に収集・整理できるようになる
自身の興味関心に基づいて選んだバナーを5つ模写し、学びを言語化して提出できるようになる
模写で得た学びを、次のオリジナル制作に活かす方法を理解できる

はじめに：この教材について

目安の学習時間：10分

この教材がおすすめの人

本教材は、以下のような目標や課題を持つ方に特におすすめです。

デザインの引き出しを増やしたい方
優れたデザインの理由を言語化したい方
オリジナルバナー制作の土台を固めたい方
デザイナーとして観察眼を鍛えたい方

デザインの学習を始めたばかりの段階で、良い見本をたくさんインプットし、その構造を理解する訓練は、今後の成長を大きく左右します。

この教材で、そのための強固な基礎を作りましょう。

本教材で到達できるゴール

この教材を終えると、優れたデザインをただ「見る」だけでなく、構造的に「観る」ことができるようになります。
そして、その分析結果を元に、質の高い模写を5つ完成させ、次のオリジナル制作に繋がる確かなスキルと自信を手に入れることができます。

ツールの操作方法だけでなく、デザイナーとしての「思考法」を身につけることが、本教材の最大のゴールです。

学習の進め方と提出物

本教材は、以下の流れで学習を進めていきます。

インプット：
模写の重要性や、デザインを分析するための思考法を学びます。
準備：
デザインの参考を集めるための情報収集術を身につけます。
アウトプット：
実際に5つのバナーを模写し、そこから得た学びを言語化して提出します。

なぜ「模写」が重要なのか

目安の学習時間：30分

デザイン学習のよくある悩み

デザインの学習を始めると、多くの人が次のような壁にぶつかります。

良いデザインはたくさん知っているのに、自分では作れない
いざ制作しようとしても、アイデアが全く思い浮かばない
完成しても、見本と比べてなんだか素人っぽくなってしまう

これらの悩みは、デザインの「正解」を知らないことや、良いデザインの「構造」を理解できていないことが原因で起こります。
この課題を解決する最も効果的なトレーニングが「模写」です。

デザインの意図を読み解く思考法

デザインスキルを向上させるためには、普段のデザインに対する接し方を少し変える必要があります。
それは、デザインを意識的に、そして深く観察する習慣を持つことです。

優れたデザインをただ眺めるのではなく、「なぜこのデザインはこうなっているのか？」と常に問いを立てながら、細部まで観察・分析する行為が、スキルアップの鍵を握ります。

なぜ、このフォントが選ばれているのだろう？
この余白の広さには、どんな意図があるのだろう？
この配色は、ターゲットにどんな印象を与えるのだろう？

このように一つ一つのデザイン要素に対して問いを持つことで、制作者の意図やデザインの構造を深く理解できます。

プロのデザイナーは、日常的に優れたデザインを観察・分析することで、無数のデザインパターンをインプットしています。
模写は、この思考法を強制的に、かつ最も効率的に鍛えるためのトレーニングなのです。

模写がもたらす3つの効果

模写トレーニングを継続することで、具体的に以下の3つの効果が得られます。
これらはデザイナーとして成長するための重要な要素です。

効果1：インプットの質と量が飛躍的に向上する
- 優れたデザインをピクセル単位で再現しようとすることで、今まで気づかなかった細部のこだわりに気づけます。質の高いインプットが、アウトプットの質を劇的に向上させます。
効果2：デザインの引き出しが爆発的に増える
- 様々なパターンのデザインを自分の手で再現することで、レイアウト、配色、フォントの組み合わせなどが無意識のレベルでストックされます。これが「デザインの引き出し」となり、オリジナル制作でアイデアに困らなくなります。
効果3：ツールの使い方を身体で覚えられる
- 「この表現はどうやるんだろう？」と考えながら手を動かすことで、デザインツールの様々な機能を実践的に、かつ効率的に習得できます。

考えてみよう！：好きなデザインの理由

あなたが最近「素敵だな」と感じたWebサイトや広告バナーを一つ思い浮かべてみましょう。
それはなぜ素敵だと感じましたか？色、形、文字、雰囲気など、具体的な言葉で3つ挙げてみてください。

解答例

例1：落ち着いた茶系の配色で、大人っぽい雰囲気が素敵だった。
例2：手書き風のフォントが使われていて、親しみやすさを感じた。
例3：写真が大きく使われていて、インパクトがあった。

"引き出し"を作る参考収集術

目安の学習時間：30分

良いインプットが良い作品を生む

優れたデザインを生み出すためには、まず優れたデザインをたくさん知ることが不可欠です。
デザインは情報収集が9割と言っても過言ではありません。
日頃から質の高いインプットを心がけ、自分だけのデザインライブラリを構築していきましょう。

そのために、現在最も効果的なツールがPinterest（ピンタレスト）です。
世界中のデザインが集まるプラットフォームであり、多くのプロデザイナーが情報収集やアイデア出しに活用しています。

Pinterestの基本操作

まずはPinterestの基本的な使い方をマスターしましょう。
アカウント作成から、基本的な機能である「Pin」と「Board」の概念を理解することが第一歩です。

バナーの模写をしよう！ 1-1

この動画はデモンストレーション動画になります。音声は入っておりません。

重要語句

Pin（ピン）：Pinterest上にある個々の画像や動画のこと。
Board（ボード）：Pinをテーマごとにまとめて保存しておくフォルダのようなもの。

バナーを見つける検索テクニック

Pinterestで質の高い参考デザインを見つけるには、検索キーワードが重要です。
ただ単語を並べるだけでなく、目的意識を持ってキーワードを組み合わせることで、効率的に参考とするバナーを見つけ出すことができます。

豆知識

Pinterestの検索は、日本語だけでなく英語で検索すると、海外の優れたデザインも発見できるためおすすめです。
（例：「バナーデザイン」→「banner design」、「広告」→「ads design」）

以下に、参考バナーを探す際に役立つキーワードの例を挙げます。

目的・ジャンル	キーワード例
基本的な検索	バナーデザイン, webデザイン, 広告
業種で絞る	美容バナー, 食品広告, IT サービスデザイン
テイストで絞る	シンプルバナー, ポップデザイン, 高級感広告
色で絞る	青デザイン, ピンクポップバナー

参考を整理するオリジナルボード作成

集めた参考デザインは、後から見返しやすいように整理することが非常に重要です。
自分なりのルールでボードを分類し、自分だけのデザインライブラリを育てていきましょう。

ボードの分類方法に正解はありませんが、以下のような分け方がおすすめです。

テイスト別：「シンプル」「ポップ」「高級感」など
業種別：「美容系」「食品系」「IT系」など
レイアウト別：「写真メイン」「イラストメイン」「文字メイン」など

また、一つのボード内でも「サブボード」機能を使えば、さらに細かく分類できます。
例えば、「美容系」ボードの中に「スキンケア」「コスメ」「脱毛」といったセクションを作成すると、より探しやすくなります。

「＋」をクリックして「サブボード」を選択します。

サブボードの名前を入力します。

サブボードが作成されました。ここに関連するバナーをまとめて保存できます。

練習問題：テーマに沿ったバナー収集

問題
「20代女性向けの夏休み旅行キャンペーン」というテーマで、参考になりそうなバナーをPinterestで5つ探し、新しく作成した「旅行キャンペーン」ボードに保存してください。

解答手順

Pinterestの検索窓で「旅行キャンペーンバナー」「夏休みセールデザイン」などのキーワードで検索します。
テーマに合うと感じたバナー画像を5つ見つけます。
新規ボード「旅行キャンペーン」を作成し、見つけた5つの画像をすべてそのボードにPin（保存）します。

模写の効果を最大化する「分解思考」

目安の学習時間：30分

デザインを4要素に分解して観る

いよいよ模写の実践…の前に、もう一つ重要な思考法を学びます。
それが「分解思考」です。

完成されたデザインを一つの塊として捉えるのではなく、複数の要素の集合体として分解して観ることで、模写の精度と学習効果が格段に上がります。

ここでは、デザインを以下の4つのチェックポイントで分解する方法を解説します。

チェックポイント1：レイアウトと余白

レイアウトはデザインの骨格です。
情報がどのような順序で、どのように配置されているかを読み解きます。

視線の流れ：
人の視線は左上から右下へ流れる「Z型」や、左上から下へ、次に少し右を見て下へ流れる「F型」が基本です。バナーがどちらのパターンに近いか観察しましょう。
余白の役割：
要素が詰め込まれているか、ゆったりと配置されているかで印象は大きく変わります。余白は情報を整理し、高級感や清潔感を演出する重要な要素です。

チェックポイント2：タイポグラフィ

タイポグラフィは、文字のデザイン全般を指します。
文字は情報を伝えるだけでなく、デザインの雰囲気を決定づけます。

フォントの印象：
ゴシック体は力強く現代的、明朝体は繊細で伝統的な印象を与えます。どのようなフォントがなぜ選ばれているのか考えましょう。
ジャンプ率：
見出しと本文など、文字サイズの差の比率をジャンプ率と呼びます。ジャンプ率が高いとダイナミックで元気な印象に、低いと落ち着いて洗練された印象になります。
文字組み：
文字と文字の間（カーニング）や、行と行の間（行間）がどのように調整されているかも、読みやすさと美しさに直結します。

チェックポイント3：配色

配色は、デザインの第一印象を決定づける重要な要素です。
色が持つイメージと、それがターゲットにどう作用するかを考えます。

主要な色：
デザイン全体で最も面積の大きい「メインカラー」、次に大きい「サブカラー」、そして最も目立たせたい部分に使う「アクセントカラー」の3つを見つけましょう。
配色比率：
一般的に「メインカラー70%：サブカラー25%：アクセントカラー5%」が美しいとされています。模写したいバナーがどのような比率になっているか観察してみましょう。
色の持つイメージ：
赤は情熱的、青は誠実、緑は自然的など、色が与える一般的な印象と、バナーの訴求内容が合っているかを確認します。

チェックポイント4：あしらいと質感

あしらいは、デザインの品質をぐっと引き上げる細部の装飾です。
これらを丁寧に観察・再現できるかが、模写のクオリティを左右します。

影や光：
ボタンに付けられた影（ドロップシャドウ）や、写真のキラキラした光（フレア）などは、立体感や特別感を演出します。
図形や罫線：
見出しの下に引かれた一本の線や、背景にうっすらと配置された幾何学模様など、情報を整理したり世界観を補強したりする役割があります。
質感：
紙のようなテクスチャ、金属のような光沢など、デザインに与えられた質感がどのような効果を生んでいるか観察しましょう。

章末課題：5つのバナー模写に挑戦しよう

目安の学習時間：30分 ※実際の制作時間は含みません

課題の概要

これまでの学習の総仕上げです。
自分の興味があるジャンルや、今後作れるようになりたいと感じる参考バナーを自由に5つ見つけて、模写をしてみましょう。

制作した5つの作品から、それぞれどんなことが学べたのかを自分の言葉で言語化し、制作物とセットでコーチに送信しましょう。

学びを言語化するポイント

ただ模写するだけでなく、制作から得られた学びを言語化することが、スキルを定着させる上で非常に重要です。

言語化のヒント

難しく考えず、制作中に「なるほど！」と思ったことや、完成して気づいたことなどをメモしておきましょう。
これまでに学んだ「4つのチェックポイント」の観点（レイアウト、タイポグラフィ、配色、あしらい）から気づきを書き出すのがおすすめです。
「なぜこのデザインはターゲットに響くのか」を自分なりに考えたことをまとめることが、オリジナル制作への第一歩となります。

提出物と提出方法

学習の成果として、以下の2点をコーチに提出しましょう。

提出物一覧

制作物：模写したバナーの画像ファイル5点
言語化した学び：各作品から得られた学びをまとめたドキュメント

制作が完了したものは、模写したバナーと「学びの言語化」をセットでコーチに提出してください。
提出方法について不明な点があれば、コーチに確認しましょう。

スキルアップを加速させる習慣

この教材はゴールではなく、デザイナーとしての成長を続けるためのスタートラインです。
本物のスキルにするために、今回学んだ「参考収集」と「模写」をぜひ習慣にしてください。
具体的なアクション例：
- 通勤・通学中にPinterestで参考バナーを5つ見る。
- 週末に1つだけ、時間を計って模写に挑戦する。
この小さな積み重ねが、数ヶ月後には大きな実力差となって現れます。継続して取り組んでいきましょう。

これで「バナーの模写をしよう！」の解説を終わります。
お疲れ様でした！