商品ページのデザインを考える -楽天スマホページ編 その1-

前回まではサムネ画像の話でしたが、ちょっとそこから進んで今回は商品ページ自体のデザインやHTMLについてです。

コーディングの勉強をしているから大丈夫？

もしかしたら勉強している方のほうが引っかかってしまうかもしれません。
楽天はHTML5やCSSに馴染みのある方ほど、納得がいかないところが多々でてくるかもしれません。
だってスマホ対応のページなんてですね

<div>が使えないんですもん。

あ、<style>属性もダメですよ。

その他にもたくさん制限はあるんですが、一番困るのはこの2つかなと思います。

PCページのほうは使えるんですが、スマホのページでは禁止タグになっているためエラーが出て登録更新ができません。
コーダーではない私ですらdivが使えないってどういう…ってなりました。
でも文句を言っても仕方ない。そこがそれしかダメだと言っているなら従うしかないのです。

じゃあPCページに力を入れればいいのでは？
そう思うかもしれませんが、現在殆どの方がスマホで買い物をしているというデータがあるため、力を入れるべきはスマホページのほう。
自分も買い物はスマホでしかしなくなったなー……いつからだろう……とちょっと考えてしまう。

楽天GOLDを使えばレスポンシブページも作れるようですが、HTML/CSSやJavascriptがわかる人じゃないと厳しいので、出展者の方はそこまではしていないという方も多いと思います。
力を入れるページなら制作会社に頼もう！という感じで良いと思いますが、そこまでお金をかける商品ではないパターンもありますよね。
単価の低い利益率の低い商品など。
その場合はさくっとRMS内のページで作るのがいいのではないかと思います。

タグの制限には理由がある

楽天側での管理の問題というのも勿論あると思いますが、前述しました

店舗を運営する人はそこまでHTMLの知識が無い

これが一番大きいのではないでしょうか。

誰でも出店できるということは、誰でもある程度お店を作ることができるようにしなければならないということ。
難しいタグが必須のようになってしまうと、出店する人が「難しそう…やめとこう」と思われてしまっては出店数が伸びません。
私は楽天の中の人ではないので予測でしかありませんが、できるだけ簡単に、少ない知識で製作できるようにしているのは、出店側・店舗側のことを考えてなのではないでしょうか。

タグの制限がある場合でのデザイン

HTMLとCSSによって画像などをあまり使わなくても綺麗で動的なページが作れるようになっている現在のwebデザイン。
これを封じられると最近の知識ではなく、古の知識が必要になってきます。
それは

table レイアウト

昔、まだCSSって何？という頃、まだ一般的ではなかった頃。
今のようなSNSもなく、何か自分の情報を発信するには規定のホームページを雛形で作れるサービスか、無料のホームページスペースに自力でメモ帳などにタグを書きwebサイトを作っていたそんな時代。
その頃にレイアウトを行うために使われていたのがtableタグを使ったレイアウトです。

tableタグは表を作るためのものであり、デザインに使用するのは推奨しないとW3Cから発表があったやり方です。
それが楽天のスマホサイトでは救世主になる可能性があります。

もう1つは

画像メインで構成する

ということ。
タグは<h1>とか<p>とか<br>とかを使用し、あとは全て画像で作り上げる方法。
こちらは注意しないといけないのがSEO対策。
画像のみをずらっと並べた場合、その中のテキストは検索エンジンが拾わないため、googleなどで商品が欲しくて検索した方の検索に引っかからない可能性が高くなります。

これはalt属性や画像外に説明文のスペースを設け、引っかかるようにする必要があります。
ただ、楽天の場合は楽天トップページの検索から来る人が多く、googleからの流入は少なめな方向にあるようで（扱っている商品によるかと思いますが）商品名とキャッチコピーのほうが重要になるかもしれません。
また、ここのところはSNS経由での購入が増加傾向にあるので、そちらからの流入を考えるべきでもあると思います。
（SNSのほうは目に留まりやすい画像必須ですね）

画像が今まで以上に大事に

いつからか楽天がAmazonのようになっていると感じています。
これは真似をしているとかそういうものではなく現在、スマホ用ネットショップを作る際の、お客様がその商品を購入しやすい形がAmazonの形なのではないでしょうか。

楽天はサムネイル画像としてキャビネットに登録する画像が一番上でスワイプできるようになっています。
そして作りこんだHTMLを記述したページですが、下のほうに表示がされます。
設定で変えられるのかもしれませんが、基本的にその配置が多いと私的には思います。その辺の設定は分からないので必要な方は詳しい方やコンサルさんか、出店している方ならサポートまでお問合せください。

楽天のお客様は下のほうまでよく確認する方も多いようなのですが、ものによってはサムネだけ見てパッと決める、あまりに長くて面倒なようなら読まないという方も少なくないのではないでしょうか。（私がそれです）

Amazonはもちろん画像が中心という感じになっていますが、yahooショッピングもこの辺は同じなのではと思います。
全体的にそういう雰囲気になっているということは、統計を取ったときに、それが現在のベストだと判断しているからのはずです。
感覚的な判断だけで行っていることは大手さんがやるはずはないので。

画像のことについて書こうと思ったのですが、ここまでが長くなってしまったので次回書こうかと思います。
デザイナーなのにデザインの話あまりしてない記事になってすいません。

次回もよろしければお付き合いいただますと幸いです。
読んでいただきありがとうございました！

※今回のサムネ画像はcanvaで製作をさせていただきました。
使い込むとこれもいろいろ制作楽しそうなので、たまに使ってみたいと思います。