この記事では、初心者でもできるバナー制作のやり方を紹介していきます。
Webデザインでの初案件で、バナー制作にチャレンジする方は多いのではないでしょうか？
最初の案件ではなくても、こんな不安に駆られる方はいると思います。
ねこボンそもそもバナー制作って何から始めればいいの？
今回は、そんなバナー制作初心者の方のために初心者でもできるバナー制作のやり方を解説していきます。
どんなデザインを作るときでも大切な考え方になりますので、ぜひ最後までお読みください。
ずみ/デザキャン講師この記事の内容を実践して、バナー制作の仕事をどんどん獲得していきましょう！
初心者でも学べるおすすめのスクールがあります！
デザキャンで一緒に学んでお仕事獲得を目指してみませんか？
個別相談ご参加の方には「個別ロードマップ」を作成しますので、ぜひお気軽にお申込みください！
＼＼＼無料個別相談受付中／／／
初心者でもできるバナー制作のやり方
では早速、初心者でもできるバナー制作のやり方を解説していきます。
ねこボン基本をおさえて、スムーズに仕事ができるようになりたいです。
ずみ/デザキャン講師今回は仕事の流れをイメージしやすいように、次の5ステップに分けてみました！
- デザインのテイストを決める
- リサーチする
- 素材を選ぶ
- レイアウトを決める
- 調整する
ひとつひとつ解説していきます。
デザインのテイストを決める
バナー制作で最初にやるべきことは、デザインのテイストを決めることです。
バナー制作にあたって、クライアントからこんなデザインを作ってくださいという依頼が来ているはず。
そのクライアントの要望を叶えるためにはどのようなデザインを作るべきか考えましょう。
たとえばこんな要望
- 高級感、ラグジュアリーなバナーがいい
- ポップな印象を与えたい
- 20代女性向け
- 親御さん向け など
ねこボン「大人っぽく」、「高級感」、「ポップ」など、分かったつもりになってしまいそうです……
ずみ/デザキャン講師ここをしっかり決めることでブレのないバナー制作ができますよ◎
以下3点はクライアントと認識を合わせておきたいポイントです。
- ターゲットは誰なのか
- どのような印象を持たせたいか
- 何を伝えるためのバナーなのか
言われたことだけではなく、要望を叶えるために必要な要素は何なのか？
もしわからないことがあれば、しっかりすり合わせましょう◎
リサーチする
2ステップ目は、リサーチをすること。
ずみ/デザキャン講師どんなバナーが世に出ているのかリサーチしておくと、トレンドや目に留まりやすいバナーの特徴が見えてきます◎
次の3点はリサーチしておきましょう。
- 競合他社がどのようなバナー制作をしているのか
- 同じ種類のサービスや商品はどのような素材や色味でバナー制作しているのか
- バナー遷移先のホームページやLPはどんなトンマナなのか
特に、遷移先のデザインや素材イメージとかけ離れたバナーを作成するとユーザーに違和感を与えてしまいます……
ねこボンロゴのテイストや企業イメージからも大きくずれないようにしないといけませんね。
事前にバナーイメージをクライアントから渡してもらえることもあります。
素材を選ぶ
リサーチが完了したら、次は素材選び。
- そもそも「素材」とは？
-
写真、イラスト、フォントなどバナー上に置いていく要素のこと。
フォントはAdobe Fontsなどからダウンロードすることも可能です。
写真やイラストは商用利用できるものか必ず確認して使用しましょう。
もちろん、ここでも大切なのはそのクライアントの要望からずれないような素材を選ぶこと。
ねこボンこの素材選びにかなり時間がかかるんですよね……
ずみ/デザキャン講師汎用的な素材が見つかったら、ブックマークやリンク集などを作っておけると便利ですよ◎
無料で使えるイラストサイトはこちらの記事でまとめていますので合わせてご覧ください。
レイアウトを決める
素材が決まったら、早速デザインツールでレイアウトを決めていきましょう。
まずは頭の中を整理するために、仮置きでいいので素材を置いてみること。
素材を置きながら、クライアントが伝えてほしいという要素はしっかり入っているのか確認していくのがポイント！
たとえば、ホテルの割引キャンペーンのバナーの場合
- 割引や50％OFFというような表現がない
- ホテルを連想させる写真やイラストがない
ねこボンレイアウトを考えていく中でも、何のために作っているのかという視点は忘れてはいけませんね。
ずみ/デザキャン講師足りないものがないか、本当にこれだけでいいのか、いろんな視点でチェックしていきましょう！
調整する
初心者でもできるバナー制作のやり方、最後のステップは調整です。
ある程度レイアウトが決まったら、見た目を調整して仕上げていきます。
- 素材配置のバランスは悪くないか
- 文字間の広さは読みにくくないか
- 要望どおり伝えたい内容が含まれているか
ずみ/デザキャン講師最終チェックする際、デザインツール上だけではなく、画像に保存して最終確認しましょう！
ユーザーが見る場面・使用ツールを想定するのもコツの1つ。
- スマートフォンで見たときのサイズに調整して確認する
- パソコンでWebサイトを見たときの広告サイズで確認する
ねこボン実際に見たときに見づらかったら意味がないですよね。ユーザー視点でチェックします！
ここまで、初心者でもできるバナー制作のやり方を解説しました。
このあとは、初心者がバナー制作で気をつけるべきポイントをまとめていきます。
初心者がバナー制作で気をつけるポイント
ここから、初心者がバナー制作で気をつけるべきポイントを解説していきます。
ずみ/デザキャン講師バナー制作のやり方を理解していただけましたか？
ねこボンはい。それぞれのステップでやるべきことがよく分かりました。
ずみ/デザキャン講師実は、初心者がバナー制作でやってしまいがちな注意点があるので気をつけましょう。
初心者がバナー制作で気をつけるべきポイントは次の4点。
- 余白をうまく使う
- 素材を置きすぎない
- 文字をできるだけ少なく
- 伝えたいことからずれない
ひとつずつ解説していきます。
余白をうまく使う
初心者がバナー制作で気をつけるべきポイント、1つ目は余白をうまく使うことです。
実は、Webデザインにおいて余白があるかないかで見た目の印象がかなり変わってきます。
たとえばこちらのバナーを見てください。
どちらも良し悪しはあると思いますが、余白が多い方がすっきりとした印象を与えませんか？
ずみ/デザキャン講師要素を絞り込んだオシャレなデザインを目指すためにも余白を有効活用しましょう！
こんな本もおすすめ
素材を置きすぎない
いいデザインを作りたい！
そんな気持ちが強い方こそ注意いただきたいのが、素材を置きすぎないこと。
ずみ/デザキャン講師素材が多すぎると一番伝えたいメッセージは何なのかが分かりにくくなりますので注意しましょう！
あらためて、先ほどのバナーを見てください。
素材が多いので、どの要素にインパクトを持たせたいのか分からなくなってしまいます。
本当に必要な素材は何か、取捨選択をしましょう。
ねこボン「女性」、「在宅」は背景の写真でも伝わる要素なので省いてもいいかもしれませんね。
文字をできるだけ少なく
3つ目は文字をできるだけ少なくすることです。
クライアントからの要望をヒアリングすると、伝えたいことがたくさん出てくると思います。
ずみ/デザキャン講師しかし、それを全部文字にしないのがデザイナー！
実際にバナーを見るときの動きを想像してみてください。
スマホをスクロールする時など、バナーを見るのはほんの一瞬ではないでしょうか？
その一瞬で見た時に何のバナーか分かってもらう必要があります。
ねこボンなるほど。細かい文字でたくさん書いてあったら何のバナーか判断できませんね……
だからこそ、キャッチコピーを練って、掲載内容をできる限り絞ることを意識しましょう◎
伝えたいことからずれない
初心者がバナー制作で気をつけるポイント、最後は伝えたいことからずれないこと。
ずみ/デザキャン講師厳しい言い方ですが、クライアントの要望が叶えられていないバナーは作る意味がありません。
何となくこうした方がいいだろう、と自分で判断するのではなく、クライアントが伝えて欲しいことが最優先。
なぜバナーを作るのか、その視点からずれないようにしましょう◎
ただし、クライアントの要望を叶えるためにより伝わるデザインを提案することは可能です。
たとえば、高級ホテルのキャンペーンバナーを作るという時に、ポップなフォント利用を依頼されたとします。
落ち着いたフォントを使った方が高級感のある印象を与えませんか？
ずみ/デザキャン講師クライアントの想いを実現するための提案は信頼関係構築にもつながりますよ◎
初心者でもできるバナー制作のやり方を身につけてどんどん仕事にチャレンジしよう！
この記事では、初心者でもできるバナー制作のやり方を解説しました。
ねこボン実際のバナー制作の流れだけではなく、気をつけなければいけないポイントも分かりました。
今回紹介したバナー制作のやり方を身につけることができれば、初心者からステップアップできること間違いなし！
ずみ/デザキャン講師クライアントファーストの視点はどんなデザインを作る時にも重要なので忘れないでくださいね。
今回ご紹介した内容がバナー制作の仕事の幅を広げるきっかけになっていたら幸いです。
初心者でも学べるおすすめのスクールがあります！
- 初心者を脱して活躍していきたい！！
- Webデザインにチャレンジしてみたいと思っていても、なかなか踏み出せない
- どうやって勉強していけばいいのか分からない
- 独学での勉強に限界を感じている
- 本気でWebデザインの仕事を獲得したい！
ずみプロ監修のデザキャンで一緒に学んでいきませんか？
個別相談ご参加の方には「個別ロードマップ」を作成しますので、ぜひお気軽にお申込みください！
＼＼＼無料個別相談受付中／／／
