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

楽天
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>