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

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

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです
お盆ということでお休みの方も多いのではないでしょうか。Bon vacationですね。

さてさて今回も検索ボックスですよ。
楽天における検索ボックスの簡単なデザイン方法をご紹介してゆきます。
まぁデザインといってもシンプルなCSSで簡単に実装できます、
その後のカスタマイズを皆さんでチャレンジしてみてください!

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

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

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を追加することで、シャドウやグラデーションなど、
より豊かなデザインも容易に加えることができるでしょう。

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

ボンフェスティバル!

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

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

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

follow us in feedly

1 Comment(Trackback)

MA2

「1-4. マージンを微調整して一体感を+角丸」を利用させていただいております。
検索ボックスの幅を超える文字数を入力した際、カーソルが文末に行かず、最後の文字が見えなくなってしまいます。
何か対処方法はありますでしょうか?

Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です