通販ショップを始めよう。現役店長が教える開業運営きほんのきほん

バナー作成の手順

バナー作成手順

一言にバナーと言っても、目的はいくつかあります。カテゴリー用のバナーや、スペシャル企画のバナー、セール用バナー、アウトレット用バナー、季節のイベント用バナーなど。

目的別にデザインを決めて、素材を集めるのは当然ですが、ランディング先(クリックした時に開くページ)の用意もする必要があります。バナーだけ作りゃいいって話ではないんですね。

ネットショップの仕事内容でも重要なポジションに位置するのが、このバナー作成です。しっかり、作り方をマスターしましょう。

人気おすすめ無料講座
youtube-logo yahoo! shopping 画像挿入や文字のHTML変換
youtube-logo スマートフォン用サイトの看板やフリースペースの編集
youtube-logo ヤフーストアの看板画像を作る方法
youtube-logo サイドナビを画像に変更する方法
youtube-logo ストアサービスのリンクをボタン画像に変更する方法

このページのメニュー

※ネットショプ成功事例無料パンフレット配布中


目的とデザイン案を決めよう

まずは、目的とデザインを決めます。例えば、クリスマスセール用に、真っ黒のバナーはマッチしません。それらしいデザインでないとお客さんの目を惹かないので、クリスマスらしいデザインにします。ここでは、ヤフーストアで見かけたお店を参考に「毎月5のつく日は10%OFFキャンペーン」という特別ページへ導くバナーを作ってみます。

「さて、デザインはどうしたものか・・・」と悩むなかれ。いろいろなお店を見て回って、この目的にマッチしそうなバナーを見つけてパソコン上に保存してそれを、真似て作ります。あまりにそっくりにしてしまうとトラブルの元になるので、配色やコピーなどをな~んとなくパクるのがコツです。

で、作ってみたのがこれです。素人作成ですが、それなりだと思います。

バナー10OFF

黄色と黒、そして赤という目を引く色を使っています。本来商品写真も入れたいのですが、「対象商品123点」ということで省略しました。

素材を集めよう

さて、今回のバナーを作るに際して、素材を集める必要があります。作成するのは、ホームページ・ビルダー付属のウェブアートデザイナーというソフトです。このソフトには、素材が少ないので、ウェブ上の無料素材から集めてきます。集めたのは2つです。

リボン素材

(1)リボン
http://www.toriho-dai.com/present/present7.html
この画像を頂いて、右側のリボンを切り取って、左右対称に反転させました。背景の白色をツールで透明化して、バナーに重ねました。


ストライプ素材

(2)ストライプの背景
http://www.ramica.net/texture/
ramica_texture_stripe_03.html
縦のストライプだったものを、斜めにして半透明化して、黄色に塗りつぶした画像の上に配置しました。


(3)無料フォント
手書き風フォント
この部分です。これは下記のサイトで配布されている、手書き風の無料フォントです。これをあらかじめ、パソコンにインストールしておきます。このフォント以外は、もともとパソコンにあるフォントを使っています。
無料フォント「遊び」
http://font.sumomo.ne.jp/asobi.html

下記の画像を見て頂くとわかりますが、いろいろなパーツの組み合わせてバナーを作ります。これは一番上に配置、その下はこれ、という感じです。切り取ったり、半透明化にしたり角度を変えたり、反転などはソフトの機能にあります。

パーツの組み合わせ

ソフトを使って組み立てよう(動画)

今回のバナー作成に要した時間は20分ほどです。かなり慣れている方だと思います。素材を集めることさえできれば、後はソフトの操作を覚えるだけです。フォトショップやイラストレーターは高額で、操作を覚えるのもなかなか大変なので操作の簡単な、こういったソフトから始めることをおすすめします。

今回のバナー作成を動画にしたので参考にしてください。ソフトのほんの一部の機能しか使っていません。最初に作ったバナーを元をまねて、ちょっと雑に作っています。

お店のイメージにあったフォントを使おう

フォントとは書体のことです。もともと、パソコンに入っているものから、フリー素材、有料素材までたくさんのフォントが存在します。本職のデザイナーさんやイラストレーターさんは、有料フォントを買って作品を作ったり、仕事をしたりしますが、ショップオーナーはそこまでしなくても、無料で良いのでたくさん出ているのでそれを使ってください。

まずい料理屋なのに、フォントひとつで「おいしそう」に見えるように、書体のパワーは無視できません。自分のお店に最適なフォント、商品が良さそうに、あるいは、お店の品質が良さそうに見えるフォントを選んでください。

フォントの違い

左はチェーン店ぽい雰囲気で、右は専門店ぽいイメージです。おそらく、街に立てたれている看板などで見れば、違いがよく分かると思います。固いイメージのお店は明朝体系を使って、手作りや暖かみを演出するなら手書き風、といった感じです。

フォント(左)
明朝体(PCにデフォルトで入っているフォント)
フォント(右)
たぬき油性マジック:http://tanukifont.com/tanuki-permanent-marker/
メニューボード素材:http://allfree-clipart-design.com/business/black-menu-vector-background-02/

フォント・ダウンロード

フォントは圧縮ファイルをダウンロードしてそれを開くと、このように「○○○.ttf」などのファイルが現れます。「.txt」は不要です。この「.tff」をダブルクリックすると、 下のようなウィンドウが出てくるので「インストール」を押します。すぐにパソコンにインストールされます。新しく入れたフォントを使う場合は、いったんソフトを終了させて、再度立ち上げてください。

フォント・インストール

無料素材のサイトは無数にあります。ド素人の作った素材集からプロが作ったハイクオリティーな素材までいろいろです。日本国内はもちろん、海外サイトにまで目をやると、多種多様なフォントや素材が得られます。

今回使ったストライプの素材などを一から作ろうと思えば、何十分もかかってしまいます。素材を組み合わせて、短時間で効率よく、できるだけクオリティーの高いバナーを目指しましょう。いくつかオススメの素材サイトを載せておきます。

ECデザイン:http://design-ec.com/
Eコマース予備校:http://ec-yobiko.com/
ネットショップ素材:http://ec-yobiko.com/
カオスモード:http://chaosmode.info/
取り放題.com:http://www.toriho-dai.com/

また、Googleの画像検索で「無料素材 ストライプ 壁紙」などと検索すると、合致する画像の一覧が出てくるのでイメージに近い素材が探しやすくなります。

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP