PRTweetS​​NSやホームページなどで情報発信する際に、役立つのがバナーです。クリックしたくなるようなバナーをデザインすれば、集客につなげることもできます。バナーデザインを簡単に作成する方法をご紹介します。ExpressのPR記事です。・キャンペーンを告知するバナーなど、告知したい目的によって、作成するバナーのデザインが変わってきます。バナーを使用して「どんな目的を達成したいのか?」を明確にしましょう。目的:新サービスの周知。・ターゲット層が興味関心を寄せるものなど、ターゲット層の人物像ができるだけ浮き彫りになる特徴を挙げていきましょう。ターゲット層によって、バナーデザインで好まれる傾向が変わってくるためです。ビジネスマンの方にとってはフォーマルな印象を与えるものが好まれます。誘導先のページ内容を理解する効果的なバナーを作成するためには、誘導リンク先のページ内容を理解することが大切です。誘導リンク先のページ内容と、バナーの内容が合致していることが必要になります。・このサービス・商品を受けることで、何が得られるのか?(サービスを得る前と後で、どんな変化が得られるのか?)・どんな人に向けたサービスなのか?を、簡潔に説明できるようにしておきましょう。バナーの設置位置・サイズを決めるバナーの設置位置を決めることも重要です。・どの部分にバナーを設置するか(ヘッダー・コンテンツ下部・フッター)・レスポンシブ対応(スマホ表示対応)させるのかなど、設置位置を決めることが重要です。広告バナーの場合、広告媒体ごとに推奨されるサイズを指定される場合があるため、出稿する広告媒体をあらかじめ明確にしておきましょう。Rectangle:3:1レクタングル)上記のサイズは、広告を出稿する媒体や、掲載場所によって変わってくるので、作成する前に、どのサイズが必要なのかを確認するようにしましょう。天狼院書店のホームページ用のサムネイル画像は、「1,160ピクセル×610ピクセル」の横長のサイズで作成しています。以下のバナーは、「1,160ピクセル×610ピクセル」のサイズです。使用するバナーとしても、スクエアサイズで作成することが多くなってきました。スクエアサイズで作成する際は、「1,080ピクセル×1,080ピクセル」で作成することを推奨します。広告に出稿する際には、後で画像をトリミングして設定することができます。バナーの要素を明確にするバナーを作成する前に、バナーに入れ込む要素を明確にしましょう。1メインタイトル最優先で伝えたい情報が、一番に目に入るようにしましょう。2サブタイトルメインの情報を補足する情報を入れていきましょう。3ターゲットサービスの対象となるターゲットが一目で分かる情報を記載します。素材を選ぶバナーの要素の中でも、大部分を占め、視覚的に大きなインパクトを与える「写真・画像」は、非常に重要な役割を持っています。誘導先ページの内容を理解し、ビジュアルとして一発で想起できる、適切な画像を選定します。使用する画像は、解像度がしっかり高いものである必要があります。Stock」が便利です。天狼院書店でも、バナー作成の際によく利用しています。無料で利用できる画像もあります。無料で利用できる画像はこちらキャッチコピーを考える画像の限られた面積上で、適切に情報を伝えるための「キャッチコピー」は、バナー作成において重要なポイントです。バナーにおけるキャッチコピーの付け方のコツは、「サービスを通して、どのような効果・スキルが得られるのか?」を明確にし、「どうやって」得られるのかの部分は、クリックして飛んだページの先で詳細に説明するように誘導しましょう。今回は簡単なコツのみをご紹介しましたが、適切なキャッチコピーを考えるのは難しいです。そのため、天狼院書店では、「読まれる文章」を書くための講座「ライティング・ゼミ」も開催しています。配色を考える一般的に、使用する色の色数は「3色」に抑えることが見やすいとされています。上記の割合で画像内の色面積を設定すると、バランスがよくなります。配色の決め方は、「カラーパレット」を参考にすると便利です。Express」に付属している「カスタムカラーパレット」を使用すると便利です。バナーレイアウトを考えるバナーのレイアウトを考えます。実際に手を動かす前に、ラフイメージを描いて固めておくのがベターです。パターン1:キャンペーンバナー1メインタイトル:キャンペーンのタイトルを一番目立つように記載しましょう。2サブタイトル:メインタイトルを補足する情報を加えます。(開催日時など必要な情報)3ターゲット:どんなものを求めている人向けの内容なのか、明確になるようにしましょう。パターン2:写真をメインに使用したバナー1メインタイトル:イベント・セミナーのタイトルを一番目立つように記載しましょう。2サブタイトル:メインタイトルを補足する情報を記載します。簡潔に記載し、分かりやすく表記しましょう。読みやすいバナーにするフォントを選ぶサービス・商品のイメージを適切に伝えるため、「フォント選び」も重要です。▼ターゲットが「初心者向け」のため、「丸ゴシック」系をメインに使用し、やわらかい印象に。▼新人賞を突破し、本気で小説家を目指す上級コースのため、「明朝体」のフォントでまとめている。フォントの大きさを決めるフォントの大きさで、伝えたい情報の優先度を決めることができます。伝えたい情報を最も大きくし、そこから目線を誘導させたい順番に沿って文字サイズを小さくして行きましょう。バナーは、限られた面積の中で情報を目立たせる必要があるため、メインの文字は太い方が望ましいでしょう。字間・行間を調整するより洗練されたデザインにするため、フォントの字間・行間を調整することが効果的です。ひらがなやカタカナ、漢字、記号では、それぞれ字間の詰まり方が異なるため、間延びした印象になることがあります。加えるポイントとなる装飾を加えることで、リンク先サービスのイメージを想起しやすく、強調させることが可能です。関連するアイコンをタイトル周りに加えたり、補足情報の部分を吹き出しであしらい、アクセントを加えながら、全体をまとめましょう。人の目の流れを意識しているか人の目線は、「Z」の流れ(左上から右上、そして左下から右下)で動くという特性があり、これを「Zの法則」といいます。この法則に沿って、伝えたい情報の優先度を決め、情報を配置することで、読みやすく、伝わりやすいデザインになります。重要な情報だけ掲載されているか読みやすいバナーにするためには、必要な情報・重要な情報だけを掲載することが必要です。情報を掲載しすぎると、要点が分からなくなり、目的が不明瞭になります。他のバナーを参考にしてみるバナーデザインを自分だけで考えていても、何もアイデアが浮かばないときもあります。そんなときは、他のバナーを参考にして、イメージを膨らませることも大切です。※あくまで「参考」であり、「模倣」にならないよう注意が必要です。参考となるバナーデザインを探す際には、「Behance」がおすすめです。世界中のクリエイターが自身の作品を公開しているソーシャルネットワークサービスで、キーワードを入力したり、条件を入力することで、関連画像が表示されます。彼らの作品から刺激を受けたり、ヒントを得たりするだけでなく、自分の作品を公開して評価やコメントをもらうこともできます。著作権侵害にならないようにする誰でもインターネット上に画像をアップロードできるようになった今、著作権を侵害しないよう一層注意を払う必要があります。著作権を理解せず、アニメのキャラクターや芸能人の写真を利用してしまったり、インターネット上にある画像を適当に拾って使用し、うっかり著作権侵害をしてしまった、ということのないように注意しましょう。バナー表記について法令を遵守したものになっているかに注意しましょう。Expressを利用すれば、簡単に変更が可能です。表記に誤りがあると、サービスの信頼度を損なう可能性があります。・誘導リンク先のURLが合っているか・掲載情報にミスがないかバナー作成に必要な情報を集めた際や、バナーが出来上がった際に、チェックを怠らないようにしましょう。最終チェックをおこなう作成段階では問題なくとも、実際にページを設置して見てみたり、スマートフォン上で見ると、見づらいバナーになっていることは起こりがちです。実際の環境でバナーを置き、視認性に問題がないことを確認しましょう。バナーを作成する方法バナー作成ツールを利用バナーを自分で作成する場合、無料の作成ツールを使うのがおすすめです。Express」がおすすめです。広告会社やクラウドソーシングに、バナーの作成を依頼する方法もあります。・制作費用がかかる・CVが伸びないケースといったデメリットもあるため、場合に応じて利用を検討しましょう。Expressの「バナー作成機能」を利用すると、簡単にバナーを作成することができます。テンプレートを利用して、簡単にデザインすることができます。アクセスしてください。ページ内にあるテンプレートからデザインすることもできますし、「今すぐバナーを作成」をクリックし、さまざまなテンプレートを探すこともできます。今回は「今すぐバナーを作成」からテンプレートを探してみましょう。Express」の操作画面が開きます。・ターゲット:初心者大歓迎!という要素を入れることにします。テンプレートを選ぶ左端タブ「テンプレート」を選択します。掲載する媒体に添ったテンプレートが用意されているので、適切なものを選択します。今回は、イベントのホームページに掲載するバナーを作成するため、横長・長方形のサイズを想定しています。「バナー」という項目がないため、一番近い「Facebook投稿」を選択します。教室)を上部の検索窓に入力し、表示された中から、イメージに適したテンプレートを選びます。投稿用にスクエアサイズの画像を作成したい場合は「Instagram投稿」、ストーリー用に縦長の画像を作成したい場合は「Instagramストーリー」など、掲載媒体に適したサイズのテンプレートが選択できます。今回は、こちらのテンプレートを使用していきます。テキストを入力するメインタイトルを追加するまず、バナーに入れたい要素の中で一番目立たせたい「タイトル」から編集していきます。最大のテキストボックスを選択すると、右側に、編集タブが出現します。「テキストを編集」の部分に入力されているテキストを書き換えます。インパクトを持たせるために、さらに太いフォントに変更しました。フォントは、右側タブ上「おすすめのフォント」に表示されているフォントから選択しました。「フォト部ビギナーズ」のテキストボックスの四隅にある丸をドラッグ&ドロップで操作し、フォントサイズを少し大きく変更しました。デザインや画像を追加する画像を追加する「天狼院書店」のロゴ画像を、アクセントとして入れていきます。左側タブ「写真」を選択→「写真をアップロード」を選択すると、パソコン内のファイルが選べるウィンドウが出てきます。Express」上の画像素材も入れることができます。)今回入れ込みたい「天狼院書店」のロゴ画像を選択し、画像を呼び出しました。配置場所は、最後に全体を見て調整するので、一旦仮置きしておきます。サブタイトルを追加する次に、メインタイトルを補足する情報として、イベントのテーマを追加します。テンプレートの文字を変更し、テーマ『朝の光を使いこなす』を追加しました。文字情報が多く、ごちゃごちゃしているので、残ったテンプレートの文字は削除します。ロゴを一旦下に持ってきてみました。デザインを追加する少し寂しい印象なので、ターゲットとなる対象が分かりやすくなるよう、情報を追加します。「初心者大歓迎!」という情報を、ポイントとして入れていきます。左端タブ「シェイプ」を選択。「吹き出し」の飾りをポイントとして使っていきますので、タブ上部の検索窓で「吹き出し」と入力し、検索します。良さそうな吹き出しを選択して、呼び出します。デフォルトだと、色が合いません。吹き出しシェイプを選択し、右側タブで、画像に合いそうな色に変更します。今回は文字色と統一感を持たせるために、黒を選択しました。テキストを追加する左端タブ「テキスト」を選択。上部にある「テキストを追加」を選択すると、テキストボックスが出現します。右側タブの編集画面で、テキストや文字色、サイズ、行間を変更します。吹き出しの上に持ってきて、バランスを確認します。テキストが横長なのに対し、吹き出しが楕円形でサイズ感が異なっているので、吹き出しのデザインを変更してみることにしました。再度、左端タブ「シェイプ」を選択し、「吹き出し」で検索。横長の形状のデザインを選択します。吹き出しシェイプの四隅をドラッグ&ドロップし、サイズを調整します。文字色が赤だと見にくいため、右側タブでテキストの文字色を変更します。テキストやロゴを中央揃えにしているので、吹き出しも中央揃えで統一します。日付を追加する右下の◯枠を使用して、日付を入れていきます。日付を入力し、文字サイズを変更します。強調するため、日付の文字サイズは大きく設定します。補足情報として、開始時間や、曜日もテキストで追加します。全体のバランスを見ます。デザインアクセントを追加するもう少しアクセントを加えるため、ビジュアル的に、カメラに関する内容ということが分かりやすくなるよう、カメラのアイコンを追加することにします。左側タブ「シェイプ」を選択。検索窓で「カメラ」と検索すると、関連する素材が出てくるので、任意のものを選択します。今回は、メインの文字情報を邪魔しないように、塗りつぶしされていない、軽いデザインのものを選びます。デフォルトの設定で、馴染まない色になっている場合、右側タブで、シェイプの色を変更します。メインタイトルの左上に持ってきて、デザインのアクセントになるようにしました。・掲載情報に誤字がないか?・一目で情報が伝わるか?・全体のバランスは良いか?を、全体を見て確認します。ここで、曜日と時間の誤りを変更しました。一目で見た際に、イベントということが若干分かりづらい可能性があったため、「フォト部ビギナーズ」のメインタイトルの後に「講座」という文字を追加しました。デザイン全体を確認します。保存してダウンロード画面右上の「ダウンロード」を選択。ファイルタイプ「PNG」もしくは「JPG」を選択します。・「PNG」...透過ができる。ファイルサイズが重くなりやすい。・「JPG」...色数の多いデータでも軽いサイズで保存できる。保存する度に画質が劣化するので元データを別に保存しておくのが良い。選択したファイルタイプで、パソコン上に画像がダウンロードされます。「プロジェクト」ページにて、作成したプロジェクトが一覧で表示されます。プロジェクトごとに名前を変更できるので、分かりやすいように、任意の名前に変更しておくと、データを整理することができます。バナーのコンバージョン率を高める方法バナーが一度完成してしまえば終わり、ではありません。バナーはあくまでも、手段。その先の目的を達成させることが必要不可欠です。・ページ先リンクをアナリティクス解析し、コンバージョン率を分析する・バージョンA・バージョンBを作成し、どちらの方がコンバージョン率が良いか比較する・バージョンAとバージョンBの変数を元に、反応の良かった変数を取捨選択する・他に改善点があれば、再度バージョンA・バージョンBでコンバージョン率を比較し、PCDAを回すといったプロセスを繰り返しながら検証し、最適解を見つけていくことが大切です。使用し、PV数・ページ訪問者数を計測し、よりページにアクセスしてもらいやすいバナーを取捨選択するようにしています。Express」を使用すれば、直感的に操作ができます。テンプレートを使用することで、ゼロからすべて作成せずとも、質の高いデザインを自分だけで作れるようになります。Express」を使用することで、自分だけで気軽にバナーデザインができるようになり、ぜひ、ビジネスやサービスに役立てていきましょう。Express」を使った講座や、さまざまなデザインの講座をまとめて受けられるコースも開催しています。Express」のテンプレート作成もしているデザイナーの講師から、学ぶことができます。整理術《2022年末特別版1日完成濃縮講座》お笑いコンビ・ピース又吉直樹さんが語る「いつかの、誰かの好奇心」が、新たな誰かを動かす。