数年前に新ストアデザインに変更になったので、看板の考え方や作り方、HTMLテンプレートなどの公開を一新しました。
ぜひ、ご活用くださいませ。
その前に、重要なことを１つだけ
新ストアデザインの看板とは名前だけで、別名パソコンページ用のヘッダーエリアです。
看板にいくらバナーなど大事なコンテンツを盛り込んでも、スマホサイトやアプリでガン無視されます（笑）
つまり表示されません。
とは言え、パソコンでは表示される。
どうしたものか。
考え方としては、「（１）まずスマホサイトを作り上げる。（２）余裕ができたらパソコンページのカスタマイズをする。」です。
というのも、yahoo! shopping利用者の大半はスマホブラウザとアプリだから。パソコンユーザーは少数派だからです。
でも、パソコン派を軽視してはいけない大事な理由があります。
それは、パソコンで見ている人は、腰を据えて画面と向き合い、買う気満々の場合があるからです。（もちろんそうでない場合もある。）
今回の記事は、パソコンで表示されるyahoo! shopping新ストアデザインの看板についてです。
何をどう表示させるか決めよう
繰り返しになりますが、新ストアデザインはいわゆる「パソコンページ用のヘッダーエリア」です。
おちゃのこネットなどの一般的な通販システムの場合は、だいたい「ヘッダーエリア」といった表現がされています。
「看板」という日本語に引っ張られると、「店名でいいんじゃね？」なんてなってしまいますが、それではもったいない。
HTMLはもちろん、CSSも使って自由自在な表現ができる「数少ない」スペースですから存分に活用したいところ。
さて、ヘッダーエリアは全ページに表示されるので当然ユーザーの目に入りやすくなります。
いきおい、お店がアピールしたいコンテンツを表示させることになります。
そこで、まず「何をどのように表示させるか？」ということを決めないといけない。
HTML編集前の仕込み２つ
『「看板そのもの」をどのように作るか。（デザインするか。）』もめちゃくちゃ重要なことですが、今回はHTML編集に特化した話なのでカットします。
まず、旧ストアデザインも新ストアデザインでも共通しているのは、あバナーや画像などは作って、あらかじめ「画像管理」から登録しておく、ということ。
つまり、画像関係はヤフーのサーバーに一旦収めておいて、ページには、HTMLで呼び出すことで表示させることができるということです。
「サーバー」の意味がわかっていない人は、「サーバーって何」をご一読ください。
また、看板からリンクを貼るカテゴリページや商品ページがある場合は、そのURLをあらかじめ取得しておく、ということ。
以上の２つをちゃんと仕込んでおいたうえで、初めてHTML（CSS）テンプレートなりが活きてきます。
当店の看板例（横並びバナー３つ）
「ヤフーショッピング出店ユーザー組合連盟」とかあれば、よそはどうやってる？」なんて聞くこともできますが、そんなグループはないので、知っているお店に聞くか、ネット検索するくらいしかありません。
幸い、当店は２店舗出店しているため、「どうやってるの？」に答えることができます。
ただし、今作っている看板が「正解」だとは思っていません。
もっと良い看板、もっと効果的な看板はあると思っていて暫定的にそれにしているだけです。
なので、他店にオススメするわけでもなく「参考程度にしてね。」くらいの感じです。
当店の商品は数千点に及ぶのですが売れ筋は数ジャンルだけです。
だから、ランディングしたユーザーが、そのジャンルのカテゴリーページにすぐに行けるよう３つのバナーを表示させているだけです。
こんな感じ↓
以上です（笑）
「え～それだけ？」って思われるかもしれませんが、当店は送料無料や安売りをウリにしているわけでもなく、セールをすることもなく、わりと高額商品を「買う人はかってね。」というスタンスでやっているからです。
そんな事情もありシンプルに横並びに３つのバナーを表示させているだけです。
楽っちゃ楽ですけどね。
HTML（CSS）テンプレート
では、その横並びバナー３つを載せているHTMLのテンプレートを紹介します。
実は、yahooストア新デザインの看板エリアはHTMLもCSSも使えるのは良いのですが、大きすぎるとスクロールバーが登場してブサイクになるんですよね。
だから、きれいに収まるようちょっと苦労しました。
とは言っても、それは自分のパソコン上だけの話であって、パソコンの画面が小さい人だとスクロールバーがでてしまうし、大きすぎる場合は、変な無駄にスペースができてしまいます。
ただの自己満足です。
HTML（CSS）テンプレート例
（***はストア・アカウント）
<div style="text-align:center;">
<a href="https://store.shopping.yahoo.co.jp/***/aaaaa.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanA.png" width="400" height="185" alt="カテゴリA"></a> <a href="https://store.shopping.yahoo.co.jp/***/bbbbb.html"> <img src="https://shopping.c.yimg.jp/lib/***/kanbanB.png" width="400" height="185" alt="カテゴリB"></a> <a href="https://store.shopping.yahoo.co.jp/***/ccccc.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanC.png" width="400" height="185" alt="カテゴリC"></a></div>テンプレート解説
DIVで枠を作って、そこにIMGでリンク付きの画像を並べています。
ポイントは画像と画像のスペースを「ただの半角スペース」にしているところです（笑）
もはや手抜きHTMLかと思われそうですが、きれいに表示されているので、それでいいっしょ。」って思ってます。
気になる人はガチガチにHTMLで固めてください。
横並びバナー４つ
今後、推したいカテゴリーが１つ増えたらバナーを横並びで４つ並べることになります。
横一列に並べるのは、上記のテンプレートの通り簡単なので、各バナー画像の大きさを調整して同じHTMLで書けばOKです。
今回はバナー３つの場合、横幅は合計で1200だったので、単純に４で割って各バナーの幅は300になりました。
もちろん、高さはそのままです。
<div style="text-align:center;">
<a href="https://store.shopping.yahoo.co.jp/***/aaaaa.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanA.png" width="300" height="185" alt="カテゴリA"></a> <a href="https://store.shopping.yahoo.co.jp/***/bbbbb.html"> <img src="https://shopping.c.yimg.jp/lib/***/kanbanB.png" width="300" height="185" alt="カテゴリB"></a> <a href="https://store.shopping.yahoo.co.jp/***/ccccc.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanC.png" width="300" height="185" alt="カテゴリD"></a><a href="https://store.shopping.yahoo.co.jp/***/ccccc.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanD.png" width="300" height="185" alt="カテゴリD"></a></div>バナー１個だけ配置するHTML（CSS）
レベル的には前後してしまいますが、バナー１つだけ「ドカーン」と表示させるようなお店もあります。
毎月のセール情報だったり、季節ごとのキャンペーンだったり。
そんな場合は、テンプレートなどはもっとシンプルになるし編集も楽です。
<div style="text-align:center;">
<a href="https://store.shopping.yahoo.co.jp/***/aaaaa.html">
<img src="https://shopping.c.yimg.jp/lib/***/kanbanA.png" width="1200" height="185" alt="カテゴリA"></a>という感じですね。
実際は1290まで使えるんですが、自分のパソコンだとスクロールバーが出てしまうので1200とちょっと控えめにしています。
また、ここで個人的なこだわりなんですが、CSSを使ってセンタリングしています。
というのも、センタリングしていないと画面が広いユーザーはバナーが左詰め（左寄せ）表示されてしまいます。それを「不格好」と思ってしまうので！
なので、「style=”text-align:center;”」というCSSを使って、どんな画面でのセンターに配置されるようにしています。
まあ、これは好みの問題ですし、気にするようなお客さんなんてほとんどいないと思いますけどね。
どうなの？こんな看板
知り合いで変な人がいます。
変態とか変人ではないですが、「変わってるな。」と思える人でうｓ。
普段、デパートや繁華街など、あまり街に出かけることがない人です。
その人が、たまに都会に出てきて買い物にいくと、「これ、今、お得なんですよ。」と店員のすすめられるがまま買ってしまうんです。
ネットショッピングもほとんどしないので、街に出てきた帰りは両手に紙袋満タンです。
かつてバーゲンセールが盛んだった昭和の時代を思い出すほどです。
しかしながら、そんな変な人は人握りで、世の中の消費者のほとんどは、普段から広告各種、売り込みにされされていて、そんな攻撃から実を守るべく、無意識に「見ない」「気づかない」という選択を取っている場合があります。
例えば、「いかにもバナー」や「いかにも売り込みのキャッチコピー」などは反応しなくなっています。（長年ショップ運営中している人なら同感してくれる場合もあるかと。）
メールも同じくです。
そのようなマーケットの環境をうけて、看板に表示させるイラストなり文言なりは、変えていかないといけないって思うんですよね。
５％OFF！なんて見飽きて、もはや見えていても目に入らないことも多いと思います。
もちろん、そこはお店のやり方、ユーザーの属性などによって変わると思いますが、「いつまでも効果のない旧式のやり方は、そろそろ疑問に思いませんか？（効果があれば、どんどん使う！）」ということです。
とりあえず、看板まとめ
iPhoneが登場したときに「ガラケーはなくなってスマホ一色になる！」なんて言っていた人がいましたが、まさにその通りになりました。（残念ながら、個人的には「なわけねーだろ。」と思っていた！）
ネットショッピングもスマホ利用が大半を占めます。
パソコン回帰の流れは考えられず、今後も、「いつでもどこからでもショッピング」＝「スマホ（モバイル）」という流れは変わらないでしょう。
yahooストア運営者としては、まずスマホサイトの作り込み。（主に写真ですが！）
そして、余裕があればパソコンサイトの作り込み、です。
また、どのようにHTMLやCSSを書けばよいか？」なんてのは、単なる技術的問題で、本当に大事なのはアクセスユーザーに「何を伝えるか」「どう思ってもらいたいか。」「どのように行動してもらいたいか。」という点は忘れたくないですね。
そのためには、やはり、売る側視点で「買って買って」ではダメで、ユーザー心理を分析して、ユーザーが「気づけば買っていた・・・」というくらいまで動線を作り上げていきたいものです。
当店は、ジャンルの違うヤフーストアを２店舗運営している関係上、今後、いろいろ取り組むな中で得られた知見は惜しみなく追記していきたいと思っています。
励ましのメールなどを頂けると喜びます（笑）
