【初心者向け】バナー模写の効果を高めるために意識したいこと

2024年1月31日

こんにちは！とっしーです。

Webデザインの勉強をはじめると、必ずと言っていいほど目にするバナー模写という練習。ご存知の方も多いと思います！

とっしー

最近は、特に初心者の方から勉強法などのご相談を受けることも増えてきているのですが、そこでもやはり、バナー模写は最初の段階で取り組んでいただくことが多いです！

このバナー模写、やること自体は「すでに完成されたバナーを真似るだけ」なのですが、目的や意識することを間違えてしまうと単純作業となり、せっかくの学習効果が薄れてしまいます。

また、作業に飽きてしまい、Webデザインの勉強そのものへのモチベーションも落ちていってしまう。。というのも避けたところ！

そこで今回、普段から初心者の方にお伝えしているバナー模写のやり方をまとめることにしました！

効果を高めるための目的と、意識することを簡潔にまとめたので、これからバナー模写やデザイン学習に取り組まれる方、もしくは取り組み中の方も、ぜひ参考にしていただけたら嬉しいです。

それではまずはじめに、目的からみていきましょう！

バナー模写の目的は大きく2つ

Webデザインの学習でバナー模写を行う場合、大きく2つのゴールを目指すのが良いと思います！それが以下の2つ。

デザインツールの使い方習得
デザインの基礎習得

それでは1つずつ具体的に解説していきます！

1. デザインツールの使い方習得

まずは模写を通じて、PhotoshopやIllustratorなどの「デザインツールの使い方」を覚えることが大事です！

基本的な使い方は書籍などでも十分学ぶことができますが、実際に世に出回っているバナーをお手本とすることで、より実践的で、トレンドを押さえた「生きたデザイン」から学ぶことができます。

お手本となるバナーをみながら、デザインで使われている文字や線、その他の表現などがデザインツールのどの機能を使って（組み合わせて）作られているのか？というのを考えながら取り組んでいくと、細かい部分にも意識が向いてより効果的な学習に！

ちなみにバナーを探す際は、BANNER LIBRARYや、バナー広場、Banner.comなどで探したり、Pinterestもいいお手本がたくさんあるのでおすすめ！

とっしー

また、最初は操作方法などわからない部分が多いと思いますが、ぜひ調べ方のトレーニングとして取り組んでみてください！

現役のデザイナーでも、全ての機能を完璧に把握しているわけではないのが実情。

特にPhotoshop/Illustratorをはじめデザインツールは機能が非常に幅広いため、わからない表現や忘れている機能は、調べながらデザインしていくことも珍しくないのです！

そのため、この段階で調べ方（ググり方）のコツを掴んでおくと後々楽になっていきます！

具体的には、「Photoshop 〇〇」と検索することが多いですが、「Photoshop 線作り方」などわかりやすいもののほかにも、「Photoshop リボンアーチ」「Photoshop 文字もやもや」など、とにかくわからないことを言葉に置き換えて検索し始めると、出口が見えてきます！

まきすず

全てを最初から覚えるというよりも「作るために必要な機能を、段階的に習得していく」意識が大事ですね。

挫折しないように、1つ1つ着実にツールの使い方を習得していきましょう！

2. デザインの基礎習得

続いては2つ目の目的！デザインの基礎習得です！

最初は、デザインの4原則である「近接」「整列」「反復」「対比（コントラスト）」がどう使われているのか？を意識することからはじめてみましょう！

あわせて読みたい

デザインはここから！プロへ一歩近づくための4大原則を解説こんにちは、まきすずです。今回はデザインのキホンのキである、デザインの4大原則についてお話しようと思います。この原則は、Webデザインをはじめ、パンフレットや…

これがデザインの基本かつ、情報を的確に伝えるためのベーススキルになるので、意識して以下のようなポイントに気づけると上達しやすくなっていきます！

例：

「この部分はフォントサイズに差をつけて、コントラスト（対比）を出しているのかな」
「タイトルとボタンの両脇が揃って（整列して）いるから、わかりやすいデザインなのかな」
→ グリッドを意識
「この素材はうまくグルーピング（近接）されているな」

などです！

また、余裕があればですが、もう1つ、デザインのトンマナも意識されると尚良しです！

上記の4原則を意識するのは、主に「情報を正確に伝える」というデザインの役割に注目していますが、もう1つ、デザインには「感情を動かす」という役割もあります！

これがトンマナにつながる部分！

まきすず

例えばデザインをみたときに、美味しそうに見えたり、かっこよくみえたり、ラグジュアリーにみえたりと、なにかしらの世界観を感じることはないでしょうか？

それがまさに、デザインの「感情を動かす」役割の部分（＝トンマナ）です！

情報を的確に伝えることももちろん重要ですが、「どんな世界観を伝え、どんな感情を持ってもらうのか？」という部分も非常に大切で、Webデザイナーに求められる重要なスキルになってきますので、例えば以下のようなポイントを意識して取り組まれると、トンマナへの意識が鍛えられていきます！

ターゲットは誰なのか？
どんな人向けに作られたデザインか？
どんな世界観を表現しているか？
クール、高級、かわいい、など。あしらいなどの細部にも注目
どこでどのくらい余白をとっているか？
模写対象のバナーから、余白がpx単位でわかるので、様々なバナーを比較しながら余白の感覚を掴んでいきます。

など！

これらを意識することで、「このタイプのデザインは、このくらいの余白が適切なのか！」などと、嗅覚が反応するようになっていき、結果的にデザインの引き出しが増えるペースも上がっていきます！

同じようなパターンのデザインを手掛けるときにも迷いにくくなっていくので、視点として持っておかれるとよいかと思います！

あわせて読みたい

初心者必見！上達のために必要なデザイン引き出しの増やし方こんにちは！とっしーです！今回は、デザインの引き出しを増やす上で必要な、参考デザインの見方などの勉強方法についてお伝えします！デザイナー初心者時代に多い悩み…

とっしー

ちなみにデザインのトンマナについては以下の記事でも解説しているので、興味のある方はご参考ください！

あわせて読みたい

Webデザインで重要なトンマナの基本と5つのポイントこんにちは、とっしーです！突然ですが、トンマナという言葉はご存知でしょうか？デザインのことを少しでも勉強されている方であれば、1度くらいは耳にしたことがある…

バナー模写の具体的な手順は？

それでは最後に、バナー模写をするときの指針となる手順についてご紹介します！

ここに記載の手順が絶対的な正解ではないですが、デザインに慣れていないうちはどこから手をつけていけばいいか迷いがちではないでしょうか？そんなときには以下のステップを参考に取り組んでみてください！

とっしー

初心者だけの手順というわけではなく、実際に現役デザイナーがバナーを作るときとほとんど変わらない流れになっているので、最初からこの手順を頭に入れておくことで上達のスピードが変わってきます！

STEP

サイズを確認し、デザインツールでキャンバスを作成する

ここでタイマーをセットして、作業全体でかかる時間を測っておくのもおすすめ！目安としては、初めてなら1〜2時間くらいで完了するようなスピード感を意識するとよいです。

ただしあくまで目安。模写対象バナーの難易度などによって大きく変わってくるので、全体作業時間＋「どんな作業やリサーチに時間がかかったか？」も学習記録としてメモしておくと、今後の学習に活かせます！

STEP

模写対象バナーの要素を分解する

文字
写真やイラスト、アイコンなどの素材
その他装飾

などに要素を分けていきます。あまり細かく分けすぎる必要はありません。「このデザインはどんな要素のまとまり（グループ）からできているのか？」という視点を意識しましょう！

STEP

まずは文字に注目して、とりあえず配置する

ここでは、フォント、サイズ、色はなんでもOK。事前準備として、細かい部分は気にせず、まずは要素をどんどん配置していきます。

STEP

次に、各文字グループのサイズ（伝えるべき優先度）を調整していく

「お手本バナーでは何を1番伝えたいのか？」これを読み解くのが最大の目的です！伝えたい要素の優先度に沿って、サイズを調整していきます。

STEP

素材を配置し、模写対象バナー通りに位置や大きさを調整

いよいよ素材を配置していきますが、素材探しにはあまり時間をかけすぎないようにしましょう！

実際の案件では有料素材を使えたり、クライアントさんが用意してくれることもあるので、模写の段階では正確でなくても似たような素材で十分！

STEP

最後に、フォントの選定や装飾、色付けなどの微調整

ここでは、フォントや色などについてインプットするチャンスなので、例えばフォントであれば「なぜこのフォントが選ばれているのか？」を考えてフォントの特徴を学んだり、色であればカラーコードまで並べてみて配色パターンを学んだりと、デザイナーの「細部のこだわり」を意識してみてください。

あわせて読みたい