に関する記事です。ウィジェット

料金比較

料金比較を使うと、複数のプランの名前、価格、機能一覧、申し込みボタンをひとつにまとめて表示できます。月額・年額の表示切り替え、注目プランの強調、プランごとのリンク設定にも対応しています。

料金比較を使うメリット

プランを比較しやすくする： 価格と機能を並べて表示することで、訪問者が各プランの違いをひと目で確認できます。
おすすめのプランを伝える： 特定のプランを強調したり、「人気No.1」などのラベルを添えたりして、プラン選びを後押しできます。
月額・年額を切り替えて表示する： ひとつの料金比較内で、月額と年額の料金を切り替えられます。「○％お得」などのバッジで、年額プランのメリットも伝えられます。
申し込みにつなげる： 各プランに専用のボタンを設置し、訪問者を申し込みや無料トライアルへ案内できます。

レイアウトの選択

比較テーブル

各プランを列に、比較する機能を行に配置します。プラン数が多い場合や、機能ごとの違いを詳しく見せたい場合に適しています。

プランカード

各プランを個別のカードとして表示します。カードには、アイコン、価格、機能のチェックリスト、申し込みボタンをまとめられます。2〜4件程度のプランを、それぞれの違いが伝わる形で紹介したい場合に適しています。

プランごとの設定

プラン名とアイコン： プランの名前と、プランを見分けるためのアイコンを設定します。
通貨・月額価格・年額価格： 表示する通貨と、月額・年額それぞれの価格を設定します。
単発購入： 一回払いのプランに使用します。価格に「／月」「／年」を付けずに表示できます。
ボタンテキストとボタンリンク： ボタンの文言とリンク先を設定します（例：「始める」「無料トライアルを開始」）。
ラベル： プランに添えるバッジの文言を設定します（例：「おすすめ」）。
注目プラン（強調表示）： 特定のプランを目立たせます。

共通のスタイル設定

テーマ： ライトまたはダークから選択します。
名称と価格のフォント： プラン名と価格の文字のスタイルを設定します。
プランの角丸： プランの表示枠の角の丸みを調整します。
月額／年額切り替え： 月額と年額を切り替えるボタンの表示・非表示を設定します。
デフォルトの課金設定： 初期表示する料金を、月額または年額から選択します。
アクセントカラー・カード背景・テキスト色・切り替えボタンのテキスト色： サイトのデザインに合わせて、各部分の色を変更します。

プランと機能の管理

専用の編集パネルで、セクションの見出し、プラン、比較する機能を管理できます。

セクションの見出し

「見出し」と「サブ見出し」に、料金比較の上部に表示するタイトルと補足文を設定します。
例：

見出し： プランを比較する
サブ見出し： ご利用目的に合ったプランをお選びください

プランの追加・管理

各プランは「Plans」リストで管理します。

追加： 「＋プランを追加」をクリックして、新しいプランを作成します。
並べ替え： 並べ替え用のハンドルをドラッグして、プランの表示順を変更します。
編集： 歯車アイコンをクリックして、プラン名、価格、ボタンなどを設定します。
削除： 削除したいプランのゴミ箱アイコンをクリックします。

機能の追加・管理

比較する項目は「機能」セクションで管理します。

追加： 新しい機能の行を追加します。
並べ替え： 項目をドラッグして、機能の表示順を変更します。
編集： 歯車アイコンをクリックして、機能名と各プランの値を設定します。「無制限」「10 GB」などの文字や数値、チェックマーク（✓）やバツ印（✗）を使えます。
削除： 削除したい機能のゴミ箱アイコンをクリックします。

「基本機能」「高度な機能」などのグループ見出しを追加すると、機能をカテゴリごとに整理できます。項目が多い場合でも、必要な情報を見つけやすくなります。
プランと機能は、それぞれ独立したリストで管理できます。新しいプランの追加、機能の並べ替え、カテゴリの変更を行う際も、ウィジェット全体を作り直す必要はありません。