MENU

カテゴリ

おすすめの記事

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

こんにちは!としです。

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

とし

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

このバナー模写、やること自体は「すでに完成されたバナーを真似るだけ」なのですが、目的や意識することを間違えてしまうと単純作業となり、せっかくの学習効果が薄れてしまいます。また作業に飽きてしまい、Webデザインの勉強そのものへのモチベーションも落ちていってしまう。。というのも避けたところ!

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

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

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

目次

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

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

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

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

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

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

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

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

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

とし

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

現役のデザイナーでも、全ての機能を完璧に把握しているわけではないのが実情。特にPhotoshop/Illustratorをはじめデザインツールは機能が非常に幅広いため、わからない表現や忘れている機能は、調べながらデザインしていくことも珍しくないのです!

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

まきすず

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

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

2. デザインの基礎習得

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

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

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

例:

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

などです!

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

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

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

まきすず

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

それがまさに、デザインの「感情を動かす」役割の部分(=トンマナ)です!

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

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

など!

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

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

とし

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

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

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

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

とし

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

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

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

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

STEP
模写対象バナーの要素を分解する
  1. 文字
  2. 写真やイラスト、アイコンなどの素材
  3. その他装飾

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

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

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

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

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

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

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

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

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

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

以上の流れで行うと、デザインの肝である「要素の優先度(=何を1番伝えたいのか?)」を考えるクセが自然とついていくので、デザイン基礎力がグンっと鍛えられます。

実際に仕事としてバナーやWebデザインをゼロから取り組む場合も、基本的には同じ考え方で大丈夫。

もちろんバナーのデザインによっては、順番が前後することはもありますが、どこから着手すればいいの?という方はご参考ください!

バナー模写でスキルアップのまとめ

以上がバナー模写でのポイントでした!

手順については、これだけが絶対正解というわけではないので、バナーによっていろいろと試してみてください!また、時間がないときにはステップごとに分けて取り組むのも有効!

例えば、

  • 今日は要素の優先度を分析する時間にあてよう
  • こうはフォントや色についてガッツリインプットしよう!

など、意識するポイントを分けると無理なく進められると思います!

もしも、「バナー模写のやり方に自信がない!」「どうしてもわからない表現がある」など、つまづいている方は一度ご相談ください!

とし

初心者の方へのメンターとして活動しているので、添削や勉強法など、デザインアドバイスさせていただきます!

バナー模写によるデザイン学習に少しでもお役立ていただけましたら幸いです!

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

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる