楽天市場でショップページを作成する際は、インラインフレームタグ「iframe」を利用できます。ただし、楽天市場ではインラインフレームの使用を推奨しておらず、サポートの対象外となっているので注意が必要です。
このページでは、楽天市場のショップページ構築における「iframe」利用のルールや利用法について解説します。楽天市場のショップページを構築する際の参考にしてください。
「iframe」とは？
インラインフレームタグ「iframe」とは、HTMLの1要素で、ページ内部に異なるページを埋め込むことができるタグのこと。
例えばショップページ上に店舗の地図として、Googleマップを表示させる場合などに活用できます。
楽天市場であれば、トップページに商品ページや動画を埋め込むといった使い方が可能です。
楽天では「iframe」が非推奨
楽天市場のRMSでは、「iframe」の利用を推奨していません。
「iframe」以外のタグも含め、HTML等コーディングに関する内容は、RMSコールセンターのサポート対象外。動作の保証も、表示の保証もありません。
「iframe」は一部ブラウザで表示が崩れるなど、ページが正しく表示されないといった動作上の問題があり、利用の際は完全に自己責任での管理となります。
楽天市場でのページ構築が大変という場合は、外部委託という選択肢もあります。
スマートフォン向けページでは「iframe」非対応
2022年4月から始まっている「スマートフォン用店舗トップページ改善プロジェクト」により、スマートフォン向けのページでは「iframe」も含め、HTMLコードが使用できなくなりました。
HTMLコードが自由に使える楽天市場のサーバー「楽天GOLD」を使用してのスマートフォントップページ構築も、2023年下半期でサービス終了予定です。
楽天GOLDについての詳細は以下の記事で解説していますので、併せてご覧ください。
PC版でもHTMLタグ使用に制限あり
RMSの店舗構築機能「R-Storefront」では、利用可能なHTMLタグに制限があります。
PC用画面では編集時にチェックが入り、利用できないHTMLタグを入力すると「入力内容に誤りがあります」「許可されないHTMLタグが入力されています」と表示され、修正対応が必要です。
RMSのR-Storefrontでは以下の入力項目について、HTMLレベル0から3までの4つのレベルで、HTMLタグの利用が制限されています。
- スマートフォン
- モバイル
- 医薬品以外
| 項目 | 利用できない場所 |
|---|---|
| HTMLレベル0 | 商品名、項目選択肢別在庫用縦軸項目名、項目選択肢別在庫用横軸項目名 |
| HTMLレベル1 | キャッチコピー |
| HTMLレベル2 | PC用商品説明文、PC用販売説明文、カテゴリ説明文上、カテゴリ説明文下、トップ説明文上 トップ説明文下、決済方法の備考欄(PC)、配送方法の備考欄、送料設定の備考欄 |
| HTMLレベル3 | ヘッダー・フッター・レフトナビ、共通説明文（大） |
これらのレベルごとに利用できないHTMLタグが一覧表で示されており、その詳細は店舗運営Naviでまとめてチェック可能です。
→ 店舗運営Navi「R-StorefrontにおけるHTMLタグの制限」
入力項目によってはHTMLタグの制限だけでなく、HTMLの属性にも制限あります。
→ 店舗運営Navi「R-StorefrontにおけるHTMLタグ属性の制限」
楽天市場のECサイトは、独自の仕様でなかなか作成が難しい面もあるでしょう。楽天市場のショップ運用でのお悩みごとは、ECサイト構築・運営のプロであるECサイト運営代行会社にお気軽にご相談ください。数々のECサイト構築に携わった知見を最大限に活用してサポートいたします。
楽天で「iframe」を利用する方法
楽天市場では推奨されていませんが、「iframe」の利用方法もチェックしておきましょう。楽天市場で「iframe」を利用するには、トップページ編集画面で、以下のタグを使用します。
<iframe> </iframe>楽天市場の店舗運営Naviでは、以下のコードをサンプルタグとして示しています。
<iframe src="https://〇〇〇.html" height="400" width="200" frameborder="0" scrolling="yes">
お使いのブラウザはインラインフレームに対応していないようです。<br>
お手数ですがこの部分はインラインフレーム対応のブラウザでご覧ください。
</iframe>引用：店舗運営Navi
上記コードの属性が意味する内容は以下のとおりです。
| HTML属性 | 属性の意味 |
|---|---|
| src=”https://〇〇〇.html” | インラインフレーム内に表示させたいページのURL。 |
| height=”400″ | インラインフレームの縦幅 ピクセルで指定する場合は数字だけになります。%で表示する場合は数字の後ろに%をつける。 |
| width=”200″ | インラインフレームの横幅 ピクセルで指定する場合は数字だけになります。%で表示する場合は数字の後ろに%をつける。 |
| frameborder=”0″ | フレーム枠の表示指定。 表示する場合は1、表示しない場合は0 |
| scrolling=”yes” | スクロールバーの表示指定。 表示させる場合はyes、表示しない場合はno、状況によって自動判断させる場合はauto |
トップページ編集画面でこのコードを入力し、[プレビューへ進む]で画面表示を確認、[登録する]で登録完了です。
念のため、各ブラウザや端末での表示を確認することをおすすめします。
楽天で「iframe」を利用する際の注意点
楽天市場のページ作成で「iframe」を利用する際は、以下の点に注意が必要です。
- 楽天市場では非推奨＆サポート対象外
- 外部リンクへの誘導はルール違反
楽天市場ではHTMLタグの利用が非推奨であり、サポートも対象外となっています。コーディング知識があり、自社で問題なく運用できる場合やプロに依頼する場合を除き、使用は控えたほうがいいでしょう。
また、楽天市場のページから外部サイトへの誘導は、楽天市場のペナルティ（違反点数精度）の対象となりますので、くれぐれもご注意を。
楽天市場のペナルティについての詳細は、以下の記事で詳しく紹介していますので、こちらを参考にしてください。
楽天市場のページづくりで困ったらプロに相談！
楽天市場では「iframe」を含め、HTMLコードの利用に様々に制限があります。
楽天GOLDのスマートフォン版トップページは2023年下半期には終了予定となっていますので、こちらも含めてページ構築の方法を見直しておきましょう。
EC事業を強化するにはECサイトの構築・運用が欠かせませんが、ECショップ構築の段階でつまずいていては成果にもつながりません。楽天市場のショップページや商品ページ構築で困ったら、プロに頼る選択肢もあります。
