初心者でもできる楽天ショップで使える無料のテンプレートとは?

初心者でもできる楽天ショップで使える無料のテンプレートとは?

楽天市場で念願のお店を出店したものの、思ったようなレイアウトで店舗や出品ページが作れなかったということはありませんか?

せっかく出店しても、店舗のビジュアルや使い勝手が素人っぽい作り込みの場合には、思ったように売上が伸びなかったりします。

ここでは「初心者でも簡単にイメージ通りのレイアウトページが作れる方法」や「無料で使えるHTMLのテンプレートが欲しい」といった方向けに解説します。

目次

楽天市場の店舗ページを作成する方法

楽天市場の店舗ページを作成する方法

楽天市場で店舗を出店するには、まず店舗のページを作成する必要があります。

作り方は主に「RMS Service Square」で作成する方法と「楽天GOLD」で作成する方法の2種類があります。

「RMS Service Square」で作成

「RMS Service Square」(以下、RMS)とは、楽天市場公式の店舗運営の名称です。

RMSではページの作成をサポートする無料のサービスツールと、有料のサービスツールがあります。

無料サービスツールとしては「SketchPage for 楽天市場」、有料のサービスツールとしては「compass(コンパス) for 楽天市場」「SUMAOU!(スマオウ!) for 楽天市場」「EasyPage for 楽天市場」「Biiino(ビーノ)for 楽天市場」があります。

無料サービスの「SketchPage for 楽天市場」に関しましては、2021年4月30日でサポートとサービス提供を終了しているので現在では上記の有料4ツールでページを作成します。

サービスツールの主な機能

サービス名称compass for 楽天市場SUMAOU! for 楽天市場EasyPage for 楽天市場Biiino for 楽天市場
機能現役人気店舗が開発した、スクエア史上で最も簡単な操作でページ構築ができるツール。
楽天市場で必要になるページ素材などもツールの内に搭載されているので、自分で作らずとも選ぶだけで簡単にページが完成できます。
現在のショップでは必須のスマートフォンページが構築できるツール。
トップページも商品ページも、特集ページにも対応可能しています。
毎日自動更新する機能もあり、ショップ管理に手間をかけずに手間をかけたように見せることができるページができます。
15種類のツールと100種類にもなるテンプレートが使い放題で、PCとスマホ両方対応のレスポンシブデザインページを作成できます。
管理店舗も多モール・多店舗に適用可能です。  
ECサイト作成ソフトの雄であるスマオウの開発企業の最新作。
PCとスマホ両方対応のレスポンシブデザインページにも対応。
自動補完機能が優秀で商品登録を時短化できる。
SEO対策に強く、対策を考慮した商品ページや特集ページが自由に作れます。
費用2,980円(税抜)3,980円(税抜)5,000円(税抜)4,500円(税抜)

「楽天GOLD」で作成

「楽天GOLD」とは、楽天市場に出店した方が利用できる無料のサーバースペースのことです。

RMSとの大きな違いは、文字制限がないということです。

RMSでページデザインをすると字数制限が発生します。

また楽天GOLDでは、HTMLコードを自由に改変可能で、複雑にページをカスタマイズできるということです。

さらにHTML以外にもデザインの見た目を大きく変更できるCSSファイルや、ページに動きなどを付与できるJavaScript等も保管できます。

楽天GOLDでもRMS同様に有料の制作支援ツールを用いてページを作成可能ですが、RMSとの大きな違いはコードを自分で修正したテンプレートを用いてページを作成できることです。

テンプレートとは?

テンプレートとは、HTMLやCSSで記載されたコードの羅列のことで、ページを作成するための骨組みが記載されたデータです。

ECサイト作成の専門家が作成したコードや、様々な有志の方が作成したものがあり、コピーして簡単にホームページ作成に使用できるのが特徴です。

このテンプレートに写真や文字を入力するだけで簡単にスタイリッシュなページを作成することができます。

テンプレートを活用するメリット

テンプレートを活用するメリット

テンプレートを使用すると自由度が増すイメージですが、具体的にはどのようなメリットがあるのでしょうか?

メリット①レスポンシブデザインにできるので作成が楽になる

テンプレートではレスポンシブデザインにすることができるので、PC用とスマホ用で別々にページデータを作成する必要がありません。

そのため、作業効率が上がるのでページやカテゴリーを増やすのが簡単になります。

メリット②Googleアナリティクスのタグを埋めが可能

Googleアナリティクスとは、その名の通りGoogleが提供する無料のアクセス解析ツールです。

アクセス解析では、登録したWebサイトに訪問してきたユーザーの属性や訪問してきたページ、訪問先での成果の達成率、広告効果などを確認できます。

楽天市場以外にも自身のHPなどを管理している人はご存知の通り、HP運営にはなくてはならないツールとなりますが、楽天GOLDを使用することでHTMLテンプレート内にタグを埋め込むことができます。

メリット③パーツ毎にデザインを変えられる

ページは主にヘッダー・メイン・サイドバー・フッターの4ブロックから作成されます。

テンプレートであらかじめビジュアルが作成されているので、初心者の方でも文言の変更や写真を追加するなど項目を増やす事が簡単にできます。

テンプレートを活用するデメリット

テンプレートを活用するデメリット

テンプレートを使用する事での利点は多くありますが、デメリットもあります。

デメリット①Web制作の専門的知識が必要

テンプレートを使用する際に、HTMLやCSS、JavaScriptの他にレスポンシブ対応などの構成を全てコードで入力します。

過去に自分でサイトを作ったことがない店舗運営者にとっては、何をどうしたら良いかわからないことが多くあります。

基本的にはコードをコピペして使用することが多くありますが、どこのコードをどの欄に貼りつけて訂正するかなどは初心者にとっては大きな壁になります。

デメリット②期待通りのショップページになるとは限らない

無料のテンプレートを使用する場合は、テンプレートの構造を理解して使わないとイメージ通りのページが作れない場合があります。

間違って使用すると変な構造のレイアウトになったり、知識がないと元に戻せないようになることもあります。

最終的に外部委託で作り直してもらい、余計な出費が発生する恐れがあるので注意が必要です。

デメリット③デザインの一元管理ができなくなることも

楽天GOLDでTOPページのみテンプレートを使用して作成した場合には、TOPページのみRMSの管理下から外れてしまいます。

つまりデザイン的に一元管理できなくなり、余計な作業性が増します。

デザインは一貫性を持たせた方が、訪問者としては安心です。

急にレイアウトが変わったりすると、別の店舗に移動してしまったかのような錯覚を与えたりする可能性もあります。

無料で使えるHTMLテンプレート配布サイトご紹介

無料で使えるHTMLテンプレート配布サイトご紹介

実際に楽天GOLDでレイアウト変更できるテンプレートが無料で入手できるサイトをご紹介します。

イーモジャパン

【テンプレ―ト配布がある場合こちらへ入力してください】 ないです

イーモジャパン

ogaRia(オーガリア)

楽天GOLDを始めたばかりの初心者でもわかりやすいHTMLの構築から学べるサイトです。

基本的なHTMLの構築のコードや楽天スマホショップのトップページによく使用される「看板つきヘッダーメニュー」ショップのページ内に「検索窓」を設置する方法など有効的なコードが沢山入手できます。

ogaRia(オーガリア)

BILLIONPLAN JAPAN(ビリオンプランジャパン)

ウェブ制作やデザインTipsのほか、楽天市場をはじめとするEC業界のトレンド記事を紹介し、気になるニュースやいざという時に役立つライフハック記事など、幅広く様々なジャンルをとり扱うサイトです。

「コピペで簡単に実装できる楽天ECサイトのヘッダーテンプレート作ってみました」の記事内に次の5つパターンの紹介があります。

  • 必要最低限の情報を!すべての基本になるヘッダーの形。
  • 大きな背景画像を利用することでイメージを豊かに。
  • 一つステップアップ。店舗の情報やお勧めしたいキーワードへの導線を確保。
  • 大きな写真を動きのあるスライドショーで!イメージをダイレクトに伝えるデザイン。
  • 見せたい商品が多すぎる!バナーサイズに緩急をつけて視線誘導&すべてを見せる試み。

有効な見せ方と共に、ワンポイント的な懸念事項の解説もありますので参考になります。

BILLIONPLAN JAPAN(ビリオンプランジャパン)

NETSHOP WORK(ネットショップワーク)

WEBやECサイト運営の現場での豊富な経験を経て、10年以上ネットショップのデザインやコーディング、コンサルティング、そして集客アドバイスなどを行っているサイトです。

ヘッダーからサイドデザインまで、初心者でも活用しやすいテンプレートが作成されています。

特に楽天ショップに特化してある「トップページ用(PC)」のデザインテンプレートでは主にHTMLとCSSで作成しているので、ページの読み込みが軽い作りになっています。

楽天GOLDを使用しなくても、テンプレート自体は使用可能なのが特徴です。

NETSHOP WORK(ネットショップワーク)

ECMEDIA−lab.(イーシーメディアラボ)

ECサイトのリニューアルや新規制作、SEO対策を始めEC事業に関するコンサルタントをおこなう会社のホームページです。

スマートフォンページをわざわざ作成しなくてもよいレスポンシブ仕様のテンプレートが公開されています。

楽天GOLDにデータをUPするだけで見た目を一括で変更できます。

内部調整もURLと店舗名を変更するだけと簡単な仕様です。

更に細かい調整やフォローが必要な場合は有料のテンプレートも用意されているので、初心者からベテランまで対応してくれます。

ECMEDIA−lab.(イーシーメディアラボ)

無料テンプレートの設定方法

無料テンプレートの設定方法

無料でテンプレートを入手しても、設定ができなければ意味がありません。

ここではデザインテンプレートの設定方法を改めてご紹介します。

FTPソフトをダウンロードする

FTPソフトとは「File Transfer Protocol(ファイル・トランスファ・プロトコル」の略で、「楽天サーバー」と「PC」のコンピュータ間でファイルを転送する為の暗号コード(プロトコル)を利用して、Webサイトから任意のデータをダウンロードまたはアップロードするシステムです。

楽天GOLDが初心者向けではないとよく言われるのが、この作業が必要なので少し敷居が高く感じられる為です。

一度経験すると難しくはないのですが、たくさん横文字が出てくるので先入観で難しいと勘違いすることもあります。

FTPの代表的なソフトは「FFFTP」や「FileZilla」などと言われるソフトです。

ここでは「FFFTP」を用いての解説をします。

*他のソフトでは若干名称が異なることもありますが、作業は同じ要領です。

FTPソフトの設定

FTPソフトのダウンロードが終わりインストールが終了するまでに次の情報を用意しましょう。

  1. ホスト名:ftp.rakuten.ne.jp(固定です)
  2. ポート:16910(固定です)
  3. ユーザー名:店舗名(RMSで設定したIDでURLに記載がある自店舗)
  4. パスワード:任意(RMSで設定したもの)

FTPの設定画面では様々な入力タブがありますが、上記内容を入力する箇所にそれぞれ記載してください。

拡張タブにある「PASVモードを使う」の箇所にチェックを入れるのと、ポートを上記の番号に入力し直す事を忘れないようにしましょう。

全て入力後に接続ボタンを押すとサーバーに接続されます。

ファイルのアップロード

上記で設定は終わりなので設定は簡単です。

設定が終わると左側が自身のパソコンの参照ページで、右側が楽天のサーバーデータ表示の画面になります。

アップロードするデータ

アップロードするデータは主に次のようなものがあります。

index.html(トップページ)

WEBサイトで表紙にあたる店舗の入り口のようなページの事です。

トップページと呼びますが、正式な呼び名はインデックスと呼びます。

company-profile.html(会社概要のページ)

消費者が気になるページの1つで「どのような会社なのか」「怪しい会社ではないのか」など確認されるページなので手抜きせずにきちんと正式な記載をしましょう。

privacy-policy.html(プライバシーポリシーのページ)

お客様の個人情報の取り扱いを適正に行う旨記載するページです。

法律を遵守して運用する事を記載します。

specified-commercial-transaction-law.html(特定商取引法のページ)

「特定取引法に基づく表記」の記載は、ネットでショッピングをする際に必須事項なので漏れがないようにページ作成する必要があります。

shopping-guide.html(お買い物ガイドのページ)

ショップで買い物をする際に、気をつける事項や案内のページです。

いくら以上で送料が無料になる等の、お客様が商品を購入するときに確認したい事項の記載があります。

questions-and-answers.html(Q&Aページ)

よくある質問をQ&A方式で事前に載せておくと、お客様が迷わずに済むので親切です。

そして簡易的な質問が頻繁にくることも防止できるので、店舗管理の作業効率にも繋がる必須のページです。

jsフォルダ(JavaScript設定フォルダ)

jsファイルとは、プログラミング言語である「JavaScript」で書かれたコードを記録したファイルのことです。

Webサイトに動きをつけたり、ボタンやポップアップウィンドウなど視覚効果をページに付与する際などに使用します。

CSSフォルダ(デザイン設定フォルダ)

CSSとは「Cascading Style Sheets」のことで、ページの表示方法を制御するコードです。

HTMLがサイトの骨組みと呼ばれるのに対して、CSSは一般的にサイトの表示の見栄えを整えるスキンのような位置付けと言われます。

images フォルダ(画像保管フォルダ)

写真やデザインデータなどが格納されるフォルダです。

まとめ

初心者の方が楽天市場でショップを開店させて、収益が軌道に乗る前に有料のテンプレートや素材などを使用するのは勇気がいります。

無料のテンプレートを活用することで、素人感のある店舗からの脱却が容易になります。

どのような店舗にするか悩んでいる際には活用すると良いでしょう。

無料テンプレートではなく、回遊性を高める構築や、オリジナルの店舗構築 等、楽天市場などのECサイト運用支援の豊富な実績とノウハウを軸に対応可能となります。

「構築をプロに任せたい」「制作しているリソースがない」などありましたらイーモジャパンにお任せください。

目次