読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

経験ゼロの初心者デザイナー向け!バナーの作り方4ステップ

cream-puffs

Webデザインの仕事の中では、バナーを作る作業がどうしても起こることがあります。まだ経験の無い方からすると「なんであんな綺麗なものが創れるんだろう…」と思うことがあるでしょう。

ただ、誰でも「初めの内」は上手く作れないものです。今回は、僕が初めてバナーを作るようになった頃に取り組んでいたことをご紹介していきます。

バナーの前提を理解する

まずは、何のためにバナーを作るか を再確認しましょう。これをしておかないと、とにかく派手に作ろう!みたいな感じでグチャグチャにしてしまう人がたまにいます。

バナーの前提として、僕がとにかくこれを押さえとけ!と言っているものはこの3ポイントです。

  • クリックされる要素が入っていること
  • 文字が読みやすいこと
  • 画像の画質が汚くないこと

これらについて、もう少し話しますね。

クリックされる要素が入っていること

まずは、クリックされる要素が入っていることです。これは、CTA(call to action)の要素としてとても大事なことです。

CTAを簡単に言うと「ユーザーにアクションを促すもの」です。

バナー画像は基本的に、どこかにリンクを飛ばす際に使います。なので、ユーザーがそのバナーを見てリンクを踏んでくれなかったら作った意味がありません。

ということは、デザイナーとしては「リンクを踏む工夫」をしてなかったら意味が無いのです。

CTAの要素が入った文章としては「詳しくはこちら」「今すぐクリック」などがありますね。

文字が読みやすいこと

次は、文字が読みやすいことです。最近は、画像メインのデザインが流行しているので、バナーにも綺麗な画像をいれて終わり!としたい気持ちはわかります。

ですが、ほとんどのユーザーは、バナーの文字を読んでクリックします。僕もそうです。

ユーザーは、クリックする時に「怪しいサイトに飛んだりしないか」なんて不安に感じ、文字をしっかり読みます。

作る際には、文字が読みやすいかどうかは確認しましょう。

画像の画質が汚くないこと

最後に、画像についてです。画像はもちろん、綺麗に越したことはないです。時間の限り拘りましょう。

ただ、例えばサイズが合わなかったりとかで画質が汚くなる時があります。これだけはNGです。

画質が汚くなって見栄えが悪くなるくらいなら、いっそのこと画像を使わないほうがいいと思っています。

作り方に入る前の準備

それでは、実際に作り始める前に下準備をしましょう。

初心者のうちは画像が揃ったり、photoshopを前にしたりすると、考えがごちゃごちゃしてきたりするので、この下準備が必要です。

僕も良くある経験ですが、画像が揃ってきてしまうと、「その画像に合わせた文章」「その画像が好きそうなユーザー」を考えてしまうんです。

文言(文章)を決めよう

まずは、文章を決めましょう。この時、キャッチコピーみたいなイメージで作っていくと思うのですが、僕らはデザイナーなのでキャッチコピーのセンスがありません。

なので、一旦は文字数を気にせずに書き出してみましょう。それを段々と短くしていくのならできるはずです。

いらない助詞や、改行すれば省けるものなどは省いていきましょう。

最後に、音読して意味が伝わればOKだと思います。

バナーを見ることになるユーザーを想像しよう

次は、バナーを見ることになるユーザーをイメージしましょう。

できれば、頭のなかで「この人!」と一人設定しておけるとぐっと作りやすくなります。

参考バナーを取っておこう

これが僕は一番大事だと思っているのですが、ここまで決まったら、文字数や対象のユーザーが似ているバナーをどうにか見つけて保存しておきましょう。

使われて続けているバナーというのは基本的に効果が出ているからです。最初のうちはそれを参考にすべきだと思います。

ASPサイト(a8.netなど)で、いろんなバナーを確認できるので参考にしていきましょう。

バナーの作り方4ステップ

それでは、実際のバナーの作り方に入っていきましょう。

とはいっても、細かなツールの使い方やレイアウトの組み方というよりは、もっと初歩的な部分にフォーカスしています。

1.文字を書き出す

まずは、文字を書き出しましょう。さっきの下準備で用意した文章を書き出しておいてください。

2.画像を準備する

次は、画像を準備してきます。

クライアントから依頼を受けていて、画像が既にいくつか渡されているという方は、そこから選抜してください。

練習のために作っているという方は、フリー画像でも使いましょう。

3.バナーサイズを決める

そして、バナーのサイズを決めます。

国際標準でバナーのサイズはある程度参考にできたりするので、下のURLを参考にしてみてください。

作っておくと便利なバナーサイズ一覧(ネットワーク広告対応)

4.実際に作り始める

それでは、実際に作り始めましょう。細かな工程については、具体的に書いてある記事がたくさんありましたので、それを紹介しておきます。

どちらも、モノクロでの書き出しを一度おすすめしていますね。

作り方の注意点

最後に、僕が思っている製作時の注意点についてお話します。

できれば、初めのうちはこれだけは守っておいたほうが良いと思います。

色は最後。フォントは途中でも良い。

製作途中に、文字の色やフォントを変えたくて仕方なくなる瞬間があると思います。

ただ、色は途中で変えず最後に変えましょう。一方でフォントは途中で変えてもOKです。

何故かと言うと、色はもともと他の要素との兼ね合い・組み合わせで綺麗に見えたりするものです。

なので、途中で変え始めてしまうと、あとから画像を追加した時にまた色を変えたいと思うことがあるからです。

一方で、フォントの場合はフォントを変えると文字幅が変わったりするので、早い内に変えておきましょう。最後の最後にレイアウト崩れをすると凹みます。

一度出来上がったら見てもらう

超重要です。一度出来上がったら他人に見てもらってください。

自分で作った作品は、総じて綺麗に見えてしまいます。自分が重要なポイントと思って盛り込んだ要素は、一番最初に目についてしまいます。

だから、他人に一度見てもらってフィードバックをもらうことを心がけましょう。

見せる時の聴き方としては「どう?」ではなく、「これってクリックしたくなる?」の方が良いフィードバックがもらえます。

まとめ

いかがでしたか?今回は、バナーの作り方でした。

初めて作った頃は、どんなこと考えていたかなと思って記事を書いていたら懐かしくなってしまいました。

確か、3つめくらいの作品で、クソミソに言われた気がします。初めのうちは、そういうこともたまにありますね。

これからバナー画像を作ってみようという方は頑張って下さいね!

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら