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

前回の記事にて楽天検索ボックスの設置方法をお伝えしました、
しかしデフォルトのデザインのままではいささか味気ないですよね。
楽天デフォルトの検索ボックス

1. 楽天へ簡単に実装できるシンプルな検索ボックスデザイン

1-1. ボーダーを適用したシンプルなスタイル

まずは一つ目のサンプルボーダーを適用したシンプルなスタイルをご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。

<div id="sample">

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">

<input value="6" type="hidden" name="sv">
<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="A" type="hidden" name="f">
<input type="text" name="sitem" class="text" placeholder="テキスト入れるよ"><!--検索キーワード-->

<input value="検索" type="submit" class="btn"><!--検索ボタン-->

</form>

</div>

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:168px;
 height:30px;
 border:5px solid #CCC;
 text-indent:10px;
}
#sample .btn {
 height:40px;
 border:5px solid #CCC;
 width:40px;
}

コメント
多くの店舗が実装しているシンプルな検索ボックスに対して、太めのボーダーを加え単色を用いたフラットデザインとしてまとめています。簡単なCSSで実現しているので「ネットショップはじめました！」というような方でも簡単に実装できます。

1-2. 角丸で柔らかく

続いて二つ目のサンプル角丸で柔らかくをご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
HTMLは先ほどと同様です。
CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:168px;
 height:30px;
 border:5px solid #CCC;
 border-radius:20px;
 text-indent:10px;
}
#sample .btn {
 height:40px;
 border:5px solid #CCC;
 width:40px;
 border-radius:20px;
}

コメント
多くの店舗が実装しているシンプルな検索ボックスに対して、太めのボーダーを加え単色を用いたフラットデザインとしてまとめています。さらに[border-radius]で丸みを持たせて柔らかな印象に。店舗に合った検索ボックスがいいですよね。色などもCSSで簡単に変更できます。

1-3. マージンを微調整して一体感を

続いて三つ目のサンプルマージンを微調整して一体感ををご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
HTMLは先ほどと同様です。
CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:176px;
 height:30px;
 border:5px solid #CCC;
 text-indent:10px;
}
#sample .btn {
 height:40px;
 border:5px solid #CCC;
 width:40px;
 margin-left:-9px;
}

コメント
フォームで使用される[input]要素はデフォルトのままではマージンが開いてしまいます。そのマージンを微調整することで一体感のある検索ボックスに仕上げています。簡単なCSSを追加するだけで実装可能です。

1-4. マージンを微調整して一体感を＋角丸

続いて四つ目のサンプルマージンを微調整して一体感を＋角丸をご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
HTMLは先ほどと同様です。
CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:212px;
 height:30px;
 border:5px solid #CCC;
 border-radius:20px;
 text-indent:10px;
}
#sample .btn {
 height:40px;
 border:5px solid #CCC;
 width:40px;
 border-radius:20px;
 margin-left:-44px;
}

コメント
フォームで使用される[input]要素はデフォルトのままではマージンが開いてしまいます。そのマージンを微調整することで一体感のある検索ボックスに仕上げています。簡単なCSSを追加するだけで実装可能です。角丸を加えています。

1-5. テキストボックス内にボタンを入れる

続いて五つ目のサンプルテキストボックス内にボタンを入れるをご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
HTMLは先ほどと同様です。
CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:212px;
 height:30px;
 border:5px solid #CCC;
 text-indent:10px;
}
#sample .btn {
 background-color:rgba(0,0,0,0);
 height:40px;
 width:40px;
 border:none;
 margin-left:-47px;
}

コメント
マージンの微調整でテキストボックス内に検索ボタンを収納することも可能です。ボタンの背景色を透明にすることで、検索ボックス内に検索ボタンを入れたようなデザインとなっています。

1-6. テキストボックス内にボタンを入れる＋角丸

続いて六つ目のサンプルテキストボックス内にボタンを入れる＋角丸をご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
HTMLは先ほどと同様です。
CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 width:212px;
 height:30px;
 border:5px solid #CCC;
 border-radius:20px;
 text-indent:10px;
}
#sample .btn {
 background-color:rgba(0,0,0,0);
 height:40px;
 width:40px;
 border:none;
 margin-left:-50px;
}

コメント
マージンの微調整でテキストボックス内に検索ボタンを収納することも可能です。ボタンの背景色を透明にすることで、検索ボックス内に検索ボタンを入れたようなデザインとなっています。角丸を加えています。

1-7. 検索ボタンを画像化

続いて七つ目のサンプル検索ボタンを画像化をご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
ボタンを画像化した際に妙なマージンが発生してレイアウトが崩れてしまうので、少しソースコードを変更します。

<div id="sample">
<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">

<input value="6" type="hidden" name="sv">
<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="A" type="hidden" name="f">
<input type="text" name="sitem" class="text" placeholder="テキスト入れるよ"><!--検索キーワード-->

<input value="検索" type="image" src="btn01.png" class="btn" alt="検索"><!--検索ボタン-->
<p style="clear:both;"></p>
</form>

</div>

CSSは以下になります、少しスタイルを追加しただけです。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 float:left;
 width:212px;
 height:30px;
 border:5px solid #CCC;
 text-indent:10px;
 margin-right:5px;
}
#sample .btn {
 float:left;
}

コメント
検索ボタンを画像化しました。よりデザインに力を入れたい方にお勧めです。といっても初歩的な技術で実現できますので、デザインに欲張りな楽天初心者でも簡単に実装できます。

1-8. 検索ボタンを画像化＋角丸

続いて八つ目のサンプル検索ボタンを画像化＋角丸をご覧ください。
このデザインを実装してみましょう。
以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してください。
ソースコードは先ほどの検索ボタンを画像化と同じものになります。

#sample {
 padding:10px;
 margin-bottom:10px;
}
#sample .text {
 float:left;
 width:212px;
 height:30px;
 border:5px solid #CCC;
 border-radius:20px;
 text-indent:10px;
 margin-right:5px;
}
#sample .btn {
 float:left;
}

コメント
検索ボタンを画像化しました。よりデザインに力を入れたい方にお勧めです。といっても初歩的な技術で実現できますので、デザインに欲張りな楽天初心者でも簡単に実装できます。丸みを持たせたデザインです、店舗に合ったイメージの検索ボックスにしたいですね。

2. 楽天の検索機能を最大限に活用する

項目を追加してユーザビリティを向上させる

さてさて最後になりますが、楽天で実装されている機能をすべて使ったうえでデザインを追加してみましょう。
サンプルの項目を追加してユーザビリティを向上させるをご覧ください。

以下のソースコードとCSSで実装できますのでGOLD内のHTMLに設置してみましょう

<div id="sample2_1">

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">

<input value="6" type="hidden" name="sv">
<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="A" type="hidden" name="f">

<input type="text" name="sitem" placeholder="検索キーワード入力" class="text1"><!--検索キーワード-->

<select name="st" class="select1">
<option selected="selected" value="A">をすべて含む</option>
<option value="O">のいずれかを含む</option>
</select><!--and or検索指定-->

<input name="nitem" type="text" placeholder="除外キーワード入力" class="text2"><!--除外キーワード-->

<input name="min" type="text" placeholder="価格範囲指定" class="text3"><span>～</span><input name="max" type="text" placeholder="価格範囲指定" class="text4"><!--価格指定-->

<select name="s" class="select2">
<option value="1">標準</option>
<option value="2" selected="">価格の安い順</option>
<option value="3">価格の高い順</option>
<option value="4">感想が多い順</option>
</select><!--検索結果の並び順-->

<input value="検索" type="image" src="btn03.png" class="btn" alt="検索"><!--検索ボタン-->
<p style="clear:both;">

</form>

</div>

#sample2_1 {
 padding:10px;
 margin-bottom:10px;
}
#sample2_1 .text {
 float:left;
 width:212px;
 height:30px;
 border:5px solid #CCC;
 border-radius:20px;
 text-indent:10px;
 margin-right:5px;

}
#sample2_1 .btn {
 float:left;
}

#sample2_1 input {
 float:left;
 height:30px;
 border:5px solid #CCC;
 text-indent:10px;
 margin-right:5px;
}
#sample2_1 select {
 float:left;
 height:40px;
 border:5px solid #CCC;
 text-indent:10px;
 margin-right:5px;
 background-color:#ccc;
 color:#fff;
}
#sample2_1 .text1 {
 width:210px;
}
#sample2_1 .text2 {
 width:140px;
}
#sample2_1 .text3 {
 margin-right:0;
 width:90px;
}
#sample2_1 .text4 {
 width:90px;
}
#sample2_1 .select1 {
 width:120px;
 text-indent:5px;
}
#sample2_1 .select2{
 width:120px;
 text-indent:5px;
}
#sample2_1 .text3 + span{
 display:block;
 width:30px;
 height:40px;
 line-height:40px;
 text-align:center;
 float:left;
}
#sample2_1 .btn {
 margin-right:0;
 width:115px;
 height:40px;
 float:left;
 border:none;
}

コメント
CSSちょっと長くなっちゃいました。
楽天で用意されている検索項目を活用した形になります。ユーザーにより細かく指定をしていただき、目的の商品に辿りやすくする仕様になっています。各店舗の幅に合わせて調整するために要素要素にクラスを付与し、幅の調整を行っています。それゆえにCSSが長い！でも適用しているスタイル自体は初歩的なものなので読んで理解できる内容だと思います。

最後に

いかがでしたでしょうか。
今回はあまりごてごてしたデザインにはせずシンプルなデザインとしています。

カラーや文字サイズ、ボーダーの太さや色などの変更も容易ですので簡単にカスタマイズが可能です。
また[box-shadow]や[gradient]などのCSSを追加することで、シャドウやグラデーションなど、
より豊かなデザインも容易に加えることができるでしょう。

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

ボンフェスティバル！

今さら聞けない、楽天検索ボックスの設置・カスタマイズ方法。

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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