真似から始めようまずは同業他社などのバナーをたくさん見て、良い部分を取り入れましょう。素人程「パクリ=悪」って感覚を持っていることが多いですが、偉大な芸術家もデザイナーも始めは模倣や模写からスタートしています。一字一句全てを丸パクリするようなデザインは、法的な問題を別にしても避けるべきだとは思いますが、先人の知恵を上手に取り入れる事は、決して悪い事ではありません。上手に堂々とパクりましょう(笑)。inc.下手でも下絵(ラフ)を描こう絵が苦手でも必ず下絵を描く様にしましょう。この作業は「絵を描く」のでは無く、頭の中を整理する意味合いの方が強いです。漠然とした頭の中のイメージを、手を動かして実際に形にする事で、整理する事が出来ます。後で修正はいくらでも出来ます。深く考えずにガンガン描いてみましょう。この時、伝えたい情報(商品の強み)を取捨選択して、入れる文章や文字なども決めておきましょう。情報が足りないのは勿体無いですが、多すぎるのも逆効果になります。デザインが決まったら、必要な写真・イラスト・パーツ、文章などを揃えておきましょう。行き当たりばったりで作業するより、しっかり準備して作業した方が効率が断然良くなります。別のバナーを作ったり、作ったバナーの修正をする場合にもこのあたりの準備が効いて来るはずです。集めた材料は、同じフォルダに分かりやすい名前で保存しておきましょう。用意した素材ここではイラストで進めていますが、実際には写真で作業する事が多いと思います。必要に応じて撮影したり、素材集などから集めましょう。Photoshopで新規書類を作成するいよいよPhotoshopでの作業です。ファイル(F)→新規(N)または「Ctrl+N」※Macの場合は「Command+N」で新規書類を作ります。解像度(R)は「72」「pixel/inch」、カラーモードは「RGBカラー」「8bit」を選んでおきます。「OK」を押して新規書類が出来ました。分かりやすい名前を付けて、材料と同じフォルダにPhotoshop(*.PSD;*.PDD)形式で保存しておきます。集めた材料を集約する2番で集めた材料もPhotoshopで開きます。ファイル(F)→開く(O)で材料を選んで開く。Photoshopの画面に直接ドラッグ。右クリック(Macだとcontorol+クリックでもOK)で「プログラムから開く」を選択し、Photoshopを選ぶ。開いたら、3番で作った書類に全部集めます。ドラッグしてコピーするか、レイヤーウィンドウの右上のメニューから、「レイヤーを複製(D)」を選んで、保存先のドキュメントを「3番で作った書類の名前」にして「OK」を押す。レイヤーが複数出来て、材料が集約されました。この時レイヤーの名前を分かりやすいものにしておくと便利です。追加で必要なテキストを打ち込みます。文字ツールを選んで、バナー上の任意の場所をクリックし、文字を入力します。今回は丸い図形が必要なので、楕円形ツールで適当に図を書きます。出来たレイヤーのアイコン部分をダブルクリックすると塗りの色が変更できます。配置の調整をする1番で決めたデザインになる様に大きさや、配置を調整します。「拡大する事は出来無い」(出来るけど汚くなる)と言うことです。縮小したものを元に戻すのもダメです。説明は割愛しますが、基本的には出来ないと思っていて下さい。これを無視するとワードやエクセルで作ったような、素敵な(笑)バナーが出来上がります。(ベクトルのデータをラスタライズせずに扱う場合は、拡大縮小が自由に出来ますが、ここでは全てビットマップのデータを使用している前提でお話しています。)調整したものがこんな感じ。色・影・質感などの装飾をする必要に応じて、文字の色、罫線の色、影、質感などを調整します。センスよく仕上げるのは結構難しいので、色んな他社のバナー等を見て、参考にしましょう。素人は大抵の場合やり過ぎます。「地方自治体の書類」の様な素敵な仕上がりになりますので、充分な注意が必要です。見本ではバナー全体に2ピクセルの罫線を付けて、ハカセのイラストとフキダシの図形に影をほんのりつけています。位置「内側(I)を選択」、「OK」を押す。以上で罫線だけのレイヤーが出来上がります。影の付け方レイヤーウィンドウで影を付けたいレイヤーを選択して、右クリックで「レイヤー効果」を選ぶ。レイヤースタイルの設定パネルが開くので、「ドロップシャドウ」を選ぶと影の詳細設定が出来ます。必要な形式で書き出すとりあえずバナーが完成しました。(保存するのをお忘れなく)Photoshopデータ(.PSD)のままではWEBでは使えませんので、WEB用の画像を書き出します。ファイル(F)→Web用に保存...書き出す画像のファイル形式とクオリティ等を設定して、ファイル名を付けて保存します。半角英数字とハイフン“-”やアンダーバー“_”のみでファイル名を付けましょう。画像の保存形式について豆知識WEB上で使う画像の形式と言えば「ジェイペグ(jpg・jpeg)」と「ジフ(gif)」がほとんどですが、その違い分かりますか?jpg=写真が得意gif=文字が得意と覚えておきましょう。どちらも画像を圧縮(容量を軽くする)するのですが、jpgはくっきりとした境界線などは苦手で、gifはグラデーション等の階調表現が苦手です。そのため写真などはjpgで、タイトルなどの文字はgifで書きだす事が多いです。</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」「毎回ハカセのイラスト使いまわすんじゃねーよ」と、不満が続出しそうな内容かも知れませんが、初心者の方向けの記事って事で何卒ご容赦下さい。この記事は技術的な内容ではありますが、「バナー」の本来の目的は「こんな商品があるんですよ」とか「このバナーをクリックした先には面白いページがあるよ」って事をお客様(ページに来てくれた人)に伝える事にあると思っています。関連記事-こちらもどうぞ楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻Photoshop「すごいバナーの作り方」(楽天などネットショップ運営者向け)リアル店舗とネットショップの「違い」と「共通点」を考えるWordPressのテーマを作る小さい企業だからこそ。様いつもお世話になっております。この記事とは全く別件の話で申し訳ありませんが、ハカセに相談があります。↓のサイトのような素敵なページがあります。右下に「ページ先頭に戻る」ボタンを設置しようと、iframeを使ってみたのですが、どうもうまくいきません。上記のページのソースを見て真似してもみたのですが、やり方が悪いのかだめでした。いう事で、ハカセのお知恵をぜひお借りさせていただきたいです。時間のあるお暇な時にでも、お答えいただければ幸いです。お手数お掛けし恐縮ですが、どうかよろしくお願いいたします。12:00昨日、書き込んだルイナスです。「お手数お掛けし恐縮ですが、どうかよろしくお願いいたします。無理言って申し訳ないです。買い物カゴの少し上に「ページ先頭に戻る」ボタンは、設置してはおります。プラザ」さんのようにやりたいなぁと。開いている商品ページの、そのページのトップに個別でジャンプさせるのは、どういった方法が考えらますでしょうか。僕も、もう一度よく調べてみます。素人がごちゃごちゃ書いてすみません。17:15ルイナス様ご質問ありがとうございます。商品ページのPC用販売説明文にトップに戻るボタンのdiv要素を書いて、CSSで表示する位置を調整していると思います。href="リンク先URL"></a>この部分を各ページ毎にURLを変更した上で挿入し、CSSはタブバナーと同じくヘッダー・フッター・レフトナビのテンプレートに読み込ませるって感じです。URLを自動で取得して全ページに入れられないか調べた事がありますが、楽天の場合GOLDとRMSでドメインが違うため、javascriptでの実装は無理そうでした。以上お役に立てれば幸いです。ご返信が遅くなり、大変失礼いたしました。右下に「買い物かごにいれる」ボタンが自動で表示されてますので、その左隣に「先頭へ戻る」ボタンをつけようと思います。個別にurlを入れる作業がちょっと面倒ですが。実はこの事で1年近く悩んでいて諦めておりました。ハカセに尋ねて本当に良かったです。ありがとうございました。コメントをキャンセルメールアドレスが公開されることはありません。ハカセの研究室ページ先頭に戻る。