Web制作

【Webデザイン初心者必見】バナー模写でWebデザインの基礎を身につける方法

【Webデザイン初心者必見】バナー模写でWebデザインの基礎を身につける方法
こんにちは。
GOSHIMMERです。

デザインの勉強ってやることが多すぎて何から始めたらいいのかわからない!
そんな初心者の方におすすめの勉強法「バナー模写」の方法やおすすめのバナーまとめサイトをご紹介します。

バナー模写って何?

デザインの勉強を始めようとするとよく出てくるワード「バナー模写」。
その名の通り既存のバナーを模写してデザインを勉強する方法のことです。

バナー模写は基本的に、
真似するバナーを選ぶ→IllustraterやPhotoshopを使用してバナーを模写する
という流れで行います。

デザインの勉強を始めたての方がバナー模写をやると、
画像制作ソフトの使い方や文字・写真の組み方、色のバランスなど、デザインの基礎の部分を身につけることができます。

バナー模写の手順

それでは実際にバナー模写の手順を説明します。

01.模写するバナーを決める。

方法はいくつかありますが、一番やりやすいのは、バナーまとめサイトやPinterestから模写したいバナーを選ぶ方法です。
作りたいバナーのデザインや、業種などが決まってない場合はバナーまとめサイトから選ぶことをお勧めします。
バナーまとめサイトはサイトによって多少異なりますが、サイズやデザイン、カテゴリー別にバナーをまとめてくれているので、自分が作りたいバナーに出会える確率が高いです。

おすすめのバナーまとめサイト

レトロバナー
BANNER LIBRARY
banner gallery

作りたいバナーのイメージが定まっている場合は、PinterestやGoogleの画像検索から作りたいバナーに関連するキーワードを入力して選ぶことがおすすめです。

選ぶバナーの基準は、こんな写真の組み方やってみたいな、このあしらい(装飾)作ってみたいな、このフォント使ってみたいな、などその時自分が作りたいものを考えて選んでみてくださいね^^

02.バナー模写をする自分ルールを決める

バナー模写をするにあたってルールを決めます。

  • 制限時間は何分にするか
    →初めは時間がかかると思うので長めに設定して、時間を徐々に短縮できるようにしていくとさらに上達します。
  • 色はスポイトツールを使うか使わないか
    →慣れてくると色の見極めも感度が高まっていくので、徐々に自力でできるようになるといいと思います。

ルールは自分自身で決めてもらって、レベルに合わせて難易度を上げていくといいと思います。

03.実際にバナーを模写する

使い方を覚えたい画像制作ツール(IllustraterやPhotoshop)を使用して実際にバナーを模写します。
簡単な装飾などはフリー素材に頼らず自力で作成するようにしましょう。
ツールの使用方法や、わからないことがあれば大体Google先生が教えてくれるので、調べましょう。

バナー模写をするにあたっての注意点

できる限り元のバナーに近づける

フォントや画像などは全く同じものを用意できないことが多いです。
ただ雰囲気や形をできる限り似せていくことで、より達成感を感じることができますし、クオリティも上がります。
画像を探す際は、余白の使い方などが似ているものを探しましょう。

著作権に注意する

著作権を侵害するような行為には注意しましょう。
もしバナー模写を行って、練習記録としてブログなどにUPする場合は、必ず模写していることを明記し、出典元なども記載しておくことをお勧めします。
また、素材としてフリー素材を使用する場合も、利用規約をよく読んで使用するようにしましょう。

絶対に途中であきらめない

最初は何もわからない状態からのスタートなので、心が折れそうになることも多々あります。
制限時間を過ぎてしまっても、装飾の仕方がわからなくてもあきらめずに粘り強く挑戦することが大事です。
必ずそこで身につけた技術や感性は点となって、後で線としてつながっていきます。

最後に

バナー模写は初心者の方にお勧めなのはもちろんですが、経験者の私もデザインの幅を広げるべくよくやる練習方法です。
視野を広げてデザインに偏りが出ないように、Web制作者としての経験値をまだまだあげていきたいと思います。

GOSHIMMER

Creater - Web,Graphic,Video
Mayu Goto
インハウスWeb制作の仕事をする24歳。
人のために何かをすること、考えることが好きです。