*

Yahooショッピングのトリプルページを手っ取り早くスマホ対応に

 

公開日: : 最終更新日:2016/04/16 ネットショップ

iphone

Yahoo!ショッピングにショップを出店している方で、jquery や CSS が自由に使えてデザインができる「トリプル」を契約していらっしゃる方も多いと思います。しかし、トリプルで普通に PC 用のトップページを作っただけではスマホ対応になりません。

トリプルを契約する前の状態であれば自動で Yahoo!ショッピングが用意したスマホ対応サイトが表示されましたが、トリプルを使っている場合は自分でスマホ対応をしなくてはいけません。

2015年4月21日に Google 検索のアルゴリズムが更新され、モバイルの検索画面でスマホ対応サイトを優遇する処置が始まります。近年スマホユーザーが増えており、ネットショップでは PC のシェアを上回る所もあります。スマートフォンの検索でネットショップが出てこないとなるとかなりの痛手です。

スマホ対応サイトを作るのが一番の対策ですが、時間もないでしょう。今回のアップデートはモバイルフレンドリーであるかないかで検索順位が左右されるという事なので、とりあえずの対策としては Yahoo!ショッピングが用意しているスマホ対応サイトへ飛ばせば良さそうです。

※モバイルフレンドリーとは?
ウェブサイトをスマートフォンなどのモバイル端末で見て使いやすく優しいサイトであるかどうかという指標。モバイルフレンドリーであるかチェックする為には、以下のGoogle が用意したテストサイトで調べる事ができる。

モバイル フレンドリー テスト – Google

当然 PC 用のトリプルのサイトではモバイルフレンドリーではありません。とりあえず Yahoo!ショッピングでは従来のトップページへ飛ばす事でスマホ用ページを表示する事ができるので、ひとまずはこれで大丈夫だろうという事です。

従来のスマホ対応サイトへ飛ばす方法

ヘッダータグ部分に以下の javascript を挿入します。

<script type="text/javascript">
<!--
 var agent = navigator.userAgent;
 if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
      if(confirm('スマホ対応サイトを表示しますか?')){
          location.href = "http://store.shopping.yahoo.co.jp/ショップID/";
      }
 }
-->
</script>

スマホ対応サイトを表示しますか?

上の例もそうですが、スマートフォンでサイトにアクセスすると「スマホ用サイトを表示しますか?」という確認が出るケースがよくあります。「そりゃ、スマホで見てるんだからスマホサイトを表示するわ!」と怒ってしまうかもしれません。これはスマートフォンに優しい仕様とは言えないですね。

でも、これには理由があります。それは、スマートフォンで PC 用サイトを見たいという人も一定数いるという事です。否が応でもスマホ対応サイトへ飛ばしてしまったら、そういう人たちの利便性を損なう事になります。

スマホで PC 用サイトを見たいという人のほうが少ないですから、全ての人に確認画面を出す事はそれでも優しい仕様とは言えません。これを改善するには、スマホ用サイトから PC 用サイトを見るボタンを押して移動するリファラを見て判定するのが良いかなと考えていますがその方法についてはまだ上手くいってません。

おわりに

とりあえず、これで Google 検索結果にも「スマホ対応」ラベルは付き、モバイルフレンドリーテストにも合格しました。でもこれからの時代、独自にスマホ対応サイトを作る事が一番のモバイルフレンドリーです。スマホ対応サイトがない場合、製作を考えた方が良いと思います。

関連記事

Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する
Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物
  • Pocket

おすすめトピックス

関連記事

5のつく日キャンペーン
Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する

Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物をすると誰でもTポイントが5倍となるキャンペーン […]

アップロード
楽天R-Cabinetに画像を一括でアップロードする方法

楽天 R-Cabinet の画像を URL から一括でダウンロードする方法については以下の記事で紹介しました。 楽天R-Cabinetの画像をURLから一括でダウンロードする方法 もう一つわかりにくいのは、楽天 R-Ca […]

ショッピングカート付近にバナーを
楽天商品ページのカート付近、商品名の下にバナーを貼る方法

ネットショップのショッピングカート付近といえば、商品を見たり買ったりする人なら誰でも目を通す一等地です。そんな所にお知らせやバナーなんかを貼る事が出来たら便利ですよね。 楽天の商品ページでは標準機能では用意されていません […]

ポンパレ
ポンパレモールの商品ページにアクセスできない時の対処法

リクルート社が運営しているショッピングモールで「ポンパレモール」があります。多数のネットショップさんが集まって出店しているという所は楽天と同じです。 ポンパレモール:ネット通販/オンラインショッピングサイト トップページ […]

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

ポンパレモールの商品ページで外部CSSを使用する方法

ポンパレモールに出店されている方向けの記事となります。 ポンパレモールと言えば、ページ作成において使用できるタグが制限されており作りづらい仕様でした。しかし、2014年12月からタグの規制が一部緩和されました。緩和された […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
安曇野市で安くてボリュームたっぷりの蕎麦「そばの庵はや田」

長野県安曇野市にあるお蕎麦屋さん「そばの庵はや田」へ行ってきま

Photoshopで行間を1ptにしても詰められない時の対処法

Photoshop の文字ツールで文字を入力して、文字パネルの

夜の彦根城を間近で見れる1日だけの特別な日「彦根城夜楽2019」

夜の彦根城を間近で見られる日が1年に1回だけあります。その1日

JA士幌町のスイートコーンとミルクの味わい「北海道のこだわりプリン」

士幌町の北海道のこだわりプリンをいただいて、とても美味しかった

Photoshopで写真の黄ばみや赤みを補正し抑える方法

デジカメで撮った写真が思ったより黄色かったという経験はありませ

→もっと見る