ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング

ショップ運営のお悩みを解決!

ショップ運営や売上アップの方法など、ショップオーナー様のお悩みにお答えいたします。
楽天スマホの大バナー、小バナーの縦幅を変更している店舗があったのですが、どのような方法で変更しているのでしょうか?

スマホページにCSSを読み込むことで、縦幅を任意のサイズに変更する事ができます。
下記ソースを各共通説明文(TOPページ、カテゴリー、商品ページ)に入力してください。

【トップページ・カテゴリーページ】
/* 大バナー */
.rstBigBnr li img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}
/* 小バナー */
.rstSmallBnr .smtBannerItem03 img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}

【商品ページ】
/* 大バナー */
#shopInfoSliderLarge .bannerImageFrame img {
max-height: none !important;
}
/* 小バナー */
#shopInfoSliderSmall img {
max-height: none !important;
}

この方法を使えば、PCとスマホのそれぞれにサイズの違うバナーを作らなくてもよくなる為、作業効率の向上に期待できます。
PCのバナーをスマホ用に作り替えている方は、是非この方法を試してみて下さい。
モール型の店舗の場合、スマホのトップページはPCのトップページと比べて、どの程度の作り込みが必要でしょうか?

店舗やジャンルによってイレギュラーはありますが、多くの店舗の場合、アクセス数の「TOPページ÷商品ページ」の値はPCとスマホを比べても大きくは変わりません。
ただし、最近ではより顕著に商品ページへのアクセス数が「スマホ > PC」となっていて、絶対数ではスマホのTOPページに訪れているユーザーの方が多いため、スマホページを作り込む重要度はPCと比べて高くなります。
どちらも作り込めればベストですが、時間がない場合などは優先的にスマホTOPページをブラッシュアップしてはいかがでしょうか。
可能であれば固定のナビゲーションを設置したり、オススメの特集バナーを目立つ位置に配置するなど、買い周りがしやすいように整えていくといいでしょう。
スマホページでiframeを利用すると、機種によってiframe内の画像が途中で切れてしまいます。jsが使えない場合でも、大きく余白をとらずに、各機種できれいに高さを合わせることはできますか?

jsのプラグインが使えない場合は、css3のメディアクエリを使う事で、機種ごとの高さを設定する事ができます。
メディアクエリでは解像度ごとにcssを記載していきますが、今回の様に機種ごとに高さを調節する場合は、大きく4つのブレイクポイント(分岐点)を設定するといいでしょう。
まずはiPhone5Sまでの実質解像度「横幅320px」、アンドロイド端末に多い「横幅360px」、iPhone6、iPhone6S、iPhone7では「横幅375px」、そしてiPhone6 Plus、iPhone7 Plusの場合は「横幅414px」が縦画面で見たときのブレイクポイントとなっています。
これらをふまえ、下記のように横幅ごとに4つのcssを設定する事で、画像が途中で切れる事もなくなるでしょう。

/**最小(横幅320px)時の高さ**/
iframe {height: ○○px;}

/**横幅360px時の高さ**/
@media all and (min-width: 360px) {
iframe {height: ○○px;}
}

/**横幅375px時の高さ**/
@media all and (min-width: 375px) {
iframe {height: ○○px;}
}

/**横幅414px時の高さ**/
@media all and (min-width: 414px) {
iframe {height: ○○px;}
}

ただし画面を横にしてみた場合を含めたり、新しい機種が登場した際には、さらにブレイクポイントの追加が必要になりますので注意しましょう。
モール以外に自社サイトでの販売を考えているのですが、ネットショップのASPの中でも、スマホユーザーに特化、または様々な点でスマホで扱いやすいように設計されているASPがあれば教えて頂けませんか?

スマホに特化したショッピングカートASPとして「aishipR」があります。
“スマホで売れる”を追求して作られており、スマホでのカゴ落ちを軽減する「ワンページカート」の機能や表示速度の最適化など、様々な点でスマホ向けにチューニングされています。
また、完全レスポンシブデザインで設計されている為、従来のように各デバイス(PC、スマホ、タブレット)ごとのページ制作の手間がなくなり、作業効率の向上にも期待できます。
2週間のお試し登録もできますので、是非一度お試し下さい。

「aishipR」 http://www.aiship.jp/
楽天の各店舗のスマートフォンサイトで、楽天の仕様を書き換えて独自デザインを表示している店舗がありますが、その中でも参考にするべき店舗などお教えいただけますか?

楽天のスマートフォンサイトでcssやiframeを読み込む方法が広まってから、各店舗で様々な独自デザインを表示するようになりました。
その中でも「イーザッカマニアストアーズ」や「ロウヤ」のように、ヘッダー部にカテゴリーやバナーを表示している店舗を参考にしてはいかがでしょうか?
元々の楽天デザインでは、他ページへの導線がどうしても少なくなってしまうので、その点を強化できているのが大きなポイントです。
また、商品点数が多い店舗では「快適ねこ生活」や「カラフルボックス」のように、ヘッダー部に検索窓を設置して商品を探しやすくする方法なども参考にするべきでしょう。
スマホではUI/UXが非常に大切です。これらの店舗を参考にしながら、利便性を上げていけるようにしていきましょう。

参考:
「イーザッカマニアストアーズ」・・・http://www.rakuten.ne.jp/gold/e-zakkamania/
「ロウヤ」・・・http://www.rakuten.ne.jp/gold/low-ya/
「快適ねこ生活」・・・http://www.rakuten.ne.jp/gold/hinoki/
「カラフルボックス」・・・http://www.rakuten.ne.jp/gold/colorfulbox/
スマホの売上が全然上がらないんですけど、何をすればよいでしょうか。

2016年上半期の調査では、日本でも既にEC市場の50%以上の売上はスマホからの購入となっています。 今のショップではスマホで表示したとき、文字がちゃんと視認できる大きさで表示できていますか? 特にメインとなる看板や、商品のメイン画像の中の文字や、商品説明文が小さすぎると、それだけでお客様が見たときに「読みにくい」と思ってしまい、離脱率が上がってしまいます。 まずは、しっかりアイキャッチできるように、大事なキャッチコピーや商品説明を読みやすい大きさにしてください。 PCサイト用に作った画像のまま、全部の画像をスマホで流用してしまうと楽ですが、これではいつまで経ってもスマホからの売上増は期待できません。 現在はスマホからの購買層は20~30代がメインですが、そのうち40~50代も多くがスマホを利用するようになります。 当然年代によって視力も悪くなってくるので、視認性の高いサイトを目指すことは必須です。 今のうちに「モバイルフレンドリー」なショップを目指して、商品ページなどを見直しておくことが必要です。
スマホページの商品ページ部分に、楽天GOLDを使わないで10枚以上画像を置くことは出来ないのでしょうか?

下記タグを利用して無理やり設置することができます。 <p> <img src=”画像URL” alt” width=” 400″=”” width=”100%” “=” “> <img src=”画像URL” alt” width=” 400″=”” width=”100%” “=” “> <img src=”画像URL” alt” width=” 400″=”” width=”100%” “=” “> </p> <p>タグで挟むことが条件になってきますが、この方法で画像を無制限に置くことが出来ます。 画像サイズはwidth部分で調整して下さい。 ただし、<p>タグで挟んだ画像が、10枚以上設置するとエラーとして認識されますので10枚以下で設置してください。 この方法は楽天の仕様が変われば、使用できなくなる可能性がありますので注意して下さい。
楽天スマートフォンの商品ページにカートが常に表示されるようになりましたが、イベント時には下画面に固定のバナーを設置したいのでカートを通常の位置に戻す方法を教えていただけますか?

カートのidの「#floatingCartContainer」に「position:fixed !important;」が設定されているので、それを打ち消す「position:static !important;」をcssで読み込んで下さい。 ただ楽天でよくお買い物をされる方は、楽天の仕様に慣れ親しんでいる方が多いので、カートの位置を変えるのはあまりいい方法とは言えません。 バナーはヘッダーの下に表示させるのも有効ですので、今後はそういった方法で対応していくのがいいでしょう。
楽天のスマートフォン共通バナーのアンカーリンクを設定したのですが、うまく機能しません。アンカーリンクは使えないのでしょうか?

楽天のスマートフォン共通バナーにリンクを設定すると、楽天の仕様によりリンクの最後に「?s-id=○○○○」と自動でタグが入ってしまい、これによりアンカーリンクが効かなくなってしまいます。 アンカーの設定元(ラベル)が編集できる場合は、<a name=”△△”>と設定してあった場合、<a name=”△△?s-id=○○○○”>とすることで、アンカーリンクが機能するようになります。 「?s-id=」の後の「○○○○」はカテゴリーページ、商品ページ、TOPページでそれぞれ変わり、計3パターンあるため、全てのページの共通バナーからアンカーリンクを機能させるためには、3つのラベルが必要になるので注意して下さい。
楽天のカテゴリーページの「スマートフォン用カテゴリ説明文」に特集ページをアップして、スマートフォンで確認したのですが、PCのページが表示されていました。何が原因でしょうか?

楽天のカテゴリーページの仕様上、「スマートフォン用カテゴリ説明文」にデザインをアップしても、カテゴリーに紐づけられた商品が0の場合は、PC用のページが表示されてしまいます。カテゴリーページを利用して、スマートフォン用に特集ページやイベントページを作る場合は、何かひとつカテゴリーに商品を紐付けさせて下さい。また、楽天の「スマートフォン用カテゴリ説明文」はタグの制限がかなりありますので、スマートフォン用に特集ページを作り込みたい場合には、楽天GOLDにページを作る方法もおすすめです。
ヤフーのTOPページをトリプルを使って制作したのですが、スマホ対応になりません。スマホ用ページを表示させる良い方法はないでしょうか?

ヘッダータグ内に下記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> この方法を使うと、スマホ用ページを表示させることが出来ます。 「ショップID」のところは、ご自身のショップIDをいれていただき、試してみて下さい。
楽天でスマートフォン用に縦6000px程度の画像を作っているのですが、セールなどでページの修正の度に縦長の画像を制作し直さないといけないので大変です。できればセール時には画像を入れ変えたりしたいのですが・・・、何か楽な方法はありませんか?

楽天では以前まではスマートフォン用商品説明文に画像は3枚までしか載せることが出来ませんでしたが、2016年の3月11日より画像の枚数制限が緩和されて10枚まで載せることが出来るようになりました。 それからは、スマホ画像でよく変更する箇所(価格やサムネイルなど)は、縦長の画像から切り離して更新する店舗様も増えてきていますので、その方法を取り入れてみてはいかがでしょうか。 また、画像の枚数制限が10枚になった事で、セール時にバナーを設置する余裕もできていますので、今後はイベントバナーや買いまわり商品バナーなどを設置して、スマホページをより作り込んでいくといいでしょう。
楽天スマホサイトのマーケティングをしていて疑問に思ったのですが、楽天の受注処理画面で【スマ-トフォン】と【タブレット】の違いはどこにありますか?

楽天の受注処理画面のデバイスの表記は次の4つに分類されます。 1.何も表記されない場合…タブレット端末以外のPC画面からの購入。 2.【タブレット】と表記される場合…PC画面からの購入のうちタブレット端末を利用していた場合。 3.【スマ-トフォン】と表記される場合…スマ-トフォン画面からの購入。もしスマホ端末でPC画面から購入された場合何も表記されなくなります。 4.【モバイル】と表記される場合…モバイル画面(ガラケーサイト)からの購入。 【タブレット】はPC画面からの購入ですので、【スマ-トフォン】の表記の場合とは意味合いが大きく異なります。 この2つの表記の違いにより、購入した際の流入元や見ていた画面が全く違う事に注意しましょう。 これらを踏まえて、ぜひ端末を意識したマーケティングにご活用ください。
楽天のスマートフォンページで、オリジナルデザインのメニューや固定バナーを反映しているお店を見かけますが、どのようにしているのでしょうか?

楽天のスマートフォンページは禁止タグが多く、デザインが制限されていましたが、タグ内に13個の全角スペースを入れるまたは、(=””)をタグの後にいれる事で、禁止タグも利用できるようになります。
例: <link rel=”stylesheet”            =”” href=”http://www.rakuten.ne.jp/gold/店舗ID/○○○○.css”> この方法を利用すれば、iframeやcss、jsファイルまでも読み込むことができるので、ヘッダーをオリジナルデザインのメニューに変えたり、固定バナーを取り付けたりといった事ができるようになります。ただし、この方法は楽天の仕様が変われば、全て崩れてしまう可能性がある事を心に留めておいて下さい。

もうすぐゴールデンウィークにですが、こういった大型連休期間は売上を上げやすいのでしょうか?

いいえ、売上は上げにくいです。ゴールデンウォークやお盆などは実店舗とは違って、外出される方が多くPCで買い物をする人が少なくなる傾向にあり、必然的に売り上げも減ってしまいます。対策としては少しでもスマホサイトに力を入れて、外出先でも購入して頂けるよう、見やすく充実したページ制作を行っていきましょう。
スマホサイトでよく見かけるフローティングバナーのベストな表示位置は、どこでしょうか?

フローティングバナーの表示位置は、上部、真ん中、下部の三か所に分かれます。この3か所にバナーを設置した際のクリック率、Close率(バナーを閉じる率)を検証しましたら、上部クリック率:10%、Close率:35%、真ん中クリック率:15%、Close率:40%、下部クリック率:10%、Close率:10%となりました。バナーを真ん中に表示させればクリック率が上がりますが、見たい情報を隠してしまうためClose率も高くなりがちです。この結果からバナーのお勧め表示位置は、内容にもよりますが下部がいいでしょう。

スマホサイトの操作性を上げる、効果的な方法は、ありますか?

ページ上部に、スクロールをしても常についてくる「メニューアイコン」を取り付けることをおすすめします。メニューアイコンをタップするとメニューが大きくなり、ユーザの求めるコンテンツに辿り着きやすく迷子になりにくい効果があります。大きく表示された際のメニュー構成も重要で、一番訪れてほしいコンテンツにはバナーで誘導してください。

スマホからの購入者が増えています。スマホを強化したいのですが、どこを強化したらいいのでしょうか?

商品ページから強化してください。商品説明にPCの販売説明文と同様の画像をスマホにも掲載して下さい。スマホの商品説明には、通常、画像が3枚しか掲載できませんので、PCの商品説明ページを画像にして3分割にする必要があります。ひと手間かかりますが、商品説明をPCと遜色がないようにして商品の魅力を伝え、転換率をアップさせてください。

スマートフォンでの商品ページ作りで今後気を付けていくべきことはありますか?

近年のスマートフォンの進化を考えると、今まで通りスマホページは簡潔にまとめるべきといった考え方はしない方がいいでしょう。
なるべく商品の魅力が伝わる様にたくさんのコンテンツを記載していくことが、今後は重要になって行きます。楽天では画像の枚数が制限されていますので、楽天Goldを取り入れて、PCページと同じように画像を載せてあげることで、より魅力を伝えるページ作りを心掛けていきましょう。

スマホからのアクセスが非常に伸びているのですが、転換率がパソコンに比べて非常に悪いです。どうすればいいでしょうか?

スマホの転換率が悪い原因として多いのは「使い勝手の悪さ」です。見た目のデザインも重要ですが、サイト構成、レイアウト的なことのほうが問題です。
例えば、(1)重要なバナーのサイズは、画面の左右いっぱいに作成する (2)カテゴリーなどはプルダウンの表示でまとめて、あまり長くならないようにする (3)ボタンサイズを大きくとる (4)出来るだけ浅い階層で完結させる、といったような作り方が基本となります。