スマホ対応とは？

Question

お世話になっております。当店ではスマホページ対策はやってきませんでした。
スマホページは商品画像（PCと共通の場所）とテキストのみとなっています。


そもそも楽天市場でのスマホ対応とはどんなことを指すのでしょうか？

パソコンでスマホ非対応のホームページを見ると見づらいくらいはなんとなく
わかります。


１、手作業で下記のように幅100%というのを覚えましたが、これはなぜ必要なのでしょうか？



２、パソコンでは750ピクセルで設定する画像がお多いのですが、スマホでは
推奨の幅は616ピクセルなのでしょうか？

３、『スマオウ』等のソフトで作るのと手作業ではどんな違いがあるのでしょうか？

Answer

ECマスターズの田中です。

＞そもそも楽天市場でのスマホ対応とはどんなことを指すのでしょうか？

楽天では、基本的に各ページ（トップページ、商品ページ、カテゴリページ、検索結果）に対して
スマートフォン用のページが用意されており、
スマートフォンで閲覧するとそれらが表示される仕組みになっておりますので、

たとえば、楽天GOLDでトップページを作っている場合は
スマートフォン用のトップページを用意する、スマートフォンで閲覧したらrakuten.co.jpのトップページへ転送する、など、
スマートフォンでPC用のページを閲覧した時に
スマートフォン用のページを表示させる仕組みにしておくこと、

また、スマートフォン用のページの内容（各説明文、バナーなど）を充実させることが
楽天市場におけるスマートフォン対応となります。

＞１、手作業で下記のように幅100%というのを覚えましたが、これはなぜ必要なのでしょうか？

スマートフォンのページは、機種によって表示される横幅が異なります。
その時に横幅が固定値（616ピクセル、など）で記載されていると、
機種によって画面に入りきらなかったり、余白ができたりと異なってまいります。

どのような横幅でも、横幅いっぱいに画像を拡げるために、
幅100%の指定が行われております。

＞２、パソコンでは750ピクセルで設定する画像がお多いのですが、スマホでは
推奨の幅は616ピクセルなのでしょうか？

推奨はその通りですが、
横幅の小さい機種では若干縮小される程度なのと、横幅の広い機種があることを考えると、
750ピクセルでも問題はありません。

スマートフォン用バナーのサイズに関する詳しい説明は、
下記質問にてご回答差し上げておりますので、ご参照ください。
https://ec-masters.club/forum/post_view.php?id=3152

＞３、『スマオウ』等のソフトで作るのと手作業ではどんな違いがあるのでしょうか？

ソフトで作成していただくと、
HTMLのタグの種類を思い出したり、文法間違いに気を遣ったりすることなく、
リアルタイムで見た目を調整しながら編集できるので、
デザインに集中することができます。

Answer

ありがとうございました。機種により色々とあり616ピクセルでも小さい場合もあるのですね。今後は1000ピクセルくらいでも良いかもしれませんね。

手作業で出品ページからスマホでも見やすいよう改善しています。

ところで編集作業にBLISK使い始めました。とても使いやすいです。これは他社アプリですがご紹介いただきまして大変ありがとうございます。おそらく教えて頂けなければ出会わないアプリです。