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

こんにちは。実家はタヌキがよく出るオガリア中村です。
先日実家に帰ったら、父親が「庭に見たことない動物が居る!」と慌てていたので母と一緒に見に行ったら、全身の毛が抜けたタヌキでした。実家は色んなタヌキが出るオガリア中村です。
さて本日は、楽天市場の「サイズ」や「カラー」を選ぶセレクトボックス(通称”項目選択肢”)を工夫してみます。
初期のデザイン

何もいじってないとこんな感じに。個人的に感じる辛いポイントは…
- 重要な選択肢が入っているにも関わらず、サイズが小さく視認性が低い
- 選択肢同士の距離が近く、文字情報が多すぎて可読性が低い
ひと言でいうと、『ごちゃっ』としちゃいます。
PCから閲覧した際にはまだしも、スマホから「PC版ページ」で閲覧した場合、確認と操作は難しいのではないでしょうか。店舗様によっては注文や配送に関する注意事項を書いている方も多く、お客様にスルーされてしまってはトラブルにも発展してしまいます。
そこで!見やすく工夫できないかイジってみました。
カスタマイズ後のデザイン

こんな感じにできます。以下を意識してみました。
- 操作が必要なセレクトボックスのサイズを大きくして、視認性を高める
- 各文字情報・選択肢同士に適度な余白をつけて、可読性を高める
- 選択肢のタイトルに吹き出しをつけて、一目で分かりやすくする
デメリットとしては、項目選択肢欄の高さが長くなるため、「買い物かごに入れる」ボタンの位置が多少下にずれてしまう事でしょうか…。しかし不自然なほど位置が移動する訳でもないため、大きな影響はないと思います。
次の手順で簡単にカスタマイズできますよー!
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!
まとめ
ちょっとしたカスタマイズではありますが、「見づらさ」「操作しづらさ」を改善することは、お客様がお買い物をする上での「煩わしさ」を改善することに繋がると思います。
アパレル商材や家電商材など、選択肢が多く並びやすい商材へはぜひご活用ください~!
■お役立ち情報■ 素早く簡単に、ショップの「スマホ用ページ」を作成するには?
ドラッグ&ドロップの操作だけでスマホページを簡単作成!
ogaRia「スマホページくみたて君」を使えば、数分でスマホページが作れます!
HTMLを編集したり、楽天GOLDにファイルをアップロードしたり。。。ちょっと敷居が高いかも。。
という方は「スマホページくみたて君」をぜひご利用下さい!
ドラッグ・アンド・ドロップの操作だけで、さまざまなパーツを配置できます。
スマホページのテンプレートも複数ご用意しています。

<二ヶ月無料で利用できる!>
最大二ヶ月の無料トライアルで、「スマホページくみたて君」や、その他便利ツールもお試しできます。
