スマホ版は何が重要でしょうか。

Question

スマホからご購入いただくお客様が増えてきました。スマホも充実を図らないといけないということで、楽天のスマホ版のトップページを変えてみました。
弊社のトップページをご覧頂いて、修正個所などご指示頂けないでしょうか。
宜しくお願い致します。

Answer

トップページ拝見しました。

ナビゲーションも共通バナーも入っていて良いと思いますが、
トップページよりは商品ページを充実させた方が良いですね。

お客さんは、基本的には商品ページから入り、
商品ページで完結する事が多いです。

例えばですが、
月商1億近く売れているショップのデータとして、

【スマートフォン1週間のアクセス数】
商品ページアクセス数：397,719
に対して
店舗トップページアクセス数：72,309


同様に、2億近く売れているショップでも、

【スマートフォン1週間のアクセス数】
商品ページアクセス数：1,155,468
に対して
店舗トップページアクセス数：122,304

であり、トップページはあまり見られません。


商品ページに設置の企画バナーから、
カテゴリページに経由して、
商品ページという流れが一般的には多いですね。

スマートフォンでの売上対策で重要なのは、
トップページよりは、商品ページです。

PHさんのショップでは、PCの説明文には画像を多用し、
説明をしっかりとされておりますが、

スマホの商品ページを見ると、既存の商品画像くらいしかなく、
PCに比べて商品説明の画像量が少ない為に、PCと比べると買いづらです。

スマホ商品説明文には3枚画像が入れられますので、
以下の過去の投稿を参考にし、商品説明の情報拡充をしてみてください。

質問：スマホ商品説明文の画像について
https://ec-masters.club/forum/post_view.php?id=251

Answer

お返事ありがとうございます。

スマホページに、画像を３枚入れていいことは知っていましたが、以下の理由でしておりませんでした。

・作業時間短縮のため、PC用商品説明文（画像が4枚以上貼られている）をコピペして、スマホ版を作成している。
　すると、スマホ版では画像数オーバーになってしまうので、極力商品説明文に画像は入れないようにした。

・以前、３枚入れていた際、スマホで見ると、画像の文字が読めなかった。
　そこで、とりやめ、文字が書かれた画像は「商品画像」項目に配置した。（そうすると、画像を拡大できるので）

時間がかかってでも、今はスマホページの充実をはかるべきだと考え、今回再チャレンジしました。
ですが、もとある画像は鮮明なのに、縦長に貼りあわせて１枚にしてアップすると、ぼやけてやはり字が読めません。
ぼやけながらも、現在載せていますので、ご覧いただけます↓↓
http://item.rakuten.co.jp/persian-house/g-m-i-24/


【現在の方法】
・ＰＣ版の画像は1600ｘ1200で作成しています。
・jpegにするときには300から400kbで保存しています。リサイズせず。
・ＰＣ版での使用時のｗｉｄｔｈは710pxで設定。

・スマホ版を作るのあたり、よこ　300　ｘ　たて　1000のカンバスを使用。そこに、上記のjpegを4枚貼り付け。
・この時点でphotoshop上でも画像の文字はぼやけています・・・。
・最高画質で保存しても200kbくらいにしかなりません。よってもちろんこの時点で画像の文字はぼやけています。

どうすれば、ＰＣ版のような鮮明な画像をスマホ版に載せられますか？
もともと、ＰＣ版を作成するときに、スマホ版を考慮した文字サイズや見えやすい文字色を考えるべきなのでしょうか。
何か他に良い方法がありますか？

よろしくお願いいたします。

Answer

ご返信が大幅に遅れてしまい、大変申し訳ありません。
改めて、ご返答させていただきます。

商品ページはお客様側での拡大・縮小が
できない仕組みになっておりますので、
商品ページ上での見た目を重視する場合は、仰るとおり、
スマートフォン版を考慮した作りに
していただく必要があります。

お客様に鮮明な画像を見ていただくには、
予め、PC版の説明文用画像（今回の事例ですと、横幅710pxの画像）を
縦につなげた一枚の画像(※)をご用意いただき、
 と タグで
タグを囲んでいただきますと、
お客様が画像をタップした際に、
PCと同等の画像が開くようにすることができますので
お試しください。

その際、お客様からは
タップしても何も起こらない普通の画像のように
見えますので、
「画像をタップすると、大きい画像が開きます。」
などの文言を添えておくと親切かと思われます。

大きい画像は、R-Cabinetに保存することができませんので、
楽天GOLDをご利用ください。

Answer

いつもお世話になっております。
大変ご連絡が遅くなり申し訳ございません。

楽天ＧＯＬＤについて知識がなく、四苦八苦し、やっとアドバイス通りに表示ができました！
ちゃんとタップして大きい画像も表示されるようになりました。

http://item.rakuten.co.jp/persian-house/g-m-i-24/

ただ、これだとページから離脱される可能性もありそうなので、今後新たに作るものに関しては、
最初から文字サイズや文字色と背景などを工夫して作るよう心掛ければ、拡大する必要もなくタグを貼らなくてもよいですよね？

大変助かりました。この際ネックだったＧＯＬＤの設定もできたので、大きな画像などはＧＯＬＤへ置くようにします。
（契約は100ＭＢ以下ですが・・・）

ありがとうございました。