Yahoo!ストアクリエイターProのECサイト構築 開店申請から商品・カテゴリ管理、トリプル管理ツールを使ったレスポンシブサイト構築まで解説

ホームYahoo!ストアクリエイターProのECサイト構築トリプルリダイレクト設定とPC/スマホTOPページURL

トリプルリダイレクト設定とPC/スマホTOPページURL

ヤフーショッピングに出店しているお店の基本となるショップURLは、https://store.shopping.yahoo.co.jp/shopname/となっております。これはストアクリエイターProを使ってPC版、スマホ版ともに構築しているショップさんのURLですが、楽天と同様にヤフーもオリジナルで構築したトップページにリダイレクトさせる設定があります。

ヤフートリプルは月額有料オプションになっている

楽天GOLDは容量1GBまで無料で利用することができるサービスですが、ヤフーではヤフートリプルというサービスがそれにあたります。両方ともFTP接続ができるサーバ領域なのですが、楽天と違いヤフーは有料になります。容量300MBまでが月額3,000円(税込)で、10GBまでが月額5,000円(税込)という2タイプの料金体系です。価格差2,000円に対して容量差は33倍もありますが、サイトのボリューム感としては商品点数500点以下のショップさんでしたら3,000円の300MBのプランでよいかと思います。

トリプルリダイレクト設定


前述のヤフートリプルにお申込み頂きますと、FTP接続することができるようになります。楽天と同様にオリジナルで構築したトップページを表示させたい場合は、リダイレクト設定を行う必要があります。ストアクリエイターProにて、B-Space・トリプル>トリプルリダイレクト設定へお進み頂きますと下図の設定画面が表示されます。

赤枠の【リダイレクト開始】ボタンがパソコン版とスマートフォン版の2つありますので、PCだけオリジナルトップページにしたり、スマホだけオリジナルトップページにしたり設定することができます。ただ、リダイレクト設定をした場合のURLは、https://shopping.geocities.jp/shopname/の1種類となり、これは楽天と異なります。楽天ではリダイレクト設定をした際のトップページURLはPC版がindex.htmlで、スマホ版がindex_sp.htmlというファイルにリダイレクトされるような仕様になっています。つまりリダイレクト設定をした際のURLがPC版とスマホ版で別ということです。

ヤフーはレスポンシブ対応もできる


ストアクリエイターProにて、B-Space・トリプル>トリプル管理ツールへお進み頂きますと上図の管理画面が表示されます。【ファイルを選択してアップロード】ボタンを押してindex.htmlファイルをUPできます。ヤフーはリダイレクト先のURLが1種類となりますので、パソコン版もスマートフォン版も【リダイレクト開始】ボタンを押して設定をした場合、レスポンシブサイトにすることもできます。上図のようにヤフートリプルのサーバにindex.htmlファイルをUPし、そのindex.htmlファイルがレスポンシブ対応になっていれば、ヤフーではトップページをレスポンシブサイトとして管理することができます。もしくはPC版だけリダイレクト設定をしてindex.htmlファイルをPC版のオリジナルトップページにし、スマホ版はリダイレクトせず、通常のストアクリエイターProで管理するトップページにするという方法もあります。

強制的にリダイレクトさせることもできる

楽天とヤフーを並行運用しているショップさんも多く、楽天と同じようにスマホ版をindex_sp.htmlファイルにする方法もあります。index.htmlファイルの中にスマホでアクセスされた時は、「スマホ版を表示しますか?」と表示させてリダイレクトさせるという方法です。下図のようにトリプル管理ツールから、index_sp.htmlファイルをUPします。

この状態でストアクリエイターProにて、B-Space・トリプル>トリプルリダイレクト設定へお進み頂きPC版もスマホ版もともに【リダイレクト開始】ボタンを押して設定します。この状態ですとPC版もスマホ版もhttps://shopping.geocities.jp/shopname/にリダイレクトされますので、index.htmlファイルのhead部分に以下のスクリプトを追記します。

<script type="text/javascript"> // iPhoneまたは、Androidの場合は振り分けを判断 if (document.referrer.indexOf('https://shopping.geocities.jp/shopname/') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) { if(confirm('このサイトにはスマートフォン用のサイトがあります。\n表示しますか?')) //Pathに関しては任意 { location.href = 'https://shopping.geocities.jp/shopname/index_sp.html'; } } </script> こうすることで、スマホでhttps://shopping.geocities.jp/shopname/にアクセスした際に、index_sp.htmlファイルにリダイレクトさせることができます。つまり楽天と同様にPC版はindex.html、スマホ版はindex_sp.htmlで管理をすることができるということです。

まとめますと、ヤフートリプルでオリジナルのトップページを表示させる場合、リダイレクト開始をするとhttps://shopping.geocities.jp/shopname/へトップページリダイレクトされる為、レスポンシブサイトにすることもできますし、楽天のようにスマホ版は、index_sp.htmlファイルで管理することもできるということです。