mcpField
P
product-configurator-design

product-configurator-design

github.com/rampstackcoデザイン・UI1.0k250 回インストール1 週間前に更新
リポジトリ

product-configurator-design について

product-configurator-designは、製品マーケティング、グロース、EC、B2Bチーム向けの構成ツール設計ガイドです。選択肢を組み立てる構成ツールの設計・監査に使え、ガイド付き選択、制約、リアルタイム価格、検証、保存・共有、カート連携を扱います。

主な機能

  1. 01ガイド付き構成と適切な初期値
  2. 02非互換・依存オプションのルール
  3. 03リアルタイム価格と選択の影響表示
  4. 04入力検証とエラー説明
  5. 05保存・共有・カート連携の設計

活用シーン

  1. 01新しい製品構成ツールの企画
  2. 02既存ツールでの離脱原因の診断
  3. 03無効な構成を防ぐルールの設計
  4. 04表示する選択肢と初期値の決定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rampstackco/claude-skills --skill product-configurator-design

インストール後、Claude Code で/product-configurator-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
references/
common-configurator-failures.md
configurator-anti-patterns.md
configurator-decision-criteria.md
configurator-to-cart-handoff.md
constraint-logic-patterns.md
default-configuration-design.md
real-time-pricing-patterns.md
save-and-share-mechanics.md
validation-and-error-patterns.md

詳細

製品コンフィギュレーターの設計

カスタム製品コンフィギュレーターを設計するための、シニアプロダクトマーケティングディレクターによる実践ガイドです。Tesla 風の車両コンフィギュレーター、カスタム価格設定ビルダー、プランビルダー、製品カスタマイザーなどを対象としています。制約ロジック、リアルタイムの価格設定、検証、保存と共有の仕組みを扱います。ユーザーが実際に購入を決める構成を生み出すコンフィギュレーターを構築するためのノウハウです。

ほとんどのコンフィギュレーターは、次のどちらかの理由で失敗します。すべてのパラメーターを細かく設定できるようにして(47 個のトグル、12 個のスライダーなど)、意思決定を麻痺させ、ユーザーが途中で離脱してしまう。あるいは、コンフィギュレーターのように見せかけて、実際には「カスタム」と名付けた既製バンドルを 3 つ並べているだけ。コンフィギュレーターという見せ方はマーケティング上の演出で、製品の実態はバンドルです。

うまく機能するコンフィギュレーターには、別の工夫があります。適切な初期設定で妥当な開始構成を提示し、無効な組み合わせを防ぎ、その理由を示す意味のある制約を設け、より深いカスタマイズを望むユーザーには自由に選べる余地を残し、選択に応じてリアルタイムで価格を更新します。ユーザーは圧倒されるのではなく、導かれていると感じます。

このスキルの語り手は、適切な初期設定を導入したコンフィギュレーターの改修でコンバージョンが 2 倍になるのを目にし、制約ロジックを整えずに「選択肢を増やした」結果、コンフィギュレーターが機能しなくなるのを見てきたシニアプロダクトマーケティングディレクターです。ユーザー自身を守る制約について実践的かつ明確な意見を持ち、既製バンドルが正解となる場面も率直に指摘します。

このスキルを使う場面:初めてカスタムコンフィギュレーターの範囲を定めるとき、離脱率の高いコンフィギュレーターを監査するとき、無効な組み合わせを防ぐ制約ロジックを設計するとき、またはどのパラメーターをユーザーに選ばせ、どれを初期設定にするかを判断するときです。


このスキルで扱う内容

このスキルでは、カスタム製品コンフィギュレーターを扱います。グロースツールにおける各スキルの違いは次のとおりです。

  • calculator-design は、入力値から数値を算出する計算ツールを扱います。このスキルでは、複数の選択肢を決めて製品を構成します。
  • comparison-tool-design は、既知の選択肢を比較します。このスキルでは、カスタムの選択肢を作成します。
  • multi-step-form-design は、データの収集を扱います。このスキルでは、構成の設計を扱います。
  • **product-configurator-design(このスキル)**は、制約ロジック、リアルタイムの価格設定、検証、保存と共有、コンフィギュレーターからカートへの引き継ぎを扱います。
  • pm-spec-writing は、エンジニアがコンフィギュレーターを構築するための仕様書を扱います。

対象読者:プロダクトマーケター、グロースマーケター、EC チーム、構成可能な製品を提供する B2B チーム、クライアント向けにコンフィギュレーターを制作する代理店です。

対象外:計算ツールの設計(calculator-design で扱います)、比較ツール(comparison-tool-design で扱います)、エンジニアリング実装、特定のコンフィギュレータープラットフォームの設定(実装側で扱います)。


コンフィギュレーターを導入するか、バンドルで十分かを判断する

コンフィギュレーターを設計する前に、コンフィギュレーターが適切な選択肢かどうかを判断してください。

コンフィギュレーターへの投資が適切な場合:

  • 製品に、成果やコストに影響する、本当にカスタマイズ可能なパラメーターがある。
  • バンドルで提供できる範囲を超えたカスタマイズを、対象ユーザーが求めている。
  • チームが構成ロジック(検証、価格設定、フルフィルメント)をサポートできる。
  • 組み合わせの範囲に意味があり、制約もある(文字どおり無限ではない)。

コンフィギュレーターへの投資が適切でない場合:

  • 製品の実態がほぼバンドルである。それらを「構成」と呼ぶのはマーケティング上の演出であり、製品の実態ではありません。
  • 対象ユーザーがカスタマイズを重視していない。一部のユーザーは、自分で組み立てるより、厳選された選択肢から選ぶことを望みます。
  • 組み合わせの範囲が広すぎて、対象ユーザーが誰も使いこなせない。
  • チームが防止できない無効な組み合わせが生まれてしまう。
  • よりシンプルな比較ツールや選択ツールで十分に対応できる。

判断すべきなのは「コンフィギュレーターを用意すべきか」ではなく、「この製品と対象ユーザーにとって、コンフィギュレーターが適切なツールか」です。

詳しくは references/configurator-decision-criteria.md をご覧ください。


無限の選択肢 vs 既製バンドルのみ vs ガイド付き構成

要となる枠組みです。

無限の選択肢。 すべてのパラメーターを最大限細かく公開します。47 個のトグルスイッチと 12 個のスライダー。選択に迷い、ユーザーは途中で離脱し、設定を完了する人はほとんどいません。コスト:設計に労力をかけても、誰も完了しないコンフィギュレーターになり、コンバージョンが低下します。

既製バンドルのみ。 「コンフィギュレーター」と呼んでいても、実際には Basic/Pro/Enterprise と名付けられた 3 つの事前構成済みバンドルです。実質的なカスタマイズはできません。コンフィギュレーターという位置づけはマーケティング上のもので、製品の実態はバンドルです。コスト:カスタマイズを期待して来たユーザーはだまされたと感じ、期待と現実が一致しないため、コンバージョンが低下します。

ガイド付き構成。 適切な初期構成を作るスマートなデフォルト、無効な組み合わせを防ぐ意味のある制約、より詳細なカスタマイズを望むユーザー向けの自由な変更手段、選択に応じて変化するリアルタイムの価格表示を用意します。コスト:事前の設計にかなりの労力が必要ですが、ユーザーが購入を決めた構成を完成させるため、通常はコンバージョンが大幅に向上します。

見極めの方法です。ターゲット層の見知らぬ人にコンフィギュレーターを渡します。専門家の助けなしに、5 分以内で実際に購入したいと思える構成にたどり着けるでしょうか? できるならガイド付き構成です。選択肢に迷うなら無限の選択肢、バンドルしか見えないなら既製バンドルのみです。


デフォルト構成の設計

出発点です。

原則。 コンフィギュレーターを開くと、適切なデフォルト構成が表示されます。ユーザーはそこから調整します。

デフォルトの選定。

  • 多くのユーザーが選びそうな構成。
  • ユーザー調査(営業電話の分析、過去の構成など)を反映します。
  • リファラー、クエリ、または明示された希望から推定できます。

デフォルトの表示。

  • デフォルトをすぐに表示し、ユーザーが価格付きの構成全体を確認できるようにします。
  • 調整用のコントロールをわかりやすくし、何を変更できるかユーザーが把握できるようにします。
  • デフォルトに戻す手段を用意し、試行錯誤したユーザーが元に戻せるようにします。

白紙状態の落とし穴。 コンフィギュレーターを開くと空の状態で、ユーザーは一から構成を作らなければなりません。開始時点で選択に迷ってしまいます。

解決策。 デフォルトを重視します。ユーザーは調整するだけで、ゼロから作る必要はありません。

詳細は references/default-configuration-design.md を参照してください。


制約ロジック

無効な組み合わせを防ぎ、その理由を提示します。

原則。 コンフィギュレーターでは、出荷できない、価格を設定できない、または互いに併用できない組み合わせといった無効な構成をユーザーが作れないようにします。制約が適用されたときは、その理由を提示します。

制約のパターン。

  • ハード制約。 「オプション A とオプション B は併用できません。」コンフィギュレーターは組み合わせを禁止し、その理由を説明します。
  • ソフト制約。 「オプション A とオプション C の組み合わせは一般的ではありませんが、選択できます。」コンフィギュレーターは選択を許可し、警告を表示します。
  • 連動制約。 「オプション A を選択するには、オプション D が必要です。」コンフィギュレーターは D を自動で追加し、その理由を説明します。
  • 容量制約。 「この構成は出荷能力を超えています。」コンフィギュレーターは上限を設定し、その理由を説明します。

制約の伝え方。

  • 制約が適用された理由を説明します。
  • ユーザーができること(別のオプションを選ぶ、カスタム構成について問い合わせる)を示します。
  • 選択を妨げるだけのブロックは行わず、必ず代替手段を提示します。

制約過多の落とし穴。 制約が多すぎると、ユーザーは選択肢を奪われたと感じます。

制約不足の落とし穴。 ユーザーが、購入手続きやフルフィルメントの段階で問題が発生する構成を作ってしまいます。

詳細は references/constraint-logic-patterns.md を参照してください。


リアルタイムの価格と影響の表示

選択に応じて価格が変わります。

原則。 ユーザーの調整に合わせて価格が更新されます。ユーザーは選択による費用への影響をすぐに確認できます。

優れた価格表示。

  • 合計価格を目立つように表示し、リアルタイムで更新します。
  • 選択ごとの影響を表示します(「$X 追加」または「$X 節約」)。
  • 内訳を確認できます(「価格の算出方法」)。
  • 通貨とロケールが適切です。

不十分な価格表示。

  • 価格が最後まで表示されません。
  • 選択ごとの影響が見えず、各オプションの費用がわかりません。
  • 内訳を確認できず、合計金額が不透明です。

価格ショックの落とし穴。 ユーザーが詳細に設定した後、チェックアウトに進み、予想外の価格を見て購入をやめてしまいます。

解決策。 価格を常に表示します。チェックアウト時に驚かせません。

詳細は references/real-time-pricing-patterns.md をご覧ください。


検証とエラーのパターン

コンフィギュレーターが無効な入力を検出した場合の対応です。

原則。 検証は罰するものではなく、役立つものであるべきです。

検証パターン。

  • インライン検証。 無効な選択肢の横にエラーを表示します。
  • 事前検証。 制約ロジックによって、エラーが起こり得ないようにします。
  • 最終検証。 チェックアウト前の確認で、残っている問題を表示します。

エラーの伝え方。

  • 問題を具体的に示します。
  • 理由を説明します。
  • 対応方法を提示します(代替オプション、カスタム対応の問い合わせなど)。

検証が厳しすぎる落とし穴。 検証によって、有効な例外的入力が拒否されます。

検証が緩すぎる落とし穴。 コンフィギュレーターが、後続の処理で失敗する入力を受け入れてしまいます。

詳細は references/validation-and-error-patterns.md をご覧ください。


保存と共有の仕組み

ユーザーが後で再開したり、他の人に送ったりする設定です。

原則。 実際の意思決定に役立つコンフィギュレーターでは、ユーザーが保存や共有をしたくなる設定が作成されます。

保存パターン。

  • メールリンクで保存。 ユーザーがメールアドレスを入力すると、設定へのリンクがメールで送信されます。
  • アカウントベースの保存。 ログイン中のユーザーの設定が自動的に保存されます。
  • 匿名セッションで保存。 ブラウザー上で設定を保持します。

共有パターン。

  • 共有可能な URL。 設定を URL にエンコードし、任意のチャネルで共有できます。
  • 埋め込みコード。 設定を他のサイトや提案書に埋め込めます。
  • メールで共有。 設定を添えて、宛先に直接メールを送信します。

保存と共有が重要な理由。

  • 複数の判断を伴う購入には、検討の時間が必要です。
  • B2B の設定では、関係者による確認が必要になることがよくあります。
  • 再訪したユーザーは最初からやり直すのではなく、続きから進められます。

詳細は references/save-and-share-mechanics.md をご覧ください。


コンフィギュレーターからカートへの引き継ぎ

ユーザーが購入を決定したときの処理です。

原則。 コンフィギュレーターからカートへの引き継ぎでは、設定を完全に保持する必要があります。

引き継ぎパターン。

  • 設定をカートの商品として登録します。
  • カートに設定の概要を表示します。
  • カートから編集すると、状態を保持したままコンフィギュレーターに戻ります。

引き継ぎの失敗。 設定が一部しか保持されず、カートには汎用 SKU が表示されるため、ユーザーはカスタム構成が反映されているか確認できません。

解決策。 引き継ぎのループを完結させます。設定をカートに表示し、価格を一致させ、編集できるようにします。

詳細は references/configurator-to-cart-handoff.md をご覧ください。


よくある失敗パターン

要点を簡潔にまとめます。診断については、references/common-configurator-failures.mdを参照してください。

  • 「ユーザーが設定の途中で離脱してしまいます。」おそらく、選択肢が多すぎる無限選択肢パターンです。
  • 「コンフィギュレーターが一見有効そうな設定を生成しますが、注文処理で失敗します。」制約が不十分で、制約ロジックが欠けています。
  • 「ユーザーから、チェックアウト時の想定外の価格に不満が寄せられています。」価格がリアルタイムで反映されていないか、最後まで表示されません。
  • 「設定方法について問い合わせるユーザーが多いと、営業部門から報告されています。」対象ユーザーに対してコンフィギュレーターが複雑すぎるか、デフォルト設定が適切ではありません。
  • 「ユーザーは設定を保存しますが、戻ってきません。」保存の仕組みは機能していますが、その後のフォローアップがありません。
  • 「コンフィギュレーターはデスクトップでは動作しますが、モバイルでは動きません。」モバイルの UX に問題があります。
  • 「ユーザーは設定を完了しますが、購入へのコンバージョン率が低いです。」コンフィギュレーターは機能していますが、引き継ぎ時に購入を妨げる障壁があります。
  • 「選択肢を増やしたら、離脱率が上がりました。」認知負荷のしきい値を超えています。
  • 「制約が適用されたものの、ユーザーは理由を理解できませんでした。」説明に問題があり、ユーザーには恣意的に制限されたと感じられています。

フレームワーク:コンフィギュレーター設計における12の検討事項

コンフィギュレーターを設計または監査する際は、次の12項目を順に確認してください。

  1. コンフィギュレーターを採用するか。 コンフィギュレーターが適切なツールでしょうか。それとも、バンドルで十分でしょうか?
  2. 無限選択肢や定型バンドルだけでなく、ガイド付き設定にする。 適切なデフォルト設定に、意味のある制約と選択を外せる手段を組み合わせます。
  3. デフォルト設定を妥当なものにする。 ユーザーはゼロから組み立てるのではなく、デフォルト設定を調整します。
  4. 制約ロジックで無効な組み合わせを防ぐ。 ハード制約、ソフト制約、含意制約、容量制約を考慮します。
  5. 制約を明確に説明する。 制約が適用された理由と、ユーザーができることを伝えます。
  6. 価格をリアルタイムで表示する。 選択内容に応じて価格を更新し、内訳を確認できるようにします。
  7. 役立つバリデーションを行う。 入力欄の近くに具体的な説明を表示し、解決方法を提示します。
  8. 保存と共有を機能させる。 複数のセッションに対応し、共有可能で、B2B に適したものにします。
  9. コンフィギュレーターからカートへの引き継ぎで状態を保持する。 カートに設定内容を表示します。
  10. モバイルでも同等に使えるようにする。 対象ユーザーが使うデバイスでコンフィギュレーターが動作するようにします。
  11. コンバージョンを成功指標にする。 完了率だけでなく、その後の購入も測定します。
  12. メンテナンスを徹底する。 製品の変更に合わせて設定内容を更新し、四半期ごとに監査します。

このフレームワークを活用することで、実際に購入される設定を実現するコンフィギュレーターを構築できます。制約ロジック、価格設定、引き継ぎを連携させ、ユーザーが維持できる購入の決断につなげます。


参考ファイル

まとめ:コンフィギュレーターへの投資に価値が生まれるのは、購入される構成を生み出せるときです

複利効果を生む資産となるコンフィギュレーターは、ユーザーが購入を決める構成を生み出します。50項目の意思決定マトリクスではありません。コンフィギュレーターを装ったバンドルでもありません。ユーザー自身が構築し、価格を確認し、検証し、保存し、購入した構成です。

これが基準です。この基準を下回るのは、選択肢が無限にあるもの(決断できず、ユーザーが離脱する)や、既成バンドルのみのもの(実際にはカスタマイズできないのに、コンフィギュレーターを装い、ユーザーを欺かれた気持ちにさせる)です。この基準を上回るのは、適切なデフォルト、意味のある制約、リアルタイムの価格表示、検証、保存と共有が連携して、購入の決断につながるガイド付き構成ツールです。

要となるのは、設計上の選択です。そもそもコンフィギュレーターを作るかどうか。体験の開始時に表示されるデフォルト構成。無効な組み合わせからユーザーを守る制約ロジック。選択に応じて更新される価格。ユーザーを罰することなく支援する検証。複数の意思決定を伴う購入を支える保存と共有。構成を維持するカートへの引き継ぎ。そして、コンフィギュレーターを対象製品に合わせて最新の状態に保つメンテナンスです。

コメント