【徹底解説】Shopify アプリ「シンプル商品特徴グラフ｜お手軽性能レーダーチャート」でできること

【徹底解説】Shopify アプリ「シンプル商品特徴グラフ｜お手軽性能レーダーチャート」でできること

コーヒー豆を何種類も扱っているストアで、「この豆は酸味が華やか、こちらは苦味とコクが重め」という違いを、お客様にどう伝えていますか。商品説明に文章で書いても、3 つ、4 つと読み比べるうちに、どれがどんな味だったか分からなくなってしまいます。実店舗なら棚の POP に味の図を描けますが、ネットショップの商品ページには、それに当たる部品が標準では用意されていません。

この記事で取り上げる「シンプル商品特徴グラフ｜お手軽性能レーダーチャート」は、商品ごとに決めた項目と数値を、商品ページにレーダーチャートか横バーとして描く Shopify アプリです。開発元は UnReact（この記事を書いている私たち）です。自社アプリだからこそ書ける、画面に出ていない制約や判定の順番まで含めて、管理画面を 1 画面ずつ、テーマエディタの設定を 1 項目ずつ解説します。

上の画像は、デモストアのホームページです。商品カードの下に、商品ごとに形の違うチャートが並んでいます。左の 2 商品は横バー、右の 3 商品はレーダーチャートで、同じ一覧の中に混ぜて置けます。どの商品がどちらで出るかは、管理画面で商品ごとに決めます。

シンプル商品特徴グラフとは

一言でいえば、「商品メタフィールドに入っている数値を、図にして商品ページに出すアプリ」です。数値そのものは Shopify の商品メタフィールドに保存され、アプリはそれを読んで描くだけ、という分担になっています。

図の形は 2 種類あります。

• レーダーチャート … 3 つ以上の項目を多角形で描きます。全体のバランスや、どこが突き出ているかが形として伝わります
• 横バー … 項目ごとに 1 本の棒を引き、右端に % を添えます。両端に言葉を置く「低い側のラベル」付きの形にもできます

こちらが商品ページのレーダーチャートです。浅煎りのエチオピアは、Acidity（酸味）と Aroma（香り）の頂点が外側へ大きく伸びた、細長い形になっています。

同じ 5 項目を横バーで出すと、こうなります。Body 100%、Acidity 40% のように数字で読めるので、「どのくらい強いのか」を具体的に知りたいお客様に向いています。

「低い側のラベルを使う」をオンにした横バーです。左に Mellow、右に Bright のように両端へ言葉を置くと、% を出さずに「どちら寄りか」だけを伝えられます。甘口と辛口、しっとりとさっぱり、のような感覚的な尺度に合う見せ方です。

仕組みの面で押さえておきたいのは次の 3 点です。

• 図はテーマ拡張のアプリブロック 1 種類で描きます。アプリ埋め込み（App Embed）はありません
• 図は Liquid が SVG と HTML を組み立てて出力するので、ストアに JavaScript のファイルを足しません
• 管理画面は「設定」「商品ごとの設定」「コレクション設定」の 3 画面だけです

シンプル商品特徴グラフのメリット

似た商品どうしの違いが形で伝わる

いちばんの価値は、商品ページを開いた瞬間に「この商品はこういう性格」と分かることです。文章で書かれた特徴は、読み終えてから頭の中で比べる必要がありますが、図なら形を見比べるだけで済みます。

中煎りのコロンビアは、どの方向にもほぼ均等に広がった五角形です。深煎りのスマトラは、Bitterness（苦味）と Body（コク）の 2 方向にだけ鋭く伸びています。2 枚を見比べると、「バランス型」と「苦味重視型」という違いが、説明を読まなくても伝わります。

コレクションページでも見比べてもらえる

ブロックを商品カードの中に置くと、コレクションページの一覧の段階で違いを見せられます。お客様が商品ページを 1 つずつ開いて戻る、という往復を減らせます。

スマートフォンでも崩れにくい

図は表示幅に合わせて縮むので、スマートフォンの縦長の画面でも読める大きさで出ます。

横バーは 1 行に「ラベル・棒・ラベル（または %）」が並ぶ形なので、狭い画面でも項目名が潰れません。項目名が長い商品は、横バーを選んでおくと安心です。

データが Shopify の中に残る

値はアプリ独自のデータベースではなく、商品メタフィールドに保存されます。そのため次のようなことができます。

• Matrixify などの一括編集ツールで、数百商品の値をまとめて入れ替えられる
• 既にストアにある数値型のメタフィールドを、そのまま軸として使える
• 設定を削除しても、値のメタフィールドは消えずに残る

ページの読み込みを重くしない

図は Liquid でページに直接書き出されます。追加で読み込むスクリプトが無いため、表示速度への影響はほとんどありません。

シンプル商品特徴グラフのデメリット

良いところだけでなく、導入前に知っておいてほしい弱点も書いておきます。

• 値を決める手間は減らない … アプリは描くだけで、数値を決めるのはストアの方です。基準が商品ごとにぶれると、比べる意味が薄れます
• 色はテーマに自動では合わない … 既定は青の塗り・灰色の線・黒い文字の固定色です。背景が暗いテーマでは、文字の色と線の色を自分で変える必要があります
• 商品カードに置けるかはテーマ次第 … Shopify の新しい標準テーマ Horizon は置けますが、Dawn のようにカードのブロックを受け付けないテーマには置けません。アプリ側では変えられません
• 全幅のセクションに置くとレーダーの文字が大きくなる … 図は幅に合わせて拡大されるため、ページ全幅に置くと軸ラベルまで一緒に大きくなります。回避策は後の章で紹介します
• 保存してもすぐ反映されないことがある … ストアフロントの表示は Shopify 側でキャッシュされ、数時間遅れることがあります
• 「新しく作る」の項目は整数だけ … アプリから作る項目は整数型なので、3.5 のような小数は入りません
• 軸のラベルは言語ごとに切り替わらない … ラベルは入力した文字がそのまま出ます。アプリには、ラベルを言語ごとに出し分ける設定がありません（% の書き方のような図の部品は 20 言語に対応しています）

最後の点は、ラベルに英語を入れておけば多くの言語のお客様に通じる、という割り切りで運用しているストアが多いはずです。デモストアも Acidity や Body のように英語で入れています。

料金プラン

料金プランは 1 つだけです。

• Basic Plan … 月額 $3.99、または年額 $39.99（年払いなら約 2 か月分お得）
• 無料体験 … インストールから 7 日間

機能の差がある複数プランはなく、どちらの払い方でも全機能を使えます。

有効なプランが無い状態では、次のようになります。

• 管理画面を開くと、Shopify の料金プラン選択ページへ自動で移動します
• ストアフロントには図が一切表示されません（「プランを有効にしてください」のような表示も出ません）
• 管理画面の一覧・編集画面には「現在のプランでは編集できません。プランをご確認ください。」と表示され、追加・保存・削除が押せなくなります

課金の状態がストアフロントへ伝わるのは、アプリの管理画面を開いたときです。プランを承認し直した直後や解約した直後は、アプリを一度開いてください。開くたびに状態がショップのメタフィールドへ書き戻され、ストアの表示可否がそれで切り替わります。

インストール

インストールは Shopify App Store から行います。管理画面の「設定」から「アプリと販売チャネル」を開き、App Store へ進んでアプリ名で検索します。

検索結果からアプリを開き、「インストール」をクリックします。権限の確認と料金プランの承認を進めると、アプリの管理画面が開きます。

インストール直後は、ストアにはまだ何も表示されません。テーマにブロックを置くことと、商品に値を入れることの 2 つがそろって、はじめて図が出ます。

アプリ管理画面の構成

アプリを開くと、Shopify 管理画面の左のサイドバーに 3 つの項目が出ます。

• 設定 … テーマへのブロックの追加、商品カードへの置き方の案内、管理画面の言語設定、おすすめアプリ
• 商品ごとの設定 … 商品 1 つずつに軸と値を決める一覧と編集画面
• コレクション設定 … コレクションに軸を決め、中の商品にまとめて当てる一覧と編集画面

画面右下には「ご利用ガイドは こちら」というリンクが出ます。このリンクは、管理画面の言語が日本語のときだけ表示されます。ガイドの中身は Shopifyで商品の特徴をレーダーチャートや横バーで表示できるアプリについて徹底解説｜ご利用ガイド で公開しています。

サイドバーに「よくある質問」が出るアプリもありますが、このアプリでは現在 FAQ を登録していないため出ません。

各画面の説明

ここからが本題です。サイドバーの順に、すべての画面と、その中の操作を 1 つずつ見ていきます。

サイドバーと課金の確認

サイドバーの 3 項目は、それぞれ次の画面につながっています。

• 「設定」→ 設定画面
• 「商品ごとの設定」→ 商品ごとのチャート設定の一覧
• 「コレクション設定」→ コレクションごとのチャート設定の一覧

アプリを開いた時点で、裏側では課金状態の確認が走っています。有効なサブスクリプションが無ければ料金プランのページへ移動し、あればその状態をショップのメタフィールドに書き込みます。料金プランの章で触れた「アプリを一度開く」が必要な理由はここにあります。

設定画面のテーマに属性チャート機能を追加

アプリを開いて最初に表示されるのが設定画面です。いちばん上のカードが「テーマに属性チャート機能を追加」です。

カードの中の操作は 3 つです。

• テーマを選択 … ブロックを追加するテーマを選びます。並ぶのは公開中のテーマと、処理中ではない未公開のテーマです。公開中のテーマには「（公開中のテーマ）」が付き、最初から選ばれています
• テーマに追加 … 選んだテーマのテーマエディタを新しいタブで開き、商品テンプレートに新しいアプリセクションを作って、その中にブロック「シンプル商品特徴グラフ」を追加します
• テーマをプレビュー … 選んだテーマのテーマエディタを商品テンプレートで開くだけです。ブロックは追加しません

カードの説明文にあるとおり、テーマのバージョンによっては選択欄が空欄になることがあります。その場合は、テーマエディタの「ブロックを追加」から手動で置きます。

カードの下の黄色い注意書きは、「テーマに追加」で自動追加がうまくいかなかったときの案内です。自動追加は Shopify のディープリンクという仕組みで行っていて、テーマ側の作りによっては受け付けられないことがあるためです。

設定画面の商品カードの案内と言語設定

黄色い注意書きの下には、青い見出しの「商品カードにも属性チャートを追加する」という案内が出ています。ここはボタンではなく説明だけのカードです。商品カードへの設置は自動化できないため、テーマエディタで手動でブロックを置く必要がある、ということを伝えています。手順は後半の「商品カードに置くときの設定」で説明します。

その下が「言語設定」です。

• 言語を選択 … 管理画面の表示言語を選びます。Č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軸）が出ます
• 行をクリックすると、その商品の編集画面が開きます
• 一覧は 25 件ずつ表示され、それを超えると前へ・次へのページ送りが出ます
• まだ 1 件も設定していないときは「まだ設定された商品がありません」「商品を選んでチャートを設定してください。」という空の状態が出て、中央に「商品を追加」ボタンが置かれます

注意したいのは、画面上部の注記にもあるとおり、この一覧に出るのは商品専用の設定を持っている商品だけ、という点です。コレクション設定で図を出している商品は、ストアに図が出ていてもここには並びません。「図が出ているのに一覧に無い」と迷ったら、コレクション設定の一覧を見てください。

右上の「商品を追加」をクリックすると、Shopify 標準の商品選択ダイアログが開きます。

選べるのは 1 件だけです。商品を選んで「追加」を押すと、その商品の編集画面へ移ります。複数の商品に同じ軸を使いたいときは、ここで 1 つずつ追加するより、後で紹介するコレクション設定を使うほうが早く済みます。

表示形式の選び方

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

「表示形式」は、2 つのボタンのどちらかを押して選びます。

• レーダーチャート … 横に五角形の見本と「多角形で値を示します（3〜8 軸）」という説明が出ます
• 横バー … 横に 3 本の棒の見本と「横バーで値を % 表示します」という説明が出ます

レーダーチャートを選んでいても、値が入った軸が 2 つ以下だと、ストアフロントでは横バーで描かれます。2 点では多角形にならないためです。そのとき編集画面には、オレンジ色の警告が出ます。

警告の文面は「値が入っている軸が2つ以下のため、ストアフロントでは横バーで表示されます。レーダーチャートで表示するには、値まで入力した軸を3つ以上にしてください。」です。軸を 3 本作っても、そのうち 1 本の値が空なら横バーになる、という点がつまずきやすいところです。

低い側のラベルを使う設定

「低い側のラベルを使う」はチェックボックスです。オンにすると、各軸のラベルの右に「低い側のラベル」の入力欄が増えます。

• 横バーの左端に低い側のラベル、右端に通常のラベルが並びます
• オンのあいだ、横バーの右端の % は表示されません。両端が言葉になるためです
• レーダーチャートを選んでいるときは、チェックボックスの下に「横バー表示のときだけ効きます」と出ます。オンにしても図は変わりません
• 低い側のラベルが空の軸があると「低い側のラベルが未入力の軸があります。横バーでは、その行の左側が空欄で表示されます。」と警告が出ます。警告は出ますが保存はできます

この設定が向いているのは、値の大小が「良い・悪い」ではない尺度です。酸味が強いことが良いとは限らないコーヒーや、甘口と辛口に優劣の無いお酒では、% で出すと「100% のほうが上等」と受け取られかねません。両端を言葉にすると、その誤解を避けられます。

最大値の決め方

「最大値」は、値の上限です。初期値は 5 で、1 以上の整数だけを入れられます。2.5 や 0 は入りません。

• レーダーチャートは、最大値を外周の円として描きます
• 横バーの % は「値 ÷ 最大値 × 100」を整数に丸めた数です。最大値 5 で値 2 なら 40% になります
• 値は 0 以上、最大値以下で入れます。最大値より大きい値は保存できません

5 段階で評価しているなら 5、10 点満点なら 10 にします。ストア全体で最大値をそろえておくと、商品をまたいで図を比べても意味が通ります。同じコーヒーなのに商品によって最大値が 5 と 10 に分かれていると、同じ形でも中身が違う、ということになってしまいます。

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

よく使う軸の組み合わせを選んで「適用」を押すと、軸がまとめて入ります。最初は「コーヒー」が選ばれています。

• コーヒー … 酸味・苦味・コク・香り（レーダーチャート）
• 日本酒 … 甘辛・濃淡・香り・キレ（レーダーチャート）
• ワイン … 甘辛・酸味・渋み・ボディ（レーダーチャート）
• 化粧品 … 保湿・さっぱり感・伸び・香り（横バー）

どのプリセットも最大値は 5 です。すでに軸が入っているときに「適用」を押すと、確認のダイアログが出ます。

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

プリセットの軸は、sa136_charts という名前空間の項目（acidity、bitterness、body、aroma、sweetness など）を使います。香り（aroma）や酸味（acidity）のように複数のプリセットに出てくる項目は、同じメタフィールドを共有しています。コーヒーとワインを両方扱うストアで、どちらにも「酸味」を使うと、同じ商品の中では値も共有される、ということです。

軸と値の在り処

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

• ラベル … ストアに出す項目名です。Acidity のような英語でも、酸味のような日本語でも構いません
• 値の在り処 … その軸の値を、どの商品メタフィールドに保存するかです
• 値 … 0 以上、最大値以下の数を入れます

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

「値の在り処」は 3 つから選びます。

• 既存の項目から選ぶ … 「メタフィールドを選択」に、ストアにある商品メタフィールドが「名前（namespace.key）」の形で並びます。先頭は「選択してください」です
• 新しく作る … 「新しい項目名（半角英数字）」に名前を入れると、保存したときに商品メタフィールドが作られます
• 手動で入力する … 「namespace.key を直接入力」に、項目の namespace.key を直接書きます

「既存の項目から選ぶ」の候補に出るのは、整数・小数・評価（rating）・1 行テキストのいずれかの型で、しかもストアフロントに公開されている商品メタフィールドだけです。条件に合うものが無いと「選択できる項目がありません」と表示されます。評価型と 1 行テキスト型の軸は、アプリからは値を書き換えられず「値（読み取り専用）」になります。値が空なら「未設定」と出ます。評価型の値は「値 ÷ 評価の上限 × 最大値」に換算して描かれます。

「新しく作る」では、入力した名前の下に「sa136_charts.〇〇 として作成します」と表示されます。作られる項目は sa136_charts という名前空間の整数型で、ストアフロントに公開された状態になります。

• 項目名に使えるのは半角英数字と _ だけです
• size / first / last という名前は使えません（Liquid で別の意味に解釈されるため）
• 整数型なので、3.5 のような小数は Shopify 側で拒否されます

一度作った項目は、ほかの商品の「既存の項目から選ぶ」にも候補として出ます。同じ項目を使い回せば、商品どうしで同じ物差しを共有できます。

「手動で入力する」は、候補に出てこない項目を指定するための入口です。namespace.key の形になっていないと「「namespace.key」の形式で入力してください」と出ます。また、どの方法で選んだ場合でも、同じ項目を 2 本の軸に指定すると「同じ項目が複数の軸に指定されています」となり保存できません。

保存と入力エラーの見え方

画面右下の「保存する」を押すと、問題が無ければ「保存しました」のトーストが出ます。入力に誤りがあると、該当する欄が赤くなり、すぐ下に理由が出ます。

出る可能性のあるエラーは次のとおりです。

• ラベルを入力してください
• 値の在り処を指定してください
• 「namespace.key」の形式で入力してください
• 同じ項目が複数の軸に指定されています
• このキー名（size / first / last）は使用できません
• 最大値を入力してください／1以上の整数を入力してください
• 値を入力してください／有効な数値を入力してください／0以上の値を入力してください
• 値が最大値を超えています
• 軸を1つ以上追加してください／軸は8つまで追加できます

入力の検査を通っても、Shopify 側で保存が拒否されることがあります。たとえば整数型の項目に小数を入れた場合です。そのときは赤い「保存に失敗しました」のバナーに理由が表示され、入力した内容はそのまま残ります。

画面には出ない仕様として、値の欄を空にして保存しても、すでに入っている値は消えません。空の欄は送信の対象から外れるためです。値を消したいときは、Shopify の商品管理画面のメタフィールド欄から消してください。

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

商品専用の設定がある商品では、画面左下に赤い文字で「この商品の設定を削除」が出ます。押すと確認のダイアログが出ます。

「削除する」を押すと「削除しました」のトーストが出て、一覧へ戻ります。消えるのは軸の定義（表示形式・最大値・軸）だけで、値のメタフィールドは残ります。その商品が設定のあるコレクションに入っていれば、削除後はコレクションの設定で描かれるようになります。

コレクション設定で表示中の商品を開いたとき

コレクション設定で図を出している商品を、商品選択から開くと、画面の上に案内が出ます。

案内の文面は「この商品は現在、コレクション「Hydrogen」の設定で表示されています。」「ここで設定すると、そちらよりこの商品の設定が優先されます。」です。この状態では、表示形式・最大値・プリセット・軸の定義は灰色で触れず、値だけを編集できます。値だけ保存しても商品専用の設定は作られず、図はコレクションの設定のまま描かれます。

その商品だけ軸を変えたいときは、案内の中の「コレクション設定をコピーして開始」を押します（設定の状況によっては「この商品専用の軸に切り替える」という名前のボタンになります）。

押すと「この商品専用の軸を設定しています。保存すると、この設定が優先されます。」という案内に変わり、すべての欄が編集できるようになります。ここで「保存する」を押したときに初めて商品専用の設定が作られ、以後はコレクションの設定より優先されます。保存せずに画面を離れれば、何も変わりません。

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

サイドバーの「コレクション設定」を開くと、「コレクションごとのチャート設定」の一覧が出ます。

• 各行には、コレクション画像・名前・商品数（例: 3商品）・軸の数のバッジが出ます
• オンラインストアに公開していないコレクションには「オンラインストア非公開」のバッジが付きます
• 右上の「コレクションを追加」で Shopify のコレクション選択（1 件）が開き、選んだコレクションの編集画面へ移ります
• 一覧は商品と同じく 25 件ずつで、超えるとページ送りが出ます
• 1 件も無いときは「まだ設定されたコレクションがありません」と「コレクションを追加」ボタンが出ます

画面上部の注記は「同じ商品が複数のコレクション設定に属する場合、ハンドル順で先のものが優先されます。値は商品ごとに設定してください。」です。ハンドルとは、コレクションの URL に使われる英数字の名前のことです。1 つの商品が「coffee」と「single-origin」の両方に入っていれば、アルファベット順で先の coffee の設定が使われます。

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

一覧からコレクションを開くと、軸を決める編集画面になります。

上部の青い案内は「この設定は、コレクション内の商品それぞれの項目の値で表示されます。値は商品ごとに設定してください（下の値一覧表から入力できます）。商品側に専用の設定があれば、そちらが優先されます。」です。

表示形式・低い側のラベルを使う・最大値・プリセットから軸を埋める・軸の入力は、商品の編集画面と同じ使い方です。新しく開いたときの初期値やエラーの文言も共通です。違うのは、軸の行に値の欄が無いことです。値は商品ごとに持つので、コレクションでは「どの項目を、どの順で、どう描くか」だけを決めます。

もう 1 つの例は、スノーボードの Hydrogen コレクションです。強さ・速さ・賢さ・硬さ・意外性という 5 本の軸を決めています。コーヒーのような食品に限らず、スポーツ用品の性格づけにも同じ仕組みが使えます。

この画面に出る警告は 2 種類あります。

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

非公開のコレクションの設定は、ストアフロントでは使われません。季節限定のコレクションを非公開にしている間は、その設定で描いていた商品の図も消えます。

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

軸の定義を「保存する」と、画面の下に「値の一覧」というカードが現れます。保存する前は出ません。

商品が行、軸が列になった表で、セルに直接値を入れていけます。

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

商品が多いストアほど、この表の効果が大きくなります。商品の編集画面を 1 つずつ開いて戻る必要が無く、表を上から埋めていくだけで済むからです。値はそれぞれの商品メタフィールドに書き込まれるので、後から商品の編集画面を開いても同じ値が入っています。

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

編集画面の左下には「このコレクションの設定を削除（最大◯件の商品に影響）」というボタンが出ます。◯にはコレクション内の商品数が入ります。

確認の文面は「配下の商品でチャートの表示が変わります。商品固有の設定があるものは変わりません。」です。商品専用の設定を持つ商品はそのまま、それ以外の商品は図が出なくなるか、ほかのコレクションの設定に切り替わります。商品メタフィールドの値はどちらの場合も残ります。

画面に出ない上限と反映のタイミング

最後に、どの画面にも書かれていない仕様をまとめておきます。

• 設定できるのは、商品・コレクションそれぞれ 3,000 件までです。上限に達すると新しい設定は保存されませんが、現在は専用のエラーメッセージが出ません。大規模なストアでは件数を意識してください
• 管理画面で保存しても、ストアフロントへの反映が数時間遅れることがあります。即時の反映は約束できません
• アンインストールすると、チャートの設定（アプリのメタフィールド）は Shopify によって削除されます。sa136_charts の値はストアのデータとして残りますが、ずっと残ることは保証されません

表示される設定の決まり方

ここまでの画面をまとめると、ある商品の図がどの設定で描かれるかは、次の順で決まります。

1. その商品に商品専用の設定があれば、それを使います
2. 無ければ、その商品が入っている公開中のコレクションのうち、ハンドルの昇順で最初に設定があるものを使います
3. どちらも無ければ、図は出ません

描く段階では、さらに次のふるい分けがあります。

• 値が空の軸は描きません
• 値が 0〜最大値の範囲を外れている軸や、数値にできない値の軸は、0 として描くのではなく軸ごと描きません
• 描ける軸が 3 本未満なら、レーダーチャートを選んでいても横バーで描きます
• 有効な料金プランが無ければ、何も描きません

一括編集ツールで値を入れたときに一部の軸だけ消えた場合は、範囲外の値が入っていないかを最初に疑ってください。

テーマへの追加

設定画面で「テーマに追加」を押すと、テーマエディタが新しいタブで開きます。

追加される場所は、商品テンプレートのいちばん下に新しく作られた「セクション」の中です。ホームページやコレクションページには追加されません。右上の「保存」を押すと確定します。

• 商品説明のすぐ下に置きたいときは、左のツリーでブロックを「商品情報」セクションの中へドラッグするか、「商品情報」の「ブロックを追加」から「アプリ」タブを開いて選びます
• テーマエディタの「アプリ埋め込み」を ON にする手順はありません。このアプリにアプリ埋め込みは無いので、探さなくて大丈夫です
• ブロックを追加した直後は、図が黒く潰れるなど表示が崩れて見えることがあります。ページを再読み込みすると直ります。設定パネルの先頭にも「ブロックを追加した直後は表示が崩れることがあります。ページを再読み込みしてください。」と書いてあります

上の画像は、追加した直後の状態です。ページ全幅のセクションに入ったため、図が左端に小さく寄っています。デモストアでは、この後ブロックを「商品情報」セクションの商品説明の下へ移しています。

ストアフロントの見た目を変える

図の見た目は、テーマエディタでブロック「シンプル商品特徴グラフ」を選ぶと出る設定パネルで変えます。プレビュー上の図をクリックするか、左のツリーでブロック名をクリックすると開きます。設定は「コンテンツ設定」「デザイン設定」「余白設定」「追加設定」の 4 グループです。

コンテンツ設定の商品と見出し

• 商品（既定: 自動）… どの商品の図を出すかです。商品ページでは「商品情報から」、商品カードの中では「商品カードから」と表示され、その場所の商品が自動で入ります。ふつうは触りません
• 見出し（既定: 空欄）… 図の上に出す見出しです。デモストアでは Flavour profile と入れています。空欄なら見出しは出ません

「商品」を特定の商品に変えると、どのページでもその商品の図が出るようになります。ランディングページで看板商品の図だけを見せたい、といった使い方以外では、自動のままにしておきます。

デザイン設定の大きさと文字

• 幅いっぱいに表示（既定: オン）… ブロックの幅いっぱいに図を広げます。オンのあいだは「チャートの大きさ」が設定パネルに出ません
• チャートの大きさ（既定: 280px、160〜480px を 20px 刻み）… 図の幅です。「幅いっぱいに表示」をオフにしたときだけ現れます
• ラベルの文字数（既定: 10、4〜20）… レーダーチャートの軸ラベルを、この文字数で切り詰めます。横バーのラベルは切り詰めません
• 文字サイズ（既定: 13px、10〜24px）… 軸ラベルと見出しの大きさです
• 文字の太さ（既定: やや太い）… 標準（400）・やや太い（600）・太い（700）から選びます。軸ラベルと見出しに効きます

「幅いっぱいに表示」がオンのまま、ページ全幅のセクションに置くと、レーダーの図がページ幅まで広がり、軸ラベルも一緒に大きくなります。SVG の文字は図の拡大に合わせて大きくなるためです。避けるには、「幅いっぱいに表示」をオフにして「チャートの大きさ」を 400px 前後にし、中央に寄せたいときは「追加のCSS」に display: flex; flex-direction: column; align-items: center; を入れます。ブロックを「商品情報」セクションの中に移して、カラムの幅に収めるのも有効です。

「ラベルの文字数」は、ドイツ語のように長い単語で軸ラベルが図の外へはみ出すのを防ぐための設定です。SVG の文字には自動の折り返しが無いので、長すぎるラベルは切り詰めないと枠を突き抜けてしまいます。

デザイン設定の色

• 塗りの色（既定: #2C6ECB の青）… レーダーの多角形、横バーの棒の色です
• 線の色（既定: #C9CCD0 の灰色）… レーダーの目盛りの線、横バーの棒の背景の色です
• 文字の色（既定: #202223 の黒）… 軸ラベル・見出し・% の色です
• 背景色（既定: なし）… 図の背景です。既定では透明で、ページの背景がそのまま見えます

デモストアでは、コーヒー豆の色に合わせて塗りの色を #8B5E34 の茶色、背景色を #FAF6F0 の生成り色にしています。既定の青は、どのテーマでも目立つように選んだ色なので、ストアのブランドカラーに合わせて変えるのがおすすめです。

色の既定は固定値で、テーマの配色を自動では読み取りません。背景が黒や濃紺のテーマで既定のまま置くと、黒い文字が背景に沈んで読めなくなります。その場合は「文字の色」と「線の色」を明るい色に変えるか、「背景色」に明るい色を入れて図の部分だけ明るくしてください。

デザイン設定の枠線・角の丸み・影

• 枠線の太さ（既定: 0px、0〜8px）… 図の周りの枠線です。0 なら枠線は出ません
• 枠線の色（既定: #C9CCD0）… 枠線の色です
• 角の丸み（既定: 0px、0〜32px）… 背景と枠線の角の丸みです
• 影（既定: なし）… なし（none）・弱め（soft）・ふつう（medium）・強め（strong）から選びます

上の画像は、枠線の太さを 3px にした例です（保存はしていません）。背景色・角の丸み・影と組み合わせると、商品説明の下にカードのように浮かせた見せ方になります。デモストアの商品ページは、背景色・角の丸み 12px・影の弱め・内側の余白 24px の組み合わせです。

枠線を足すときは、テーマの他のカード（商品カードやお知らせ枠）の角の丸みと数値をそろえると、後から足した部品に見えにくくなります。

余白設定と追加のCSS

• 上部余白（既定: 0px、0〜40px）… ブロックの上の余白です
• 下部余白（既定: 0px、0〜40px）… ブロックの下の余白です
• 内側の余白（既定: 0px、0〜40px）… 背景や枠線の内側の余白です。背景色を付けたときに、図が端に貼り付かないようにします
• 追加のCSS（既定: 空欄）… 図に追加のスタイルを当てる欄です

「追加のCSS」には、入力欄の下の注記どおり「プロパティ: 値;」の宣言だけを書きます（例: margin-top: 8px;）。セレクタや { } を書くと、そのルールは丸ごと無視されます。また、< と > は自動で取り除かれます。中央寄せや最大幅の指定のように、設定パネルに無い調整をしたいときに使います。

商品カードに置くときの設定

テーマが対応していれば、ホームの商品一覧やコレクションページの商品カードの中にも、同じブロックを置けます。

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

カードに置くときは、次の 2 点を守ってください。

• 「商品」は未設定のままにします。「商品カードから」と表示され、カードごとにその商品が入ります。ここで商品を選ぶと、全部のカードに同じ商品の図が出てしまいます
• 「見出し」は空にしておきます。カード 1 枚ごとに同じ見出しが並ぶと、一覧がうるさく見えます

カードは幅が狭いので、「文字サイズ」を 12px 程度に下げると軸ラベルが収まりやすくなります。商品カード専用のブロックがあるわけではなく、商品ページと同じブロックをカードの中に置いているだけです。そのため、商品ページと商品カードで別々の見た目にしたいときは、それぞれのブロックの設定を個別に変えます。

コードで自作する場合

アプリを使わずに、テーマのコードを編集して同じものを作ることもできます。ここでは、商品メタフィールドの値から横バーとレーダーチャートを描く Liquid を、最小限の形で紹介します。どちらも、メタフィールドの名前空間を custom、キーを acidity などにしている前提です。

Liquid で横バーを描く

まずは横バーです。キーと表示名を区切り文字の文字列で持っておき、split で配列にしてから 1 つずつ描きます。

{%- assign max_value = 5.0 -%}
{%- assign keys = 'acidity,bitterness,body,aroma,sweetness' | split: ',' -%}
{%- assign labels = '酸味,苦味,コク,香り,甘み' | split: ',' -%}
<div class="myshop-bars">
  {%- for key in keys -%}
    {%- assign raw = product.metafields.custom[key].value -%}
    {%- if raw == blank -%}{%- continue -%}{%- endif -%}
    {%- assign pct = raw | times: 100.0 | divided_by: max_value | round: 0 -%}
    <div class="myshop-bars__row">
      <span class="myshop-bars__label">{{ labels[forloop.index0] | escape }}</span>
      <span class="myshop-bars__track"><span class="myshop-bars__fill" style="width: {{ pct }}%"></span></span>
      <span class="myshop-bars__pct">{{ pct }}%</span>
    </div>
  {%- endfor -%}
</div>

ポイントは times: 100.0 を divided_by より先に置いていることです。Shopify の Liquid では、整数を整数で割ると小数点以下が切り捨てられます。{{ 3 | divided_by: 5 }} は 0.6 ではなく 0 になり、エラーは出ずにバーの長さだけが全部 0 になります。先に小数を掛けておけば、割り算は小数で行われます。

もう 1 つは .value です。メタフィールドは .value を付けないとオブジェクトが返り、型によってはそれらしい文字列が出てしまうので、動いているように見えて計算だけが狂います。キー名に size や first を使うと、ドット記法がフィルタとして解釈されて件数が返る、という落とし穴もあります。上の例で角括弧の記法を使っているのはそのためです。

SVG でレーダーチャートを描く

レーダーチャートは、軸ごとに「中心からの方向」と「値の割合」を掛けて頂点の座標を出し、polygon で結びます。Liquid には三角関数が無いので、方向（cos と sin）を定数の表として持ちます。

{%- comment -%} 5 軸を真上から時計回りに置いたときの cos / sin（必ず先頭桁と小数点を付ける） {%- endcomment -%}
{%- assign cos_table = '0.000000,0.951057,0.587785,-0.587785,-0.951057' | split: ',' -%}
{%- assign sin_table = '-1.000000,-0.309017,0.809017,0.809017,-0.309017' | split: ',' -%}
{%- assign points = '' -%}
{%- for key in keys -%}
  {%- assign v = product.metafields.custom[key].value | default: 0 | times: 1.0 -%}
  {%- assign ratio = v | divided_by: max_value -%}
  {%- assign c = cos_table[forloop.index0] | times: 1.0 -%}
  {%- assign s = sin_table[forloop.index0] | times: 1.0 -%}
  {%- assign x = c | times: 80.0 | times: ratio | plus: 100.0 | round: 2 -%}
  {%- assign y = s | times: 80.0 | times: ratio | plus: 100.0 | round: 2 -%}
  {%- assign points = points | append: x | append: ',' | append: y | append: ' ' -%}
{%- endfor -%}
<svg class="myshop-radar" viewBox="0 0 200 200" role="img" aria-label="{{ product.title | escape }}の特徴">
  <polygon class="myshop-radar__shape" points="{{ points | strip }}" />
</svg>

定数の表を 0.000000 のように必ず先頭の桁と小数点付きで書いているのには理由があります。Shopify の Liquid は、数字の形に一致しない文字列（.5 や 0）を計算に使うと、黙って整数として読み、0 にしてしまいます。その軸だけ中心に張り付き、やはりエラーは出ません。座標に round: 2 を通しているのは、計算結果が 0.4e1 のような科学記法の文字列になり、SVG の座標として無効になるのを防ぐためです。

この 2 つの落とし穴は、手元のプレビュー環境（JavaScript で動く Liquid）では再現しません。プレビューでは正しく描かれ、本番のストアでだけ図が潰れるので、気づくまでに時間がかかります。

テーマの CSS とぶつけない

図の見た目は、テーマ側の CSS の影響を受けます。最後に、自作するときの CSS の要点を示します。

.myshop-radar {
  /* テーマの img, svg { height: auto } で縦が潰れないよう、比率と大きさを自分で決める */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: var(--myshop-chart-size, 320px);
}
.myshop-radar__shape {
  /* 色の変数には必ず独自の接頭辞を付ける。--fill のような汎用名はテーマの値を拾う */
  fill: var(--myshop-chart-fill, rgba(44, 110, 203, 0.35));
  stroke: var(--myshop-chart-fill, #2c6ecb);
}

CSS のカスタムプロパティは親から子へ受け継がれるため、var(--border-color, #ccc) のような汎用の名前を使うと、テーマが同じ名前の値を持っていた瞬間にそちらが勝ちます。フォールバックの値は「どこにも定義が無いとき」にしか使われません。自分の開発ストアのテーマでは正常に見え、別のテーマでだけ枠や色が変わるので、原因を突き止めるのが難しい不具合です。

自作とアプリ、どちらを選ぶか

上のコードは最小限で、実際に運用するには次のような処理を足していくことになります。

• 軸の数が商品ごとに違うときの角度の表（3 軸から 8 軸まで）
• 範囲外の値や空の値を描かない処理と、軸が 3 本未満のときの横バーへの切り替え
• 色・大きさ・余白をテーマエディタから変えるための schema
• テーマを入れ替えたり更新したりしたときの、コードの移し替え
• 値を入れるための管理画面（メタフィールドの定義と入力欄）

Liquid と SVG に慣れている方なら、1 商品分の図を出すところまでは半日もかからないはずです。手間がかかるのは、その後の「テーマを変えたら壊れた」「値を入れる人がコードを触れない」といった運用の部分です。シンプル商品特徴グラフは、その部分をまとめて引き受ける月額 $3.99 のサービス、と考えると判断しやすくなります。

スペック表アプリ・グラフ作成アプリとの使い分け

商品の特徴を見せるアプリには、ほかに Product Specifications、CN Graphs & Charts、Bear Specification & Compare、Easy Specs などがあります。それぞれの比較は別の記事に譲り、ここでは「シンプル商品特徴グラフと組み合わせて使うなら、どう分担させるか」を考えます。

図にする情報と表にする情報を分ける

最初に決めたいのは、どの情報を図にして、どの情報を文字の表にするかです。目安は次のとおりです。

• 図に向くもの … 商品どうしで相対的に比べる性格（酸味の強さ、硬さ、保湿感）。値そのものより「どちら寄りか」「どこが突き出ているか」に意味がある情報
• 表に向くもの … 絶対的な事実（内容量、産地、標高、素材、サイズ、型番）。数字でも、比べる軸として意味を持たない情報

コーヒーなら、酸味・苦味・コク・香り・甘みはシンプル商品特徴グラフで図にし、産地・精製方法・焙煎度・内容量はスペック表のアプリで表にする、という分け方が自然です。同じ情報を図と表の両方に載せると、どちらを見ればよいか迷わせてしまいます。

商品ページでの並べ方

両方のブロックを商品情報セクションに置くときは、次の順がおすすめです。

1. 商品説明（文章で魅力を伝える）
2. シンプル商品特徴グラフ（性格を形で伝える）
3. スペック表（購入前に確かめたい事実を並べる）

図を説明のすぐ下に置くと、文章で読んだ内容を形で確かめる流れになります。表は「買う直前に容量を確認したい」という段階で見られることが多いので、その下で十分です。テーマエディタでブロックをドラッグして並べ替えるだけで、どちらのアプリも設定を変える必要はありません。

図の背景と表の見た目をそろえる

2 つのアプリのブロックが縦に並ぶと、余白や角の丸みの違いが目立ちます。シンプル商品特徴グラフ側で次の 3 つを調整すると、もう一方のブロックとなじませやすくなります。

• 「背景色」を表の背景と同じ色にする（表に背景が無いなら、図も背景なしのまま）
• 「角の丸み」を表の枠の丸みにそろえる
• 「下部余白」で、図と表のあいだの間隔をテーマの他のブロックとそろえる

コレクション全体を 1 枚の図で見せたいとき

CN Graphs & Charts のようなグラフ作成型のアプリは、1 枚の図に決まったデータを入れて置く使い方が中心です。商品ごとに値を持つシンプル商品特徴グラフとは役割が違うので、たとえば「今月の売れ筋ランキング」をページに 1 枚だけ置きたい場合はグラフ作成型、全商品に味の図を付けたい場合はシンプル商品特徴グラフ、という分担になります。

どちらを先に入れるか

迷ったら、まずシンプル商品特徴グラフの 7 日間の無料体験で、コレクション設定と値の一覧を使って全商品に図を付けてみてください。そのうえで、図だけでは伝えきれない事実が残っていると感じたら、スペック表のアプリを足す順番が無駄がありません。図を付けてみると、商品説明に書いていた「酸味は強め」のような一文を削れることも多く、表に回すべき情報が自然と見えてきます。

まとめ

シンプル商品特徴グラフ｜お手軽性能レーダーチャートについて、管理画面の全画面とテーマエディタの全設定を見てきました。要点を振り返ります。

• 商品ごと、またはコレクションごとに 1〜8 本の軸を決め、レーダーチャートか横バーで商品ページに描けます
• 値は商品メタフィールドに保存されるので、値の一覧や一括編集ツールでまとめて入れられ、設定を消しても値は残ります
• 図は Liquid が書き出すので、ストアに読み込むスクリプトが増えません
• 色・大きさ・枠線・影・余白はテーマエディタで変えられ、対応テーマでは商品カードの中にも置けます
• レーダーは値の入った軸が 3 本以上必要なこと、色がテーマに自動で合わないこと、全幅に置くと文字が大きくなることは、導入前に知っておくと迷いません

味や使い心地のように、文章では比べにくい特徴を持つ商品こそ、図にした効果がはっきり出ます。料金は月額 $3.99（年額 $39.99）で、インストールから 7 日間は無料です。まずはいちばん売りたい 1 コレクションに軸を決めて、値の一覧を埋めるところから始めてみてください。

インストールは Shopify App Store のアプリページ から行えます。設定の手順を画面付きで追いたい方は Shopifyで商品の特徴をレーダーチャートや横バーで表示できるアプリについて徹底解説｜ご利用ガイド もあわせてご覧ください。

おすすめ Shopify アプリ

同じ開発元が出している、商品ページの情報を整えるアプリを紹介します。

• シンプル栄養成分・アレルギー表示｜食品表示 … 商品ページに栄養成分とアレルゲンの情報を表示できます。食品を扱うストアで、味の図と並べて置くと、選ぶための情報が商品ページにそろいます
• シンプル関連商品レコメンド｜よく一緒に購入されている商品 … 関連する商品を商品ページに並べ、まとめてカートに入れてもらえます。味の違う豆の飲み比べを勧めたいときに向いています
• シンプルタブ表示切り替え｜お手軽コンテンツ出し分け … テキストやコレクションをタブで整理して表示できます。商品説明や淹れ方の案内が長くなったときに、ページを縦に伸ばさずにまとめられます