![[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/12/rakuten-template-top-2-1.jpg)
さて今回は先日の記事に引き続き、楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。の第二弾となっております！
- [1/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
- [2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
前回の内容と合わせて実践していただけると、ボリューミーなトップページを簡単に作成できます！
またご紹介するすべてのサンプルコンテンツを実装すると、最終的には以下のデザインが実現できます。
サンプルページ
Sponsored Link
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
ぜぇれさんのハンターランクはただいま2です。
ランスのストライカースタイルでうっほうっほやってます。
さて今回は楽天ショップの「トップページ、コンテンツ部分のテンプレート」を作成してみました、の後編でございます。店舗をオープン、またはリニューアルしたいけれども…、デザインとかはちょっと苦手だな…という方の助けになればとてもとても幸いに思います。
楽天ショップのトップページに求められることってなんだろう、みたいなことは前回の記事にて書かせてもらったので、あわせて読んでもらえるとうれしいです！
※一言
楽天GOLD(無料)と契約している必要があります。
すべてに共通してリセットCSSを使用しています。
こちらのCSSを使用してください。
@charset "utf-8";
/* CSS Document */
/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
それではやってみましょう。
1. 特に見てもらいたい商品をバナーで訴求
![[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/12/rakuten-template-top-2-2.jpg)
よくある、ありきたりなコンテンツかも知れません。
多くの店舗がトップページだから、という理由で何となく設置していることも多いかと思います。
しかし綺麗なグラフィックや目を引くキャッチコピーの力は偉大です。そこをしっかりと意識して、よりユーザーに強く商品を訴求することを目指しましょう！
まずHTMLがこちら。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天トップページコンテンツ</title> <link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="common/css/top_contents_04.css" type="text/css" media="all"> <script src="common/js/jquery-1.10.2.min.js"></script> <script src="common/js/img_fade.js"></script> </head> <body> <div id="top_contents"> <!-- ここからバナーエリア --> <div id="bnrs"> <h1><img src="img/tit_04.png"></h1> <ul> <li><a href="#" target="_top"><img src="img/bnr_dami_01.jpg"></a></li> <li><a href="#" target="_top"><img src="img/bnr_dami_02.jpg"></a></li> <li><a href="#" target="_top"><img src="img/bnr_dami_03.jpg"></a></li> <li><a href="#" target="_top"><img src="img/bnr_dami_04.jpg"></a></li> <li><a href="#" target="_top"><img src="img/bnr_dami_05.jpg"></a></li> <li><a href="#" target="_top"><img src="img/bnr_dami_06.jpg"></a></li> </ul> </div> </div> </body> </html>
続いて7行目で読み込ませている「top_contents_04.css」がこちら
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family: Century Gothic, Arial;
}
h1 {
line-height:0;
margin-bottom:20px;
}
/*バナーエリア*/
#bnrs {
width:1000px;
}
#bnrs li {
float:left;
margin:0 20px 20px 0;
}
#bnrs li:nth-child(2n+0) {
margin-right:0;
}
#bnrs li:last-child {
margin-bottom:30px;
}
以上でこちらの形が実装できます！
設置するバナーのサイズや量などは、店舗ごとの商品量や目的で調節し、ユーザーが疲れることを避けるよう意識するとよいと思います。
HTML、CSS、画像の一括ダウンロードはこちらから。
Download
2. お勧めしたいブランドをロゴ付きで紹介
![[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/12/rakuten-template-top-2-3.jpg)
店舗によって目的は異なるでしょうが、販売に力を入れているブランドを露出したい、店舗の信頼感醸成のため有名ブランドを露出したい、そんなときにはシンプルにブランドロゴを並べちゃいましょう！
まずHTMLがこちら。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天トップページコンテンツ</title> <link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="common/css/top_contents_05.css" type="text/css" media="all"> <script src="common/js/jquery-1.10.2.min.js"></script> <script src="common/js/img_fade.js"></script> </head> <body> <div id="top_contents"> <!-- ここからブランドロゴエリア --> <div id="logos"> <h1><img src="img/tit_05.png"></h1> <ul> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> <li><a href="#" target="_top"><img src="img/logo_dami.png"></a></li> </ul> </div> </div> </body> </html>
続いて7行目で読み込ませている「top_contents_05.css」がこちら
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family: Century Gothic, Arial;
}
h1 {
line-height:0;
margin-bottom:20px;
}
/*ブランドロゴエリア*/
#logos ul {
width:1000px;
padding:30px;
}
#logos li {
float:left;
margin:0 20px 20px 0;
}
#logos li:nth-child(8n+0) {
margin-right:0;
}
#logos li:last-child {
margin-bottom:40px;
}
以上でこちらの形が実装できます！
ブランドロゴはそのブランドの顔です。認知度の高いロゴを並べると「あ！このブランドもあるなら見てみよう」なんていうフックにもなります！
HTML、CSS、画像の一括ダウンロードはこちらから。
Download
3. SEO的なものも若干意識しつつ、ブランド一覧を掲載
![[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/12/rakuten-template-top-2-4.jpg)
SEOを意識というとちょっと大げさですが…。
自店舗の取り扱いブランドの量なんかと相談しつつ、見せられるものはすべて見せちゃいましょう！
サンプルページ
まずHTMLがこちら。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天トップページコンテンツ</title> <link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="common/css/top_contents_all.css" type="text/css" media="all"> <script src="common/js/jquery-1.10.2.min.js"></script> <script src="common/js/img_fade.js"></script> </head> <body> <div id="top_contents"> <!-- ここからブランドインデックスエリア --> <div id="brands"> <h1><img src="img/tit_06.png"></h1> <div id="wrapp"> <div class="float"> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> </div> <div class="float"> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> </div> <div class="float"> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> <a href="#">ブランド名ブランド名ブランド名<br><span>brand name brand name</span></a> </div> <br style="clear:both;"> </div> </div> </div> </body> </html>
続いて7行目で読み込ませている「top_contents_06.css」がこちら。
@charset "utf-8";
/* CSS Document */
html {
height:100%;
font-family: Century Gothic, Arial;
}
h1 {
line-height:0;
margin-bottom:20px;
}
/*ブランドエリア*/
#brands #wrapp {
width:900px;
padding:50px;
border-radius:4px;
background-color:#f7f7f1;
}
#brands .float {
width:300px;
float:left;
}
#brands .float a {
display:block;
text-decoration:none;
width:280px;
height:35px;
margin:0 auto;
padding-top:14px;
line-height:12px;
border-bottom:1px solid #ccc;
text-align:center;
font-size:12px;
color:#333;
/* アニメーションさせたいプロパティを指定しています */
-webkit-transition: border-bottom 0.2s ease-out;
-moz-transition: border-bottom 0.2s ease-out;
-ms-transition: border-bottom 0.2s ease-out;
transition: border-bottom 0.2s ease-out;
}
#brands .float a:hover {
border-bottom:5px solid #ccc;
font-weight:bold;
}
#brands .float a span {
font-size:10px;
font-weight:bold;
}
以上でこちらの形が実装できます！
このエリアはすべてテキストで実現しています！
シンプルなアニメーションも簡単なCSSで付与しています。
HTML、CSS、画像の一括ダウンロードはこちらから。
Download
4. [番外編]今まで紹介したもの一気に実装！
![[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/12/rakuten-template-top-2-5.jpg)
最後は今までにご紹介したコンテンツをすべて掲載したサンプルです。
ソースが長いので、ファイルをダウンロードしてコードを直接確認してみてください。
HTML、CSS、画像の一括ダウンロードはこちらから。
Download
最後に
いかがでしたでしょうか。
ご紹介させていただいたサンプルはどれも、至って平凡で基本的なコンテンツばかりかもしれません。
けれどそういった基本的なコンテンツが、どういう目的で、どういうユーザーを想定しているかをしっかり考えることで、自店舗にあったトップページのコンテンツはなんなのか、ということがようやく見えてくるのではと思います。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれば幸いです。
ララバイ！！
- [1/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
- [2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
コピペでOK！楽天フッターのテンプレートを作ってみました。ほぼ画像不使用で簡単実装！
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
[1/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
ネットショップ運営のノウハウ学習や情報収集に役立つサイト17選。![[1/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。](http://www.billionplan.com/wp/wp-content/uploads/2015/11/rakuten-template-top-1-1-150x150.jpg)
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
