【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

デザイン初心者必見!魅力的なバナー作りに必要な3つの工程

デザイン初心者必見!魅力的なバナー作りに必要な3つの工程

バナーを簡単に作成する行程

今回は、以下の様なバナーをPhotoshopを使用して実際に作成し、完成するまでの行程を3工程に分けて説明させていただきます。
デザインの知識が無くてもバナーが作成できるようにまとめました。
また、役に立つサイトを多く紹介しているので、デザインの勉強を積んだ方にもぜひ参考にしていただければと思います。

バナーの例

Photoshopは、古いバージョンのものを無料で入手する事が可能です。以下の記事を参照下さい。
無料でAdobe CS2が手に入る!?Photoshop CS2のダウンロード方法|フォトショップの参考書 [sitebook]

バナーには国際規格が定められています。
国際規格にのっとって、横300px 縦250px (Medium Rectangle:ミディアムレクタングル)のものを使用します。
バナーの国際規格については、以下のページにまとめられています。
webディレクターズ/WEB制作を効率化させる、国際標準バナーサイズ

【手順】

1.コンテンツを決める
2.手書き
3.本作成

1.コンテンツを決める

1-1 何のためのバナーなのか

今回の場合「安く売っている事を認知してもらい、クリックしてもらう事」が目的です。

1-2 構成する要素

1-1の内容を踏まえ、バナー内必要な要素を棚卸しします。
今回は、以下の4点です。
「10%OFF」
「SALE」
「期間限定」
「ギターのセールだとわかるもの」

1-2-1コピー

あらかじめコピーを決めておきます。
最低限の文面で効率よく引きのある言葉を選びましょう。
今回は、以下の2つを採用しました。
メイン文言「SALE 10%OFF」
サブ文言「10/1~10/31限定!」

1-2-2イメージカラー

サイトの色と調和したものが良いでしょう。
また、以下の記事も参考にしていただけます。
モバイルファーストマーケティングラボ/5分で学べる配色デザインの基礎! web制作者が色彩を操るためのコツ

今回の配色図は以下の通りです

色相図

1-2-3 画像

写真を撮るか、フリー素材を使用するか。
フリー素材だと、ECに特化したものを扱っている以下のサイトが便利です。
ECサイト・ネットショップ素材を無料でダウンロードできる「EC design(デザイン)」ズ
ネットショップ専用の、商用利用可フリー素材サイト「EC予備校」

2.手書き

2-1 紙にコンテンツを書いていく

PCで作業すると、どうしても悩んでしまうので、まず紙に具体的な下書きをして、作業のみをPCで行う事で効率が大幅に良くなります。
1-2で決定したコンテンツをチェックしていき、以下の様な形でおおまかな位置を決めましょう。
書き出し

3.本作成

3-1 ある程度おおまかに作成する

冒頭でも説明したとおり、今回はPhotoshopを使用してバナーを作成します。
おおまかに設置
まずはおおまかに設置していきます。
ここで、見た感じで足りない部分を補っていきます。
コツは以下の3点。
・とにかく余白を埋める
・他のバナーを参考にする
・見難い部分にはフチやシャドウをつけてみる
です。
他のバナーを参考にする際は、以下の様なバナーを多く紹介しているサイトで、自分が作ったものと近いものを照らしてみると余白などの打開策が生まれやすいです。
バナーデザインDB
Retrobanner

3-2 チェックポイント

3-2-1文字間等、統一感はあるか

綺麗なバナーでこその訴求力です。
・文字間
・行間
・オブジェクト間
等、微妙な距離を確認し、最終調整をしましょう。
文字のカーニング等は、photoshopを利用している場合、以下のページが参考になります。
カーニング、字送り、文字ツメの違い/adobe

3-2-2デバイスをまたいでの可読性

バナーでもスマホ対応は必須。
レスポンシブWebデザインなど、複数デバイスで同じバナーを仕様するのであれば
PCで見る事ができても、スマートフォンで閲覧時に文字がみれるかどうかが重要になってきます。
実際にスマートフォンで(可能ならブラウザを使用して)画像を閲覧し、可読性を確認します。
可読性

必要であれば、3-2-1に戻って、もう一度確認します。
以上のチェックが完了したら完成となります。

まとめ

いかがでしょうか。
訴求力のあるバナーを作成して、ショップをより良いものにしましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+