【ヤフショ5分講座】Yahoo!ショッピングストア構築の方法
こんにちは、Yahoo!ショッピングでの
販売促進コンサルタントの水野です。
この記事では、Yahoo!ショッピングの
ストア構築の方法について公開していきます。
ストア構築の部分で、手を抜いてしまうと、後々広告などでアクセスをアップさせたとしても、そのアクセスで成約率が低ければ何の意味もなくなってしまいます。
この記事では、Yahooショッピングですでに上手くいってるストアを参考にしながら見ていこうと思います。
既に売れている他社ストアの横幅をpage rulerで測ってみよう
ストア構築ではショップのページ全体をデザインすることが可能です。 ストアごとに横幅のサイズが全然違うので、まずはどういったサイズにしたいかを考えた方がいいですね。
ここでサイズですが大きくすればするだけいいってわけではありません。 理由としてはパソコンにはデスクトップだったり、ノートパソコンがありますし、 更にお客さんの使っている PC のモニターは様々です。 ノートパソコンで見ても問題ないサイズにすることが重要ですね。
色々なショップのサイトのサイズを Page ruler でどんどん測って見てください。 ちなみに私のお勧めは 850px~1050px です。
このぐらいに抑えておくのが1番いいかなと思います。 では試しに何社か売れているセラーのサイズを測ってみます。
まず最初にこちらのショップは Yahoo!ショッピングですごく売れているセラーで、 Page ruler 測ったら横幅が 1080px でした。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
次にこちらはスマートビズさんです。
こちらのショップはとにかくページの作りこみが上手く、
いつも私が参考にしているセラ ーの 1 つです。
こちらは横幅 1045px です。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ストアサイズ設定方法
ストアクリエイタプロのトップページで
『ストア構築』をクリックします。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
そして次に『ストアデザイン』をクリックして下さい。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
次にこちらのストアデザインメニューの
『全体の設定』をクリックして下さい。
そうしますとこういった画面ができます。
こちらのページ幅に希望の数字を入れて頂くと
その幅のサイズになります。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
具体的にお店を参考に
今回はこちらの『seedcoms』さんのページを
参考に説明していきたいと思います。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
page ruler でストアのサイズを測ってみますと、Seedcoms さんは 1175px で設定している ので、『1175』と入力します。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
また位置で『左寄り』と『中央』とありますが、
基本的にほとんどのショップが『中央』で設定されていますし、
私も『中央』をオススメします。
他にもこちらの全体設定では色の設定などもできますので、 色々変更をして、より素敵なデザインにしていきましょう。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ヘッダーの設定方法
ヘッダーとは商品情報より上に
バナーなどを貼っていく部分になります。
ほとんどのショップがこの様に売りの商品や、
セール内容などを貼っていますね。
Yahoo!ショッピングが提供している「5 のつく日」など
イベントのバナーを貼っているセラーもいます。
この部分をしっかり作りこんでいくことで賑わい感が出ますし、回遊率もどんどん上がっ てお客さんの滞在時間が増えていきますね。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
こちらに関しては HTML のソースを入れていく感じになります。
ではどういったソースを入れればいいか、
例を一つ一つ説明していきます。
バナー設定方法
まずはこちらのバナーの設定方法になります。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
こちらに関しては大きな1枚のバナーが貼ってあるだけです。
ではこちらのバナーサイズを測っていきます。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
バナーのサイズは 1175×280px ですので、
<div style=”width:1175px;height:280px;”>
<a href=”リンク先 URL“>
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前”></a>
</div>
※黄色い部分は変えないでください
◯サイズ設定
width:1175px の 1175 の部分に関しましては先ほど設定したストアの横幅を設定してくだ さい。
height:280px の 280 の部分に関しましては作成したバナーの縦のサイズを測りその数字を 入れて下さい。
◯リンク先の設定
<a href=”リンク先 URL“>に関してはこのバナーをクリックした場合に飛ばしたいページ の URL を入れて下さい。
もしどこにも飛ばしたくない場合は、下記のソースの様に URL の部分を消してこの様に作 成して頂ければ大丈夫です。
<div style=”width:1175px;height:280px;”>
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前”></a>
</div>
◯バナーの入力
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前”></a>
</div>
こちらにはストアクリエイタプロの画像登録で登録した際の URL を入力してください。
この様に同じ内容のソースを2つ続けていけば挿入しますと、この様に 2 つバナーが並びます。
ここで画像 URL を変えれば違う画像が入ります。
<div style=”width:1175px;height:280px;”>
<a href=”リンク先 URL“>
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前”></a>
</div>
<div style=”width:1175px;height:280px;”>
<a href=”リンク先 URL“>
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前”></a>
</div>
こちらを反映させるとこの様になります。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ヘッダー設定後の流れ
これを設定していくんですが、設定する場所は
ストアデザインのストアデザインメニューの
『ヘッダー・看板』をクリックして下さい。
そうしますとこういった画面ができます。
こちらの画面の『看板』をクリックして下さい。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
そうしますとこの様な画面が下に出てきますので、
こちらの HTML の部分に先ほど作成したソースを入力して下さい。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
(※必ず保存する前にプレビューを確認して下さい。)
続いてサイドナビについてご説明していきます。
サイドナビとは、商品説明文の左側にあるバナーですね。
こちらもお客さんがついでに興味を持った商品をクリックしたりしてくれますので、ここにもちゃんと情報を入れてあげて回遊率を上げていきましょう。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
では具体的にどの様に設定していくかご説明していきます。
まずはストアデザインのストアデザインメニューの
『サイドナビ』をクリックして下さい。
そこでまずは『パーツの並び替え』をしていきます。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
ここで必要な項目を右に持っていくとその項目が使える様になるといった感じです。
種類は、
・フリースペース 1
・フリースペース 2
・フリースペース 3
・人気ランキング
・カスタムページ表示
・ストア内検索
・カレンダー
・ストアサービス
・ストア内商品カテゴリ
・おすすめ商品
・トピックス
・店長紹介
ではそれぞれ説明していきたいと思います。
まずフリースペースですが、こちらは好きなバナーや好きな文字を入力することが可能です。
入力方法は『デザイン編集』をクリックしまして、
『フリースペース』をクリックしま す。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
<div style=”padding-bottom:下のバナーの間の希望余白(5~10 がオススメ)px;”>
<a href=”リンク先 URL“>
<img src=”ストアクリエイタプロで登録した画像 URL” border=”0″ alt=”写真の名前“></a></div>
※黄色い部分は絶対に変えないでください
※サイドナビのバナーを作成する際は必ず横幅を 180px で作成して下さい。
次に人気ランキングです。
こちらを設定しますとこんな感じで表示されます。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
好きなパターンを入力選択してください。
ほとんどのセラーが『タイプ 2』か『タイプ 3』を選んでいる傾向にありますね。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
次にストア内検索です。
こちらを設定しますとこんな感じで表示されます。
デザイン編集で『ストア内商品カテゴリ』をクリックしますと、
こちらの画面になります。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
次はカレンダーです。
こちらを設定しますとこんな感じで表示されます。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
次はストアサービスです。
こちらを設定しますとこんな感じで表示されます。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
オークションストア以外は全部入力する事をおすすめします。 画像の作成に関しては全て 180px で作成して下さい。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
こちらもパターンを選択していただく様になります。
一般的には『タイプ 3』と『タイプ 5』を使っている
ショップが多いですね。
他にも
・カスタムページ表示
・おすすめ商品
・トピックス
・店長紹介 がありますが今回全て入れてしまうと
かなり長くなってしまいますので、
今回紹介した物をまずは入れて頂く事をオススメします。
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
最後に作業が終わったら必ず『反映』作業をして下さい。
こちらをしないと公開にならないので必ず忘れず行ってください。
以上、Yahoo!ストア構築法を図解で説明してきました。
如何でしたか。
手を動かしながら取り組んでもらってもよし、
外注さんに丸投げしてもよし、
あなたの資源に合わせてスピーディかつ効果的に見えるような
ストア構築を行なっていきましょう。
![わずか1商品で月商1100万を達成したNさんが、難易度の高い商品特有の問題を乗り越えた3つの成功のカギ。](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![副業で限られた時間ながらも、たった1商品で年商1億8,000万円を達成したHさんの話](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![AmazonOEM×自社ブランディングでシナジーを生み出し成功を勝ち得たKさんのお話](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![相乗り転売していた商品にブランディングを施し、月商850万円を達成したFさんのお話](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![Kさんが月商1700万まで大きく飛躍した改善策とは](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![](https://iobc.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif)