楽天のカテゴリページに、ショップガイドページを新規作成する際の注意点

2026年6月2日2026年6月3日

楽天市場のショップガイド（会社概要や返品ルールなど）は、店舗運営において常に利用される極めて重要なページです。

しかし、デフォルトのショップガイドページは周囲のテンプレート（共通看板、サイドナビゲーション、フッターなど）が表示されず、デザイン的に孤立した単独ページになっています。「デザインを統一したいけれど、新しく専用ページを作るのは管理が大変…」とお悩みの方も多いのではないでしょうか。

そこで今回は、楽天市場の「カテゴリページ」のデザイン枠を利用して、ショップガイドをスマートに埋め込む（インラインフレーム活用）技と、その際の注意点について詳しく解説します。

1. カテゴリページを活用してショップガイドを作るメリット

最も簡単でスッキリしたサイト構成にする方法は、カテゴリページのデザイン枠（テンプレート）を利用し、そのコンテンツ部にショップガイドを埋め込むことです。

新RMS（Rakuten Merchant Server）がリリースされて以降、もともとデザイン設定になかった「購入ガイド」や「会社概要」のページをきれいに見せるために、このカテゴリページのテンプレート流用が広く使われるようになりました。

RMSのデザイン設定では、ヘッダー、サイドナビ、フッターの共通テンプレートが用意されており、商品ページやカテゴリページに一括で適用できます。商品ページではない「カテゴリ設定」を新しく1つ作成し、そのカテゴリページの説明文（共通説明文など）にコンテンツを組み込むだけで、ショップの他ページと完全に統一されたデザインのご利用ガイドページが完成します。

2. 楽天市場におけるショップガイドの元URLを確認

実装を進める前に、楽天市場が自動生成している元々のショップガイドURLを確認しておきましょう。内容に応じて以下の2つのページが存在します。

① 会社概要ページ含む（店舗ご利用ガイド）

店舗の基本情報から返品特約、配送・送料まですべての情報が含まれる標準的なページです。通常はこのURLをメインに使用すれば問題ありません。

https://www.rakuten.co.jp/店舗URL/info.html

画像イメージ：

② 配送送料ページ（会社概要なし）

会社概要のテキストを除き、配送や送料、決済ルールに特化したページです。運用上、これらを明確に切り分けたい場合に適しています。

https://www.rakuten.co.jp/店舗URL/info2.html

画像イメージ：

3. 実装時の重要ポイント：画面幅によるデザインの変化

ここが最も重要な注意点です。楽天市場のデフォルトのinfo.htmlページは、閲覧する画面幅（コンテンツ幅）によって自動的にPC用とスマホ用のデザインに切り替わるレスポンシブ仕様になっています。

PC用の大きなデザイン： 画面幅が「700px」を超えると、横幅の広いPCレイアウトになります。
スマホ用のデザイン： コンテンツ幅が一定以下（スマートフォン実機の可変幅：約360px〜430px程度）になると、縦長でシンプルなグリッドデザインに自動で変わります。

スマホ用デザインは縦に非常に長くなるため、ユーザーが目的の情報（例：送料について、返品について）に、スクロールだけで移動するのは一手間かかります。そのため、楽天のスマホ用デザインには「目的の項目へスムーズに移動できるリンク・ジャンプ機能」が標準で備わっています。

4. iframeタグを使った具体的な実装方法

PC用のカテゴリページの中で、上記の「ジャンプ機能（スマートフォン向けUI）」を活かしつつ綺麗に実装するには、<iframe>（インラインフレーム）タグを使い、表示幅をあえて固定（制限）してスマホ用デザインを呼び出すのが効果的です。

カテゴリページのコンテンツ部分に、以下のHTMLコードを記述します。

<iframe src="https://www.rakuten.co.jp/店舗URL/info.html" width="700" height="600" frameborder="0" scrolling="auto">こちらはインラインフレームです</iframe>

各属性の解説と設定のコツ

属性	設定値と役割	SEO・ユーザー導線上のポイント
width	“700”（フレーム窓の幅）	幅を700px程度（またはそれ以下）に絞ることで、PCページ内であってもフレーム内をスマホ用レイアウト（ジャンプ機能付き）で固定表示できます。
height	“600”〜”700″（フレーム窓の高さ）	PC画面でスクロールせずに見渡しやすい適度な高さを確保します。700px程度がおすすめです。
frameborder	“0”（枠線の有無）	デザインの邪魔になる外枠線を消し、カテゴリページの一部として自然に馴染ませます。
scrolling	“auto”（スクロールの可否）	必ず`auto`に設定し、右端にスライドバーが表示されるようにします。これにより、導入部分のジャンプリンクを踏んだ後も、ユーザーが自由に上下スクロールして詳細を確認できるようになります。

実際の表示・埋め込みイメージは以下のようになります。

このようにスライダーが動く状態にしておけば、冒頭のナビゲーション（ジャンプ機能）から目的の項目へスムーズに遷移させることが可能です。

5. まとめ：Rakuten GOLDで作るべきか？カテゴリ流用か？

楽天市場には「Rakuten GOLD」という自由なサーバー領域が用意されているため、完全にオリジナルのHTML/CSSファイルを作成してアップロードすることも可能です。

しかし、GOLDで一からページを作ると、将来的に看板やサイドナビ、フッターの共通デザインを変更した際に、GOLD内のファイルもすべて手動で修正・更新しなければならず、管理コストが増大してしまいます。

今回ご紹介した「カテゴリページのデザイン設定を流用し、<iframe>で標準のinfo.htmlを埋め込む方法」であれば、ショップ全体の共通デザイン変更にも自動で追従します。効率的かつ、ユーザーに優しいショップガイドページを構築したい方は、ぜひこのカテゴリページの応用を試してみてください。