模写をするなら「○○」をやめよう!苦手意識を持つ方へ伝えたい、効率的なバナー模写のやり方

こんにちは、ひよこWebデザイナーの社員Hです!
私は異業種からWebデザイナーとして制作会社に入社。
それまでは職業訓練校でデザインやコーディングを学んでいました。
私と同じWebデザイナーになりたての方や、Webデザイナーを目指す方々のお力になれたらと思い、この度記事を書きました。
模写に苦手意識を持っている方あまり練習に手ごたえを感じられていない方は、ぜひ最後まで読んでいただけると嬉しいです。

デザインにおける勉強法の基本といえば、やはり「模写」ですよね。
特に「バナー模写(バナートレース)」はチラシやWebサイトの模写よりも手軽にできるので、デザインを学び始めたばかりの初心者におすすめの勉強法なのです、が……。
皆さん。

模写に苦手意識……持っていませんか?

そもそもバナー模写のやり方がわからない方はこちら!

あわせて読みたい
記事を見ながら実際に作れる!Photoshopでのバナー作成のやり方(素材紹介・図解あり) Photoshopでバナーを作りはじめた初心者の方へ、バナー制作の基礎操作を網羅できるチュートリアルをお届けします。各種素材へのリンクも用意しているので、記事を見なが...
目次

初心者だった私の、バナー模写が苦手だった理由

  • 見本バナーのフォントがわからない!
  • 似たような素材や画像が全然見つからない!
  • 難しくて全然完成させられない……。
  • そもそも模写ってなんのためにするの?(ポートフォリオに載せるのも微妙だし)
  • とにかく時間がかかるよお!!

職業訓練校でWebデザインを学び始めた頃、私は上記のような思いをずっと抱えていました。
さてやるぞー!とやる気に溢れながらPhotoshopを開くものの、
見本バナーのフォントや似た素材を探すのに2時間くらいかかったり
細部まで完璧にしようとして、全然うまくいかず完成させられなかったり……
途中でやめて、また新しい見本に挑戦しようとして、またやめてを繰り返した結果、未完成のデータばかりが増えていく始末。

……これが私の中に、模写への苦手意識が根付くようになった経緯です。

そんな私の苦手意識を変えてくれたのが、現役Webデザイナーであり様々な場所で講師も勤めている先生が教えてくれた模写の鉄則でした。

苦手意識を変えた【バナー模写の鉄則】

バナー模写の鉄則、それは……

先生

初心者の模写は妥協が大事やで

社員H

えっ?

先生

そもそも素材だってそっくりなもの探さなくてもええんやで

社員H

えっ!?

そう、「妥協」
これを聞いたとき、私は慌ててこう返しました。

社員H

いや、いやいやいや……だって、似たようなフォントとか素材とか使わないと、そっくりにならないじゃないですか……

先生

なるほど、「そっくり」かあ……だから素材探しに1時間以上かけてるの?下手したら素材探しだけで気力を使い切って終わっちゃってるよね

社員H

だ、だってなかなかそっくりの素材が見つからないんですよ……

先生

うーん、また「そっくり」が出てきたね。
……あのね、Hさん。
超初心者さんは、それこそ「妥協」していいんだよ

社員H

え?「そっくり」を「妥協」するんですか?模写なのに!?

先生

そうだよ。でも、急に言われてもちょっとよくわかんないよね。
まずは、「そもそも何のために模写練習をするのか?」ってところから解説しようか

そもそも初心者が模写をする理由って?

模写をする理由はさまざま~初心者さんの場合~

  • ソフトの操作に慣れるため
  • あしらいや文字の装飾などを実際に作れるようになるため
  • いろんなデザインを見て、デザインの引き出しを増やすため
  • どうしてこんなデザインになっているのかを考察する力を得るため
先生

初心者さんの場合、模写ってこれらができるようになるために有効な練習方法なんだよね

社員H

はい……

先生

初心者さんにとって模写は、自分のスキルアップのための筋トレみたいなものなんだ。つまり……

先生

今回のHさんの模写の目的は、
「見本バナーそっくりに作る」ことじゃないんだよね

デザイン上達は実践あるのみ

社員H

そっくりに作る、が、初心者の模写の目的ではない……

先生

そう。模写でやるべき練習って、素材探しの練習じゃないと意識してみて。
そもそも実案件なら、素材はお客さんから支給されたり有料素材を使うことも多い。
だったら模写の素材探しに2時間使うより、文字に効果をつける方法やあしらいを作る方法を、実際に手を動かして身につけるために時間をとる方がタイパ良し!

社員H

確かに……

先生

技術職は実践あるのみなんだ。物量が大事。

社員H

確かにそれは実感してます……
じゃ、じゃあ、私はこれから何に気をつけて模写すればいいんですか?流石に全部を妥協するわけにはいきませんよね?

先生

うん、それはそうだね。じゃあ、どこに気を付けるべきか、何をするべきかを教えようか

学び始めたころにやる模写の時、気を付けるべきポイント・やるべきこと

先生

超初学時の模写のポイントを簡潔にまとめると、下記の通り

~気を付けるべき・やるべきポイントまとめ~

  1. まずは「何のために模写をするのか」を決めよう
  2. フォントは「書体」を合わせよう
  3. 素材は「雰囲気」だけ合わせよう
  4. 見本を見て「どんな気持ちになったか」を考えよう(綺麗・高級そう・かっこいいなど)
  5. どうしてそんな気持ちになったのかを考えよう(実例付き)
  6. 気づいたこと、学んだこと、できるようになったことを最後にまとめよう
先生

一つずつ説明していくよ

1.まずは何のために模写をするのかを決めよう

先生

さっきも言ったけど、
超初学時の模写をする理由はだいたい下記の通り

  • ソフトの操作に慣れるため
  • あしらいや文字の装飾などを実際に作れるようになるため
  • いろんなデザインを見て、デザインの引き出しを増やすため
  • どうしてこんなデザインになっているのかを考察する力を得るため
先生

これらの目的によって、何を妥協するかが変わるんだ

・ソフトの操作に慣れるため
・あしらいや文字の装飾などを実際に作れるようになるため
 やり方を調べたり再現するために時間を多くとる

・いろんなデザインを見て、デザインの引き出しを増やすため
・どうしてこんなデザインになっているのかを考察する力を得るため
 観察する時間を多くとる

どちらであっても、「そっくりそのまま完璧に模写しないと!」という気持ちは不要!
完璧主義を「妥協」して、使うべきところに時間をかけよう。

2.フォントは「書体」を合わせよう

先生

フォントはまるきり同じにしなくてもいいけど、
最低限書体だけは合わせるようにしよう

社員H

書体って……ゴシック体とか、明朝体とかってジャンルのことですか?

先生

そうそう、明朝体にも丸みのあるもの、華奢なもの、といろんな種類があるけれど、慣れてくればある程度は合わせられるようになるから、超初学者時代は書体だけ押さえておけばOK

フォントはデザインの大事な要素。
でも初期のころの模写は前述の通り、アプリの操作やノウハウをインストールすること。

先生

フォントは全体の雰囲気を左右するからね

社員H

雰囲気……いわゆるトンマナってやつですか?

トンマナとは?
トーン(tone)&マナー(manner)の略。
コンセプトや雰囲気に一貫性を持たせること。

先生

そうそう、その通りだよ。次に説明するけど……

3.素材は「雰囲気」だけ合わせよう

先生

写真とかの素材も同じなんだ。だいたい似ているならそれでいい。
そっくりじゃなくても、雰囲気(トンマナ)が合ってるならそれでOKとするんだ

社員H

じゃあ、たとえば人物のイラスト素材が入ってる場合だと……

先生

同じ素材をわざわざ探す必要はないよ。それに、同じイラストレーターの作品で統一する必要もない。雰囲気が似ているものを選べばいいんだ。
そのイラストが鉛筆の線でふわっとしたタッチなら、同じくふわっとしたタッチの絵を探して入れる、って感じかな

社員H

つまり、ゆるふわ可愛いバナーの時に、劇画チックなハードボイルドイラストを入れちゃダメってことですよね

先生

まあその通りなんだけど……そんなことする人いる?

4.見本を見てどんな気持ちになったかを考えよう(綺麗・高級そう・かっこいいなど)

先生

ちなみにHさんはどうしてこのバナーを選んだの?

社員H

なんかおしゃれでナチュラルで可愛いな~と思ったので……

先生

なるほど。それってつまり、このバナーデザインにはHさんにそう思わせる工夫がされているってことなんだよね。
だから、デザインをする側の人間としては、そう思わされた理由を考えないといけないんだ

5.どうしてそんな気持ちになったのかを考えよう(実例付き

先生

バナーは商業デザイン。全部の工夫に意味があるんだ。
たとえば、このバナーを見てみようか

Web鍛バナー課題より
先生

この左上の手書き風フォントを、
ゴシック体のフォントに変えると……

社員H

うわっ、おしゃれ感がなくなりましたね

先生

だよね。じゃあ次に、広い字間を狭めてみると……

社員H

より……ゆったり感?おしゃれ感?的なものが
なくなったような気が……

先生

そうそう。つまりこの手書き風フォントも、広めの字間も、おしゃれ感や抜け感を見ている人に感じさせるための工夫なんだ。ささやかなことではあるけど、確かに印象は変わるよね

社員H

じゃあ今度私がおしゃれなバナーを作るときは、この字間や手書き風フォントを取り入れてみたらいいんですね

先生

その通り!
デザインの引き出しっていうのは、そうやって作られていくものなんだよ。
だからこそ、作る前にじっくり観察することも大切なんだ

6.気づいたこと、学んだこと、できるようになったことを最後にまとめよう

先生

これもとっても重要だよ。これらを改めてまとめることで、自分がどんなものを得られたか、どんなことができるようになったかを再確認できる

社員H

帰るまでが遠足、と同じように、「振り返り」をするまでが模写練習なんですね

先生

そういうこと。なにより、今日自分はこれだけのことを学べたんだなあってモチベーションアップにもつながるからね

社員H

モチベがあるとないとでは、自主勉強のはかどり具合も段違いですもんね……

先生

そうだね。あともう一つ大事なポイント。
今回は「そっくりそのまま作らないでいい」と教えたけど、これは「超初心者~初心者向け」の話なんだ。
中級~上級者になってくると、細部までそっくりに作りこむ機会をもつ意味も出てくるんだよ。
ただ初心者さんは、そのステップに進む前に、しっかりと上記のようなやり方で操作やノウハウを身に着けようね

社員H

筋トレに例えると……腕立て5回もできないうちから100kgのバーベルを上げようとしちゃだめってことですかね?

先生

その通り。
焦る必要はないよ。
段階を踏んで、しっかりステップアップしていこう!

まとめ

私が完璧にこだわっていたのは、初心者特有の「焦り」からだったのかもしれないな、と今では思えます。
先生のお話を聞いてから、模写への考えが気楽なものになり、模写練習も今までよりも気軽に行えるようになりました。

模写練習は自分にとって必要なスキルを得るための「手段」であり、
完璧な模写を作るための時間ではありません。

だから、完璧にできなくても、中途半端でも大丈夫。
気づけたことや学べたことがあるならOKなんです。

完璧にこだわりすぎず手を動かして、一緒にデザインスキルを磨いていきましょう!
この記事が、同じような悩みを抱えた初心者の方の参考になれば幸いです。

今回の先生のレッスンを受けるならこちらから

ポートフォリオにも使用可能!Web鍛の無料課題はこちら

あわせて読みたい
バナー課題|お花の定期便 Web鍛の課題はポートフォリオに載せてもOK!練習課題として、ぜひチャレンジしてみてください。 【お題内容】 一人暮らしの会社員女性向けに、お花の定期便のInstagram...
あわせて読みたい
バナー課題|健康的な野菜ジュースの定期購入を促す 30代のママ向けに、有機野菜10種類でできたジュースのInstagram広告を出したいです 正方形(1080px × 1080px)で作成してください。Instagramの画面で出てくることを想...

Ad

Photoshop以外も契約したいけど、高くて躊躇していませんか?
Adobe Creative Cloudを一番安く購入する方法 →Adobe 1年:39,980円の詳細を見る


素材探しに時間かけていませんか? ロイヤリティフリーの写真素材【PIXTA】 ※画像素材は定額制プランのあるサイトを選ぶのがオススメです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次