楽天Goldでスマホページを作成する方法

アイブレイン（株）
楽天 Gold で作る、
スマートフォンページ

□ 自由度が高く、アプリのようなことができる
使用できる HTML の制限がなくなるので、アニメーションをつけたりいろい
ろなことが実現できる。
（例）
PATY さん
http://www.rakuten.ne.jp/gold/paty/sp/mtop.html
でらでらさん
http://www.rakuten.ne.jp/gold/deradera/sp/index.html
□ 一覧性が高くなる
スーパーセール用のページなど、商品を並べるときには RMS のカテゴリより
も楽天 Gold で作るほうが見やすくなる。
□ 検証ができる
Google Analytics をいれれば、どのような環境の人が多いか、どのような URL
から来ている人が多いかなど、チェックできる情報量が増えるので仮説→検証
という流れが実現できる。
楽天 Gold でスマホサイトをるメリット作楽天 Gold でスマホサイトをるメリット作

ここから実際の入力編
テンプレートはこちら
http://www.eye-brain.jp/sys/smp/sample.html

<!DOCTYPE HTML>
<html>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width,user-scalable=yes,maximum-
scale=3" />
HTML ヘッダの設定（ 1 スマホのお）特有約束HTML ヘッダの設定（ 1 スマホのお）特有約束
文字コード
は
UTF-8 推奨
スマホで設定が必要な部分。上記の記載で、ページの横幅をスマホの画面サイズに
合わせる。
また、画面の拡大をできるようにしている。
※user-scalable=no にすると画面拡大ができなくなるので、ユーザビリティ上避けた
ほうがいい。参考→ http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/
<meta name="format-detection" content="telephone=no">
スマホではバーコードなどの数字を勝手に電話番号と認識してしまうことがあるの
で、
この 1 行で解除。

HTML ヘッダの設定（ 2 ） Facebook 対応HTML ヘッダの設定（ 2 ） Facebook 対応
スマホだけでなく PC でも絶対やった方がいい、 Facebook 対応
□ Facebook 対応していないサイトを、 Facebook に投稿した場合、画像が
意味不明になる。
http://www.yamabukiiro.com/sodemame.html
□Facebook 対応しているサイトを、 Facebook に投稿した場合
http://item.rakuten.co.jp/mix/c/0000000173/

※ でらでらさんの例
<meta property="og:title" content=" フィナモレ - Finamore 【楽天】インポートセレクトショップでらで
らシャツ " />
<meta property="og:type" content="article" />
<meta property="og:image" content="http://image.rakuten.co.jp/deradera/cabinet/shirt/080103-01-sergio.jpg" />
<meta property="og:description" content=" フィナモレ - Finamore 【楽天】インポートセレクトショップ
でらでらシャツ " />
HTML ヘッダの設定（ 2 ） Facebook 対応HTML ヘッダの設定（ 2 ） Facebook 対応
meta property=“og:title” の部分で Facebook に投稿した時のタイトルを設定。
2 行目は決まり文句なので固定。
meta property=“og:image” の部分で Facebook に投稿した時の画像を設定。
推奨画像サイズは 1200×600
meta property= og:description”“ の部分で、 Facebook に投稿した時の説明文を設定。
RMS のページは楽天が自動設定してくれているが、
楽天 Gold でページを作る場合はこの設定が必要。
余力があれば Twitter 対応も。
Twitter 対応（ Twitter Card ）はこちらが分かりやすいです。
http://web-tan.forum.impressrd.jp/e/2012/09/04/13551

<META NAME=“description” CONTENT=“ フィナモレ - Finamore 　より 2015 年春夏新作　
また人気の衿型　セルジオ・シモーネ　などが続々入荷のオンラインショップセレクト
ショップ【でらでら】です！また、実店舗も愛知県内に 3 ”店舗ございます。 >
<title> フィナモレ Finamore シャツ - 【楽天】インポートセレクトショップでらでら
</title>
HTML ヘッダの設定（ 3 ） SEO の用設定HTML ヘッダの設定（ 3 ） SEO の用設定
Google 対策でやっておいた方がいい、 SEO の設定。
META description は Google などの検索結果でタイトルの下に出る部分。
興味を引きそうなことを 120 文字以内を目安に記載。
Title は SEO 上もっとも重要な部分なので、狙っているワード（ 2 ～ 3 個ぐらいを
上限）を必ず入れたタイトルにする。

スマホサイトの HTML のお約束スマホサイトの HTML のお約束
□ 原則スタイルシートで書く
Table で書くと以下の様なデメリットが有るので、スタイルシートでレイアウトし
ていく。
・表示されるまで遅くなる
→Table だと全部の情報を読まないとページが表示できないので、待ち時間が出る
。
・遅いスマホだと表示が遅れる
→Table が何重にもなっているようなレイアウトだと、全部の高さ・幅の計算が必
要になるので固まったようになる。
・ SEO に弱い
→HTML が無駄に複雑になるので、 Google の評価が低くなりやすい。
実際の HTML を入力する前に、重要なお約束
□ 機種ごとの横幅に注意
iPhone4 ～ iPhone5s は横幅 320 。 iPhone6 は 375 。
Android は機種によって異なる。
→ 推奨は％指定にして、可変横幅にする。固定の横幅にするなら 320 。

<img src="kanban_smp.jpg" width=“320">
ナビボタン看板・（ 1 ）ナビボタン看板・（ 1 ）
□Retina 対応について
iPhone4 以降の iPhone は、 Retina ディスプレイを採用していて画面解像度が高く
なっている。
普通に画像を作成すると、 iPhone で見るとややぼやけてしまうので、
本来表示させたいサイズから縦・横を 2 倍にして画像を作成する。
iPhone の横幅は 320 ピクセルなので看板を 320 ピクセルで表示させたい場合は、元
の画像を横幅 640 ピクセルで作成して【例】のように width=“320” などとする。
全体の横幅を 320 固定にしていない場合は、パーセンテージ指定でも OK 。
ここから実際の HTML を入力する部分に入ります。
まずは看板から。

<ul id="menu">

<li><a href="http://www.rakuten.co.jp/ 店舗 URL/"> トップ </a></li>

<li><a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cartempty/?shop_bid= ショップ ID"> 買い
物カゴ </a></li>
<li><a href="http://www.rakuten.co.jp/ 店舗 URL/info.html"> 会社概要 </a></li>
<li><a href="http://www.rakuten.co.jp/"> 楽天 </a></li>
</ul>
上記はスタイルシートのみでナビボタンを作った例。
最初に記載したように、 Table で配置していくのではなく UL （リストタグ）を
使って、この部分がメニューであると Google に認識させた上で、スタイルシート
でレイアウトしていく。

ナビボタンはアイコンで作ることが多いが、アイコンの下にテキストも入れると親
切。

<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/isearch/vc" accept-charset="EUC-
JP">
<input name="sid" value="192928" type="hidden">
<input name="sitem" id="sitem" class="srchitem1" placeholder=" ショップ内から探す " data-
role="none" type="text">
<input value=" 商品検索 " type="submit">
</form>
ボックス検索（ 1 ）ボックス検索（ 1 ）
検索ボックスはファーストビュー（最初に見える範囲）内に配置が必須。
（単品 LP などそのページから逃したくない場合は除く）
ネットショップ担当者フォーラムさんの記事より
https://netshop.impress.co.jp/node/1416
作成しているページの文字コードが EUC － JP 以外の場合は、
accept-charset=“EUC-JP
と入れることで検索結果が文字化けしなくなる。（楽天の文字コードは EUC － JP
のため）

<div style=“width:100%”>
<div sytle=“float:left;width:50%”>aaaa</div>
<div sytle=“float:left;width:50%”>bbbb</div>
</div>
レイアウト全体（ 1 ）レイアウト全体（ 1 ）
全体のレイアウトは画面サイズが変わっても問題なく表示されるように、％指定で
組むとチェックが楽。

<div class="item_box">
<a href=""><img src=" 画像 URL"><br> 商品名 <br>1111 円 </a></div>
陳列部分（ 1 ）陳列部分（ 1 ）
お客様にクリックしてもらう箇所は、以下の点に注意。
1 ．リンク部分は小さくしすぎない。
安い Android や古い機種だとタッチの精度が甘いこともあるので、大きく。
Apple 推奨は 44×44 ピクセル以上。
2 ．空欄の部分でもタッチできるようにする。
サンプルのように、商品名でない部分でも
クリックできるようにスタイルシートで設定する。
Display:block という要素を使えば、設定できる。

そのユーザビリティ他関係（ 1 　メニューり）周そのユーザビリティ他関係（ 1 　メニューり）周
スマホサイトではお客様の使いやすさ、ユーザビリティが重要。
スマホでよく使われるメニューの事例。
1 ．ドロワーメニュー（ハンバーガーボタン）
メニューボタンを押すと、メニューが横から出てくる。
（例）コンバース
2 ．ヘッダメニュー固定型
ヘッダメニューが固定位置になっている。さらにスクロール時はメニューを消すと
、一覧性が高まる。
（例）でらでら
3 ．アコーディオンやタブ切り替えなど動きのあるメニュー
カテゴリ一覧などそのままリンクを並べると見づらくなる場合に効果的。
（例）でらでら

そのユーザビリティ他関係（ 2 ）そのユーザビリティ他関係（ 2 ）
スマホサイトは離脱率が高いので、やった方がいい対策
1 ．自動ページ送りの採用
情報量が多くて読み込みに時間がかかるなら、自動ページ送りを採用する。
http://www.eye-brain.jp/blog/autopage-gold/
2 ．ホームに追加するボタンの採用
アプリのように、そのページのブックマークをホーム画面に追加することができる
。
フューチャーショップさんの説明

スピード対策（ 1 ）スピード対策（ 1 ）
□ スピード対策の基本
ページのスピードは容量だけでなく HTTP リクエスト数（ファイル数）も影響する
。
※ スピード対策の重要性
Amazon の調査では、ページの表示速度が 0.1 秒遅くなると、売り上げが 1%
低下
スピード対策でできること
□ 画像サイズの縮小
PC 用画像をそのまま使わず、スマホ用にリサイズする
□ 画像の圧縮
大きな画像は圧縮する。 TinyPNG などのサービスを使えば、画質を落とさず圧縮
できる。
http://tinypng.com/
□CSS スプライトの利用
ナビボタン用の画像などよく使う画像は CSS スプライトでまとめる
CSS スプライトの解説

スピード対策（ 2 ）スピード対策（ 2 ）
□ スタイルシートや Javascript はできるだけまとめる
スタイルシートや Javascript のファイルは一つにするか、分量が少ない場合は HTML
にそのまま記載する。
※ サンプルでは分かりやすいようにスライダー用は分けています。
改善点は Google ページスピードインサイトで確認。
https://developers.google.com/speed/pagespeed/insights/
R-Cabinet の画像などは改善できないので、参考程度に。

テストテスト
ページが出来上がったら、テスト。
実機で見るのはもちろん、以下のサイトのチェックも。
モバイルフレンドリーテスト
□ 検証した方がいい機種
iPhone5
iPhone6
Android4.3 以降を搭載したスマートフォン

楽天Goldでスマホページを作成する方法

Recommended

Recommended

More Related Content

Similar to 楽天Goldでスマホページを作成する方法

Similar to 楽天Goldでスマホページを作成する方法 (20)

楽天Goldでスマホページを作成する方法