• 楽天
  • Yahoo!

【コピペで改善!】楽天ショップの「項目選択肢」をスマホからも見やすくする!30秒カスタマイズ

0506_main

こんにちは。実家はタヌキがよく出るオガリア中村です。

先日実家に帰ったら、父親が「庭に見たことない動物が居る!」と慌てていたので母と一緒に見に行ったら、全身の毛が抜けたタヌキでした。実家は色んなタヌキが出るオガリア中村です。

さて本日は、楽天市場の「サイズ」や「カラー」を選ぶセレクトボックス(通称”項目選択肢”)を工夫してみます。

初期のデザイン

0506_1

何もいじってないとこんな感じに。個人的に感じる辛いポイントは…

  • 重要な選択肢が入っているにも関わらず、サイズが小さく視認性が低い
  • 選択肢同士の距離が近く、文字情報が多すぎて可読性が低い

ひと言でいうと、『ごちゃっ』としちゃいます。

PCから閲覧した際にはまだしも、スマホから「PC版ページ」で閲覧した場合、確認と操作は難しいのではないでしょうか。店舗様によっては注文や配送に関する注意事項を書いている方も多く、お客様にスルーされてしまってはトラブルにも発展してしまいます。

そこで!見やすく工夫できないかイジってみました。

カスタマイズ後のデザイン

0506_2

 
こんな感じにできます。以下を意識してみました。

  • 操作が必要なセレクトボックスのサイズを大きくして、視認性を高める
  • 各文字情報・選択肢同士に適度な余白をつけて、可読性を高める
  • 選択肢のタイトルに吹き出しをつけて、一目で分かりやすくする

デメリットとしては、項目選択肢欄の高さが長くなるため、「買い物かごに入れる」ボタンの位置が多少下にずれてしまう事でしょうか…。しかし不自然なほど位置が移動する訳でもないため、大きな影響はないと思います。

次の手順で簡単にカスタマイズできますよー!

CSSをコピー!

以下のCSSをまるっとコピーします。

<style type="text/css">
<!--

#rakutenLimitedId_aroundCart span.choice + select {
    display: block !important;
    padding: 8px;
    margin-bottom: 2px;
    border-radius: 2px;   
}

#rakutenLimitedId_aroundCart span.choice {
    display: inline-block;
    position:relative;
    padding: 8px;
    margin-bottom: 8px;
    background: #eee; /*吹き出しの背景色 */
    border-radius: 2px;
}
#rakutenLimitedId_aroundCart span.choice:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 24px;
    margin-left: -8px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #eee transparent transparent transparent;
}
-->
</style>

RMSに貼り付け

コピーしたCSSを、全商品ページに適用される『共通のテンプレート』に貼り付けます。これだけ!

<共通のテンプレート>
 ・RMSメインメニュー>デザイン設定>ヘッダー・フッター・レフトナビ
 ・RMSメインメニュー>デザイン設定>共通説明文(大)

※ 貼り付け場所はどの位置でも構いません。
※ どこか一箇所に貼り付ければOK!

まとめ

ちょっとしたカスタマイズではありますが、「見づらさ」「操作しづらさ」を改善することは、お客様がお買い物をする上での「煩わしさ」を改善することに繋がると思います。

アパレル商材や家電商材など、選択肢が多く並びやすい商材へはぜひご活用ください~!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。