*

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

おすすめトピックス

関連記事

商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

スマートフォンを持つ手
楽天のスマホページで外部CSSを使用する方法

楽天に限らずネットショッピングはスマートフォンで買い物をする人が増えているという事は2013年くらいから言われている事ですが、現在ではパソコンをも上回るシェアに迫っているようです。扱っている商材によっては既にスマートフォ […]

スマートフォン操作
楽天スマホ商品ページの画像制限が緩和!3枚から10枚までへ

楽天でインターネットショップを運営されている方に朗報です。かつては楽天のスマートフォン用商品ページには画像は3枚まで(高さは1200pxまで)という画像制限がありました。ようやく重い腰を上げてこの画像制限が2016年より […]

ミニパソコン
売りたい商品のアピールは第一印象が重要である

ネットショップで商品を売りたいならまずは商品登録して各ショッピングモールへ出品します。今の時代、出品しただけでは売れません。 どこのショップでもいかに自分の商品を売るか考えられ実践されています。商品を売るために商品ページ […]

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

電話応対
お客様の注文間違いは転換率アップのチャンスです

ネットショップ、EC サイトを運営していれば日々お客様からのお電話を頂くかと思います。それは、商品に対する質問であったりクレームであったり内容は様々。その問い合わせ、受けただけで終わりにしてませんか? お客様からの問い合 […]

著者について

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

フォローはこちら

       

       
Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

迫力のロングチャーシューラーメン!一宮市の「麺日和千秋店」

愛知県一宮市にあるラーメン店「麺日和 千秋店」は他店とは一線を

→もっと見る