WordPressで月額/年額トグルを作成する方法

ある人は価格を、ある人は機能を比較し、多くの人は月額プランか年間プランかを議論します。このような瞬時の意思決定環境では、価格表のデザインがコンバージョンの決定的な要因となります。

サービスやサブスクリプションベースのビジネスを運営する場合、価格表は、訪問者を有料顧客に変えるための選択肢を列挙するだけではありません。それは、注意を導き、比較をサポートし、より良いプランが当然の選択であると感じさせるものでなければなりません。

月ごと／年ごとの切り替えができる優れたデザインの価格表は、標準的な価格表をはるかにダイナミックでユーザー重視のものに変えます。単にオプションを表示するだけでなく、積極的に視線を誘導し、節約を強調し、比較の摩擦をなくします。

このガイドでは、どのデバイスでも見栄えのする表形式を使用して、WordPressでクリーンな月額と年額の価格トグルを作成する方法を学びます。

---

WordPressで月額/年額トグルを追加する方法

価格トグルがどのように比較を簡素化し、価値を際立たせるかをご理解いただけたところで、Tablebergプラグインを使って価格トグルを作成する手順を説明しましょう。

ステップ1：Tablebergのインストールとアクティベート

WordPressのダッシュボードに向かい、プラグイン → 新規追加と進み、Tablebergを検索し、今すぐインストールをクリックし、続いて有効化をクリックします。有効化すると、エディターに2つの新しいブロックが表示されます：TablebergとToggle for Tableberg。

ステップ2：Tablebergブロックのトグルを追加する

価格テーブルを設置したい投稿またはページを開きます。プラスアイコンをクリックし、Toggle for Tablebergを検索し、ブロックを挿入します。デフォルトでは3つのタブで始まります。タブにカーソルを合わせるとタブが削除され、プラスアイコンをクリックするとタブが追加されます。このセットアップでは、"月間 "タブと "年間 "タブの2つだけにしておきます。

ステップ3：タブの設定

ブロックを選択した状態で、右側の設定パネルを使用して、一般とスタイルの両方のオプションを調整します。

Generalタブで、各タブの名前を変更し、デフォルトでアクティブにするタブを選択し、必要に応じてタブの位置を揃える。

スタイル」では、アクティブなタブと非アクティブなタブの色を調整し、トグルの下に間隔を設定し、ソフトな外観にしたい場合は、角を丸くするためにボーダーの半径を微調整することができます。

ステップ4：各タブの中にテーブルを追加する

最初のタブをクリックし、テーブルを作成します。これで月ごとの価格テーブルが作成されます。2つ目のタブで同じことを繰り返し、年間バージョンを追加します。両方のテーブルの構造は同じで、価格と関連ラベルだけを変更します。

ステップ5：テーブルのカスタマイズ

各列の中にプラン名、オーディエンスタグ、価格、機能、コールトゥアクションボタンを追加します。表のセル内には、段落ブロック、リスト、ボタンブロックを使用します。 

次に一般設定を開いてヘッダーとフッターを設定し、必要に応じてスティッキーヘッダー、ソート、検索などの機能を調整します。最後に、スタイルタブを使用して、間隔、背景色、ボーダー、整列を微調整し、両方のテーブルをすっきりと一貫性のある外観にします。

ステップ6：保存、プレビュー、公開

最初に作業を保存することを忘れないでください。次に、プレビューオプションを使用して、デスクトップとモバイルの両方でトグルがどのように見えるかを確認します。タブの切り替えがスムーズであること、表の各バージョンが明確であることを確認してください。納得がいったら、Publishを押して本番稼動させましょう。

最終的な感想

月額／年額料金のトグルは、単なるデザイン上のトリックではありません。レイアウトを圧迫することなく、柔軟な課金オプションを提示する実用的な方法です。Tablebergなら、追加プラグインやカスタムコードは必要ありません。訪問者がプランを明確に比較し、最適なものを選択できるよう、レスポンシブで構造化された料金表を構築できます。

時間をかけて慎重にトグルを設定することで、よりすっきりとしたページと、ユーザーにとってよりスムーズな意思決定ができるようになります。