本文へ移動
RapidShop
マイページ

Proの商品比較カード・デザイン設定

Rapidアイテム Pro 対象バージョン: Rapidアイテム 1.7.0/Pro 1.5.8 最終確認日:

Rapidアイテム Proでは、最大3商品の比較と、ボタン・カードの詳しいデザイン設定を使えます。先に無料版とProを有効化し、Proのライセンス認証を済ませてください。

比較する商品を追加する

  1. 記事編集画面でRapidアイテムブロックを追加します。
  2. 「商品検索」または「登録商品を選択」から、最初の商品を選びます。
  3. カード下の「複数商品を追加」を押し、次の商品を選びます。
  4. 商品ごとの短いタブ名を入力し、「この内容で追加」を押します。
  5. 3商品を比較するときは、もう一度「複数商品を追加」を押します。
比較する2商品のタブ名を入力する画面
タブ名は全角12文字・半角24文字以内。型番や用途など、区別しやすい名前にします。

レイアウトと並び順を決める

ブロック上部の「比較レイアウト」から「自動」「カラム」「タブ」を選びます。横に並べて比較したいときはカラム、切り替えて見せたいときはタブを選び、プレビューで確認します。

比較レイアウト、商品別のタブ名、左右の移動ボタン
タブ名は後から変更できます。「左へ」「右へ」で商品の順番を変えます。

商品を変えるときは「差し替え」を使います。比較する商品が決まったら、記事のプレビューでPCとスマートフォンの両方を確認してください。

ボタンとカードの見た目を整える

  1. 「Rapidアイテム → 設定 → ビジュアル設定」を開きます。
  2. ボタンの文言・サイズ・塗り・形を選びます。
  3. カードの背景色・枠・形を調整します。
  4. 上部の「現在の商品カード」で仕上がりを確認します。
  5. 「変更を保存」を押し、公開記事の商品カードも確認します。
ボタンの文言・サイズ・塗り・形とカード背景・枠の設定
各項目を少しずつ変えると、見た目の違いを確認しやすくなります。
ビジュアル設定の現在の商品カードのプレビュー
設定画面に用意されたサンプル商品で確認できます。公開カードへ反映するには保存します。

ビジュアル設定はサイト内の商品カードに共通して使われます。変更後は、比較カードに加えて通常の1商品カードも確認してください。

公開前に確認すること

  • タブ名だけで各商品の違いが分かる。
  • 商品の順番とリンク先が合っている。
  • スマートフォンでも商品名とボタンが読みやすい。
  • 背景と文字の色が近すぎず、ボタンを見分けられる。

ボタンや画像が出ない場合は、商品カードの表示トラブルガイドで設定を確認できます。