商品ページの上部説明(販促コンテンツ)は作れますか?

はい、誰でも簡単に作れます。

ビーノ独自の高機能かつ簡単な編集モードをご用意しておりますので、Web初心者店舗様もご安心ください!

目次

  1. 販促コンテンツとは
  2. ビーノ独自の3つのモード
  3. かんたんモード
    1. 機能について
    2. 使い方
  4. しっかりモード
    1. 機能について
    2. 使い方
  5. HTML貼り付け
    1. 機能について
    2. 使い方

販促コンテンツとは

販促コンテンツというのは、その名の通り「商品の販売を促進するための情報」を指します。

よりお客様が商品をお買い求めしやすくなるよう、適切な画像とテキストで商品をアプローチする…楽天市場で言うところの以下の部分となります。

楽天市場での販促コンテンツの位置

多くのショップ様では商品画像や買い物カゴより上の部分が、販促コンテンツにあたります。

上記箇所はRMSにおける「PC用販売説明文」箇所となりますが、要は商品の買い物カゴに至るまでのこの部分にどれだけ魅力的な商品情報を載せられるか、が売上の決め手となります!

ビーノ独自の3つのモード

とはいえ、販促コンテンツを作るのは決して簡単ではありません。

自力で作ろうと思いますと、当然ながらHTMLタグの知識が必要となり、少しでも記述ミスがあると楽天市場RMSでエラーが発生。
頑張って正しいHTMLタグに直しても、RMSの使用禁止タグに引っかかってエラーが発生…。
修正してもRMSの文字数制限でエラーが発生………。

と、まだWebページ制作に不慣れなショップ様の場合、こんな苦い経験があるかと思います。

そこで!

ビーノでは、楽天市場やYahoo!ショッピングなどのECモールに出店して間もない初心者ショップ様、
出店から2年以上が経過し、しっかり売上を伸ばしていきたい成長中ショップ様、
多くの制作スタッフを社内に持ち、効率化を進めたい大手ショップ様、
この三者三様にお応えできる独自システムを開発しました。

商品登録画面から作成が可能

まずは「商品登録機能」より上部説明こと販促コンテンツを作り込みたい商品の編集に入りましょう。

下にスクロールすると、

商品の特長
RMS:PC用販売説明文と
スマホ用商品説明文に挿入

という設定箇所がありますので、それぞれのモードを選んで編集を行いましょう!

かんたんモード

機能について

「かんたんモード」はその名の通り、とにかく簡単に知識不要で販促コンテンツが作成できる機能です。

対象となるショップ様は以下

  • 簡単に、素早く商品ページを作り込みたい
  • HTMLタグを書いたことがない
  • デザイン制作の出来る人がいない
  • Web初心者、出店したばかり

使い方

3つあるモードのうち「かんたんモード」のボタンを選択。
1つめの特長グループが表示されているかと思いますので、それぞれに内容を入力するだけ(˚灬˚)ノ

商品の特長について見出しを付ける

まず商品の特長に関するタイトルを簡潔かつ魅力的につけましょう!

例)店長も驚いた!羽毛量120%増加のふかふかクッション

特長に関する説明画像を選ぶ

次にタイトルに沿った説明用の画像を選びます。
楽天Cabinetにアップロードされている画像やPC内の画像なども指定可能です。

詳しい説明コメントを書く

その特長についての詳しい説明も可能な限り書きましょう!
お客様はここを読んで購入の意思決定を行いますので、商品の魅力が伝わるようしっかり説明することが大事です。

完成イメージの確認も簡単!

画面下部にある「完成イメージを見る」ボタンを押すことで、実際に商品ページにどのように表示されるかの確認もできますよ〜(˚灬˚)ノ

しっかりモード

機能について

「しっかりモード」は、専用のエディタを使い、HTMLタグが分からない方でもある程度自由にコンテンツ作りができる機能です。

対象となるショップ様は以下

  • カスタマイズして商品ページを作り込みたい
  • HTMLタグは殆ど分からない
  • ちょっとした画像素材やバナーはある
  • 出店2年目以降、コンテンツ作りに力を入れていきたい

使い方

まず「しっかりモード」ボタンを選択しましょう。

しっかりモードの場所

専用の編集エディタが表示されますので、自由にテキスト記述、画像追加を行いましょう!
上部の装飾ボタンを使うことで文字サイズや色の変更はもちろん、様々なカスタマイズが可能です。

1.見出しの付け方と解除

SEOでも重要となる見出し(H1〜H4タグ)。

しっかりモードでは、旗のようなアイコンをクリックすることで、選択したテキストを見出し(タイトル)として大きく表示することが可能です。

見出しには専用の装飾(文字サイズ&文字の太さ)が自動で指定されるため、見出しの上から文字サイズを変更することはできません。

見出しを解除したいときは、同じアイコン内の「段落」を選びましょう!

2.文字のサイズ変更と解除

文字サイズの変更は、Tが2つ重なったようなアイコンをクリック!
小さなテキストから巨大テキストまでお好みで選べます。

文字サイズの変更時は必ず都度解除!

※注意点として、文字サイズを変更するときは必ず都度右上の「Tx」アイコンで「装飾解除」を行ってください。
解除を行わずに重ね付けしていくと、無駄なコードが増えてしまい、エラーの原因や文字数オーバーの原因となります!

3.文字のカラー変更と解除

次は色替えしたいテキストを選択した上で、 A と書かれたアイコンを押して、カラー変更をしてみましょう!
パレットが開くのでお好きな色を選ぶだけ。

※文字のカラー変更時も上と同様に、必ずその都度右上の「Tx」アイコンで「装飾解除」を行ってください。

もし、装飾の解除を行わないまま、連続で重ね付けを行うと…?

お分かりでしょうか?

文字カラーを重ね付けする形で2回選択した場合、実際に適用しているカラーは1色なのに、コード上は2色分のHTMLタグが出力されてしまっています。

エラーの発生回避、および無駄な文字数を削減するためにも、お手数ですが装飾の解除は都度お願い致します!

申し訳ありませんが、こちらはBiiino(ビーノ)が導入しているOSSプラグインの仕様(他サービス)のため、現時点では根本的な解決が困難です。

いずれ独自エディタの開発も検討しておりますが、当面は他機能の開発を優先するため、スケジュールは未定となります(´灬`;)ゴメンネ…

4.リンク先の設定

もちろん画像やテキストにリンクURLも貼れます。

対象を選択して、クリップみたいなアイコンをクリック!
リンク先のURLをコピー・貼り付けしましょう。

対象のECモールで許可されているURL以外は登録時にエラーとなります。

5.画像の挿入

例えば画像を追加したいときは、以下のようにエディタ上から直接画像を選んで挿入!

画像の挿入もらくらく!

画像の右下あたりをドラッグ(左クリックしながら引っ張る)することで、なんとサイズ変更まで簡単に出来てしまいます!

※上手く右下が掴めないときは改行してみたり、一時保存してみたりしてからお試しください(˚灬˚)ノ

6.HTMLでの直接入力・編集も可能!

エディタ左上の < > ボタンを押すことで、HTMLでの入力モードにも切り替え可能。
直接HTMLタグを貼り付けた上で一部修正といった際にもお使いいただけますよ!

なお、エディタ右上の4つ矢印マークのようなボタンを押すことで、実際の商品ページ内表示サイズに画面を拡大して編集することも可能です。

7.改行の挿入について

改行を挿入する際、2種類の方法があります。

1段落分、スペースを空けたい場合
 「エンターキー」を押すことで、1段落分の改行が入ります。

1行分、下に改行したいだけの場合
 「シフトキー」を押しながら「エンターキー」を押すことで、一行下に改行されます。

上手く改行が入らない場合などは、<>ボタンより直接HTMLで <br> タグを書き込んじゃうのも手ですよ!

8.その他、左右中央揃えや罫線

最後は地味〜に嬉しい機能たち。

3種類の三本線アイコンでテキストや画像の「位置揃え」、
一本線アイコンで「水平罫線」を引くことが可能です。

完成イメージの確認も簡単!

同じく画面下部にある「完成イメージを見る」ボタンを押すことで、実際に商品ページにどのように表示されるかの確認もできます!

HTML貼り付け

機能について

HTML貼り付けは、その名の通り既に完成しているHTMLタグを直接貼り付けられる機能となります。
HTMLタグやCSSに精通した上級者向けの機能です。

対象となるショップ様は以下

  • 社内もしくは外注にてHTMLコーディングが可能
  • 既にRMSに登録済みの販売説明文をビーノに入れたい
  • DWやAtomなど各種ソフトで作成したHTMLを使用したい

使い方

使い方は至ってシンプル。
別途ご用意済みのHTMLタグをコピー&ペーストで貼り付けるだけ!

完成イメージの確認も簡単!

こちらも画面下部にある「完成イメージを見る」ボタンを押すことで、実際に商品ページにどのように表示されるかの確認が可能です。

まとめ

いかがでしたでしょうか?

Biiino(ビーノ)ではショップ様の熟練度や作りたいコンテンツ内容に応じた使い方が可能です。

「でもやっぱり分からないな〜」というときは、遠慮なくカスタマーサポートも利用してくださいね!

知りたかった点は解決しましたか?

関連するFAQなど