yahoo-full-screen-1
Yahoo!ストアでもフルスクリーン！ヤフーショッピングで商品ページをデザインする方法。
EC
ec-netshop-media17
ネットショップ運営のノウハウ学習や情報収集に役立つサイト17選。
EC
rakuten-template-footer-1
コピペでOK！楽天フッターのテンプレートを作ってみました。ほぼ画像不使用で簡単実装！
EC
rakuten-free-template12
制作コスト削減！楽天で使える無料テンプレートやイラスト・写真素材12選。
EC
rakuten-site-design-food13
空腹時は見ちゃダメ！楽天の参考デザインまとめ、食品ジャンルの素敵サイト13選。
EC
rakuten-free-tools6
賑わい演出や自動化も！無料で使える楽天・Yahoo!向け販促ツール・サービス6選。
EC

楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。

投稿日 by 223 shares

楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。

今回は一歩先へ！楽天の限界を超えた検索フォームを！
前回、前々回の記事にて楽天検索ボックスの設置方法とデザイン方法をお伝えしました、そのさらに応用になっています。

こんな感じのを作ってみようと思います。

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。

もうすぐ「MGSV TPP」が発売されますね。僕はもう予約しました。
復讐の連鎖から生まれるストーリー。FOBが楽しみすぎて吐きそうです。
課金要素があるという噂だけど、その辺が気になるなぁ。

さてさて今回も検索ボックスなんですよ。
今までの記事では楽天が用意している検索フォームを限界まで活用する方向でご紹介してきました、が！

今回はその一歩先へ！他店舗とは一味も二味も違う限界を超えた検索フォームの実装方法をご紹介します！

※一言
楽天GOLD(無料)と契約している必要があります。

それではやってみましょう。

1. こちらが用意した項目をユーザーに選んでもらう検索フォーム

楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。

1-1. ラジオボタンを使用した実装サンプル

まずは一つ目のサンプル、ラジオボタンを使用した実装サンプルをご覧ください。
この機能を実装します。
以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。

<div id="sample">
<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

<h2>ラジオボタンを使用した実装サンプル</h2>
<div>
<input type="radio" name="groupe01" id="radio_00"><label for="radio_00">指定なし</label>
<input type="radio" name="groupe01" id="radio_01"><label for="radio_01">レッド</label>
<input type="radio" name="groupe01" id="radio_02"><label for="radio_02">ブルー</label>
<input type="radio" name="groupe01" id="radio_03"><label for="radio_03">グリーン</label>
</div>

<div><input name="submit" type="image" src="../TIPS10/btn03.png" class="submit" onClick="document.charset='euc-jp';onDetailSearchForm()"></div>

<input value="311213" type="hidden" name="sid"><!--店舗ID-->
<input value="float" type="hidden" name="su"><!--店舗URL-->
<input value="時計・雑貨FLOAT" type="hidden" name="sn"><!--店舗名-->
<input value="6" type="hidden" name="sv"><input value="A" type="hidden" name="f"><input type="hidden" value="3" name="v"/><input type="hidden" name="e" value="1"><input type=hidden value=0 name="h"><input name="sitem" id="sitem" type="hidden"><input type=hidden name="min"><input type=hidden name="max">

</form>
</div>
<style>html {background-color:#fdfdfd;}body {width:1000px;margin:0 auto;font-size:12px;}h1 {clear:both;clear:both;height:40px;line-height:50px;font-size:18px;border-top:1px solid #ccc;margin-bottom:10px;font-weight:bold;}h2 {clear:both;clear:both;height:40px;line-height:50px;font-size:16px;border-top:1px solid #ccc;margin-bottom:10px;}.text:focus {opacity:0.8;}.text:focus + .btn {background-color:#fff;}.btn:hover {opacity:0.8;}{-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}p.text_area {background-color:rgba(0, 91, 204, 0.28);padding:20px;margin:10px 0;}p.text_area span {display:block;margin-bottom:5px;font-size:14px;font-weight:bold;}#sample { padding:10px;}#sample div { margin-bottom:20px;}</style>

HTMLソースがこちら。店舗IDや店舗URLなどはご自身の店舗に合わせて変更をしてください。
続いて読み込ませるjs

//ブラウザ判定
lowver = false;
if(navigator.appVersion.indexOf("MAC")>=0 && brw.indexOf("NETSCAPE")>=0)
{
 var s = ver.indexOf(" ",0);
 if(eval(ver.substring(0,s))<4.5) lowver = true;
}

function getVal(obj){ return obj.options[obj.selectedIndex].value; }
function getTxt(obj){ return obj.options[obj.selectedIndex].text; }

function onDetailSearchForm() {

 //ラジオボタン
 radio_00 = document.hogehoge.radio_00.checked;
 radio_01 = document.hogehoge.radio_01.checked;
 radio_02 = document.hogehoge.radio_02.checked;
 radio_03 = document.hogehoge.radio_03.checked;

}

function hogehogecheck(obj)
{
 //検索ボックス初期化
 obj.sitem.value = "";

 //ラジオボタン 定義
 if (radio_01 == true) {
  obj.sitem.value += "レッド ";
 } else if (radio_02 == true) {
  obj.sitem.value += "ブルー ";
 } else if (radio_03 == true) {
  obj.sitem.value += "グリーン ";
 } else {
  obj.sitem.value += "";
 }

 if ( obj.sitem.value == "" ) {
  obj.sitem.value = obj.u.value + obj.sitem.value;
 }
 
 return true;
}

以上が読み込ませるjsとなっています。
すると先ほど見ていただいたラジオボタンを使用した実装サンプルと同じものが実装できたかと思います。

では少し長くなりますがそれぞれのコードについて解説してゆきます。
それほど複雑なものではありませんが、内容を読んでいただければ各店舗で自由に検索フォームをカスタマイズできる内容になっています！

まずはHTMLの2行目

<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

こちらで記載されている「name=”hogehoge”」はjsの各行の指定と連動しています。
hogehogeは任意で変更可能ですが、合わせてjsのソースも変更する必要があります。

「onSubmit=”if(!lowver)return hogehogecheck(this);”」ここにも「hogehoge」が使用されています。
js内の指示をこのフォーム内で実行しますというような内容になっています。

「accept-charset=”euc-jp”」
楽天の検索フォームは文字コード「euc-js」でしか実行されません。そのための記述です。

続いて6行目

<input type="radio" name="groupe01" id="radio_00"><label for="radio_00">指定なし</label>

ラジオボタンを作る要素です。
「name=”groupe01″」この部分が6～9行目に共通して出てきています。
6～9行目が一つのグループであるという指定になっています。

ラベルに指定されている「for=”radio_00″」ですが、
これは前記されている「input」の「id=”radio_00″」と連動していることに注目してください。
こうすることでラベルでインクルードされているテキストをクリックした際にもラジオボタンが反応するようになっています。

続いてjs内の記述について。
まずは15行目

radio_00 = document.hogehoge.radio_00.checked;

これは「hogehoge」のフォーム内の「radio_00」がチェックされている状態を「radio_00」と定義する記述になっています。
同様に16～18行もそれぞれのラジオボタンがチェックされた状態を定義しています。
この定義をすることで、後の28行目以降が意味を成してきます。

つづいて28～36行目

if (radio_01 == true) {
  obj.sitem.value += "レッド ";
 } else if (radio_02 == true) {
  obj.sitem.value += "ブルー ";
 } else if (radio_03 == true) {
  obj.sitem.value += "グリーン ";
 } else {
  obj.sitem.value += "";
 }

これは先ほど定義された状態にどういった動作をするかを指定しています。
たとえば28行目だけを見てみると、先ほど定義した「radio_01」が「true」である場合を意味します。
29行目で「true」であった場合、検索フォームに「レッド 」という内容を送信するようになっています。

各行だけを見ると非常にシンプルな作りとなっていますので、
jsに自信のない方でも各店舗に合わせて自由にカスタマイズが可能かと思います。
実際僕自身もjsに関してはずぶの素人です！！！

1-2. ラジオボタン ＋ 画像を使用した実装サンプル

では引き続き二つ目のサンプル、ラジオボタン ＋ 画像を使用した実装サンプルをご覧ください。
先ほどのラジオボタンに画像をプラスした形になります。
以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。

<div id="sample">
<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

<h2>ラジオボタン ＋ 画像を使用した実装サンプル</h2>
<div>
<input type="radio" name="groupe02" id="radio_img_00" class="radio"><label for="radio_img_00"><img src="img_base.png"></label>
<input type="radio" name="groupe02" id="radio_img_01" class="radio"><label for="radio_img_01"><img src="img_base.png"></label>
<input type="radio" name="groupe02" id="radio_img_02" class="radio"><label for="radio_img_02"><img src="img_base.png"></label>
<input type="radio" name="groupe02" id="radio_img_03" class="radio"><label for="radio_img_03"><img src="img_base.png"></label>
</div>

<div>
<input name="submit" type="image" src="../TIPS10/btn03.png" class="submit" onClick="document.charset='euc-jp';onDetailSearchForm()">
</div>

<input value="311213" type="hidden" name="sid"><!--店舗ID-->
<input value="float" type="hidden" name="su"><!--店舗URL-->
<input value="時計・雑貨FLOAT" type="hidden" name="sn"><!--店舗名-->
<input value="6" type="hidden" name="sv"><input value="A" type="hidden" name="f"><input type="hidden" value="3" name="v"/><input type="hidden" name="e" value="1"><input type=hidden value=0 name="h"><input name="sitem" id="sitem" type="hidden"><input type=hidden name="min"><input type=hidden name="max">

</form>
</div>
<style>html {background-color:#fdfdfd;}body {width:1000px;margin:0 auto;font-size:12px;}h1 {clear:both;clear:both;height:40px;line-height:50px;font-size:18px;border-top:1px solid #ccc;margin-bottom:10px;font-weight:bold;}h2 {clear:both;clear:both;height:40px;line-height:50px;font-size:16px;border-top:1px solid #ccc;margin-bottom:10px;}.text:focus {opacity:0.8;}.text:focus + .btn {background-color:#fff;}.btn:hover {opacity:0.8;}{-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}p.text_area {background-color:rgba(0, 91, 204, 0.28);padding:20px;margin:10px 0;}p.text_area span {display:block;margin-bottom:5px;font-size:14px;font-weight:bold;}#sample { padding:10px;}#sample div { margin-bottom:20px;}</style>

HTMLソースがこちら。続いて読み込ませるjs

//ブラウザ判定
lowver = false;
if(navigator.appVersion.indexOf("MAC")>=0 && brw.indexOf("NETSCAPE")>=0)
{
 var s = ver.indexOf(" ",0);
 if(eval(ver.substring(0,s))<4.5) lowver = true;
}

function getVal(obj){ return obj.options[obj.selectedIndex].value; }
function getTxt(obj){ return obj.options[obj.selectedIndex].text; }

function onDetailSearchForm() {

 //ラジオボタン 画像使用
 radio_img_00 = document.hogehoge.radio_img_00.checked;
 radio_img_01 = document.hogehoge.radio_img_01.checked;
 radio_img_02 = document.hogehoge.radio_img_02.checked;
 radio_img_03 = document.hogehoge.radio_img_03.checked;

}

function hogehogecheck(obj)
{
 //検索ボックス初期化
 obj.sitem.value = "";

 //ラジオボタン 画像使用 定義
 if (radio_img_01 == true) { 
  obj.sitem.value += "レッド ";
 } else if (radio_img_02 == true) { 
  obj.sitem.value += "ブルー ";
 } else if (radio_img_03 == true) { 
  obj.sitem.value += "グリーン ";
 } else {
  obj.sitem.value += "";
 }

 //腕時計検索
 if ( obj.sitem.value == "" ) {
  obj.sitem.value = obj.u.value + obj.sitem.value;
 }
 
 return true;
}

以上が読み込ませるjsとなっています。
基本的な部分に大きな変化はありません、ラベル内のテキストを画像に置き換えた形になっています。

1-3. チェックボックスを使用した実装サンプル

では引き続き三つ目のサンプル、チェックボックスを使用した実装サンプルをご覧ください。
こちらはチェックボックスになっていますので複数選択が可能な仕様になっています。
以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。

<div id="sample">
<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

<h2>チェックボックスを使用した実装サンプル</h2>
<div>
<input id="Check_00" type="checkbox"><label for="Check_00">レッド</label>
<input id="Check_01" type="checkbox"><label for="Check_01">ブルー</label>
<input id="Check_02" type="checkbox"><label for="Check_02">グリーン</label>
</div>

<div>
<input name="submit" type="image" src="../TIPS10/btn03.png" class="submit" onClick="document.charset='euc-jp';onDetailSearchForm()">
</div>

<input value="311213" type="hidden" name="sid"><!--店舗ID-->
<input value="float" type="hidden" name="su"><!--店舗URL-->
<input value="時計・雑貨FLOAT" type="hidden" name="sn"><!--店舗名-->
<input value="6" type="hidden" name="sv"><input value="A" type="hidden" name="f"><input type="hidden" value="3" name="v"/><input type="hidden" name="e" value="1"><input type=hidden value=0 name="h"><input name="sitem" id="sitem" type="hidden"><input type=hidden name="min"><input type=hidden name="max">

</form>
</div>
<style>html {background-color:#fdfdfd;}body {width:1000px;margin:0 auto;font-size:12px;}h1 {clear:both;clear:both;height:40px;line-height:50px;font-size:18px;border-top:1px solid #ccc;margin-bottom:10px;font-weight:bold;}h2 {clear:both;clear:both;height:40px;line-height:50px;font-size:16px;border-top:1px solid #ccc;margin-bottom:10px;}.text:focus {opacity:0.8;}.text:focus + .btn {background-color:#fff;}.btn:hover {opacity:0.8;}{-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}p.text_area {background-color:rgba(0, 91, 204, 0.28);padding:20px;margin:10px 0;}p.text_area span {display:block;margin-bottom:5px;font-size:14px;font-weight:bold;}#sample { padding:10px;}#sample div { margin-bottom:20px;}</style>

HTMLソースがこちら。続いて読み込ませるjs

//ブラウザ判定
lowver = false;
if(navigator.appVersion.indexOf("MAC")>=0 && brw.indexOf("NETSCAPE")>=0)
{
 var s = ver.indexOf(" ",0);
 if(eval(ver.substring(0,s))<4.5) lowver = true;
}

function getVal(obj){ return obj.options[obj.selectedIndex].value; }
function getTxt(obj){ return obj.options[obj.selectedIndex].text; }

function onDetailSearchForm() {

 //チェックボックス
 Check_00 = document.hogehoge.Check_00.checked;
 Check_01 = document.hogehoge.Check_01.checked;
 Check_02 = document.hogehoge.Check_02.checked;

}

function hogehogecheck(obj)
{
 //検索ボックス初期化
 obj.sitem.value = "";

 //チェックボックス 定義
 if (Check_00 == true) {
  obj.sitem.value += "レッド ";
 }
 if (Check_01 == true) {
  obj.sitem.value += "ブルー ";
 }
 if (Check_02 == true) {
  obj.sitem.value += "グリーン ";
 }

 //腕時計検索
 if ( obj.sitem.value == "" ) {
  obj.sitem.value = obj.u.value + obj.sitem.value;
 }
 
 return true;
}

以上が読み込ませるjsとなっています。
こちらも基本的な部分に大きな変更はありません。

1-4. 上記ラジオボタンやチェックボックスと連動したフリーワードボックスの実装サンプル

最後に四つ目のサンプル、今までにご紹介したラジオボタンやチェックボックスと連動したフリーワードボックスの実装サンプルをご覧ください。
少しjsに手を加えることで今までの選択式の検索方式にユーザー自身がフリーワードで検索できる仕様が実現できます。
以下のソースコードとjsで実装できますのでGOLD内のHTMLに設置してみましょう。

<div id="sample">
<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

<h2>上記ラジオボタンやチェックボックスと連動したフリーワードボックスの実装サンプル</h2>
<div>
<input id="Check_00" type="checkbox"><label for="Check_00">チェックボックス01</label>
<input id="Check_01" type="checkbox"><label for="Check_01">チェックボックス02</label>
<input id="Check_02" type="checkbox"><label for="Check_02">チェックボックス03</label>
</div>

<div>
<input name="freetext" type="text" value="" placeholder="検索キーワード入力">
</div>

<div>
<input name="submit" type="image" src="../TIPS10/btn03.png" class="submit" onClick="document.charset='euc-jp';onDetailSearchForm()">
</div>

<input value="311213" type="hidden" name="sid"><!--店舗ID-->
<input value="float" type="hidden" name="su"><!--店舗URL-->
<input value="時計・雑貨FLOAT" type="hidden" name="sn"><!--店舗名-->
<input value="6" type="hidden" name="sv"><input value="A" type="hidden" name="f"><input type="hidden" value="3" name="v"/><input type="hidden" name="e" value="1"><input type=hidden value=0 name="h"><input name="sitem" id="sitem" type="hidden"><input type=hidden name="min"><input type=hidden name="max">

</form>
</div>
<style>html {background-color:#fdfdfd;}body {width:1000px;margin:0 auto;font-size:12px;}h1 {clear:both;clear:both;height:40px;line-height:50px;font-size:18px;border-top:1px solid #ccc;margin-bottom:10px;font-weight:bold;}h2 {clear:both;clear:both;height:40px;line-height:50px;font-size:16px;border-top:1px solid #ccc;margin-bottom:10px;}.text:focus {opacity:0.8;}.text:focus + .btn {background-color:#fff;}.btn:hover {opacity:0.8;}{-moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;}p.text_area {background-color:rgba(0, 91, 204, 0.28);padding:20px;margin:10px 0;}p.text_area span {display:block;margin-bottom:5px;font-size:14px;font-weight:bold;}#sample { padding:10px;}#sample div { margin-bottom:20px;}</style>

HTMLソースがこちら。続いて読み込ませるjs

//ブラウザ判定
lowver = false;
if(navigator.appVersion.indexOf("MAC")>=0 && brw.indexOf("NETSCAPE")>=0)
{
 var s = ver.indexOf(" ",0);
 if(eval(ver.substring(0,s))<4.5) lowver = true;
}

function getVal(obj){ return obj.options[obj.selectedIndex].value; }
function getTxt(obj){ return obj.options[obj.selectedIndex].text; }

function onDetailSearchForm() {

 //チェックボックス
 Check_00 = document.hogehoge.Check_00.checked;
 Check_01 = document.hogehoge.Check_01.checked;
 Check_02 = document.hogehoge.Check_02.checked;

}

function hogehogecheck(obj)
{
 //検索ボックス初期化
 obj.sitem.value = "";

 //フリーキーワード 定義
 if ( obj.freetext.value != "" ) {
  obj.sitem.value = obj.sitem.value + " " + obj.freetext.value + " ";
 }

 //チェックボックス 定義
 if (Check_00 == true) {
  obj.sitem.value += "レッド ";
 }
 if (Check_01 == true) {
  obj.sitem.value += "ブルー ";
 }
 if (Check_02 == true) {
  obj.sitem.value += "グリーン ";
 }

 //腕時計検索
 if ( obj.sitem.value == "" ) {
  obj.sitem.value = obj.u.value + obj.sitem.value;
 }
 
 return true;
}

以上が読み込ませるjsとなっています。
基本的な部分に変更はありません、フリーワード用の定義をjsに追加した形になっています。

2. こんな形が実現できる、自由に選べる検索フォームのデザイン

楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォームの実装方法。

ではでは最後に、今までご紹介したテクニックを応用して実現できる用例を一つご紹介します。
最初にお見せしたこの形の検索ボックスを実装するサンプルコードになっています。
要素が多いので各コードが非常に長くなっていますが許してたもれ。

HTMLソース

<h1>楽天の限界を超える！様々な指定が可能なユーザビリティの高い検索フォーム</h1>

<form name="hogehoge" onSubmit="if(!lowver)return hogehogecheck(this);" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc?" method="get" target="_blank" accept-charset="euc-jp">

<!--ブランド選択エリア-->
<div>
<input type="radio" name="brand" id="brand_00"><label for="brand_00"><img src="img/brand_00.png"></label>
<input type="radio" name="brand" id="brand_01"><label for="brand_01"><img src="img/brand_01.png"></label>
<input type="radio" name="brand" id="brand_02"><label for="brand_02"><img src="img/brand_02.png"></label>
<input type="radio" name="brand" id="brand_03"><label for="brand_03"><img src="img/brand_03.png"></label>
<input type="radio" name="brand" id="brand_04"><label for="brand_04"><img src="img/brand_04.png"></label>
<p style="clear:both;"></p>
</div>

<div id="select">
<!--色選択エリア-->
<div id="color">
<input type="radio" name="color" id="color_00"><label for="color_00" class="title"><img src="img/tit-01.png"></label>
<input type="radio" name="color" id="color_01"><label for="color_01"><img src="img/btn-01-01.png"></label>
<input type="radio" name="color" id="color_02"><label for="color_02"><img src="img/btn-01-02.png"></label>
<input type="radio" name="color" id="color_03"><label for="color_03"><img src="img/btn-01-03.png"></label>
</div>

<!--機能選択エリア-->
<div id="spec">
<input type="checkbox" name="spec" id="spec_00"><label for="spec_00" class="title"><img src="img/tit-02.png"></label>
<input type="checkbox" name="spec" id="spec_01"><label for="spec_01"><img src="img/btn-02-01.png"></label>
<input type="checkbox" name="spec" id="spec_02"><label for="spec_02"><img src="img/btn-02-02.png"></label>
<input type="checkbox" name="spec" id="spec_03"><label for="spec_03"><img src="img/btn-02-03.png"></label>
</div>

<!--素材選択エリア-->
<div id="material">
<input type="radio" name="material" id="material_00"><label for="material_00" class="title"><img src="img/tit-03.png"></label>
<input type="radio" name="material" id="material_01"><label for="material_01"><img src="img/btn-03-01.png"></label>
<input type="radio" name="material" id="material_02"><label for="material_02"><img src="img/btn-03-02.png"></label>
<input type="radio" name="material" id="material_03"><label for="material_03"><img src="img/btn-03-03.png"></label>
</div>

<!--駆動方式選択エリア-->
<div id="movement">
<input type="radio" name="movement" id="movement_00"><label for="movement_00" class="title"><img src="img/tit-04.png"></label>
<input type="radio" name="movement" id="movement_01"><label for="movement_01"><img src="img/btn-04-01.png"></label>
<input type="radio" name="movement" id="movement_02"><label for="movement_02"><img src="img/btn-04-02.png"></label>
<input type="radio" name="movement" id="movement_03"><label for="movement_03"><img src="img/btn-04-03.png"></label>
</div>

<!--防水性能選択エリア-->
<div id="water">
<input type="radio" name="water" id="water_00"><label for="water_00" class="title"><img src="img/tit-05.png"></label>
<input type="radio" name="water" id="water_01"><label for="water_01"><img src="img/btn-05-01.png"></label>
<input type="radio" name="water" id="water_02"><label for="water_02"><img src="img/btn-05-02.png"></label>
<input type="radio" name="water" id="water_03"><label for="water_03"><img src="img/btn-05-03.png"></label>
</div>

<div id="freetext">
<input name="freetext" type="text" value="" placeholder="検索キーワード入力">
</div>

<div id="btn">
<input name="submit" type="image" src="img/search-btn.png" class="submit" onClick="document.charset='euc-jp';onDetailSearchForm()">
</div>

</div>
<input value="311213" type="hidden" name="sid"><!--店舗ID-->
<input value="float" type="hidden" name="su"><!--店舗URL-->
<input value="時計・雑貨FLOAT" type="hidden" name="sn"><!--店舗名-->
<input value="6" type="hidden" name="sv"><input value="A" type="hidden" name="f"><input type="hidden" value="3" name="v"/><input type="hidden" name="e" value="1"><input type=hidden value=0 name="h"><input name="sitem" id="sitem" type="hidden"><input type=hidden name="min"><input type=hidden name="max">
</form>

CSSソース

html {background-color:#fdfdfd;}
body {width:1000px;margin:0 auto;font-size:12px;padding-top:20px;}
h1 {clear:both;clear:both;height:40px;line-height:50px;font-size:18px;border-top:1px solid #ccc;margin-bottom:10px;font-weight:bold;}
h2 {clear:both;clear:both;height:40px;line-height:50px;font-size:16px;border-top:1px solid #ccc;margin-bottom:10px;}

p.text_area {
background-color:rgba(0, 91, 204, 0.28);
padding:20px;
margin:10px 0;
}
p.text_area span {
display:block;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
}

label {
	cursor:pointer;
}

/*ブランド選択エリア*/
input[name="brand"] {
	display:none;
}

input[name="brand"] + label {
	display:block;
	width:200px;
	height:60px;
	float:left;
}

input[name="brand"]:checked + label {
	background-color:#F03;
}

input[name="brand"]:checked + label img {
	opacity:0.5;
}

/*いろいろ選択エリア*/
#select {
	margin-top:10px;
	height:229px;
	background-color:#ccc;
}

#select div {
	float:left;
}

/*色選択エリア*/
input[name="color"] {
	display:none;
}

input[name="color"] + label {
	display:block;
	width:180px;
	height:30px;
	margin:0 auto 2px;
}

input[name="color"] + label.title {
	width:200px;
	height:40px;
	margin:0;
}

input[name="color"]:checked + label {
	background-color:#F03;
}

input[name="color"]:checked + label img {
	opacity:0.5;
}

/*機能選択エリア*/
input[name="spec"] {
	display:none;
}

input[name="spec"] + label {
	display:block;
	width:180px;
	height:30px;
	margin:0 auto 2px;
}

input[name="spec"] + label.title {
	width:200px;
	height:40px;
	margin:0;
}

input[name="spec"]:checked + label {
	background-color:#F03;
}

input[name="spec"]:checked + label img {
	opacity:0.5;
}

/*素材選択エリア*/
input[name="material"] {
	display:none;
}

input[name="material"] + label {
	display:block;
	width:180px;
	height:30px;
	margin:0 auto 2px;
}

input[name="material"] + label.title {
	width:200px;
	height:40px;
	margin:0;
}

input[name="material"]:checked + label {
	background-color:#F03;
}

input[name="material"]:checked + label img {
	opacity:0.5;
}

/*駆動方式選択エリア*/
input[name="movement"] {
	display:none;
}

input[name="movement"] + label {
	display:block;
	width:180px;
	height:30px;
	margin:0 auto 2px;
}

input[name="movement"] + label.title {
	width:200px;
	height:40px;
	margin:0;
}

input[name="movement"]:checked + label {
	background-color:#F03;
}

input[name="movement"]:checked + label img {
	opacity:0.5;
}

/*防水性能選択エリア*/
input[name="water"] {
	display:none;
}

input[name="water"] + label {
	display:block;
	width:180px;
	height:30px;
	margin:0 auto 2px;
}

input[name="water"] + label.title {
	width:200px;
	height:40px;
	margin:0;
}

input[name="water"]:checked + label {
	background-color:#F03;
}

input[name="water"]:checked + label img {
	opacity:0.5;
}

/*フリーキーワードエリア*/
#freetext {
	clear:both;
	margin-top:10px;
	padding:0 10px;
}

#freetext input {
	display:block;
	width:980px;
	height:30px;
	line-height:30px;
	text-indent:10px;
	border:none;
	background-color:#eee;
}

/*検索ボタン*/
#btn {
	clear:both;
	margin-top:5px;
	padding:0 10px;
}

div input:first-child + label {
	background-color:#ccc !important;
}

jsソース

//ブラウザ判定
lowver = false;
if(navigator.appVersion.indexOf("MAC")>=0 && brw.indexOf("NETSCAPE")>=0)
{
	var s = ver.indexOf(" ",0);
	if(eval(ver.substring(0,s))<4.5) lowver = true;
}

function getVal(obj){ return obj.options[obj.selectedIndex].value; }
function getTxt(obj){ return obj.options[obj.selectedIndex].text; }

function onDetailSearchForm() {

	//ブランド
	brand_00 = document.hogehoge.brand_00.checked;
	brand_01 = document.hogehoge.brand_01.checked;
	brand_02 = document.hogehoge.brand_02.checked;
	brand_03 = document.hogehoge.brand_03.checked;
	brand_04 = document.hogehoge.brand_04.checked;

	//カラー
	color_00 = document.hogehoge.color_00.checked;
	color_01 = document.hogehoge.color_01.checked;
	color_02 = document.hogehoge.color_02.checked;
	color_03 = document.hogehoge.color_03.checked;

	//スペック
	spec_00 = document.hogehoge.spec_00.checked;
	spec_01 = document.hogehoge.spec_01.checked;
	spec_02 = document.hogehoge.spec_02.checked;
	spec_03 = document.hogehoge.spec_03.checked;

	//素材
	material_00 = document.hogehoge.material_00.checked;
	material_01 = document.hogehoge.material_01.checked;
	material_02 = document.hogehoge.material_02.checked;
	material_03 = document.hogehoge.material_03.checked;

	//駆動方式
	movement_00 = document.hogehoge.movement_00.checked;
	movement_01 = document.hogehoge.movement_01.checked;
	movement_02 = document.hogehoge.movement_02.checked;
	movement_03 = document.hogehoge.movement_03.checked;

	//防水性能
	water_00 = document.hogehoge.water_00.checked;
	water_01 = document.hogehoge.water_01.checked;
	water_02 = document.hogehoge.water_02.checked;
	water_03 = document.hogehoge.water_03.checked;

}

function hogehogecheck(obj)
{
	//検索ボックス初期化
	obj.sitem.value = "";

	//フリーキーワード 定義
	if ( obj.freetext.value != "" ) {
		obj.sitem.value = obj.sitem.value + " " + obj.freetext.value + " ";
	}

	//ブランド
	if (brand_01 == true) {	
		obj.sitem.value += "オリエント ";
	} else if (brand_02 == true) {	
		obj.sitem.value += "ゲス ";
	} else if (brand_03 == true) {	
		obj.sitem.value += "ラミー ";
	} else if (brand_04 == true) {	
		obj.sitem.value += "パーカー ";
	} else {
		obj.sitem.value += "";
	}

	//カラー
	if (color_01 == true) {	
		obj.sitem.value += "レッド ";
	} else if (color_02 == true) {	
		obj.sitem.value += "ブルー ";
	} else if (color_03 == true) {	
		obj.sitem.value += "ブラック ";
	} else {
		obj.sitem.value += "";
	}

	//スペック
	if (spec_00 == true) {
		obj.sitem.value += "";
	}
	if (spec_01 == true) {
		obj.sitem.value += "電波 ";
	}
	if (spec_02 == true) {
		obj.sitem.value += "ソーラー ";
	}
	if (spec_03 == true) {
		obj.sitem.value += "クロノグラフ ";
	}

	//素材
	if (material_01 == true) {	
		obj.sitem.value += "ステンレス ";
	} else if (material_02 == true) {	
		obj.sitem.value += "レザー ";
	} else if (material_03 == true) {	
		obj.sitem.value += "シリコン ";
	} else {
		obj.sitem.value += "";
	}

	//駆動方式
	if (movement_01 == true) {	
		obj.sitem.value += "クォーツ ";
	} else if (movement_02 == true) {	
		obj.sitem.value += "自動巻 ";
	} else if (movement_03 == true) {	
		obj.sitem.value += "手巻 ";
	} else {
		obj.sitem.value += "";
	}

	//防水性能	
	if (water_01 == true) {	
		obj.sitem.value += "5気圧防水 ";
	} else if (water_02 == true) {	
		obj.sitem.value += "10気圧防水 ";
	} else if (water_03 == true) {	
		obj.sitem.value += "20気圧防水 ";
	} else {
		obj.sitem.value += "";
	}

	//腕時計検索
	if ( obj.sitem.value == "" ) {
		obj.sitem.value = obj.u.value + obj.sitem.value;
	}
	
	return true;
}

最後に

いかがでしたでしょうか。
店舗で取り扱っている商品に詳しいユーザーなら、ユーザー自身で検索して目的の商品にたどり着くことはできるかもしれません。
しかしそうでないユーザーにとってはどうでしょうか？
こちらから検索のヒントになるような選択式のフォームを用意することで、
よりユーザーの求める商品にたどり着きやすくすることができる、かもしれません。

ご自身の店舗に合わせた便利な検索フォームにチャレンジしてみてください。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

メタルギアソリッド楽しみ！！！

コピペ可能なサンプルたくさん！楽天検索ボックスのデザイン・カスタマイズ方法。

こちらの記事もどうぞ

ショップ運営でお悩みの方へ。

BILLIONPLAN JAPAN Co, Ltd

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
 10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan
兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Sponsored Link

この記事に関連する記事

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。

follow us in feedly
ビリオンプラン・ジャパン

ECカテゴリの最新記事

rakuten-class-id
楽天RMSのカスタマイズで使えるclass名の一覧。
EC
rakuten-site-design-kids10
注目のキッズファッション！楽天の参考デザインまとめ、子供服サイト10選。
EC
yahoo-cart-iframe-1
たったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
EC
rakuten-site-design-ladies16
レディース最強説！楽天の参考デザインまとめ、女性ファッションの素敵サイト16選。
EC
rakuten-cart-iframe-1
楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
EC
rakuten-global-market
海外販売の良事例！楽天グローバルマーケット参考ページ14選。
EC
yahoo-cart-custom-1
独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
EC
rakuten-trends-design2015
デザイン目線でSOY振り返り。2015年楽天ショップトレンドまとめ。
EC
yahoo-header-custom-01-1
デフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
EC