ECｽﾃｰｼｮﾝを使わないスマホ版トップページ

Question

いつもお世話になっております。

ECステーションのにぎわいツールやショーケース等を使わずに
スマホ版トップページを作りたいのですが、
お手本になりそうな、お店がありましたらご紹介いただけませんでしょうか。

Answer

ECマスターズの中野です。

お世話になっております。

> ECステーションのにぎわいツールやショーケース等を使わずに
> スマホ版トップページを作りたいのですが、
> お手本になりそうな、お店がありましたらご紹介いただけませんでしょうか。

ヤフー株式会社が提供する以下サービスも
賑わい演出ツールを提供されていますので
ご共有させていただきます。

B-Space
https://bspace.jp/

提供ツール数は合計5種のうち、
賑わい演出ツールが3種、
残りの2種がバナー作成などの
ストア運営サポート機能となります。

ヤフー株式会社が提供するサービスのため、
yahoo!の商品ページにも掲載可能となっており、
（表示箇所は商品ページの下部になります）
PC・スマホのトップページに加えて
アプリも対応しております。

一度上記ご確認いただき、もし
ご質問内容と異なる場合は、
恐れ入りますが、再度詳細をご教示
いただけますと幸いです。

Answer

中野様

いつもお世話になっております。

　すいません、説明が不足しておりました。

数年前よりECステーションを使っていますが、
その間にyahooの仕様も変わりましたので、「ツール」を使わない状態だとどうなるのか
また、使わずにどこまで作ることが出来るのかなと思いまして。


B-Space　も確認してみます。


　よろしくお願いいたします。

Answer

ECマスターズの中野です。

ご返信いただきましてありがとうございます。

> 数年前よりECステーションを使っていますが、
> その間にyahooの仕様も変わりましたので、「ツール」を使わない状態だとどうなるのか
> また、使わずにどこまで作ることが出来るのかなと思いまして。

店舗様独自でタグを設置されている
店舗様もいらっしゃり、
他社ツールを使用していない店舗様
を探す必要がございますので、
見つかるかどうかも含めてお時間
いただければと存じます。

お急ぎのところ申し訳ございませんが
お待ちくださいますようよろしくお願いいたします。

Answer

ECマスターズの中野です。

> あいぴーとさん

お時間いただいているところ
度々申し訳ございません。

以下の件につきまして、

> 「ツール」を使わない状態だとどうなるのか
> また、使わずにどこまで作ることが出来るのかなと思いまして。

ECステーションのご利用を止められた場合、
今後もトリプルをご利用されるご予定でしょうか。
それともトリプルは利用せずにトップページを
準備される予定でしょうか。

どちらかご教示いただきますよう
よろしくお願いいたします。

Answer

中野様
　
　お世話になっております。


>今後もトリプルをご利用されるご予定でしょうか。

トリプル＝ツール使用のためと思っておりましたので、
利用を停止と考えておりましたが。


>店舗様独自でタグを設置されている
店舗様もいらっしゃり、

↑こちらがトリプル有というパターンでしょうか？

参考に拝見したいとは思いますが、実際は
難しいことは出来ないので、そうなるとトリプル無しでということになるのでしょうか？


　お手数をおかけしますがよろしくお願いします。

Answer

ECマスターズの中野です。

ご返信ありがとうございました。

例えば以下3ストアのスマホトップページは
トリプルを利用されていないのですが、
https://store.shopping.yahoo.co.jp/e-zakkamania/
https://store.shopping.yahoo.co.jp/sawaicoffee/
https://store.shopping.yahoo.co.jp/osharewalker/

上記ストアさんの様に、

・yahoo!から配布されるバナー（さん！さん！キャンペーンや本人確認ジャンボ 等）
・ストアで用意したバナー（SALEページや特定の商品ページにへの誘導目的）

を掲載することでトップページを
ご用意することは可能となります。

トップページへのアクセスの割合が全体を
通してどれだけなのか、また、バナーを掲載
する場合はバナーの準備にかけられる
リソースも考慮した上で今後どのように
対応されるかご検討いただくことを
おすすめいたします。

また、参考にしたいストアさんのページも
添えていただき同じ様にバナーを配列したい、
などフォーラムにご連絡いただけますと、
配置方法やタグなどをご案内させて
いただいておりますので引き続き
ご利用くださいませ。

Answer

中野様

お世話になっております。
早速ありがとうございます。

>トップページへのアクセスの割合が全体を
通してどれだけなのか

低くはないのですが、他店を見ていますと、それほど動きのあるもので無くてもいいのではないかと思いました。

>バナーの準備にかけられる
リソースも考慮した上で

おっしゃる通りだと思います、時間のかかることなので、まずはどのようなものが作成可能か、
一度試して決めたいと思います。



https://store.shopping.yahoo.co.jp/osharewalker/
こちらを作りたいのですが、スマホ・PCとも配置方法やタグをご教示いただけますでしょうか。

ちなみに、「今売れているアイテム」のところは、

PCページ→ランキングが表示自動で流れる
スマホ→ランキング無し、スワイプする仕様になっていましたが、


こちらはスマホとPC仕様上の違いなのでしょうか？
それとも設定はどちらでも可能なものなのでしょうか？

お手数をおかけいたしますが、よろしくお願いいたします。

Answer

ECマスターズの北原です。

>https://store.shopping.yahoo.co.jp/osharewalker/
こちらを作りたいのですが、スマホ・PCとも配置方法やタグをご教示いただけますでしょうか。

下記のような２つの画像を横並びにする
デザインは比較的簡単なHTMLとCSSで実装できます。

https://ec-masters.gyazo.com/5b494c121982bc0415428bd5eebc9a08

HTMLは下記のようになっており、
リンク先URLと画像URLを入力し、
トップページ編集のフリースペースに
記述いただければ表示することが可能です。


    
        
            
        
    
    
        
            
        
    
    
        
            
    
    
        
            
        
    


https://ec-masters.gyazo.com/d00d3f39dd4298bfe565c4da6f6f5c99

> ちなみに、「今売れているアイテム」
>PCページ→ランキングが表示自動で流れる
>スマホ→ランキング無し、スワイプする仕様になっていましたが、
>こちらはスマホとPC仕様上の違いなのでしょうか？

『今売れているアイテム』はBspaceを使って作られております。
トリプルの利用でも同じようなスワイプする部品を
作ることが可能ですが、HTML・CSS・JavaScriptの
知識が必須となります。

トップページ編集のフリースペースでもHTML・CSSは
利用することが可能ですが、JavaScriptが利用できず、
自動スワイプのような動きをつけるためには
トリプルにJavaScriptでページを作成する必要がございます。

PC・スマホの切り替えも
HTML・CSS・JavaScritpを使って
切り替えることができます。

あまりCSS・JavaScritpの知識がない場合は、
Bspaceなどのツールをご利用されるか、
下記のページのような動きがないものであれば、
比較的簡単なHTML・CSSで作ることが
できますので、おすすめとなります。

https://store.shopping.yahoo.co.jp/sawaicoffee/

ご参考にしていただけましたら幸いです。

Answer

北原様

　お世話になっております、

詳しくありがとうございます。


>『今売れているアイテム』はBspaceを使って作られております。

承知いたしました、
Bspaceに「トリプル for B-Space 10GBプラン」という表示があったので、
【Bspaceもトリプルを使用している】のだと思い、

トリプルを使用していない＝Bspaceも使用していないと勘違いをしておりました。

まずは「動きのない」ページがどのように見えるか作成してみます。
ちなみに、添付のような横長の画像を2つ並べる場合も

 width: 49%; margin-bottom: 2%;　となるのでしょうか？

よろしくお願いいたします。###HR######IMG077575de7f35d3146181a304d66641a4c.pngIMG0###

Answer

ECマスターズの田中美帆です。

> ちなみに、添付のような横長の画像を2つ並べる場合も
> width: 49%; margin-bottom: 2%;　となるのでしょうか？

はい。「width: 49%; 」は、
画像の幅を指定しています。

全体の幅を100%とした際に、
画像を2つ並べる（2分割をする）ため、

100% ÷ 2 ＝ 50%

となります。

画像と画像の間に少し余白を作るため、
49%としています。


「margin-bottom: 2%」は、
画像の下の余白を指定しています。

数値によって、余白のサイズを
調整することができます。

Answer

田中様

　お世話になっております。

ありがとうございました。
出来ました。
お手数をおかけいたしました。