楽天RMSでは、フォントの色や大きさ、画像エリア幅などのデザイン設定が可能ですが、楽天GOLDを使用する事でサイト制作の幅がグンと広がります。
今回は、楽天GOLDの使い方さらにはサイト構成時に便利な方法をご紹介いたします。
楽天GOLDとは？
楽天GOLDとは楽天で無料利用できる専用サーバーの事です。
RMSでは再現できない動きのあるWEBサイトページが作成可能となり、トレンドサイトのようなJavaScriptを使ったスライダーやスクロール、タブでの切替といった事が再現できるようになります。
楽天GOLDのお申し込み方法
楽天に出店しただけでは利用は出来ません。
RMS管理画面からお申込みが必要になりますが、申し込むと即日利用可能となります。
お申し込み方法
RMSから下記の通りに進んでください。
店舗向け情報・サービス ＞ オプション機能利用 申込・解約 ＞ 楽天GOLD
お申込みボタンから進むと、利用規約に同意して下さい。
必ず「ユーザ名」と「パスワード」のメモをお忘れなく！
※小文字大文字や英数半角文字を間違えないようにご注意ください。
お申込み後にサーバーの容量が足りなくなってしまう場合がございます。
サーバー内の不要なデータを削除すれば利用可能な容量を確保する事が可能ですが、不要なデータがないという方には「楽天GOLD 容量変更申請」という容量の変更も可能です。
今回は容量変更申請の進め方もご紹介いたします。
楽天GOLD 容量変更申請方法
お申込み後にサーバーの容量が足りなくなってしまう場合がございます。
サーバー内の不要なデータを削除すれば利用可能な容量を確保する事が可能ですが、不要なデータがないという方には「楽天GOLD 容量変更申請」という容量の変更も可能です。
今回は容量変更申請の進め方もご紹介いたします。
店舗様向け情報・サービス ＞ 3 各種申請・設定変更 ＞ 楽天GOLD 容量変更申請
「申請」から進むとこのような画面に切り替わるので
- 「申請内容」の「容量UP」を選択
- 「変更後の利用容量」に「1」と入力
※一度の申請で追加出来る容量は100MBまでです。
申請までに1週間程反映時間がかかるので、なるべく早めに容量の確保をしておく事をおすすめいたします。
※お申込みの上限は一律で「1GB」となっております。
引用：楽天市場店舗運営NAVI（https://navi-manual.faq.rakuten.net/service/000010362）
楽天GOLDを利用したRMS設置方法
楽天GOLDを利用したページカスタマイズ
- ヘッダーフッターレフトナビ
- スライダー
- タイムセールページの特集ページ
- 各カテゴリー商品のランキング
- 動画の埋め込み
WEBサイトで出来る事が楽天でも表現可能になります。
デメリット
デメリットポイントとしては、PCページのみカスタマイズ可能です。
楽天の仕様が変更となり、スマホページではiframeでの埋め込みやstyleが使用不可になってしまいました。
今後、スマホページではテンプレートを使用した制作に切替わるようなのでレスポンシブの対応は出来ません。
HTML編集を楽にするテキストエディタのご紹介
テキストエディタにも様々なソフトがあります。
自分に合う使いやすい層ソフトを探してみるのもいいですが、何を使ったらいいかわからない！という方にはご紹介するエディタをおすすめします。
まずは、有名なテキストエディタをご紹介いたします。
- Visual Studio Code
- Atom
- サクラエディタ
- Notepad++
この中からVisual Studio Codeのご紹介です。
ダウンロードはコチラ
無料のオープンソースですが、提供はMicrosoftが行っています。
幅広いコードに対応しており今、注目のプログラミングエディタとも言われています。
こちらは使用OSに関係なくWindowsからMacまで利用できます。
ご使用になっているパソコンのOSを選んでダウンロードして下さい。
パソコンにインストールしたら、HTMLやCSSの編集が可能になります。
カスタムデザイン
IFRAME(アイフレーム)
iframeとは、Inline FRAME （インラインフレーム）の略です。
メインのHTMLタグの中に別で作成したHTMLを埋め込んだり動画を埋め込む事ができます。
楽天GOLDを使って独自のデザインをしていく上で、運用がしやすく更新も楽になるのが特徴です。
RMSでもヘッダーやレフトナビフッターの部分をiframeで埋め込んでカスタマイズしていきましょう。
カスタマイズ方法
まずは、RMSのレイアウトを変更していきましょう。
コピペで出来るヘッダーの部分を横幅100%
RMSの「ヘッダー・フッター・レフトナビ」の設定をしていきます。
店舗設定 ＞ デザイン設定 ＞ ヘッダー・フッター・レフトナビ
ヘッダー・フッター・レフトナビから「編集」を選択します。
HTMLタグの挿入から「ヘッダーコンテンツ」を編集していきます。
それでは、ヘッダーの部分を横幅100%に変更していきましょう。
<!-- 閉じタグ -->
</td></tr></table>
</td></tr></table>
</td></tr></table>
<!-- /閉じタグ -->
<!-- ヘッダー -->
<!--new header width100%-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // ここから -->
<!-- iframe -->
<iframe id="top header-frame" style="display: block;" src="https://www.rakuten.ne.jp/gold/〇〇〇/iframes/header.html" width="100%" height="150px" frameborder="0" scrolling="no"></iframe>
<!-- ここまで // -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="800" cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table width="800" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4">
<!--new header width100% end--><!-- // ここから -->
この間にヘッダーiframeを記載
<!-- ここまで // -->上記の部分にヘッダーのiframeを入れ込んでいきます。
それ以外のタグは変更しないでください。
これで、横幅100%の表示が可能になります。
以上のようにカスタマイズの幅も増えていきます。
詳しいiframeのご説明は別の記事でご紹介していきたいと思います。
まとめ
楽天GOLDを利用する事でデザイン性がアップしCVRを上げる為に必要なサイト導線を意識したページが作成できますね。
いかに興味を持ってもらえるか そして、ユーザー目線に立ち見やすいサイトを作成するか で競合店との差別化を図り売上アップを目指していきましょう！
独自のデザインに変更したいけどどうしたらいいか分からなかった店舗様は是非参考にしていただければと思います。
WEBからお問合せする
マクロジでは、楽天をはじめとした各種モールやD2Cサイト等ECサイトの運営代行サービスをご提供しています。
ネット通販頑張りたいけど、人手が足りない！やり方がわからない！＞＜という店舗様は是非お気軽にご相談ください！
コンサルティング、運営代行、広告運用のサービス詳細や事例に関するお問合せはこちら
