Photoshopでのバナーの作り方(楽天などネットショップ運営者向け)

公開日:  最終更新日:2017/07/31

テキストリンクじゃ物足りない!ネットショップ運営と切っても切れない「バナー」をPhotoshopで作る時の流れをカンタンに説明します。明日からあなたもバナー職人?

「バナー作ってますか?バナー。」 バナーの作り方

バナー、バナーってネットショップ運営しているとよく言いますが、そもそもバナーってなんだよ?

バナー|wikipedia
バナー (banner) はウェブページ上で他のウェブサイトを紹介する役割をもつ画像(アイコンの一種)のこと。主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。画像にはリンクを張り、クリックするとそのバナーが紹介するサイトを表示するようになっている。 横長帯状のものが一般的だが、近年は縦長のものや正方形に近いものも多い。 英語の banner は旗の種類で、本来は正方形の紋章旗だが、広く横断幕や幟などの意味に広がり、帯状の広告画像が宣伝用の垂れ幕を連想させることからこの名がついたとされ、英語では本来のバナーと区別するためにウェブバナーと呼ばれる事もある。 日本では、基本的に「軍旗」「幟」「横断幕」をバナーとは呼ばないので、バナーだけで呼ぶことが多く、ウェブバナーとわざわざ呼ぶことは比較的少ない。また、日本ではしばしば「バーナー」と誤記されることがある。

よくわかんないけど、 「リンクを貼るための画像=バナー」 って認識で良さそうですね。

ネットショップをやっていると、このバナーの制作からは逃げたくても逃げられません。店舗オープンの時はもちろん、商品の追加、広告の入稿、企画(イベント)の開催時、HTMLのメルマガ作成時など、毎日の様に作っていると思います。

本日はこの「バナーの作り方」を改めて説明してみます。Photoshopを使用しての説明になりますが、他のソフトをご使用の方でも参考になる部分があると思いますので、是非ご一読下さい。

バナー制作の流れ

  1. デザインを決める。
  2. 材料を集める。
  3. Photoshopで新規書類を作成する
  4. 集めた材料を集約する
  5. 配置の調整をする
  6. 色・影・質感などの装飾をする
  7. 必要な形式で書き出す
  8. HTMLでリンク先などの設定をする

1 デザインを決める。

まずは真似から始めよう

まずは同業他社などのバナーをたくさん見て、良い部分を取り入れましょう。素人程「パクリ=悪」って感覚を持っていることが多いですが、偉大な芸術家もデザイナーも始めは模倣や模写からスタートしています。

一字一句全てを丸パクリするようなデザインは、法的な問題を別にしても避けるべきだとは思いますが、先人の知恵を上手に取り入れる事は、決して悪い事ではありません。上手に堂々とパクりましょう(笑)。
※写真・イラストや文章などを盗用するのは絶対ダメです!

参考リンク:
バナーデザイン・サンプルデータベース|AKAIRO inc.

http://aka-design.sub.jp/bd/

下手でも下絵(ラフ)を描こう

ラフ

絵が苦手でも必ず下絵を描く様にしましょう。この作業は「絵を描く」のでは無く、頭の中を整理する意味合いの方が強いです。漠然とした頭の中のイメージを、手を動かして実際に形にする事で、整理する事が出来ます。

後で修正はいくらでも出来ます。深く考えずにガンガン描いてみましょう。

この時、伝えたい情報(商品の強み)を取捨選択して、入れる文章や文字なども決めておきましょう。情報が足りないのは勿体無いですが、多すぎるのも逆効果になります。

2 材料を集める。

デザインが決まったら、必要な写真・イラスト・パーツ、文章などを揃えておきましょう。行き当たりばったりで作業するより、しっかり準備して作業した方が効率が断然良くなります。また、別のバナーを作ったり、作ったバナーの修正をする場合にもこのあたりの準備が効いて来るはずです。

集めた材料は、同じフォルダに分かりやすい名前で保存しておきましょう。

用意した素材
ハカセの研究室ロゴ
フキダシ
ハカセイラスト
集中線
ここではイラストで進めていますが、実際には写真で作業する事が多いと思います。必要に応じて撮影したり、素材集などから集めましょう。

3 Photoshopで新規書類を作成する

いよいよPhotoshopでの作業です。

ファイル→新規

ファイル(F)新規(N)
または「Ctrl+N」※Macの場合は「Command+N」

で新規書類を作ります。

サイズを入力

幅(W)高さ(H)に必要なサイズのピクセル数を入れ、 解像度(R)「72」「pixel/inch」カラーモード「RGBカラー」「8bit」を選んでおきます。

「OK」を押して新規書類が出来ました。

名前を付けて保存

分かりやすい名前を付けて、材料と同じフォルダにPhotoshop(*.PSD;*.PDD)形式で保存しておきます。

4 集めた材料を集約する

2番で集めた材料もPhotoshopで開きます。

プログラムから開く

ファイル(F)開く(O)で材料を選んで開く。
または、Photoshopの画面に直接ドラッグ。

または、右クリック(Macだとcontorol+クリックでもOK)で「プログラムから開く」を選択し、Photoshopを選ぶ。

開いたら、3番で作った書類に全部集めます。 ドラッグしてコピーするか、レイヤーウィンドウの右上のメニューから、「レイヤーを複製(D)」を選んで、保存先のドキュメントを「3番で作った書類の名前」にして「OK」を押す。

レイヤーが複数出来て、材料が集約されました。この時レイヤーの名前を分かりやすいものにしておくと便利です。

文字ツール

追加で必要なテキストを打ち込みます。
文字ツールを選んで、バナー上の任意の場所をクリックし、文字を入力します。

さらに今回は丸い図形が必要なので、楕円形ツールで適当に図を書きます。出来たレイヤーのアイコン部分をダブルクリックすると塗りの色が変更できます。

5 配置の調整をする

1番で決めたデザインになる様に大きさや、配置を調整します。 この時注意する点は、
「拡大する事は出来無い」(出来るけど汚くなる)
と言うことです。

一旦縮小したものを元に戻すのもダメです。説明は割愛しますが、基本的には出来ないと思っていて下さい。

これを無視するとワードやエクセルで作ったような、素敵な(笑)バナーが出来上がります。

(ベクトルのデータをラスタライズせずに扱う場合は、拡大縮小が自由に出来ますが、ここでは全てビットマップのデータを使用している前提でお話しています。)

調整したものがこんな感じ。
バナー1

6 色・影・質感などの装飾をする

必要に応じて、文字の色罫線の色質感などを調整します。センスよく仕上げるのは結構難しいので、色んな他社のバナー等を見て、参考にしましょう。

素人は大抵の場合やり過ぎます。そして「地方自治体の書類」の様な素敵な仕上がりになりますので、充分な注意が必要です。

見本ではバナー全体に2ピクセルの罫線を付けて、ハカセのイラストとフキダシの図形に影をほんのりつけています。

罫線の付け方

新規レイヤーを作り
(レイヤーウィンドウ下の「新規レイヤーを作成」ボタンをクリック)

新規レイヤーが選択されている状態で選択範囲(S)全てを選択(A)
または「Ctrl+A」(Macの場合「Command+A」)

編集(E)境界線を描く(S)

幅(W)「1px」カラー「クリックして好きな色を選択」
位置「内側(I)を選択」「OK」を押す。

以上で罫線だけのレイヤーが出来上がります。

影の付け方

レイヤーウィンドウで影を付けたいレイヤーを選択して、右クリックで「レイヤー効果」を選ぶ。

レイヤースタイルの設定パネルが開くので、「ドロップシャドウ」を選ぶと影の詳細設定が出来ます。

プレビューを確認しながら調整して「OK」を押します

完成したバナーはこんな感じ
バナー2

7 必要な形式で書き出す

とりあえずバナーが完成しました。(保存するのをお忘れなく)

Photoshopデータ(.PSD)のままではWEBでは使えませんので、WEB用の画像を書き出します。

ファイル(F)Web用に保存…

書き出す画像のファイル形式とクオリティ等を設定して、ファイル名を付けて保存します。WEB用ですのでファイル名には日本語や機種依存文字・記号などは使えません。半角英数字とハイフン“-”やアンダーバー“_”のみでファイル名を付けましょう。

画像の保存形式について豆知識

WEB上で使う画像の形式と言えば「ジェイペグ(jpg・jpeg)」と「ジフ(gif)」がほとんどですが、その違い分かりますか?

jpg=写真が得意

gif=文字が得意

と覚えておきましょう。どちらも画像を圧縮(容量を軽くする)するのですが、jpgはくっきりとした境界線などは苦手で、gifはグラデーション等の階調表現が苦手です。そのため写真などはjpgで、タイトルなどの文字はgifで書きだす事が多いです。

jpgとgifのサンプル
jpgの見本 gifの見本

8 HTMLでリンク先などの設定をする

良し!バナーは出来た、後はHTMLでリンクの設定だ!

 <a href="リンク先URL" target="_self"> <img src="バナー画像のURL"> </a> 

基本的には上記のタグでOKです。 一個注意点が!

リンクタグ「aタグ」にはtargetと言う属性があります。これは「リンク先のURLをどうやって開くか」を指定しています。

リンクタグのターゲット属性の種類は

target=”_parent”
iframeなどで親のHTMLがリンク先に移動する

target=”_blank”
別のページでリンク先を開く

target=”_self”
今のページがリンク先のURLに移動する

target=”_top”
一番上の階層のHTMLがリンク先に移動する

通常の商品ページやカテゴリページにリンクを設定する場合は「target=”_self」または指定なしで良いのですが、iframeを使用した時などには「target=”_blank”」や「target=”_parent”」を設定し忘れない様に注意しましょう。

まとめ的な何か

いかがでしょうか?Photoshopに慣れ親しんだ人なら「そんな事知ってるよ」「もっといい方法があるYO」「毎回ハカセのイラスト使いまわすんじゃねーよ」と、不満が続出しそうな内容かも知れませんが、初心者の方向けの記事って事で何卒ご容赦下さい。

この記事は技術的な内容ではありますが、「バナー」の本来の目的は「こんな商品があるんですよ」とか「このバナーをクリックした先には面白いページがあるよ」って事をお客様(ページに来てくれた人)に伝える事にあると思っています。

コメント

  1. ルイナス より:

    ハカセ 様

    いつもお世話になっております。

    この記事とは全く別件の話で申し訳ありませんが、
    ハカセに相談があります。

    ↓のサイトのような素敵なページがあります。

    http://item.rakuten.co.jp/puerariaplaza/bravie-m-290/

    僕のページは縦にものすごく長いので、
    上記のページのように、そしてハカセのこのブログにもあるような、
    右下に「ページ先頭に戻る」ボタンを設置しようと、
    iframeを使ってみたのですが、どうもうまくいきません。

    上記のページのソースを見て真似してもみたのですが、
    やり方が悪いのかだめでした。

    という事で、
    ハカセのお知恵をぜひお借りさせていただきたいです。^^;

    楽天の商品ページに「ページ先頭に戻る」ボタンを設置する、
    何かうまい方法がお分かりのようでしたら、
    時間のあるお暇な時にでも、お答えいただければ幸いです。

    お手数お掛けし恐縮ですが、どうかよろしくお願いいたします。

    • ルイナス より:

      昨日、書き込んだルイナスです。

      昨日は、
      「お手数お掛けし恐縮ですが、どうかよろしくお願いいたします。」
      なんて書いてしまいましたが、
      心の中は結局「ハカセにやっていただければ有り難い」という気持ちがありありで、
      無理言って申し訳ないです。

      僕が担当している店の商品ページは縦に異常に長くなっているので、
      PC用商品説明文に、
      ページ先頭に戻る
      と入れて、
      買い物カゴの少し上に「ページ先頭に戻る」ボタンは、設置してはおります。

      でもまぁ、理想は「プエラリア プラザ」さんのようにやりたいなぁと。

      「ヘッダー・レフトバー・フッター」にiframeでファイルを組み込んだ場合、
      開いている商品ページの、そのページのトップに個別でジャンプさせるのは、
      どういった方法が考えらますでしょうか。

      どうしたら「プエラリア プラザ」さんのように、
      goldを使わないで右下に固定でボタンを設置できるのか、
      僕も、もう一度よく調べてみます。

      素人がごちゃごちゃ書いてすみません。

      • ハカセ より:

        ルイナス様

        ご質問ありがとうございます。

        多分、プエラリアプラザさんは、
        商品ページのPC用販売説明文に
        トップに戻るボタンのdiv要素を書いて、
        CSSで表示する位置を調整していると思います。

        楽天ショップでページの横に固定で表示されるタブバナーの作り方

        この記事で言うと、

        <div id="tab"><a href="リンク先URL"></a>
        

        この部分を各ページ毎にURLを変更した上で挿入し、
        CSSはタブバナーと同じくヘッダー・フッター・
        レフトナビのテンプレートに読み込ませるって感じです。

        URLを自動で取得して全ページに入れられないか
        調べた事がありますが、楽天の場合GOLDとRMSで
        ドメインが違うため、javascriptでの実装は無理そうでした。

        以上お役に立てれば幸いです。

        • ルイナス より:

          ハカセ 様

          ルイナスです。
          ご返信が遅くなり、大変失礼いたしました。

          ハカセの言うとおりにPC用販売説明文にdivタグ、
          ヘッダー・フッター・レフトナビにcssを入れたら、
          できました!!!

          商品ページには、
          右下に「買い物かごにいれる」ボタンが自動で表示されてますので、
          その左隣に「先頭へ戻る」ボタンをつけようと思います。

          個別にurlを入れる作業がちょっと面倒ですが。。

          実はこの事で1年近く悩んでいて諦めておりました。

          ハカセに尋ねて本当に良かったです。

          ありがとうございました。m(_ _)m

  2. […] 美しいバナーを効率的に制作するための10ステップ photoshopでのバナーの作り方 業界人のためのWEBバナー作成講座 […]

  3. […] 美しいバナーを効率的に制作するための10ステップ photoshopでのバナーの作り方 業界人のためのWEBバナー作成講座 […]

  4. […] 美しいバナーを効率的に制作するための10ステップ photoshopでのバナーの作り方 業界人のためのWEBバナー作成講座 […]

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る