【初心者向け】バナー模写の効果を高めるために意識したいこと
こんにちは！とっしーです。
Webデザインの勉強をはじめると、必ずと言っていいほど目にするバナー模写という練習。ご存知の方も多いと思います！
とっしー最近は、特に初心者の方から勉強法などのご相談を受けることも増えてきているのですが、そこでもやはり、バナー模写は最初の段階で取り組んでいただくことが多いです！
このバナー模写、やること自体は「すでに完成されたバナーを真似るだけ」なのですが、目的や意識することを間違えてしまうと単純作業となり、せっかくの学習効果が薄れてしまいます。
また、作業に飽きてしまい、Webデザインの勉強そのものへのモチベーションも落ちていってしまう。。というのも避けたところ！
効果を高めるための目的と、意識することを簡潔にまとめたので、これからバナー模写やデザイン学習に取り組まれる方、もしくは取り組み中の方も、ぜひ参考にしていただけたら嬉しいです。
それではまずはじめに、目的からみていきましょう！
目次
バナー模写の目的は大きく2つ
Webデザインの学習でバナー模写を行う場合、大きく2つのゴールを目指すのが良いと思います！それが以下の2つ。
- デザインツールの使い方習得
- デザインの基礎習得
それでは1つずつ具体的に解説していきます！
1. デザインツールの使い方習得
まずは模写を通じて、PhotoshopやIllustratorなどの「デザインツールの使い方」を覚えることが大事です！
お手本となるバナーをみながら、デザインで使われている文字や線、その他の表現などがデザインツールのどの機能を使って（組み合わせて）作られているのか？というのを考えながら取り組んでいくと、細かい部分にも意識が向いてより効果的な学習に！
ちなみにバナーを探す際は、BANNER LIBRARYや、バナー広場、Banner.comなどで探したり、Pinterestもいいお手本がたくさんあるのでおすすめ！
とっしーまた、最初は操作方法などわからない部分が多いと思いますが、ぜひ調べ方のトレーニングとして取り組んでみてください！
現役のデザイナーでも、全ての機能を完璧に把握しているわけではないのが実情。
そのため、この段階で調べ方（ググり方）のコツを掴んでおくと後々楽になっていきます！
具体的には、「Photoshop 〇〇」と検索することが多いですが、「Photoshop 線 作り方」などわかりやすいもののほかにも、「Photoshop リボン アーチ」「Photoshop 文字 もやもや」など、とにかくわからないことを言葉に置き換えて検索し始めると、出口が見えてきます！
まきすず全てを最初から覚えるというよりも「作るために必要な機能を、段階的に習得していく」意識が大事ですね。
挫折しないように、1つ1つ着実にツールの使い方を習得していきましょう！
2. デザインの基礎習得
続いては2つ目の目的！デザインの基礎習得です！
最初は、デザインの4原則である「近接」「整列」「反復」「対比（コントラスト）」がどう使われているのか？を意識することからはじめてみましょう！
あわせて読みたい
デザインはここから！プロへ一歩近づくための4大原則を解説
こんにちは、まきすずです。 今回はデザインのキホンのキである、デザインの4大原則についてお話しようと思います。 この原則は、Webデザインをはじめ、パンフレットや…
これがデザインの基本かつ、情報を的確に伝えるためのベーススキルになるので、意識して以下のようなポイントに気づけると上達しやすくなっていきます！
例：
- 「この部分はフォントサイズに差をつけて、コントラスト（対比）を出しているのかな」
- 「タイトルとボタンの両脇が揃って（整列して）いるから、わかりやすいデザインなのかな」
→ グリッドを意識 - 「この素材はうまくグルーピング（近接）されているな」
などです！
また、余裕があればですが、もう1つ、デザインのトンマナも意識されると尚良しです！
これがトンマナにつながる部分！
まきすず例えばデザインをみたときに、美味しそうに見えたり、かっこよくみえたり、ラグジュアリーにみえたりと、なにかしらの世界観を感じることはないでしょうか？
情報を的確に伝えることももちろん重要ですが、「どんな世界観を伝え、どんな感情を持ってもらうのか？」という部分も非常に大切で、Webデザイナーに求められる重要なスキルになってきますので、例えば以下のようなポイントを意識して取り組まれると、トンマナへの意識が鍛えられていきます！
- ターゲットは誰なのか？
どんな人向けに作られたデザインか？ - どんな世界観を表現しているか？
クール、高級、かわいい、など。あしらいなどの細部にも注目 - どこでどのくらい余白をとっているか？
模写対象のバナーから、余白がpx単位でわかるので、様々なバナーを比較しながら余白の感覚を掴んでいきます。
など！
これらを意識することで、「このタイプのデザインは、このくらいの余白が適切なのか！」などと、嗅覚が反応するようになっていき、結果的にデザインの引き出しが増えるペースも上がっていきます！
同じようなパターンのデザインを手掛けるときにも迷いにくくなっていくので、視点として持っておかれるとよいかと思います！
あわせて読みたい
初心者必見！上達のために必要なデザイン引き出しの増やし方
こんにちは！とっしーです！今回は、デザインの引き出しを増やす上で必要な、参考デザインの見方などの勉強方法についてお伝えします！デザイナー初心者時代に多い悩み…
とっしーちなみにデザインのトンマナについては以下の記事でも解説しているので、興味のある方はご参考ください！
あわせて読みたい
Webデザインで重要なトンマナの基本と5つのポイント
こんにちは、とっしーです！ 突然ですが、トンマナという言葉はご存知でしょうか？ デザインのことを少しでも勉強されている方であれば、1度くらいは耳にしたことがある…
バナー模写の具体的な手順は？
それでは最後に、バナー模写をするときの指針となる手順についてご紹介します！
ここに記載の手順が絶対的な正解ではないですが、デザインに慣れていないうちはどこから手をつけていけばいいか迷いがちではないでしょうか？そんなときには以下のステップを参考に取り組んでみてください！
とっしー初心者だけの手順というわけではなく、実際に現役デザイナーがバナーを作るときとほとんど変わらない流れになっているので、最初からこの手順を頭に入れておくことで上達のスピードが変わってきます！
STEP
サイズを確認し、デザインツールでキャンバスを作成する
ここでタイマーをセットして、作業全体でかかる時間を測っておくのもおすすめ！目安としては、初めてなら1〜2時間くらいで完了するようなスピード感を意識するとよいです。
ただしあくまで目安。模写対象バナーの難易度などによって大きく変わってくるので、全体作業時間＋「どんな作業やリサーチに時間がかかったか？」も学習記録としてメモしておくと、今後の学習に活かせます！
STEP
模写対象バナーの要素を分解する
- 文字
- 写真やイラスト、アイコンなどの素材
- その他装飾
などに要素を分けていきます。あまり細かく分けすぎる必要はありません。「このデザインはどんな要素のまとまり（グループ）からできているのか？」という視点を意識しましょう！
STEP
まずは文字に注目して、とりあえず配置する
ここでは、フォント、サイズ、色はなんでもOK。事前準備として、細かい部分は気にせず、まずは要素をどんどん配置していきます。
STEP
次に、各文字グループのサイズ（伝えるべき優先度）を調整していく
「お手本バナーでは何を1番伝えたいのか？」これを読み解くのが最大の目的です！伝えたい要素の優先度に沿って、サイズを調整していきます。
STEP
素材を配置し、模写対象バナー通りに位置や大きさを調整
いよいよ素材を配置していきますが、素材探しにはあまり時間をかけすぎないようにしましょう！
実際の案件では有料素材を使えたり、クライアントさんが用意してくれることもあるので、模写の段階では正確でなくても似たような素材で十分！
STEP
最後に、フォントの選定や装飾、色付けなどの微調整
ここでは、フォントや色などについてインプットするチャンスなので、例えばフォントであれば「なぜこのフォントが選ばれているのか？」を考えてフォントの特徴を学んだり、色であればカラーコードまで並べてみて配色パターンを学んだりと、デザイナーの「細部のこだわり」を意識してみてください。
あわせて読みたい
もうフォント選びで挫折しない！Webデザイン上達に役立つ文字の基本を解説
こんにちは、とっしーです！ フォント選びって難しいですよね？感覚を頼りにいろいろなフォントを試してみても、「なんか違うなぁ〜…」とデザインが止まってしまう経験…
あわせて読みたい
【初心者向け】Webデザインの色選びで気をつけるべき4つのポイントとは？
こんにちは、とっしーです。 今回は、デザイナー初心者の方向けに、デザインの色選びで失敗を避けるために知っておきたいことを4つ解説していきます！ 初心者時代につま…
以上の流れで行うと、デザインの肝である「要素の優先度（＝何を1番伝えたいのか？）」を考えるクセが自然とついていくので、デザイン基礎力がグンっと鍛えられます。
もちろんバナーのデザインによっては、順番が前後することはもありますが、どこから着手すればいいの？という方はご参考ください！
バナー模写でスキルアップのまとめ
以上がバナー模写でのポイントでした！
手順については、これだけが絶対正解というわけではないので、バナーによっていろいろと試してみてください！また、時間がないときにはステップごとに分けて取り組むのも有効！
例えば、
- 今日は要素の優先度を分析する時間にあてよう
- こうはフォントや色についてガッツリインプットしよう！
など、意識するポイントを分けると無理なく進められると思います！
もしも、「バナー模写のやり方に自信がない！」「どうしてもわからない表現がある」など、つまづいている方は一度ご相談ください！
とっしー初心者の方へのメンターとして活動しているので、添削や勉強法など、デザインアドバイスさせていただきます！
あわせて読みたい
Webデザイン初心者の方へ！「MENTA」でメンター活動はじめました！
こんにちは！ソラノコ夫婦です この度、Webデザイン初心者の方のお役に立てればと思い、わたしたち夫婦それぞれでMENTAにてメンター活動することにしました！ ブログを…
バナー模写によるデザイン学習に少しでもお役立ていただけましたら幸いです！
この記事が気に入ったら
フォローしてね！
コメント