こんにちは、ひよこWebデザイナーの社員Ｈです！
私は異業種からWebデザイナーとして制作会社に入社。
それまでは職業訓練校でデザインやコーディングを学んでいました。
私と同じWebデザイナーになりたての方や、Webデザイナーを目指す方々のお力になれたらと思い、この度記事を書きました。
模写に苦手意識を持っている方やあまり練習に手ごたえを感じられていない方は、ぜひ最後まで読んでいただけると嬉しいです。
デザインにおける勉強法の基本といえば、やはり「模写」ですよね。
特に「バナー模写（バナートレース）」はチラシやWebサイトの模写よりも手軽にできるので、デザインを学び始めたばかりの初心者におすすめの勉強法なのです、が……。
皆さん。
模写に苦手意識……持っていませんか？
そもそもバナー模写のやり方がわからない方はこちら！
初心者だった私の、バナー模写が苦手だった理由
- 見本バナーのフォントがわからない！
- 似たような素材や画像が全然見つからない！
- 難しくて全然完成させられない……。
- そもそも模写ってなんのためにするの？（ポートフォリオに載せるのも微妙だし）
- とにかく時間がかかるよお！！
職業訓練校でWebデザインを学び始めた頃、私は上記のような思いをずっと抱えていました。
さてやるぞー！とやる気に溢れながらPhotoshopを開くものの、
見本バナーのフォントや似た素材を探すのに2時間くらいかかったり、
細部まで完璧にしようとして、全然うまくいかず完成させられなかったり……。
途中でやめて、また新しい見本に挑戦しようとして、またやめてを繰り返した結果、未完成のデータばかりが増えていく始末。
……これが私の中に、模写への苦手意識が根付くようになった経緯です。
そんな私の苦手意識を変えてくれたのが、現役Webデザイナーであり様々な場所で講師も勤めている先生が教えてくれた模写の鉄則でした。
苦手意識を変えた【バナー模写の鉄則】
バナー模写の鉄則、それは……
先生初心者の模写は妥協が大事やで
社員Hえっ？
先生そもそも素材だってそっくりなもの探さなくてもええんやで
社員Hえっ！？
そう、「妥協」。
これを聞いたとき、私は慌ててこう返しました。
社員Hいや、いやいやいや……だって、似たようなフォントとか素材とか使わないと、そっくりにならないじゃないですか……
先生なるほど、「そっくり」かあ……だから素材探しに1時間以上かけてるの？下手したら素材探しだけで気力を使い切って終わっちゃってるよね
社員Hだ、だってなかなかそっくりの素材が見つからないんですよ……
先生うーん、また「そっくり」が出てきたね。
……あのね、Ｈさん。
超初心者さんは、それこそ「妥協」していいんだよ
社員Hえ？「そっくり」を「妥協」するんですか？模写なのに！？
先生そうだよ。でも、急に言われてもちょっとよくわかんないよね。
まずは、「そもそも何のために模写練習をするのか？」ってところから解説しようか
そもそも初心者が模写をする理由って？
模写をする理由はさまざま～初心者さんの場合～
- ソフトの操作に慣れるため
- あしらいや文字の装飾などを実際に作れるようになるため
- いろんなデザインを見て、デザインの引き出しを増やすため
- どうしてこんなデザインになっているのかを考察する力を得るため
先生初心者さんの場合、模写ってこれらができるようになるために有効な練習方法なんだよね
社員Hはい……
先生初心者さんにとって模写は、自分のスキルアップのための筋トレみたいなものなんだ。つまり……
先生今回のHさんの模写の目的は、
「見本バナーそっくりに作る」ことじゃないんだよね
デザイン上達は実践あるのみ
社員Hそっくりに作る、が、初心者の模写の目的ではない……
先生そう。模写でやるべき練習って、素材探しの練習じゃないと意識してみて。
そもそも実案件なら、素材はお客さんから支給されたり有料素材を使うことも多い。
だったら模写の素材探しに2時間使うより、文字に効果をつける方法やあしらいを作る方法を、実際に手を動かして身につけるために時間をとる方がタイパ良し！
社員H確かに……
先生技術職は実践あるのみなんだ。物量が大事。
社員H確かにそれは実感してます……
じゃ、じゃあ、私はこれから何に気をつけて模写すればいいんですか？流石に全部を妥協するわけにはいきませんよね？
先生うん、それはそうだね。じゃあ、どこに気を付けるべきか、何をするべきかを教えようか
学び始めたころにやる模写の時、気を付けるべきポイント・やるべきこと
先生超初学時の模写のポイントを簡潔にまとめると、下記の通り
～気を付けるべき・やるべきポイントまとめ～
- まずは「何のために模写をするのか」を決めよう
- フォントは「書体」を合わせよう
- 素材は「雰囲気」だけ合わせよう
- 見本を見て「どんな気持ちになったか」を考えよう（綺麗・高級そう・かっこいいなど）
- どうしてそんな気持ちになったのかを考えよう（実例付き）
- 気づいたこと、学んだこと、できるようになったことを最後にまとめよう
先生一つずつ説明していくよ
１．まずは何のために模写をするのかを決めよう
先生さっきも言ったけど、
超初学時の模写をする理由はだいたい下記の通り
- ソフトの操作に慣れるため
- あしらいや文字の装飾などを実際に作れるようになるため
- いろんなデザインを見て、デザインの引き出しを増やすため
- どうしてこんなデザインになっているのかを考察する力を得るため
先生これらの目的によって、何を妥協するかが変わるんだ
・ソフトの操作に慣れるため
・あしらいや文字の装飾などを実際に作れるようになるため
→やり方を調べたり再現するために時間を多くとる
・いろんなデザインを見て、デザインの引き出しを増やすため
・どうしてこんなデザインになっているのかを考察する力を得るため
→観察する時間を多くとる
どちらであっても、「そっくりそのまま完璧に模写しないと！」という気持ちは不要！
完璧主義を「妥協」して、使うべきところに時間をかけよう。
２．フォントは「書体」を合わせよう
先生フォントはまるきり同じにしなくてもいいけど、
最低限書体だけは合わせるようにしよう
社員H書体って……ゴシック体とか、明朝体とかってジャンルのことですか？
先生そうそう、明朝体にも丸みのあるもの、華奢なもの、といろんな種類があるけれど、慣れてくればある程度は合わせられるようになるから、超初学者時代は書体だけ押さえておけばＯＫ
フォントはデザインの大事な要素。
でも初期のころの模写は前述の通り、アプリの操作やノウハウをインストールすること。
先生フォントは全体の雰囲気を左右するからね
社員H雰囲気……いわゆるトンマナってやつですか？
トンマナとは？
トーン（tone）＆マナー（manner）の略。
コンセプトや雰囲気に一貫性を持たせること。
先生そうそう、その通りだよ。次に説明するけど……
３．素材は「雰囲気」だけ合わせよう
先生写真とかの素材も同じなんだ。だいたい似ているならそれでいい。
そっくりじゃなくても、雰囲気（トンマナ）が合ってるならそれでOKとするんだ
社員Hじゃあ、たとえば人物のイラスト素材が入ってる場合だと……
先生同じ素材をわざわざ探す必要はないよ。それに、同じイラストレーターの作品で統一する必要もない。雰囲気が似ているものを選べばいいんだ。
そのイラストが鉛筆の線でふわっとしたタッチなら、同じくふわっとしたタッチの絵を探して入れる、って感じかな
社員Hつまり、ゆるふわ可愛いバナーの時に、劇画チックなハードボイルドイラストを入れちゃダメってことですよね
先生まあその通りなんだけど……そんなことする人いる？
４．見本を見てどんな気持ちになったかを考えよう（綺麗・高級そう・かっこいいなど）
先生ちなみにHさんはどうしてこのバナーを選んだの？
社員Hなんかおしゃれでナチュラルで可愛いな～と思ったので……
先生なるほど。それってつまり、このバナーデザインにはＨさんにそう思わせる工夫がされているってことなんだよね。
だから、デザインをする側の人間としては、そう思わされた理由を考えないといけないんだ
５．どうしてそんな気持ちになったのかを考えよう（実例付き）
先生バナーは商業デザイン。全部の工夫に意味があるんだ。
たとえば、このバナーを見てみようか
先生この左上の手書き風フォントを、
ゴシック体のフォントに変えると……
社員Hうわっ、おしゃれ感がなくなりましたね
先生だよね。じゃあ次に、広い字間を狭めてみると……
社員Hより……ゆったり感？おしゃれ感？的なものが
なくなったような気が……
先生そうそう。つまりこの手書き風フォントも、広めの字間も、おしゃれ感や抜け感を見ている人に感じさせるための工夫なんだ。ささやかなことではあるけど、確かに印象は変わるよね
社員Hじゃあ今度私がおしゃれなバナーを作るときは、この字間や手書き風フォントを取り入れてみたらいいんですね
先生その通り！
デザインの引き出しっていうのは、そうやって作られていくものなんだよ。
だからこそ、作る前にじっくり観察することも大切なんだ
６．気づいたこと、学んだこと、できるようになったことを最後にまとめよう
先生これもとっても重要だよ。これらを改めてまとめることで、自分がどんなものを得られたか、どんなことができるようになったかを再確認できる
社員H帰るまでが遠足、と同じように、「振り返り」をするまでが模写練習なんですね
先生そういうこと。なにより、今日自分はこれだけのことを学べたんだなあってモチベーションアップにもつながるからね
社員Hモチベがあるとないとでは、自主勉強のはかどり具合も段違いですもんね……
先生そうだね。あともう一つ大事なポイント。
今回は「そっくりそのまま作らないでいい」と教えたけど、これは「超初心者～初心者向け」の話なんだ。
中級～上級者になってくると、細部までそっくりに作りこむ機会をもつ意味も出てくるんだよ。
ただ初心者さんは、そのステップに進む前に、しっかりと上記のようなやり方で操作やノウハウを身に着けようね
社員H筋トレに例えると……腕立て５回もできないうちから100kgのバーベルを上げようとしちゃだめってことですかね？
先生その通り。
焦る必要はないよ。
段階を踏んで、しっかりステップアップしていこう！
まとめ
私が完璧にこだわっていたのは、初心者特有の「焦り」からだったのかもしれないな、と今では思えます。
先生のお話を聞いてから、模写への考えが気楽なものになり、模写練習も今までよりも気軽に行えるようになりました。
だから、完璧にできなくても、中途半端でも大丈夫。
気づけたことや学べたことがあるならOKなんです。
完璧にこだわりすぎず手を動かして、一緒にデザインスキルを磨いていきましょう！
この記事が、同じような悩みを抱えた初心者の方の参考になれば幸いです。
今回の先生のレッスンを受けるならこちらから
ポートフォリオにも使用可能！Web鍛の無料課題はこちら
※画像素材は定額制プランのあるサイトを選ぶのがオススメです。
