Shopifyで商品の特徴をレーダーチャートや横バーで表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/10/07

はじめに

Shopify は、ネットショップを開いて運営するためのプラットフォームです。そこに機能を足すのが Shopify アプリで、管理画面からインストールするだけで使えるようになります。

この「シンプル商品特徴グラフ｜お手軽性能レーダーチャート」は、商品の特徴を、商品ページにレーダーチャートか横バーで表示するアプリです。

コーヒーの酸味やコク、日本酒の甘辛、化粧品の保湿力。商品説明の文章で「酸味は強め、苦味は控えめ」と書いても、比べながら読むのは大変です。このアプリで 1〜8 個の項目に値を入れておけば、お客様は商品ページを開いた瞬間に「この商品はこういう味」と形で分かります。商品ごとに形が変わるので、似た商品を見比べるときにも役立ちます。

料金は月額 $3.99、年額 $39.99 です。インストール後 7 日間は無料でお試しいただけます。

アプリストア: https://apps.shopify.com/ur-product-radar-bar-charts

シンプル商品特徴グラフ｜お手軽性能レーダーチャートのメイン画像

「シンプル商品特徴グラフ」でできること

このアプリでできることは、大きく次の 5 つです。

商品の特徴を 3〜8 軸のレーダーチャートで表示できます。
同じデータのまま、両端にラベルが付いた横バー表示に切り替えられます。
値は商品メタフィールドに保存され、一括編集ツールでも更新できます。
コレクションに項目を設定すれば、各商品は値を入れるだけで済みます。
グラフは Liquid で描画し、ストアに JavaScript を追加しません。

商品ページにレーダーチャートを出す

項目（軸）を 3 つ以上そろえると、多角形のレーダーチャートになります。酸味が立つ浅煎り、苦味とコクに寄った深煎り、と商品ごとに形が変わるので、違いがひと目で伝わります。

商品ページにレーダーチャートを表示したストア

同じデータを横バーで見せる

表示形式を「横バー」にすると、同じ値を % 付きの横棒で表示します。数字で比べたい商品や、項目名が長い商品に向いています。「低い側のラベルを使う」をオンにすると、「Mellow ↔ Bright」のように両端に言葉を置いた表示にもできます。

横バーで値を表示したストア

管理画面から項目と値を入れる

商品を選んで、項目の名前と値を入れるだけです。「コーヒー」「日本酒」「ワイン」「化粧品」のプリセットを選ぶと、項目がまとめて埋まります。

管理画面で項目と値を設定する画面

見た目はテーマエディタで整える

色・大きさ・文字・背景・枠線・角の丸み・影・余白を、テーマエディタからコードを書かずに変えられます。

テーマエディタでチャートの見た目を調整する画面

インストールする

インストールは Shopify の管理画面から行います。数分で終わります。

1. 管理画面の「設定」を開く

Shopify の管理画面を開き、左下の「設定」をクリックします。

Shopify 管理画面の左下にある設定

2. 「アプリと販売チャネル」から Shopify App Store を開く

設定の中の「アプリと販売チャネル」を開き、「Shopify App Store」をクリックします。

アプリと販売チャネルから Shopify App Store を開く

3. アプリを検索する

検索窓に「シンプル商品特徴グラフ」と入力して検索します。

4. アプリをインストールする

アプリの詳細ページが開いたら「インストール」をクリックします。続けて権限の確認画面が出るので、内容を確認して進めてください。料金プランの画面が出たら、プランを選んで承認します（7 日間は無料です）。

シンプル商品特徴グラフのアプリ詳細ページ

まず最初にやる設定

インストールしただけでは、ストアには何も表示されません。「テーマにブロックを置く」と「商品に値を入れる」の 2 つがそろって、はじめて商品ページにチャートが出ます。最短の手順は次の 4 つです。

アプリの「設定」画面で「テーマに追加」をクリックする
開いたテーマエディタで「保存」をクリックする
サイドバーの「商品ごとの設定」で「商品を追加」から商品を選ぶ
「プリセットから軸を埋める」で「適用」し、各軸に値を入れて「保存する」をクリックする

「テーマに追加」は商品ページに追加される

アプリを開くと最初に出る「設定」画面の「テーマに属性チャート機能を追加」で、「テーマを選択」から追加先のテーマを選び、「テーマに追加」をクリックします。

アプリの設定画面。テーマに属性チャート機能を追加・商品カードの案内・言語設定が並ぶ

新しいタブでテーマエディタが開き、商品ページ（商品テンプレート）の新しい「セクション」の中に「シンプル商品特徴グラフ」ブロックが追加された状態になります。ホームページやコレクションページには追加されません。右上の「保存」をクリックすると確定します。

「テーマに追加」直後のテーマエディタ。商品テンプレートの新しいセクションにブロックが入っている

追加される場所はページの下のほう（おすすめ商品の下など）です。商品説明のすぐ下に置きたいときは、左のツリーで「商品情報」セクションの中へドラッグして移すか、「商品情報」の「ブロックを追加」から「アプリ」タブで「シンプル商品特徴グラフ」を選んでください。
「テーマをプレビュー」は、選んだテーマのテーマエディタを商品テンプレートで開くだけで、ブロックは追加しません。
「テーマを選択」には公開中のテーマと未公開のテーマが並び、公開中のテーマには「（公開中のテーマ）」が付いて最初から選ばれています。テーマのバージョンによっては選択欄が空欄になることがあります。その場合はテーマエディタの「ブロックを追加」から手動で追加してください。
このアプリには「アプリ埋め込み」はありません。テーマエディタの「アプリ埋め込み」を探す必要はありません。

ブロックを追加した直後は、表示が崩れることがある

テーマエディタでブロックを追加した直後は、図が黒く潰れるなど表示が崩れて見えることがあります。ページを再読み込みすると正しく表示されます（ブロックの設定パネルの先頭にも「ブロックを追加した直後は表示が崩れることがあります。ページを再読み込みしてください。」と書かれています）。

管理画面でできること

アプリの管理画面は、左のサイドバーの 3 つの画面でできています。

設定 … テーマへの追加と、管理画面の言語
商品ごとの設定 … 商品 1 つずつにチャートを設定する
コレクション設定 … コレクションに項目を決め、中の商品にまとめて使う

設定画面

アプリを開くと最初に表示される画面です。

テーマに属性チャート機能を追加

「テーマを選択」「テーマに追加」「テーマをプレビュー」の使い方は、前の章「まず最初にやる設定」のとおりです。

その下の黄色い注意書きは、「テーマに追加」で自動追加がうまくいかないときの案内です。

商品カードにも属性チャートを追加する

青い案内のとおり、テーマエディタで手動でブロックを追加すると、対応しているテーマではコレクションページなどの商品カードの中にもチャートを出せます。手順は「ストアフロントの設定」の章で説明します。

言語設定

「言語を選択」で管理画面の表示言語を選び、「変更する」をクリックします。選べるのは Čeština / Dansk / Deutsch / English / Español / Français / Italiano / Nederlands / Norsk (bokmål) / Polski / Português (Brasil) / Português (Portugal) / Suomi / Svenska / Türkçe / ภาษาไทย / 日本語 / 简体中文 / 繁體中文 / 한국어 の 20 言語です。

初期値は Shopify 管理画面の言語です。
選んだ言語はお使いのブラウザに保存されます。別のパソコンやブラウザで開くと、そちらでは初期値に戻ります。
画面右下の「ご利用ガイド」へのリンクは、管理画面の言語が日本語のときだけ表示されます。

商品ごとの設定

サイドバーの「商品ごとの設定」を開くと、「商品ごとのチャート設定」の一覧が出ます。

商品ごとのチャート設定の一覧。商品名と軸の数が並ぶ

各行に商品画像・商品名と、軸の数（例: 5軸）が表示されます。行をクリックすると、その商品の編集画面が開きます。
右上の「商品を追加」をクリックすると Shopify の商品選択が開き、選んだ商品の編集画面に移ります。
一覧は 25 件ずつ表示されます。
この一覧に出るのは商品ごとに設定した商品だけです。コレクション設定で表示している商品は出ません（画面の注記にも書かれています）。
まだ 1 件も設定していないときは「まだ設定された商品がありません」と表示され、「商品を追加」ボタンが出ます。

商品のチャートを編集する

商品の編集画面では、上から「表示形式」「低い側のラベルを使う」「最大値」「プリセットから軸を埋める」「軸」の順に設定します。新しく開いたときの初期値は、表示形式がレーダーチャート、最大値が 5、低い側のラベルはオフ、軸は空の 1 行です。

商品の編集画面。表示形式・低い側のラベルを使う・最大値・プリセットから軸を埋める

表示形式

「レーダーチャート」か「横バー」のどちらかを押して選びます。横に小さな見本が出ます。

レーダーチャート … 「多角形で値を示します（3〜8 軸）」。項目の全体のバランスを見せたいときに向いています。
横バー … 「横バーで値を % 表示します」。値を数字で比べたいとき、項目名が長いときに向いています。

🚨 レーダーチャートを選んでも、値が入った軸が 2 つ以下だとストアでは横バーで表示されます。 多角形にならないためです。画面にも「値が入っている軸が2つ以下のため、ストアフロントでは横バーで表示されます。レーダーチャートで表示するには、値まで入力した軸を3つ以上にしてください。」と警告が出ます。

低い側のラベルを使う

オンにすると、各軸に「低い側のラベル」の入力欄が増えます。横バーの左端に低い側のラベル、右端に通常のラベルが並び、「Mellow ↔ Bright」「辛口 ↔ 甘口」のように、どちらに寄っているかを言葉で見せられます。

横バーで低い側のラベルを使うをオンにした商品の編集画面

横バー専用です。レーダーチャートのときは「横バー表示のときだけ効きます」と表示され、オンにしても見た目は変わりません。
オンにすると、横バーの右端の % は表示されなくなります（両端がラベルになるため）。
低い側のラベルが空の軸があると「低い側のラベルが未入力の軸があります。横バーでは、その行の左側が空欄で表示されます。」と警告が出ます。保存はできます。

最大値

値の上限です。初期値は 5 で、1 以上の整数だけを入れられます（2.5 や 0 は入りません）。5 段階評価なら 5、10 点満点なら 10 にします。

レーダーチャートは最大値を外周として描きます。
横バーの % は「値 ÷ 最大値 × 100」を整数に丸めたものです（最大値 5 で値 2 なら 40%）。

プリセットから軸を埋める

よく使う項目の組み合わせを選んで「適用」をクリックすると、軸がまとめて入ります。選べるのは次の 4 つで、最初は「コーヒー」が選ばれています。

プリセット	入る軸	表示形式
コーヒー	酸味・苦味・コク・香り	レーダーチャート
日本酒	甘辛・濃淡・香り・キレ	レーダーチャート
ワイン	甘辛・酸味・渋み・ボディ	レーダーチャート
化粧品	保湿・さっぱり感・伸び・香り	横バー

すでに軸が入っているときは「プリセットを適用しますか？」の確認が出ます。「適用する」で置き換え、「キャンセル」でやめます。

プリセットを適用しますか？の確認ダイアログ

🚨 プリセットを適用すると、表示形式・最大値（5）・軸がまとめて置き換わり、入力中の値は消えます。 横バーにしていた商品でコーヒーのプリセットを適用すると、表示形式がレーダーチャートに戻ります。横バーで使う商品は、適用した後で「横バー」を押し直してから保存してください。

プリセットの項目は、同じ名前の項目を複数のプリセットで共有しています（例: 香り、酸味）。共有している項目は値も共有されます。

軸（項目）を設定する

軸ごとに「ラベル」「値の在り処」「値」を入れます。

軸の入力欄。ラベル・値の在り処・メタフィールドを選択・値

ラベル … ストアに表示する項目名です（例: 酸味、Acidity）。
値の在り処 … 値をどこに保存するかです。次の 3 つから選びます。
値 … 0 以上、最大値以下の数を入れます。最大値を超える値は保存できません。

軸の右のボタンで「上へ移動」「下へ移動」「この軸を削除」ができます。並び順はそのままストアの表示順になります（レーダーチャートは上から時計回り、横バーは上から順）。「軸を追加」で 1 行増やせます。軸は 1〜8 つまでで、8 つになると「軸を追加」は押せなくなります。

値の在り処: 既存の項目から選ぶ

ストアにすでにある商品メタフィールドを「メタフィールドを選択」から選びます。候補は「名前（namespace.key）」の形で並びます。

候補に出るのは、整数・小数・評価・1 行テキスト型で、ストアフロントに公開されている商品メタフィールドだけです。候補が無いときは「選択できる項目がありません」と表示されます。
評価型・1 行テキスト型の項目は、アプリからは値を編集できず「値（読み取り専用）」になります。Shopify の商品管理画面で値を入れてください。評価型は「値 ÷ 評価の上限 × 最大値」に換算して表示されます。

値の在り処: 新しく作る

まだ項目が無いときは「新しく作る」を選び、「新しい項目名（半角英数字）」に名前を入れます。下に「sa136_charts.〇〇として作成します」と表示され、保存すると商品メタフィールドが作られます。

値の在り処で新しく作るを選んだ軸。sa136_charts.finish として作成しますと表示されている

項目名に使えるのは半角英数字と _ だけです。size / first / last は使えません。
作られる項目は整数型です。3.5 のような小数は保存できず「保存に失敗しました」になります。小数を使いたいときは、小数型の商品メタフィールドを Shopify の設定で作り、「既存の項目から選ぶ」で選んでください。
一度作った項目は、ほかの商品でも「既存の項目から選ぶ」の候補に出ます。同じ項目を使えば、商品どうしで同じ軸を比べられます。

値の在り処: 手動で入力する

「namespace.key を直接入力」に、商品メタフィールドの namespace.key を直接書きます。候補に出てこない項目を使いたいときのための入口です。

値の在り処で手動で入力するを選んだ軸。namespace.key を直接入力の欄

「namespace.key」の形でないと「「namespace.key」の形式で入力してください」と表示されます。
同じ項目を 2 つの軸に指定すると保存できません（「同じ項目が複数の軸に指定されています」）。

保存する

画面下の「保存する」をクリックすると、「保存しました」と表示されます。入力に誤りがあると、その欄の下に理由が出ます（「ラベルを入力してください」「値が最大値を超えています」など）。Shopify 側で保存が拒否されたときは、赤い「保存に失敗しました」に理由が表示され、入力内容はそのまま残ります。

値の欄を空にして保存しても、すでに入っている値は消えません。 値を消したいときは、Shopify の商品管理画面のメタフィールド欄から消してください。
チャートの設定（表示形式・最大値・軸）はアプリのメタフィールドに、軸の値は商品メタフィールドに保存されます。値は Matrixify などの一括編集ツールでもまとめて更新できます。

この商品の設定を削除する

画面下の「この商品の設定を削除」をクリックすると、「この商品の設定を削除しますか？」の確認が出ます。「削除する」で削除され、一覧に戻ります。

この商品の設定を削除しますか？の確認ダイアログ。値のメタフィールドは削除されませんと書かれている

消えるのはチャートの設定（軸の定義）だけで、値のメタフィールドは残ります。
その商品が属するコレクションに設定があれば、削除後はコレクションの設定で表示されます。

コレクション設定

同じ項目を使う商品がたくさんあるときは、コレクションに軸を決めておくと、中の商品は値を入れるだけで済みます。サイドバーの「コレクション設定」を開くと、「コレクションごとのチャート設定」の一覧が出ます。

コレクションごとのチャート設定の一覧

各行にコレクション名・商品数（例: 3商品）・軸の数が表示されます。オンラインストアに公開していないコレクションには「オンラインストア非公開」の印が付きます。
右上の「コレクションを追加」で Shopify のコレクション選択が開き、選んだコレクションの編集画面に移ります。一覧は 25 件ずつです。
画面の注記のとおり、同じ商品が複数のコレクション設定に入っているときは、ハンドル（URL の名前）の順で先のものが使われます。

コレクションの軸を設定する

コレクションの編集画面も、「表示形式」「低い側のラベルを使う」「最大値」「プリセットから軸を埋める」「軸」の使い方は商品の編集画面と同じです。違いは、ここでは値を入れないことです（値は商品ごとに持つため）。

コレクションの編集画面。コレクション内の商品それぞれの項目の値で表示されますという案内

レーダーチャートを選んでいて、ラベルと値の在り処がそろった軸が 2 つ以下のときは、「ストアフロントでは横バーで表示されます」と警告が出ます。
オンラインストアに公開していないコレクションでは「このコレクションはオンラインストアに公開されていないため、ストアフロントには反映されません。」と表示されます。公開していないコレクションの設定は、ストアには使われません。

値の一覧で商品の値をまとめて入れる

軸を「保存する」と、画面の下に「値の一覧」が現れます。コレクション内の商品が行、軸が列になった表で、商品ごとの値をまとめて入れられます。入れ終わったら「値を保存する」をクリックします。

値の一覧。商品ごとに酸味・苦味・コク・香り・甘みの値が並ぶ

「値を保存する」は、値を 1 つ以上書き換えるまで押せません。
表は 25 商品ずつ表示され、続きは「もっと見る」で読み込みます。
ラベルが空の軸の列は「（ラベル未設定）」と表示されます。

コレクションの設定を削除する

「このコレクションの設定を削除（最大◯件の商品に影響）」をクリックすると確認が出ます。

このコレクションの設定を削除しますか？の確認ダイアログ

「配下の商品でチャートの表示が変わります。商品固有の設定があるものは変わりません。」のとおり、商品ごとの設定がある商品はそのままです。
商品メタフィールドの値は残ります。

商品の設定とコレクションの設定、どちらが使われるか

1 つの商品に両方の設定がある場合は、次の順で決まります。

商品ごとの設定があれば、それを使います。
無ければ、その商品が入っている公開中のコレクションのうち、ハンドルの順で最初に設定があるものを使います。

コレクションの設定で表示されている商品を「商品ごとの設定」から開くと、「この商品は現在、コレクション「◯◯」の設定で表示されています。」と表示され、値だけを編集できます。値だけ保存しても、表示はコレクションの設定のままです。その商品だけ軸を変えたいときは「コレクション設定をコピーして開始」（または「この商品専用の軸に切り替える」）をクリックしてから保存すると、その商品専用の設定になり、以後はそちらが優先されます。

ストアフロントの設定

ストアに表示されるチャートの見た目は、テーマエディタのブロック「シンプル商品特徴グラフ」で決めます。テーマエディタで商品ページを開き、プレビュー上のチャートか、左のツリーの「シンプル商品特徴グラフ」をクリックすると設定パネルが開きます。

コンテンツ設定

ブロックの設定パネル。コンテンツ設定（商品・見出し）とデザイン設定

設定	内容	初期値
商品	どの商品のチャートを出すか。商品ページでは「商品情報から」、商品カードの中では「商品カードから」自動で決まります	自動（その場所の商品）
見出し	チャートの上に出す見出し（例: 味わいの特徴）。空欄なら見出しは出ません	空欄

デザイン設定

設定	内容	範囲・選択肢	初期値
幅いっぱいに表示	オンでブロックの幅いっぱいに広げます	オン／オフ	オン
チャートの大きさ	チャートの幅。「幅いっぱいに表示」がオフのときだけ表示されます	160〜480px（20px 刻み）	280px
ラベルの文字数	レーダーチャートの軸ラベルを、この文字数で切り詰めます	4〜20 文字	10
文字サイズ	軸ラベルと見出しの文字の大きさ	10〜24px	13px
文字の太さ	軸ラベルと見出しの太さ	標準／やや太い／太い	やや太い
塗りの色	レーダーの多角形・横バーの棒の色	色	#2C6ECB（青）
線の色	レーダーの目盛り線・横バーの背景の色	色	#C9CCD0（灰色）
文字の色	軸ラベル・見出し・% の色	色	#202223（黒）
背景色	チャートの背景	色	なし（透明）
枠線の太さ	チャートの周りの枠線	0〜8px	0px（枠線なし）
枠線の色	枠線の色	色	#C9CCD0
角の丸み	背景・枠線の角の丸み	0〜32px	0px
影	チャートの影	なし／弱め／ふつう／強め	なし

幅いっぱいに表示をオフにするとチャートの大きさが現れる

「ラベルの文字数」で切り詰められるのはレーダーチャートの軸ラベルだけです。横バーのラベルは切り詰めません。
色の初期値は固定の色で、テーマの配色には自動で合わせません。背景が暗いテーマでは、文字の色・線の色を明るい色に変えてください（初期値の黒い文字のままでは読めません）。
背景色・枠線・角の丸み・影は、チャートをカードのように浮かせたいときに組み合わせて使います。

余白設定・追加設定

余白設定（上部余白・下部余白・内側の余白）と追加設定（追加のCSS）

設定	内容	範囲	初期値
上部余白	ブロックの上の余白	0〜40px	0px
下部余白	ブロックの下の余白	0〜40px	0px
内側の余白	背景・枠線の内側の余白	0〜40px	0px
追加のCSS	チャートに追加のスタイルを当てます	—	空欄

「追加のCSS」には、画面の注記のとおり宣言だけを書きます（例: margin-top: 8px;）。セレクタや { } を書くと、そのルールは丸ごと無視されます。

商品カードの中にチャートを出す

テーマが対応していれば、ホームの商品一覧やコレクションページの商品カードの中にも、商品ごとのチャートを出せます。

テーマエディタで、商品一覧のあるページ（ホームやコレクション）を開く
左のツリーで、商品一覧のセクションの中にある「商品カード」を開く
「ブロックを追加」→「アプリ」タブから「シンプル商品特徴グラフ」を選ぶ
「保存」をクリックする

商品カードの中に置いたブロック。商品は商品カードからになっている

「商品」は未設定のままにしてください。 カードごとにその商品が自動で入ります（「商品カードから」）。ここで商品を選ぶと、全部のカードに同じ商品のチャートが出ます。
「見出し」は空にしておくのがおすすめです。 カード 1 枚ごとに同じ見出しが並んでしまうためです。
商品カードにブロックを置けるかどうかはテーマで決まります。Shopify の新しい標準テーマ Horizon は対応しています。「ブロックを追加」に「アプリ」タブが出てこないテーマには置けません。

こんなときはこう設定する

味の違いを形で見せたい（コーヒー・日本酒・ワイン）

表示形式を「レーダーチャート」にし、軸を 4〜6 つそろえます。プリセットから始めると早いです。商品ごとに形が変わるので、コレクションページに並べると違いが一目で分かります。

商品ページにレーダーチャートを表示したストア

数値で比べてほしい

表示形式を「横バー」にします。値が % で並ぶので、「ボディ 100%」のように具体的に伝わります。項目名が長い商品にも向いています。

商品ページに横バーを % 付きで表示したストア

「どちら寄りか」を言葉で伝えたい（甘口↔辛口、しっとり↔さっぱり）

表示形式を「横バー」にして「低い側のラベルを使う」をオンにし、両端の言葉を入れます。数字よりも感覚的に伝わるので、化粧品の使用感やお酒の味の説明に向いています。

低い側のラベルを使った横バー。Mellow から Bright のように両端にラベルが並ぶ

コレクションページで商品を見比べてもらいたい

商品カードの中にブロックを置き、「文字サイズ」を 12px 程度に小さくします。レーダーと横バーの商品が同じ一覧に並んでも、それぞれの形のまま表示されます。

コレクションページの商品カードにチャートが並んだストア

商品説明の下にカードのように置きたい

ブロックを「商品情報」セクションの中（商品説明の下）に移し、背景色・角の丸み（12px 程度）・影（弱め）・内側の余白（24px 程度）を組み合わせます。上の 3 枚の商品ページはこの設定です。

うまく表示されないときは

チャートがまったく表示されない

次の順に確認してください。

テーマにブロックを置いて保存したか … 「テーマに追加」で開いたテーマエディタで「保存」を押していないと、ストアには出ません。
その商品に設定があるか … 「商品ごとの設定」の一覧に出ているか、または設定のあるコレクションに入っているかを確認します。
値が入っているか … 軸を作っただけで値が空の軸は表示されません。
料金プランが有効か … 有効なプランが無いと、ストアには何も表示されません（お試し期間が終わった後など）。プランを承認し直したら、アプリの管理画面を一度開いてください。開いたときにストアへの表示が切り替わります。
コレクションが公開されているか … コレクションの設定で表示している場合、そのコレクションがオンラインストアに公開されていないと使われません。