ノンデザイナー必読！怖くない「バナーデザイン」
予算が限られているので外部に依頼できないバナーデザイン。Photoshopなどの画像編集ツールが使えるからと、デザイナーではないのに社内用のバナー制作を依頼される。センスよく作れる自信はないし、他の業務が立て込み、制作に時間はかけられないのに……。今回は、悩めるノン（非）デザイナー社員に向けて、マーケティングの視点を交えた「ユーザーの心に響くバナー制作法」を公開します。
- 目次
ノンデザイナーでも安心なバナーの作り方
1.必要な要素洗い出す
今回は、「マーケの強化書」で掲載中のインタビュー記事で使用するバナーの作り方を公開。手順ごとにどうバナーが作られるかを参考にしてください。私自身、プロのデザイナーではありませんが、ここで公開する手順に基づき、ツボを外さないバナーデザインを実践中です。
取りかかる前に、記事で扱うバナーの位置づけを必ず考えてください。対象の回はインタビュー記事です。パッと目に入った時に、「インタビューの対象は誰か」「どのようなコンテンツか」の2点が想像できるバナーにします。そこで、これら2点の要素を有力なアイキャッチ候補と考えました。
これら2点の要素は、主に「記事タイトル」と「興味を引くためのコピー」で明示するのがベターです。では、必要な要素を整理します。
必要な要素
シリーズ名：寺田倉庫minikuraに学べ！
ナンバリング：vol.1
記事タイトル：新規サービスの立ち上げ成功術
記事カテゴリ：マーケの強化書インタビュー
画像：写真やロゴなど
この場合、「インタビュー対象」はシリーズ名に入れ込み、これをコピーと兼ねることにしました。バナーは、どんな内容の記事なのかがアイキャッチから判断できることが大事です。要素を洗い出すときは、まずは必要な要素を思いつく限りすべて書き出します。
次に、スペースの制約で書き出した要素のすべては使えないため、要素を絞ります。絞る際は、読者のみなさんに「この記事を読んでみようかな」と思ってもらえる要素を基準に選びましょう。
2.目立たせたい要素を決める
「マーケの強化書」では、マーケティングに携わる担当者を中心に、マーケティングやビジネスに関するノウハウやTipsを知りたい人たちがよく読んでいます。業務の合間など、限られた時間の中で興味を持ってもらうためには、記事の目的がしっかりと伝わる工夫をしましょう。
今回の場合、コンテンツの目的を伝える記事タイトル「新規サービスの立ち上げ成功術」をもっとも目立たせる要素としました。すべてのサイト訪問者が「minikura」を知っているわけではないので、1番はタイトルが、2番に企業名やサービス名が目立つ状態にしました。
3.画像を探す
今回のインタビューは、倉庫事業に関する新サービス立ち上げの内容ですので、倉庫の写真素材を探すことにしました。これが倉庫事業に関する対談記事ではない「新規サービスの立ち上げ成功術」であれば、対象となるサービスや企業のイメージが想像しやすい画像にするか、「新規サービス」や「スタートアップ」といったテーマで想像しやすい画像があるかどうかを探します。
使用する画像は、記事の内容やテーマが読み取れる画像を選んでください。
実は、最初は記事内で対談している2人（寺田倉庫のご担当者さまと弊社代表）の写真を前面にした構成を考えていました。ですが、サイトを訪問するすべての方が先方のご担当者さまや弊社代表を知っているわけではないため、人物写真ありきではユーザーの興味を引けないという判断で写真の掲載をやめています。
業界問わず一般社会でも名前や顔が広く認知されていて、「この人の話なら読んでみたい！」と思わせるようなコンテンツ（例：堀江貴文さんやZOZOの前澤友作さんとの対談）だと、素材として写真が効果的です。
このように画像選定時には、「記事の内容やテーマが読み取れるか」という視点と「（人物）写真を使うことで読者の興味を引くことができるか」という視点に基づき検討してください。
4.レイアウトを考える
「マーケの強化書」で使用しているテーマ（フォーマット）の都合上、バナーの要素は正方形のエリア内にすべてをおさめる必要があります。見落としがちなのが、バナーのサイズです。用意すべきサイズが1種類だけとは限らないからです。スマートフォンやPCなどさまざまなデバイスで閲覧されるのが当たり前ですし、「マーケの強化書」では提携先媒体で紹介されるケースもあって、デバイスごと、媒体ごとの対応も求められます。
「マーケの強化書」だと、正方形にトリミングされたときの見映えを考えつつ、スマホでの視認性も意識することが多く、この工程は毎回苦労します。デザイナーではなく、特にセンスが高い人間ではない私が困ったときにやるのは、プロのアイデアを参考にすることです。例えば、Pinterest（ピンタレスト）で「バナーデザイン」と検索すると、センスのよいデザインが表示されます。これら実物を参考に、配置がよく、内容がパッと飛び込んできやすいデザインのコツをつかむようにしています。
Pinterest：https://www.pinterest.jp/
今回は落ち着いたシンプルなデザインにし、記事タイトルが一番に目立つ構成にしました。
5.全体を整える
最後に全体を整えます。例えば、ひらがなは漢字よりちょっと小さめにして読みやすくしたり、カーニング（文字間のアキの調整）をしたり、テキストにエフェクトを入れて読みやすくしたり、背景色の補正をするなど、全体のバランスを見ながら適宜調整します。
調整を終えた後、最終的に社内の確認でOKが出れば完成となります。
何のためのバナーなのかをまず考えよう
私が社内で依頼されたときにまず考えるのは、「何のための」「誰向けの」「どこに掲載される」バナーなのか、という点です。「マーケの強化書」のバナーで考えると
【何のための？】 記事の内容を伝え、興味を引くため
【誰向けの？】 仕事に役立つマーケティング情報を知りたいと考える方に向けて
【どこに掲載される？】 サイト記事一覧やメールマガジン、外部メディアに掲載される
となります。
「誰向けの」は、記事のテーマや内容に応じて自社の新たなマーケティング施策を検討している方向けなのか、日々の業務にマーケティグ的な視点を取り入れたい方向けなのかなど、意識するターゲット層が変わる場合もあります。
最終的な見映えは大切ですが、バナーデザインはアートではありません。バナーの持つ目的や機能をきちんと理解し、それらを達成するためにはどうあるべきかを吟味することが大切です。
バナーを作成した記事はこちらから
