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

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

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

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

Sponsored Link

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

いよいよモンスターハンタークロスが発売されるわけなんですよ。ほんとに楽しみすぎるんですよぉ~!

さて!今回は、楽天ショップのトップページ「コンテンツ部分のテンプレート」を作成してみました。
店舗をオープン、またはリニューアルしたいけども…デザインとかはちょっと苦手だな…
という方の助けになれればとてもとても幸いにと思います。へへ。

というわけでトップページに求められているものを考えて作っていってみましょう。

※一言
楽天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. 楽天におけるトップページの役割とは

[1/2]コピペでOK!楽天トップページコンテンツのテンプレートを作ってみました。前編
僕の持論でしかありませんが、テンプレートを作成するにあたって前提となっている部分を説明します。

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

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

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

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

可能性のお話し

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

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

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

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

2. 売れてるものが好き!ランキングコンテンツのテンプレート

[1/2]コピペでOK!楽天トップページコンテンツのテンプレートを作ってみました。前編
ユーザーってランキング大好きなんですよね。
皆が使ってるからほしくなるというか、
売れているから安心できるというか、
売れているものには理由があるということを何となく理解しているというか…
ということでサンプルはこんな感じ。

まずは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. 新しいものには目がない!新着商品コンテンツのテンプレート

[1/2]コピペでOK!楽天トップページコンテンツのテンプレートを作ってみました。前編
あたらしい物好きというのは一定数以上いるものです。
とくに欲しい商品はコレ!と決めきっているユーザーでなければ良いフックになると思われます。
サンプルはこんな感じ。

まずは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. 人間味をプラスオン!スタッフの視点で商品を紹介

[1/2]コピペでOK!楽天トップページコンテンツのテンプレートを作ってみました。前編
人の温度を感じにくいネットショップだからこそ、こういうコンテンツが生きてくる!
あくまでスタッフの個人的な目線でも、手に取ることのできない商品をより深く伝えることができるはず!
サンプルはこんな感じ。

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

最後に

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

そうそうここのところ、以前ご紹介したようなフルスクリーンの商品ページに関するお問い合わせを多くいただきます。同様のページも楽天ショップではよく見かけますね!楽天モール内でもトレンドになってきてるんでしょうか…

通常の商品ページの作り込みや店舗のデザインなど受け付けておりますので、お気軽にご相談ください!
ララバイ!!

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

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

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

4 Comments(Trackback)

杉野

いつもお世話になっております。
大変参考になりました。
1つ質問ですが、楽天にこちらのテンプレートを実装すると、検索窓に漢字を検索するとき文字化けになりました。
どう直せばよろしいでしょうか?
どうぞよろしくお願いいたします。

Reply
ぜぇれさん

杉野さん
コメントありがとうございます。

これは確認不足でした。
検索窓の<form>が含まれるHTMLの文字コード変更する必要があります。
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<meta http-equiv=”Content-Type” content=”text/html; charset=EUC-JP”>
このように変更して確認してみてください!

Reply
杉野

ご返事ありがとうございます。
解決しました( ´∀` )、ありがとうございました!

Reply
ぜぇれさん

いぇいぇ、お役に立てて光栄です。
弊社サイトのリニューアルや商品ページの作り込みなども承っております!
お困りごとがありましたら是非ご相談ください!

Reply

コメントを残す

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