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

[1/2]コピペでOK！楽天トップページコンテンツのテンプレートを作ってみました。前編

今回は楽天サイトを一から作る際の足掛かりとして利用できる、
楽天ショップトップページコンテンツのテンプレートを作ってみました。
ほぼ画像を使用していないのでコピペだけで実装できます。

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

後編の記事と合わせ、最終的にはこのような形のデザインが実現できるテンプレートの作成方法＆配布までお伝えしようと思います。

1. 楽天におけるトップページの役割とは

僕の持論でしかありませんが、テンプレートを作成するにあたって前提となっている部分を説明します。

そもそもトップページは必ず見られるものではない

皆さん楽天で商品を買うときどうしますか？そうなんです検索なんですよ。
検索すると行き着く先ってどこですか？そうなんですよ商品ページなんです。

ということは、トップページは楽天においては入り口ではない。

それでもヘッダーなどのロゴやパンクズを辿って、トップページに来てくれるユーザーはいったい何を求めているのか…？
ここを考えずにトップページのデザインはできません。

可能性のお話し

店舗に興味を持った
店舗で扱っている商材のジャンルが求めているものだった
購入を検討しているためご利用案内などの情報を探している
何を買うか決めかねている、いろいろ見てみたい

というようなことが想定できると思います。

①②のユーザーは明らかな潜在顧客、逃す手はありません。
③④のユーザーも自店舗のおすすめ商品、利益率の高い魅力的なアイテムをおすすめして何の損もないでしょう。

というようなことを踏まえてコンテンツを作ってみました。

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_01.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="ranking">
<h1><img src="img/tit_01.png"></h1>
<ul>
<li>
<a href="#" target="_top">
<div class="circle">1</div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1119-1.jpg?_ex=150x150">
<p class="name">ゲス GUESS リガー RIGOR W0247G3</p>
<p class="price">999,999<span>円</span></p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="circle">2</div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1119-1.jpg?_ex=150x150">
<p class="name">ゲス GUESS リガー RIGOR W0247G3</p>
<p class="price">999,999<span>円</span></p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="circle">3</div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1119-1.jpg?_ex=150x150">
<p class="name">ゲス GUESS リガー RIGOR W0247G3</p>
<p class="price">999,999<span>円</span></p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="circle">4</div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1119-1.jpg?_ex=150x150">
<p class="name">ゲス GUESS リガー RIGOR W0247G3</p>
<p class="price">999,999<span>円</span></p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="circle">5</div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1119-1.jpg?_ex=150x150">
<p class="name">ゲス GUESS リガー RIGOR W0247G3</p>
<p class="price">999,999<span>円</span></p>
</a>
</li>
</ul>
</div>

</div>
</body>
</html>

続いて7行目で読み込ませている「top_contents_01.css」がこちら

@charset "utf-8";
/* CSS Document */

html {
	height:100%;
	font-family: Century Gothic, Arial;
}

h1 {
	line-height:0;
	margin-bottom:20px;
}

/*ランキングエリア*/
#ranking li {
	width:182px;
	height:228px;
	border:1px solid #ededed;
	float:left;
	margin:0 20px 30px 0;
	
}

#ranking li:last-child {
	margin-right:0;
}

#ranking li a {
	display:block;
	text-decoration:none;
	text-align:center;
}

#ranking li a .circle {
	width:25px;
	height:25px;
	border-radius:13px;
	background-color:#e8e8e8;
	font-size:12px;
	color:#000;
	text-align:center;
	line-height:25px;
	font-weight:bold;
	font-style: italic;
	position:relative;
	top:10px;
	left:10px;
	z-index:9999;
}

#ranking li a img {
	display:block;
	position:relative;
	width:150px;
	margin:0 auto;
	top:-16px;
}

#ranking li a .name {
	font-size:10px;
	color:#333;
}

#ranking li a .price {
	font-size:22px;
	color:#c00;
	font-weight:bold;
}

#ranking li a .price span {
	font-size:14px;
}

以上でこちらの形が実装できます！
幅は1000pxを想定しています。昨今の解像度のシェア率的には問題ない幅です。
商品画像は楽天の商品サムネイルのURLを流用しているので更新も楽々ですよ！

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

3. 新しいものには目がない！新着商品コンテンツのテンプレート

あたらしい物好きというのは一定数以上いるものです。
とくに欲しい商品はコレ！と決めきっているユーザーでなければ良いフックになると思われます。
サンプルはこんな感じ。

まずは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_02.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>

<style>

</style>

</head>
<body>
<div id="top_contents">

<!-- ここから新着商品エリア -->
<div id="new_items">
<h1><img src="img/tit_02.png"></h1>
<ul>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_new.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1693-1.jpg?_ex=170x170">
</a>
</li>
</ul>
</div>

</div>
</body>
</html>

続いて7行目で読み込ませている「top_contents_02.css」がこちら

@charset "utf-8";
/* CSS Document */

html {
	height:100%;
	font-family: Century Gothic, Arial;
}

h1 {
	line-height:0;
	margin-bottom:20px;
}

/*新着商品エリア*/
#new_items li {
	width:80px;
	height:188px;
	border:1px solid #ededed;
	float:left;
	margin:0 20px 30px 0;
	overflow:hidden;
	
}

#new_items li:last-child {
	margin-right:0;
}

#new_items li a {
	display:block;
	text-decoration:none;
	text-align:center;
}

#new_items li a .ico {
	width:25px;
	height:25px;
	position:relative;
	top:10px;
	left:10px;
	z-index:9999;
}

#new_items li a .ico + img {
	display:block;
	position:relative;
	top:-16px;
	left:-10px;
	
	 /* アニメーションさせたいプロパティを指定しています */
	-webkit-transition: left 0.5s ease-out;
	-moz-transition: left 0.5s ease-out;
	-ms-transition: left 0.5s ease-out;
	transition: left 0.5s ease-out;
}

#new_items li a .ico + img:hover {
	left:-30px;
}

以上でこちらの形が実装できます！
こちらも商品サムネイルのURLを駆使して、ホバーでアニメーションするようにしています。
シンプルな構成にしているの更新も楽々です。

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

4. 人間味をプラスオン！スタッフの視点で商品を紹介

人の温度を感じにくいネットショップだからこそ、こういうコンテンツが生きてくる！
あくまでスタッフの個人的な目線でも、手に取ることのできない商品をより深く伝えることができるはず！
サンプルはこんな感じ。

まずは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_03.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="staff_recommend">
<h1><img src="img/tit_03.png"></h1>
<ul>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_staff_01.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1740-1.jpg?_ex=190x190">
<p>スタッフウサギがおすすめする○○！<br>
可愛すぎる○○なところや○○な部分は必携の価値？！<br>
わたしは○○なファッションに合わせてドコソコに出かける<br>
時なんかは迷わずこれを選んでます！<br>
彼氏募集中です！宜しくお願いします☆</p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_staff_02.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1740-1.jpg?_ex=190x190">
<p>こんにちは、犬です。<br>
犬目線で見てもやはりしびれるこのアイテム。<br>
魅力的なフォルム、漂ういい香り。<br>
そしてかみしめるほどにじみ出る旨味。<br>
これは止められませんわ。</p>
</a>
</li>
<li>
<a href="#" target="_top">
<div class="ico"><img src="img/ico_staff_03.png"></div>
<img src="http://thumbnail.image.rakuten.co.jp/@0_mall/float/cabinet/img1001-2000-1/1740-1.jpg?_ex=190x190">
<p>コンニチハ、ジェイミーデス！<br>
カナダからやってきましタ！<br>
ジェイミー最近悩みがあるデスネ。<br>
とっても困っていマスヨ？ねぇ、そうでしょ？<br>
ジェイミーこんなに困ってる！なんで？！</p>
</a>
</li>
</ul>
</div>

</div>
</body>
</html>

続いて7行目で読み込ませている「top_contents_03.css」がこちら

@charset "utf-8";
/* CSS Document */

html {
	height:100%;
	font-family: Century Gothic, Arial;
}

h1 {
	line-height:0;
	margin-bottom:20px;
}

/*スタッフレコメンドエリア*/
#staff_recommend li {
	width:318px;
	height:348px;
	border:1px solid #ededed;
	border-radius:4px;
	float:left;
	margin:0 20px 30px 0;
	
}

#staff_recommend li:last-child {
	margin-right:0;
}

#staff_recommend li a {
	display:block;
	text-decoration:none;
	text-align:center;
}

#staff_recommend li a .ico {
	width:73px;
	height:75px;
	position:relative;
	top:20px;
	left:20px;
	z-index:9999;
}

#staff_recommend li a .ico + img {
	display:block;
	position:relative;
	top:-56px;
	width:170px;
	margin:0 auto;
	
	 /* アニメーションさせたいプロパティを指定しています */
	-webkit-transition: width 0.5s ease-out;
	-moz-transition: width 0.5s ease-out;
	-ms-transition: width 0.5s ease-out;
	transition: width 0.5s ease-out;
}

#staff_recommend li a .ico + img:hover {
	width:190px;
}

#staff_recommend li a p {
	margin-top:-40px;
	font-size:10px;
	line-height:22px;
	color:#333;
}

以上でこちらの形が実装できます！
勿論商品画像は商品ページのサムネイルと同じURLです。
画像もスタッフのアイコンだけなのでコピペで簡単に実装できますよ。

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

最後に

いかがでしたでしょうか。
トップページは店舗の顔です、でも必ず見られるものではないのが惜しいところ。
それゆえにトップページに訪れるユーザーの目的は何なのか…
その所をしっかりと考えたうえで見せるべき商品、見せるべきコンテンツを考えてゆくのが大切ですよね！
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ！！

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

楽天サイトでフルスクリーン商品ページをつくる！背景画像を使ったデザインの方法。

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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