楽天ページ作成・初心者が押さえておくべきポイントと注意点

楽天ショップを立ち上げたけど、トップページデザインの作り方がわからない・・
楽天ページってどうやって作成するの?簡単にできると思ってたのに…
そんなお悩みの方向けに、楽天ページの作成方法についてお話します。

本内容をご覧いただくことで、楽天ショップのページ作成の基本や考え方が把握できます。

楽天ショップページ作成 初心者

※閲覧いただくタイミング等によっては、情報が異なる場合がございます。ご了承ください。

すでに楽天市場に出店している方向けです。

楽天ショップ開業

本記事は、すでに楽天市場に出店し、これから開店審査に向けてページを作成される方(あるいは初めてページを作成する予定の方)向けにご説明しています。

これから楽天市場に出店を予定している方は「楽天市場の公式サイト」から出店の流れや内容を確認しておきましょう。

楽天ショップでページ作成をするときの基本

楽天ショップでは、通常のWEBサイトを作成する時とは少し異なります。
HTMLやCSS、JSなど使用するところは基本変わりませんが、作成方法によってはそれらも制限されています。
主なページの作成方法は以下の通りです。

  • RMSでページを作成
  • 楽天GOLDでページを作成

 

どちらの方法でも基本的にページを作ることはできます。
しかし、楽天GOLDを使用するパターンのほうが、デザインの幅は広がるでしょう。(後述にて説明)

まずは、上記がページ作成をする時の基本となることを覚えておいてください。

楽天ショップではトップページ作成が基本になる

ネットショップでは主に以下のようなページを準備する必要があります。

  1. トップページ
  2. 商品一覧ページ(カテゴリー)
  3. 商品ページ
  4. 商品検索結果ページ
  5. 特定商取引ページ(会社概要など)
  6. 決済ページ
  7. マイアカウントページ

など

楽天ショップでは、上記ページのベースは既に用意されており、出店者側でいじれるページは主に「1~3」くらいです。
その中でも、「2、3」はそれほどいじることはできないため、メインで作成できるのは「1、トップページ」になります。

カラーミーショップ」などのカート型は、もう少し自由が効くので商品ページなどもカスタマイズ等することができますが、楽天ショップなどのモール型は制限も厳しめに設定されているので、難しいのが現状です。

ちなみに、トップページとはPCとスマートフォンの表示の両方が含まれています。

RMSでページ作成

初心者の人にはこちらがおすすめです。
RMSとは、ご存知の通り楽天の管理システムです。楽天ショップを構築する上で欠かせないもので、毎月使用料がかかっているかと思います。

楽天でページを作成する際、ベースとなるのがRMSです。

なので、まずはRMSで何ができるのかを把握しておくことが大切です。
見切り発車で、ページ作成したものが楽天では反映できない、というケースも少なくありません。

楽天ショップ・トップページを作成する場合

例えば、トップページを作成したい場合は、RMS管理画面内の「デザイン設定」から行うことができます。

楽天RMSデザイン設定

カラーミーショップ」のように、テンプレートを選んだらすぐにショップのデザインができる、というわけではありませんので、基本的にHTMLなどのスキルが必要になります。

また、注意点としては使用できるHTMLが決まっているという点です。
このあたりは楽天市場で用意されているマニュアル等を確認してみてください。

楽天GOLDでページ作成

こちらはどちらかというと「中級者~上級者さん向け」です。
あるいは、WEB作成の基礎知識がある人であれば問題ないかと思います。

楽天GOLDとは、サーバー領域のようなもので、データなどを格納することができます。
データとは、HTML、CSS、JS、PDFなど諸々になります。

RMSだけでページを作る場合、基本的にHTML以外のデータ等を扱うことはできません。

そのため、外部のデータ(CSSやJSなど)を読み込みページを作成する場合は、楽天GOLDを使用する形になるでしょう。
ちなみに、楽天GOLDは基本的に無料で使用することができます。

楽天GOLDはこんな用途で使えます

楽天GOLDは、デザインの幅を広げるだけでなく、以下のような場面でも活用できます。

  • トップページをレスポンシブデザインにする
  • 単体ページを作る(LPや特集ページなど)
  • 画像の格納場所として活用

など

楽天ショップでも最近はよく見られるようになったレスポンシブデザイン。
私も何度か制作しましたが、メンテがしやすいのが良いですね。

GOLDで作成したページを反映するには

レスポンシブデザインや単体ページなどは除き、トップページなどを楽天GOLDで作成する場合は、GOLDに格納したデータをRMSを通して反映する必要があります。

通常のWEBサイトなどで、外部ページを読み込む際には、一般的にJSやPHP等を使用するかと思われますが、楽天のシステムではそういったことは現状できません。

そのため「iframe」などのHTMLタグを使用する形がベターです。

ページ作成は楽天ショップの仕様に合わせるとGOOD

前述で「まずはRMSで何ができるのかを把握しておくことが大切」とお伝えしましたが、楽天ショップでページを作成するときのポイントは、仕様に合わせて作ることです。

例えば、RMS内でJSを読み込ませる裏技的な方法があります。(楽天側では推奨していない方法)
お店やページを作る上で、やれることが増えるので便利な方法ではあるのですが、推奨はできません。

理由は、「いつその方法が使えなくなるかわからない」からです。
楽天ショップの仕様(制限等)がより厳しくならないとも限りません。

そのため、「どうしても使用しなければいけない」という場面以外は、仕様にそった形でページ作成することをおすすめします。

バナー画像なども大事

ネットショップのバナー画像

ページ作成をする上で欠かせないものの一つとして「バナー画像」があります。
HTMLやCSSなどもページを作る上で大切ですが、ネットショップではバナー画像は基本です。

バナー画像には主に以下のような利点があります。

  • 回遊性アップ
  • 転換率アップ
  • 可読性アップ

 

もちろん、作成するバナー画像にもよりますが、上記3つのアップを見込めます。
文字だけではわかりづらい内容を画像として作るのも有りですね。
商品やサービスの魅力が伝わるバナー画像を作成し、適切と思われる場所に設置しましょう。

画像を加工したり編集するには、ソフトや技術が必要になりますが、更に一歩上のレベルを目指す場合は「デザインスキル」が重要です。
しかし、このあたりは経験値が必要になってくるので、初心者の方がすぐにデザイン性の高いバナー画像を作成することは難しい可能性があります。

そんなときは、プロの制作会社などにお願いするか、画像編集ソフトを使い慣れる人にお願いするのが良いでしょう。
また、「バナープラス」という画像作成ソフトも高クオリティなバナーなどが作成しやすいので、おすすめです。

まとめ

今回は、楽天ショップでページ作成する際の考え方や基本についてお話しました。

ページ作成自体の内容は、別の記事でお話できればと思いますが、HTMLやCSS等のスキルをお持ちの方なら本記事の内容で概要や流れは掴んで頂けたのではないかと思います。

私も今回お話した内容をベースに、いくつもの楽天ショップに関わるページ作成をおこなってきました。
少しでもご参考になれば幸いです。

楽天ショップホームページ制作
オリジナルショップ作り

楽天ホームページ制作

楽天ショップ作成、作り方でお悩みごとはございませんか?
デザイン性をアップすることで、回遊性、転換率アップにも繋がります。お気軽にお問い合わせください。

楽天ショップページ作成 初心者