【Yahoo!ストア構築】商品詳細ページのフリースペースを商品基本情報より上段へ設置する方法

Yahoo!ショッピングにストア出店している方が悩む1つの壁として、【機能の制限】があります。

管理画面より限られた機能を使ってストアの見せ方や内容を構築していかなくてはなりません。他店舗との差別化としての第一ステップは見え方（デザイン×情報量）が重要になってきますね。

独自カスタマイズを可能にするオプション「トリプル」

Yahoo!ストアには、ネットショップ構築の自由度を求める方に対して「トリプル」という別途オプションサービスがあります。月額費用が必要となりますがサーバーを借りる事ができるので、ネットショップの見せ方（デザイン）や使いやすさ（機能面）を柔軟に変更する事が可能になります。

※楽天に出店されている方は、楽天GOLDを思い浮かべて頂ければわかりやすいかと思います。今回はYahoo!トリプルの説明は割愛いたしますが、このサービスをお使いの方が簡単にできる1つの手法をお届けします。

標準な商品詳細ページの見え方

Yahooの店舗は、標準ですと下記のような見え方になっており、いきなり商品価格を見せる作りになっています。

YAHOOストア商品詳細ページ

価格だけで判断されるユーザーが多いモール店においては動機や訴求ポイントを伝える前に離脱されしまう可能性が高いのではと推測いたします。Yahoo!ショッピング内で買い回りされていて、見慣れている方は問題ないかと思われますが検索から流入したユーザーにとっては、マイナスと言えるかもしれません。

縦にすごく長いページにうんざりしているユーザーにとっては、プラスではあるかもしれませんが。笑

商品詳細ページの「フリースペース」を上部に移動

CSSファイルの中に、下記コードを記述してみましょう。
※今回は、フリースペース1の入力エリア情報を移動します。

/*商品詳細*/
/*要素の順序変更*/
#CenterTop{
	display:-webkit-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-orient:vertical;
	-ms-flex-flow:column;
	-webkit-flex-direction:column;
	flex-direction:column;
}
#CenterTop div {
	-webkit-box-ordinal-group:2;
}
#CenterTop div#CentItemAdditional1 {
	margin:10px 0 30px 0;
	-webkit-box-ordinal-group:1;
	-ms-flex-order:-1;
	 order:-1;
}

CSSのコードを追加した結果

いかがでしょうか？
下記のように、「フリースペース」のコンテンツが上部にきましたでしょうか？

YAHOOストア商品詳細ページ

CSS3のフレキシブルレイアウトを利用

CSSファイルに、フレキシブルボックスのコードを記述する事で実現しています。
参考サイト：CSS3の「フレキシブルレイアウト」使い方まとめ（フラップイズム）

対応ブラウザについて

Chrome、firefox、safari、IEなどの最新バージョンのブラウザでは問題なく表示されるのではないでしょうか？

IE9以下には対応していないため、別途javascript等を用いて対応する必要がありますが今回は記載いたしません。読み込み速度がただでさえ時間のかかるECサイトにおいて、javascriptを読み込んでまで対応する重要性が低いと判断したため僕は実装をやめました。

WebブラウザシェアランキングTOP10（日本国内・世界）を見ますと、IE9以下のシェアは8%前後あるとされていますがあくまでネットショップユーザー、且つ当サイトにお越し頂いている方に限るのであれば母数は4%以下に減ります。自社サイトに対してどれくらいのユーザーが、どのようなブラウザをメインとして使っているのかを見定めたうえで対策を行う必要がありますね。