「ECサイトのバナーを作る手順を知りたい」
「効果のある配置の仕方は？」
ECサイトにバナーを出したいけれど、完成度の高いデザインのバナーを出稿したい！できれば外注せず、コストを抑えたい…
そのようなWeb制作担当者の方に、バナー作成の手順をご紹介します。
また、この記事では、ECサイトのバナーを作る手順に加え、
- ECサイトのバナーのデザインのポイント
- ECサイトのバナー配信のポイント
- ECサイトのバナーで参考にできる事例
についても詳しく解説していきます。
この記事が「ECサイトのバナーを作りたい全ての関係者の方」の参考になれば幸いです。
DMMチャットブーストではECサイトの立ち上げに関する記事もございますので、ぜひご覧ください。
ECサイトバナーの作り方の手順を公開
ECサイトのバナーの作り方の手順を紹介していきます。
一般的にデザイナーがバナーを作る際、大きく8つの手順で進めます。
- 目的を考える
- リファレンスを集める
- 要素を書き出す
- ラフ画を書く
- デザインを詰める
- 配色を決める
- 制作・微調整
業務の流れを固定化することで、現段階の業務状況を他人に伝えやすくなるので、まずはこの手順のプランを進めてみましょう。
これから1から7についての手順を具体的に解説します。
ECサイトバナーの作り方の手順1｜目的を考える
まずはECサイトのバナーを作る目的を考えます。目的が決まっていない状態でデザインを考えてしまうと、コンセプトのないデザインが出来上がってしまうためです。
バナーの目的とは以下のものがあります。
- 商品やサービスの認知
- 商品購入件数
- お問い合わせ件数
実際に売り上げに直結したり、将来的な見込み顧客を増やすための項目がバナーの目的になることが多いです。
数値的な目的を定めても誰に何を伝えるのかという視点が抜けていると、いいバナーは出来上がりません。
- ターゲット（性別、年齢、年収、どんなニーズを持っているか）
- 何を伝えるのか（ターゲットが嬉しい情報はなにか）
以上の項目をECサイトのバナーを作成する前に決めておき、目を引くようなデザインを作成しましょう。
ECサイトバナーの作り方の手順2｜リファレンスを集める
次にリファレンスを集めます。
リファレンスとは、他人が作成した参考にできそうなデザインのことを指します。バナーの制作経験が浅い方は、遠慮せず先人の作ったデザインからヒントを貰いましょう。
リファレンスの集める方法については後ほど紹介しますが、アプリやWebサイトで検索するのが主な方法になります。
ECサイトバナーの作り方の手順3｜要素を書き出す
次に集めたリファレンスを参考にバナーに入れたい要素を書き出します。
ここで重要なのはざっくばらんにアイデアを出して行くことです。
キャッチコピー、会社のロゴ、商品の写真、人物画像、アイコンやキャラクターなどをどんどん書き出してみましょう。
参考にしたいデザインがあれば、そのデザインの何が良いと思うのかを要素別で分解して書き出します。
訴求軸・イメージとあった色の使い方・行動を促す一言など、先人のデザインから学べることは多くあります。
ECサイトバナーの作り方の手順4｜ラフ画を描く
次は紙にラフ画を描いていきます。
具体的には、先ほど洗い出したデザインを要素別に配置していく作業になります。デジタルではなく紙に描くのは、時間をかけ過ぎずにさまざまなアイデアを検討するためです。
いくつか構成案を作成し、目的に沿ったデザイン案を採用すると良いでしょう。
ECサイトバナーの作り方の手順5｜デザインを詰める
次は、ラフ案をデジタルで作成していきます。
実際に、キャッチコピーや商品画像を配置していき、バランスを整えます。ここで注意したいのが、色をつけずに灰色などの単色で配置を行うことです。
配置と着色を同時に行うと作業効率が悪くなる傾向があります。まずは配置の方に集中してください。
ECサイトバナーの作り方の手順6｜配色を決める
配置が決まったら、配色を考えます。配色のポイントは大きく2つあります。
- 遷移先のサイトと印象を揃える
- 相性のいい配色と比率を意識する
配色は組み合わせやバランスによってクリックさせるかどうかが大きく変わるため、慎重に行ってください。
それぞれについて、もう少し具体的に解説します。
遷移先のサイトと印象を揃える
大事なポイントの1つ目は遷移先のサイトと印象を揃えることです。
お洒落なオーガニック風の化粧品のバナーをクリックし、遷移先がフォーマルな雰囲気のサイトだったらすぐ閉じてしまいますよね。
このように、クリックしたあとのユーザーの気持ちを考慮しつつ、デザインを考えることが大切です。
相性のいい配色と比率を意識する
色には相性があります。相性のいい色を組み合わせることで、好感の持てるデザインに仕上げることができるため、意識したいポイントです。
例えば、灰色はどの色とも相性がいい色になります。青と組み合わせればフォーマルな印象に、赤と組み合わせれば情熱的な印象に、緑と組み合わせればクリーンな印象を与えることが可能です。
また、王道とされる配色比率に「70：25：5 の法則」があります。
ベースとなる色が70%、メインカラーが25%、アクセントカラーが5%の比率を保ったデザインは美しく見えます。
配色の組み合わせと比率を意識して制作を行い、より目を引くデザインを作りましょう。
ECサイトバナーの作り方の手順7｜制作・相談・微調整
配色が決まったら最終調整に入ります。商品の画像やフォントを複数試し、一番目的に合った印象を得られるものを模索します。
ある程度デザインが完成してきたところで第三者の意見を聞いてみましょう。新しい視点や見落としていた部分に気がつけるかもしれません。
以上がバナーを作る手順になります。
DMMチャットブーストでは👉EC売上とは何かに関する記事もございますので、ぜひご覧ください。
ECサイトのバナー掲載のポイント
バナーが完成したら、ECサイトに配置しましょう。
「配置する場所はどこがいいのか」という悩みはよくあるので、実際にバナーを配置する場所、改善する方法を紹介していきます。
ECサイトのバナー掲載のポイント1｜配置する場所を考える
まずは配置する場所を考えます。なぜなら、デザインを改善してもお客様の目に留まる場所にバナーがないとクリックされないからです。
ECサイトのバナーは一般的にヘッダー、フッター、サイドバーに配置され、常にお客様の目に留まるよう、ページをスクロールしてもついてくるように設定することができます。
ヘッダーにバナーを配置する場合、離脱を引き起こす可能性がある一方、ユーザーの目に留まりやすいです。
フッターにバナーを配置する場合、最後までページをスクロールしてもらう必要がある反面、購入を検討しているユーザーにクリックされやすい特徴があります。
サイドバーにバナーを配置する場合、他のバナーと違い縦型になりますが、ユーザーの目を引きやすいです。
バナーの配置場所の特性を考慮し、最も効果が出る場所に配置しましょう。
ECサイトのバナー掲載のポイント2｜データを比較分析して改善
配置場所を変えることで、クリック率が大幅に改善されることもあります。配信が完了したバナーはそのまま放置せず、データを分析し配置場所を改善しましょう。
具体的には、お客様がページのどの部分を閲覧しているのかを確認すると良いでしょう。そこで便利なツールが「ヒートマップ」と呼ばれるWebページ分析ツールです。
ヒートマップツールを使うとお客様が滞在している部分を、サーモグラフィーのように色で識別できます。よく閲覧されている部分は温色、閲覧されていない部分は寒色で表されるため、温色の付近にバナーを配置してみてください。
バナーを効率良く運用するためには、サイトに訪問してくれたユーザーの行動を分析し、効果が出る配置場所を検証していく必要があります。
DMMチャットブーストでは👉越境ECとは何かに関する記事もございますので、ぜひご覧ください。
ECサイトでバナーをデザインする際の参考事例
バナーデザイン参考1｜Pinterest
「Pinterest」は自分の好みに合わせてカスタマイズされる検索欄があるのが特徴で、他の画像検索サービスよりも優れています。
「バナーデザイン」と検索すると、インターネット上に存在する画像の中から人気の画像を自動でおすすめしてくれるので、より濃い情報や優秀な作品と出会うことが可能です。
気に入った画像はPinterest上に保存でき、ボード別に管理できます。ボードは他のユーザーと共同編集もできます。
バナーデザイン参考2｜バナーデザインまとめ。
「バナーデザインまとめ。」はリアルタイムで出稿されているデザインを業界別に閲覧できるWebサイトです。テキスト風、立体風、手書き風、イラスト風などの表現別の検索機能も充実しているので参考事例の収集に適しています。
バナーデザイン参考3｜バナーデザインアーカイブ
「バナーデザインアーカイブ」ではサイズ・色・業種の組み合わせでバナーを検索することができるのが特徴のWebサイト。
若い世代に向けて作られたバナーから高齢の方に見られるために作られたバナーまでバリエーション豊富なバナーに出会うことができるでしょう。
バナーデザイン参考4｜レトロバナー
「レトロバナー」では、バナーデザインに使用されているカラーコードを取得できるのが特徴です。
また、サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできるため、幅広い条件でデザインを探すことができます。
バナーデザイン参考5｜banner gallery
「banner gallery」はバナーサイズが決まっている方におすすめのWebサイトです。
バナーの詳細ページにあるタグで、関連するバナーを一覧表示することができます。
ECサイトのバナーが完成した後にするべきこと
「DMMチャットブーストfor店舗」は問合せ対応、顧客情報の管理、定期的なコミュニケーションなどの業務を自動化できる、店舗運営特化型のLINEマーケティングツールです。
今や店舗運営においては、日本国内で月間8,900万人以上（2021年6月末時点）が利用しているLINEは不可欠なコミュニケーション手段です。公式LINEに加えてご利用いただくことで、お客様に合わせたセグメント配信などさらにきめ細かい顧客対応が可能になります。
「自社でどう活用できるのか？」「具体的な運用はどうすればいいのだろう？」などの疑問をお持ちの際は、ぜひお気軽にお問い合わせください。
DMMチャットブーストではEC事業に関する記事もございますので、ぜひご覧ください。
