スマホで表を上手く表示できない時に考えること

smarttable

皆さん こんにちは。

今日はショップできすぎくんで表(ひょう)を作って
商品画像や説明を崩れることなく表示することについて
少し考えてみたいと思います。

ドロップシッピングでショップを作っている際
取り扱っている商品を横に並べて一度に見せたいために

HTMLで表を使って表示したいと思うこともあると思います。
よくテーブルタグを使って表示するともいいますね。

商品の色違い、サイズ違いだったり、おすすめな物を横に並べて表示する場合がそれにあたります。
思うままに表を作ってパソコンで問題なく表示されたのに

スマホで見ると、「あっ、表が崩れてる。。見た目が悪い、パソコンで見るよりも小さくて
これでは見づらい」ということが発生する場合があります。

そうなるとがっかりですよね。せっかく作ったのに。ではどうしたらいいのでしょうか。

そこを考えてみたいと思います。
上手くできないならばHTMLで表をつくらない!という考えです。

表を作って商品画像を並べたいけれど上手くできないのであれば
ショップできすぎくんにある「要素」を使いましょう。

そこで一つ頭に浮かぶのがこの要素ではないでしょうか。
「売れ筋商品」

ただ、商品画像は横に4つを並べるフォームになっていて
3つ並べたい場合は表示が左側に偏ってしまう現象がおきます。

それを気にする方がいるのは事実だと思います。

このような感じで、右側に商品画像一つ分の空間ができますね。
赤枠の部分。これが作り手としては気になるわけで

uresuji

3つの場合は均等に表示されればいいとは思うのですが、今はできません。

お客様の立場からすると、なんだか空間があるとおかしいとか
表示が不格好とは実際のところ思わないと思いますが

HTMLで表を使って3つを均等に並べたいという思いがこみ上げてくるので
表を作るものの、実際スマホでの表示が崩れるのを見てしまうとがっかりしてしまいます。

では、上記の画像をスマホで見るとどうなるでしょう。
(アンドロイドです。)違和感なく表示されています。

uresuji
パソコン表示とは違って横ではなく下へ下へと表示されますが
これはスマホの画面の幅がパソコンよりも狭いからで、見やすいかと思います。

どうしてもスマホで思い通りの表を崩れることなく表示させたいと思う場合は
ネットで探せばやり方はでてきますので

CSSを使わない方法CSSを使う方法、両方でてきます。
そちらを参考にするといいでしょう。

ここからはショップできすぎくんの要素の中にあるもので
「売れ筋商品」以外のものを使って、表を作らない方法でやっていこうという考え方です。

使用する要素が下記の画像の赤枠のものです。
画像

誰にでもできるという簡単な操作。
レスポンシブ対応だからスマホでの表示が崩れる心配はまず低い。

ショップオーナーにとってこのようなメリットが考えられます。

商品の情報を分かりやすく得ることができる。
お客様にとってはこのようなメリットが考えられます。

PCで見るとこんな感じに出来上がります。

osusumepc

スマホですとこんな感じです。

osusumesm

具体的なやり方を画像と共に説明していきます。

表示したい商品画像の商品ページを表示します。
画像の上にマウスを置いて、右クリックで画像を名前を付けて保存します。名前は任意で大丈夫です。
デスクトップ上に保存するといいでしょう。

name

ショップできすぎくんで作業したいショップを開きます。トップページでもいいですし
その他のページでも構いません。自分が作業したいページで作業します。

要素で画像とテキストを選び、今回は画像が左側、テキストが右側のものにします。
マウスでドラッグ&ドロップして任意の場所に配置します。
youso

デスクトップに保存しておいた商品画像をショップできすぎくんにアップロードします。
赤枠のカメラの部分をクリックし、アップロードの作業に入ります。
up

赤枠の「ファイルを選択」をクリック。
up1

デスクトップに保存しておいた画像を選び「開く」ボタンを押します。
up2

左側の赤枠内にデスクトップで選んだ画像のファイル名が記載されているのを確認し
右側の赤枠には画像タイトル分かりやすく画像の名前を入れておくといいでしょう。

そして、下部にある画像をアップロードボタンを押します。
up3

ここまではショップできすぎくんの作業したいショップに画像を取り込む作業をしました。

もう一度赤枠のカメラの部分をクリック。
up

「画像管理/ページ挿入」を青色に反転している部分をマウスでクリックします。
そうすると、今までにアップロードした画像が出てきます。
(初めて画像をアップロードした場合は1枚しかでてきません。)

その後、1番目に先ほどアップロードした画像を選びます。この時画像にリンクを張っておくといいので
飛ばしたいページのURLをコピーして2番目のところに入力し

画像のサイズは今回は横幅150PXを選んで、4番目の選択画像を挿入ボタンを押します。
up4
飛ばしたいURLはご自分のショップをパソコンで開いておいて、そのお目当てのページのURLを
コピーしてペーストすれば大丈夫です。

画像の準備はできました。次は入力したいテキストを入力します。

あまり長すぎると、スマホで見た時に何行にも改行してしまうので
長すぎない文章が無難です。
text

ひとまずこれで1つできました。増やしたいだけ作業を重ねてください。
保存して、公開予約をすると作業をしたものが反映します。公開予約は忘れずに。

作業中に保存ボタンをその都度押しておくと、ちょっとしたハプニングで消えてしまうことを
避けられますので、押しておきましょう。公開予約は一通りの作業が終わったらすれば大丈夫です。

表示を確認しましょう。今回は3つ商品を登録してみました。

スマホでの表示です。
osusumesm

お客様の立場からすると、
ストレスのない閲覧で買い間違えのない買い物をしたいはずで
作り手の気持ちはどうでもいいのです。

スマホユーザーは下へ下へと目線を落とすことに慣れているので
その行動を理解し、スッキリ、はっきり、しっかりとした読みやすい情報を
伝えることができればいいですよね。

あるものを利用し表を作らなくても大丈夫という考え方を
共有させてもらいました。

表を作ることがいけないということではなく、崩れてしまうことを考えて苦慮するのであれば

安定した表示で簡単にできる方法もありますよと
提案しているので、これが唯一最強の方法と言っているわけではありません。

ご自分に合う方法を選んで、楽しいショップ運営を継続していけるといいですね。
参考になれば幸いです。

SNSでもご購読できます。

コメントを残す

*