rakuten-free-template12
制作コスト削減！楽天で使える無料テンプレートやイラスト・写真素材12選。
EC
google-certifiedshops
じわじわ増えてる！Google認定ショップとは？気になるメリット・デメリット。
EC
ec-netshop-media17
ネットショップ運営のノウハウ学習や情報収集に役立つサイト17選。
EC
yahoo-full-screen-1
Yahoo!ストアでもフルスクリーン！ヤフーショッピングで商品ページをデザインする方法。
EC
rakuten-site-design-ladies16
レディース最強説！楽天の参考デザインまとめ、女性ファッションの素敵サイト16選。
EC
rakuten-free-tools6
賑わい演出や自動化も！無料で使える楽天・Yahoo!向け販促ツール・サービス6選。
EC

[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。

投稿日 by 217 shares

[2/2]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。

さて今回は先日の記事に引き続き、楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。の第二弾となっております！

前回の内容と合わせて実践していただけると、ボリューミーなトップページを簡単に作成できます！
またご紹介するすべてのサンプルコンテンツを実装すると、最終的には以下のデザインが実現できます。
サンプルページ

Sponsored Link

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

ぜぇれさんのハンターランクはただいま2です。
ランスのストライカースタイルでうっほうっほやってます。

モンスターハンタークロス (【数量限定特典】「ニンテンドー3DSオリジナルテーマ(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]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
よくある、ありきたりなコンテンツかも知れません。
多くの店舗がトップページだから、という理由で何となく設置していることも多いかと思います。
しかし綺麗なグラフィックや目を引くキャッチコピーの力は偉大です。そこをしっかりと意識して、よりユーザーに強く商品を訴求することを目指しましょう！

サンプルページ

まず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]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
店舗によって目的は異なるでしょうが、販売に力を入れているブランドを露出したい、店舗の信頼感醸成のため有名ブランドを露出したい、そんなときにはシンプルにブランドロゴを並べちゃいましょう！

サンプルページ

まず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]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
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]楽天トップページを簡単デザイン！コンテンツ部分のテンプレートを作ってみました。
最後は今までにご紹介したコンテンツをすべて掲載したサンプルです。
ソースが長いので、ファイルをダウンロードしてコードを直接確認してみてください。

サンプルページ

HTML、CSS、画像の一括ダウンロードはこちらから。
Download

最後に

いかがでしたでしょうか。
ご紹介させていただいたサンプルはどれも、至って平凡で基本的なコンテンツばかりかもしれません。
けれどそういった基本的なコンテンツが、どういう目的で、どういうユーザーを想定しているかをしっかり考えることで、自店舗にあったトップページのコンテンツはなんなのか、ということがようやく見えてくるのではと思います。

拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれば幸いです。
ララバイ！！

コピペでOK！楽天フッターのテンプレートを作ってみました。ほぼ画像不使用で簡単実装！

こちらの記事もどうぞ

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

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