楽天ショップのページを、よりクオリティの高いものやオリジナル性を出す場合に用いられるのが「楽天GOLD（ゴールド）」です。
こんにちは。『K Time（ケータイム）』編集部のクロスです。
私たちはこれまで沢山の楽天ショップのデザインやページ作成に携わってきました。
本記事を読んで頂くことで以下のようなことが解決できます。
- 楽天GOLDについての概要がわかる
- 楽天GOLDを使用した場合にどんなショップになるのかイメージがわかる
- 楽天GOLDの使い方（FTP設定方法）がわかる
- 楽天GOLDを使ったファイルのアップロードやダウンロードするやり方がわかる
など
では、初心者の方に向けてそれぞれについてお話していきたいと思います。
楽天GOLDとは？
楽天GOLDとは、簡単にいうと「楽天ショップを作成する際のフリースペース（サーバー領域）」といったイメージです。
フリースペースを使うことで、以下のようなことが可能になります。
- 自由にHTMLやCSSが使用できる
- JavaScriptなども使用できる
- オリジナル性の高いトップページが作れる
- オリジナル性の高い特集ページやその他ページが作れる
- レスポンシブデザインに対応したページを作成できる
- PNG形式の画像が格納できる
など
楽天ショップを作る場合、RMSというシステム内で様々な設定やページ作りをおこなっていきます。
しかし、RMSのみでは現在のところ上記のようなことはできないため、楽天GOLDというオプション機能を使うことで実現していきます。
楽天GOLDを使用するには事前に申請が必要
楽天GOLDを使用するには、事前に申し込みが必要です。
申請する場合には、RMS管理画面の「オプション機能利用申込・解約」ページからおこなうことができます。
楽天GOLD自体は無料で使用することができますので、ページを作り込みたい、デザインにこだわりたい人は、事前に申請しておくと良いでしょう。
ちなみに、一度に申請できる容量は100MBで、最大1GBまで使用することができます。
楽天GOLDを使用しているショップ例
では、実際に「楽天GOLDを使用した場合にどんなショップを作成することができるのか？」
今回は弊社の制作実績を例にご紹介いたします。
楽天GOLDで制作されたページ：参考例その１
上記は楽天GOLDでトップページを制作した例です。
少々イメージのみだとわかりづらいですが、全体的にコンテンツのボリュームが多いのが特徴で、ヘッダーメニューやスライドバナー、ページ内の一部エリアなどは動的な形でお作りしています。
楽天GOLDで制作されたページ：参考例その２
上記は楽天GOLDを使用し、レスポンシブデザインにてトップページを制作した例です。
ファーストビューの大きなスライドショーが特徴的で、PickUP商品などは並べる形式ではなく、スライド形式にしシンプルな表現を用いています。
楽天GOLDで制作されたページ：参考例その３
上記はRMSを基本とし、一部楽天GOLDを使用した例です。
大きなバナー画像のエリアとサイドエリア（CATEGORYの開閉メニュー）を楽天GOLDを使用し、iframeを用いて設置しています。
それ以外の部分は基本RMSにてお作りしています。
画像をスライドさせたり、メニューにカーソルを合わせたときに下層メニューが開くなど、動きのある制作では楽天GOLDを使用しCSSやJSを用いることが多いです。
楽天GOLDの使い方
楽天GOLDは冒頭でもお話した通り、フリースペース（サーバー領域）です。
このフリースペースは容量に上限はあるものの、比較的自由に使用できる場所になります。
そして自身で作成したHTMLやCSS、JavaScriptなどのファイルを、このフリースペースに格納することで、オリジナル性の高いページを作ることができます。
HTML等に慣れていない場合は注意が必要
楽天GOLDを使ってページを作成する場合、基本的には上記のようなファイルを作成する、あるいは編集できるスキルが必要となるわけですが、場合によっては「スキルは持ち合わせていないけど、制作会社などに作ってもらったページやデザインを少し変更したい」といったケースもあるでしょう。
そんなとき、HTMLなど普段から慣れていない人が安易に編集してしまうと、ページがおかしくなってしまったり表示崩れなどを起こしてしまう可能性もあるため注意が必要です。
可能であれば制作会社やわかる人にお願いすると効率的ですし安心です。
楽天GOLDで作れるページとファイル名について
楽天GOLDを使うことで、HTMLタグの制限を気にすることなく、以下のようなページを作り込むことができます。
- デザイン性や機能性のあるトップページ
- レスポンシブデザイン対応のページ
- 特集ページやQAページなどの独自ページ
など。
ちなみに、PHPやCGIなどのプログラムは使用できません。
またファイル名は基本的に半角英数字を使用します。
例1）トップページを作成する場合のファイル名：index.html
例2）QAページを作成する場合のファイル名：qa.html
漢字やひらがな、カタカナなどのファイル名は使用できません。
以降では、楽天GOLDを使用するために欠かすことのできないFTPについて解説していきます。
楽天GOLD・FTP設定について
作成したファイルをアップロード（格納）するには、楽天GOLD（サーバー領域）に接続する必要があります。
その際、一般的に用いられるのが「FTPソフト」です。
FTPソフトはいくつか存在しますが、その中でも「FFFTP」という多くの人が使用している定番の無料ソフトがあるので、今回の説明ではそちらを使って解説していきます。
RMS内のマニュアル等で別のFTPソフトが案内されている場合は、そちらでも問題ありません。その際には楽天側が用意しているマニュアルをご確認ください。
楽天GOLDに接続するためのホスト設定
FFFTPをダウンロード後、インストールしたら、楽天GOLDに接続するためのホスト設定をおこないます。
予め以下の情報を準備しておきましょう。
- 楽天GOLDの申込完了画面で案内されたユーザー名
- 楽天GOLDの申込完了画面で案内されたパスワード
【1】FFFTPを起動する
FFFTPソフトをダブルクリック等し、起動します。
【2】新規ホストをクリック
上図のような表示にならなかった場合は、左上の接続からホストの設定で表示できるかと思います。
【3】ホストの設定の基本タブで、FTP情報を設定する
- 任意で構いません（例：○○ショップ）
- ftp.rakuten.ne.jp
- 楽天GOLDの申込完了画面で案内されたユーザー名
- 楽天GOLDの申込完了画面で案内されたパスワード
【4】拡張タブでポート番号を設定する
拡張タブに移動し、「PASVモードを使う」にチェックを入れ、ポート番号を「16910」に設定します。
接続できない場合のよくある原因のひとつにポート番号が挙げられます。
一般的なWEBサイトを作成する場合、ポート番号を変更するときは少ないので見落としがちになりやすい部分です。
【5】OKを押して接続してみましょう
問題なければ、以下のようなイメージで接続されます。
左がローカル側で、右がサーバー側（楽天GOLD）です。
楽天ショップ用に作成したHTMLファイルなどは、サーバー側にアップロードしていく形となります。
ファイルのアップロードとダウンロード方法
FFFTPソフトを使ったファイルのアップロード、ダウンロード方法はいくつか存在しますが、今回は初心者の方でもわかりやすい方法をご紹介します。
やり方はとてもシンプルです。
下図のような形でサーバー側にアップロードしたいファイルをドラッグアンドドロップします。
（例：デスクトップにあるindex.htmlファイルをサーバー側にアップロード）
無事にアップロードが完了すると、以下のようなイメージになります。
ダウンロードする場合はアップロードとは逆で、サーバー側にあるファイルを選択し、デスクトップなどにドラッグアンドドロップすれば、ローカルエリアにダウンロードすることができます。
楽天GOLDで作成したページのURLについて
先のセクションでは、FTPソフトを使用し楽天GOLDに接続後、ファイルのアップロードおよびダウンロードについて解説してきました。
まず押さえておきたいのが楽天GOLDを使用した場合、以下のように「gold」が入ったURLとなります。
このことから予想が付くように、例えば「qa.html」というファイルを楽天GOLDにアップロードした場合、以下のようなページのURLとなります。
ちなみに、RMSで作成した標準のページURLは以下の通りです。
楽天GOLDで作成したページの表示や動作確認をする際には、上記をご参考に確認してみてくださいね。
HTMLやCSSファイルを編集する際は専用エディタが便利
楽天GOLDを使用しページを作るにあたり、HTMLやCSSファイルなどの編集はかかせません。
編集の際には、メモ帳などでおこなうこともできますが、可能であれば専用のエディタを使用すると効率的です。
特に初心者の方の場合、あるべきところの閉じタグを削除してしまったり、ちょっとしたミスでページ内のデザインが崩れてしまったり、リンクが効かなくなっていたりと、不具合が起きてしまうケースがあります。
HTMLに限ったことではありませんが、プログラミングをおこなう際のちょっとしたミスは見つけて修正するまでに意外と時間のかかる作業だったりしますので、普段慣れていない人は丁寧にゆっくり編集されることをおすすめします。
専用エディタには有料、無料問わず様々なものがありますが、タグごとに色が分かれていたりするので、視覚的に分かりやすくなります。
以下のページで無料エディタをいくつかピックアップしています。
よろしければご参考にしてください。
楽天GOLDを使ったページ制作の無料相談
本記事では「楽天GOLDの概要から使い方」まで一通りお話してきましたが、弊社はこれまで様々なページを楽天GOLD（RMSのみの制作も含め）を使用し作成してきました。
その経験を活かし今回初心者の方向けに記事として書かせていただきましたが、中には「編集が不安」だったり、「HTMLのことはあまりわからないからどうしよう…」といったお悩みをお持ちの方もおられると思います。
そんなときは、お気軽にご相談いただければ嬉しいです。
わたしたちで解決できる内容であれば、メールにて丁寧にヒアリングをさせていただきます。
楽天ショップ制作での悩みが少しでも解消し、他の業務に集中できる時間を増やせるようにお手伝いさせていただければと思います。
