ウェブサイトに料金表を導入予定ですか？
料金表は、例えば芝生お手入れサービスからソフトウェアパッケージまで、さまざまな商品の価格提示に有用です。開発会社であってもヨガスタジオであっても、料金表を設置することでより効率的に製品やサービスを販売することができます。
料金表を設置する手っ取り早い方法は、WordPressの料金表プラグインを使用すること。
料金表を導入するメリット
料金表を導入するメリットは、コンバージョンの向上であることは予想がつくと思いますが、もう少し掘り下げてみましょう。料金表は、以下のような理由で単なる箇条書きリストや画像よりも販売に効果的と言えます。
- サービスやパッケージをきれいに並べて、他のプラン等と比較することができる。
- 特に重要な機能だけを料金表に掲載し、詳細は別のページに記載することでユーザーが見やすくなる。
- 購入方法を明確に示すためのCTAを導入することができる。
- パッケージ、プラン名を理解しやしいように表示できる。
- 特定の用語やプラン、機能を強調するために、フォントサイズを変更したり、グラフィックを使用したりできる。
- テキストだけよりも、グラフィックベースの料金表の方が圧倒的に消費者の気を引くことができる。
- 緊急性（「お得なキャンペーンはまもなく終了」など）を訴えたり、無料トライアルを用意したりすることで、コンバージョンを高めることができる。
- ウェブページ上で最小限のスペースしか占有しないため、よくある質問や営業担当者とのチャットボックスなどの他のコンテンツも追加できる。
WordPressの料金表プラグインに求めること
料金表プラグインのメリットがわかったところで、求めたい機能を見ていきましょう。
- 無料版と有料版─優れた料金表プラグインは、価格設定を美しく見せる標準的な表を作成できるもの。高度な機能が付帯する高額な有料プラグインを利用する必要はありません。
- 人気ページビルダーとの統合─人気の高いページビルダーには、DiviやElementor、WPBakeryなどが挙げられます。また、ページビルダーの中には料金表を作成できるものも。
- 料金表を素早く作成できるカスタマイズ機能やテンプレート─色やフォント、アイコンも編集できるのが理想的です。
- 特定のプランに追加できるバッヂ─プランに「お得」や「一番人気」などのバッジ的な要素を加えることで、よりユーザーの気を引くことができます。
- 多通貨対応─世界中の消費者をターゲットにすることが可能になります。
- カスタマイズ可能なボタン
- ドラッグ＆ドロップ式ビルダー（できれば）
- CSSとHTMLのアクセス─開発者がより高度な微調整を行うことができます。
他にもさまざまな機能を挙げることができますが、まずは上記のような基本的な機能に注目することをおすすめします。
WordPressのおすすめ料金表プラグイン
- Responsive Pricing Table by WP Darko
- Go Pricing
- Pricing Tables WordPress Plugin – Easy Pricing Tables
- Pricing Table by Supsystic
- CSS3 Responsive WordPress Compare Pricing Tables
- ARPrice – Responsive WordPress Pricing Table Plugin
- Pricing Table – Price list, Price Table, Easy Pricing Table
- WRC Pricing Tables
WordPressの料金表プラグインには、高機能かつ無料で利用できるものから有料のものまで、あらゆる選択肢があります。これからご紹介するプラグインはどれも注目に値するもので、特定の業界や企業向けの機能を搭載しているものもあります。
1. Responsive Pricing Table by WP Darko
Responsive Pricing Tableは、使いやすく機能満載の選択肢。好きなだけ表を作成できる無料版があるのも魅力的です。ただし、有料版ではテーマとすべての列の高さを正確に揃えるイコライザー機能など、より高度な機能を利用することができます。
価格表は、シンプルなフィールドとバックエンドボタンで構成されており、価格、説明、プラン名、アイコンボックスなどのフィールドを利用できます。また、Stripe や PayPalにリンクするボタンを設置できたり、開発者向けにカスタムCSSクラスもサポートしています。
価格
無料版あり。
有料版は、1つのサイトにつき19ドル、またはサイト数に制限のない49ドルの2種類があります。
WP Darkoの開発者チームは他にもプラグインを販売しており、79ドルでセット購入も可能です。企業によっては、セット購入が良い選択肢になるかもしれません。
このプラグインの魅力
- 無料版にはテーブルやプランの追加数に制限がなく、予算に限りのあるスモールビジネスには特に魅力的。
- 有料版も比較的良心的な価格で購入できる。
- テーマはおしゃれでカスタマイズ性が高く、ボタンやフォントの調整も可能。
- アイコンなどのグラフィックも利用できる。
- 料金表に必要な機能を自由に実装することができる。
- CTAボタンは、PayPalなどのサードパーティの決済システムにリンク可能。
- 多通貨対応で世界中の消費者が商品を購入できる。
- 一押しのプランにバッジを表示することができる。
- 定期購入型のプラン（月単位、年単位）にも対応できる。
2. Go Pricing
Go Pricingには無料版はありませんが、CodeCanyonマーケットプレイスで数千回購入されており、利用者から高い評価も受けています。有料とはいえ、わずか27ドルで購入できることから、検討に値します。
Go Pricingの魅力は、その洗練された料金表にあります。おしゃれな色使いと計算された余白により、すっきりした印象の料金表を作成することができます。また、テーマも豊富に用意されており、中には特定の業界向けに特別に設計されたものも。いくつかのページビルダーとも統合可能で、コーディングの知識がなくても、ショートコードを活用することができます。
価格
一回払いで27ドル。さらに8.25ドルを支払うと、サポートを1年間に延長することができます（デフォルトでは6ヶ月）。
このプラグインの魅力
- 料金表の各パーツ（ヘッダー、ボディ、ボタン含む）がビジュアルエディター上でそれぞれのセクションに分割される。
- 250以上のテンプレートを利用して数分以内に料金表ページを立ち上げることができる。
- ページビルダー統合により、要素のドラッグ＆ドロップが可能。Beaver Builder、Elementor、WPBakeryと相性が良い。
- 誰でも使いやすい。優れたバックエンドインターフェースにショートコード、インポート、設定などの機能あり。
- アニメーションを追加して料金表をより魅力的なものにできる。
- 2,000以上のフォントアイコンが利用可能で、料金表をより視覚的に見せることができる。
- 上級者向けにカスタムCSSもサポート。
- メディア要素、PayPalボタン、Google マップのような機能も追加可能。
3. Pricing Tables WordPress Plugin – Easy Pricing Tables
特別な機能は特に求めておらず、シンプルな比較表や料金表を導入したいなら、Pricing Tables WordPress Pluginは間違いのないプラグインです。無料版と有料版があり、価格帯は年間29ドルからサイト数無制限の99ドルまで。有料版には、WooCommerceの拡張機能やGoogle アナリティクスとの統合など、画期的な機能もあります。
他にも、Easy Digital Downloads、Stripe、Pricing Toggleアドオンなどとの互換性もあります。さらに、10種類のデザインテンプレートから料金表を作成し始めることができます。アニメーションやグラフィックのような要素はなく、シンプルな料金表を求めている人向けのプラグインです。
価格
コアとなるプラグインは無料。
有料版は1つのサイトにつき年間29ドル、5つのサイトで年間59ドル、サイト数無制限で年間99ドルの3種類。
このプラグインの魅力
- 料金表のデザインはシンプルで、余計なものがなく、洗練された印象。
- ほぼ全ての項目（列、ボタン、フォントなど）の色を調整できる。
- 料金表はバックエンドにあるビジュアルフィールドのシンプルなリストで構築できる（フロントエンドでの見え方をそのまま反映）。
- 1つまたは複数のプランが他のものより優れていることを指定することができる。
- ドラッグ＆ドロップで列の並び替えが可能。
- より高度なカスタマイズにはカスタムCSSを使用できる。
- 無料版でも料金表の行数に制限なし。
- 有料版には、WooCommerce、Google アナリティクス、Stripeなどとの統合機能あり。
4. Pricing Table by Supsystic
Supsysticは、フォトギャラリー、ポップアップ、データテーブルなど、さまざまなプラグインを構築していることで知られています。そんなSupsysticによるPricing Tableは無料で利用でき、かなりの数の機能が組み込まれています。テンプレート、ホバーアニメーション、ボタンのカスタマイズ機能なども、無料で利用可能です。また、料金表のデータを簡単にインポート、エクスポートすることも。
有料版は1つのサイトにつき39ドルから。無料版にはないテンプレートやユーザー役割など、より多くの機能にアクセスできます。総合的に見て、無料プラグインの中ではトップクラスの選択肢と言えます。有料版についても洗練されたテンプレートが揃っており、手の届かない価格帯というわけでもありません。
価格
無料版あり。
有料版は、1つのサイトにつき39ドル、5つのサイトにつき69ドル、サイト数無制限で149ドルの3種類。
このプラグインの魅力
- 無料版の中で最も機能性に優れたプラグインの一つ。有料版との違いは、利用できるテンプレートのみ。
- 各要素はレスポンシブ対応、かつ明るい色調で美しく見せることができる。
- 無料版のテンプレートも申し分ない上、有料版のテンプレートはさらに充実している。
- 年払いや即日購入など、お得情報を表示するスイッチを設置できる。
- ビジュアルアイコンを使用して、いくつかのプランを紹介できる。
- ショートコード、カラー選択、ビジュアル構築ツールなどによって、コーディングが不要。
- ホバーアニメーションで消費者にプランをより魅力的に見せることができる。
- 画像や動画もサポートされており、効果的に特定の機能やビジネスの概要を紹介することができる。
- WordPressの管理画面でドラック＆ドロップ式のビルダーが利用できる。
5. CSS3 Responsive WordPress Compare Pricing Tables
20ドルで購入できるCSS3 Responsive WordPress Compare Pricing Tablesは、価格以上の機能を提供してくれます。CodeCanyonのマーケットプレイスで販売されており、無料版はないもの、その高い評価とレビューを考慮すれば、20ドルを支払うことに抵抗を感じる人は少ないでしょう。美しいテンプレートをベースに特定のプランを目立たせたり、色やフォントを変更したりすることができます。
今回ご紹介している料金表プラグインのほとんどはレスポンシブですが、このプラグインは、特にスマホとタブレットでの表示がきれいです。また、プラグイン開発者の対応も良く、新機能の構築などにも積極的に取り組んでいるようです。例えば、この記事を執筆してる間にも、スライドカラム、レスポンシブモード、およびデータのインポートとエクスポートと、3回の機能リリースがありました。
価格
20ドルですべての機能が利用可能。
さらに5.63ドルを支払うと、サポートを1年間に延長することができます（デフォルトでは6ヶ月）。無料版はありません。
このプラグインの魅力
- 費用対効果がとにかく高い。
- 豊富なカスタマイズツールによって、数千種類もの料金表を作成できる（20色のバージョン、60のリボン、42のクロスアイコン、および2つのスタイル）。
- 行と列は制限なく追加可能。
- CSSモジュールとHTMLモジュールで、高度なカスタマイズも可能。
- すべての列と行の幅と高さを調整する機能あり。
- マルチサイトとの互換性あり。
- ショートコードで、料金表を好きな場所に設置できる。
- データのインポートとエクスポート機能で、データを別の料金表に移動したり、スプレッドシートからインポートしたりすることができる。
- チェックマークや「X」などを含むアイコンが使用できる。
- アニメーションとメディア対応で、視覚的要素を増やしてプランを目立たせることができる。
6. ARPrice – Responsive WordPress Pricing Table Plugin
ARPriceもCodeCanyonで販売されているプラグインで、たった23ドルで豊富な機能を手にすることができます。その機能性を考慮すれば、機能に制限がありがちな無料プラグインを使う代わりに、少し投資してこのプラグインを利用する方がお得かもしれません。背景画像や複数のメディア要素をサポートしており、今回ご紹介している料金表プラグインの中でも、圧倒的なビジュアルを備えています。
バックエンドのビジュアルエディターでは、料金表がサイトでどのように表示されるかを正確に確認することができます。また、年単位、月単位などの時間単位の設定など、効果的な料金表を作成することも。美しいユーザーインターフェースで質の高い料金表を作成できるのが、このプラグインの魅力です。
価格
一回払いで23ドル。さらに6.75ドルを支払うと、サポートを1年間に延長可能（デフォルトでは6ヶ月）。
このプラグインの魅力
- 有料プラグインとして良心的な価格。
- 300以上のテンプレートが利用できる。
- カスタマイズツールが豊富（制限なしのカラー選択、レスポンシブ対応テンプレート、トグル式料金ボタン、3,000以上のアイコンなど）。
- アニメーション効果で、料金表をより魅力的にすることもできる。
- 高度なカスタマイズ用にCSSモジュールとCSSガイダンスシステムあり。
- Google マップなどのサードパーティプログラムとの統合もあり。
- リアルタイムテンプレートエディターには、カラム、ヘッダー、背景などの要素を調整できる美しいビジュアルインターフェースが搭載。
- チームショーケースと呼ばれる機能で、同じカラムの形式でサイト上でチームメンバーに関する情報を共有することができる。
- Elementor、Gutenberg、WPBakeryなどの人気ページビルダーと互換性あり。
7. Pricing Table – Price list, Price Table, Easy Pricing Table
このA WP Life開発のPricing Tableプラグインは、比較的新しく、高い評価を得ています。無料版は、数点のテンプレートとカスタマイズ機能が付帯しており、アニメーション、アイコンや機能一覧などの要素を挿入可能です。また、「今すぐ購入」ボタンや「一番人気」、「お得」などのタグを組み込むことができます。
有料版では、無料版と同じ機能に加えて、さらに19のテンプレートが利用可能です。9.99ドルで購入できるため、もし気に入ったテンプレートが見つかれば、有料版の購入を検討してみてください。
価格
無料版あり。有料版は9.99ドル。
このプラグインの魅力
- 無料版ですべての機能を利用できる。有料版との違いは使用できるテンプレートのみ。
- 見栄えの良いテンプレートの一部は無料版でも利用可能。有料版にはさらに19のテンプレートあり。
- 完全レスポンシブ対応。
- アイコンを使って料金表をより魅力的にできる。
- ショートコードで任意の場所に料金表を設置できる。
- ボタンをクリックするだけで、料金表の追加や削除が可能。
- 制限なしのカラー選択、ボタンやヘッダーの色変更などのカスタマイズ機能あり。
- 管理画面でカスタムCSSもサポート。
- ビジュアルエディターは完璧とはいかずとも、デザインエリアには複数のカラムが設定され、料金表の見え方を再現できる。
8. WRC Pricing Tables
WRC Pricing Tablesには、無料版と10ドルで購入できる有料版があります。有料版には500以上の追加テンプレート、PayPal統合、月間・年間プランの切り替えトグルなど、より高度な機能があります。10ドルで購入できるため、有料版の購入も検討してみてください。
このプラグインは、シンプルな料金表の作成に適しており、行と列は制限なく追加することができます。デザイン要素はドラッグ＆ドロップ式で操作可能。またカラーを選択すると、その色をもとに料金表のデザインが自動で生成されるのも画期的な機能です。
価格
無料版あり。有料版は10ドル。
このプラグインの魅力
- 無料版でも申し分ない機能が揃い、たった10ドル（一回払い）でさらに優れたソリューションを手にすることができる。
- ショートコードを使って料金表を任意の場所に設置できる。ショートコードは任意の固定ページ、投稿、ウィジェットに追加可能。
- Font Awesomeのアイコンで、視覚的に楽しいポップアップを追加できる。
- Google Fontsをサポート。
- PayPalボタンの統合。
- 数々のテンプレートが利用できる。
- 料金表は複製可能。行と列は数に限りなく追加できる。
- 高度な開発者向けにカスタムCSSもサポート。
自社に適したプラグイン選びを
上記プラグインはどれも優れた選択肢になりますが、もう少し絞り込みたい場合は、以下を参考にしてみてください。
- 無料でできるだけ多くの機能を手にするなら─Responsive Pricing Table by WP Darko、またはPricing Table by Supsystic
- 豊富なデザインテンプレートを利用したいなら─Go Pricing、またはARPrice
- シンプルを極めた料金表を作成するなら─Pricing Tables WordPress Plugin – Easy Pricing Tables
- 有料で最も豊富に機能をそろえたプラグインなら─CSS3 Responsive WordPress Compare Pricing Tables
ご紹介したすべてのプラグインそれぞれにメリットがあります。上記を参考に、自社サイトに適したものを選んでみてください。
しかし、プラグインを使用せずに料金表を作成したいという方もいるかもしれません。
最後に、プラグインなしでゼロから料金表を作成する方法をご紹介します。
WordPressで自分で料金表を作成する方法
HTMLコードで表の構造を定義し、CSSでスタイルを指定すれば、料金表を自分で作成することもできます。
まずは、WordPressにログインし、管理画面に移動して、「固定ページ」＞「新規追加」をクリックします。また、料金表を表示したい固定ページにコードを追加することも可能です。
WordPressのエディターが表示されたら、テキストモードに切り替え、以下のコードを貼りつけます。
<div class="pricing-table">
<div class="one-third first">
<ul>
<li class="header">Basic</li>
<li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul>
<li class="header-blue">Pro</li>
<li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="one-third">
<ul>
<li class="header">Business</li>
<li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
</div>
このコードは比較的シンプルです。まずは料金表のコードを格納するdivを作成し、CSSで簡単にスタイルを設定できるようにします。次に3つの料金表を作成するため、それぞれを3分の1カラムで囲みます。最後にヘッダーと価格帯のクラスを追加して、料金表の他の要素から目立つようにします。
「公開」または「更新」をクリックする前に、必ず [pre]<li> と </li>[/pre] タグの間のテキストを独自の値に置き換え、支払いフォームへのリンクをリンクのhref部分の後に追加してください。
すべての値を置き換えたら、固定ページを新規作成する場合は「公開」、既存の固定ページに追加した場合は「更新」をクリックしてください。
これで固定ページを確認すると、料金表の見た目はまだ地味な状態です。ここから、料金表をカスタマイズしてみます。
子テーマを使用している場合は、以下のコードを子テーマのスタイルシートに、そうでなければカスタムCSSに貼り付けてください。
このコードの最初の部分は、料金表が列で表示されるように指定するものです。3つ以上のテーブルを表示する場合は、このクラスを置き換えてください。
/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0;
}
コードの2番目の部分は、料金表にスタイルを与えます。
/* ## Pricing Table
--------------------------------------------- */
.pricing-table {
line-height: 1;
}
li.header {
background-color: #2f79a9;
color: #fff !important;
font-size: 25px;
border-bottom: 1px solid #2f79a9 !important;
margin-bottom: 0 !important;
}
li.grey-blue {
background-color: #569dcc;
color: #fff !important;
font-size: 20px;
}
li.header-blue {
background-color: #00b9eb;
color: #fff !important;
border-bottom: 1px solid #00b9eb !important;
font-size: 25px;
margin-bottom: 0 !important;
}
li.light-blue {
background-color: #72dffd;
color: #fff !important;
font-size: 20px;
}
.middle {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.pricing-table .one-third {
background-color: #fff;
margin: 20px 5px;
padding: 40px;
width: 32.33%;
}
.pricing-table .one-third:nth-child(3n+1),
.pricing-table .one-third:nth-child(3n+2),
.pricing-table .one-third:nth-child(3n) {
border: 1px solid #ddd;
}
.pricing-table .one-third ul {
margin: 0;
}
.pricing-table ul li {
border-bottom: 1px solid #ddd;
color: #333;
margin-bottom: 10px;
padding: 10px;
text-align: center;
list-style-type: none;
}
.pricing-table a.pricing-button {
background-color: #00b9eb;
border: 3px solid #00b9eb;
color: #fff;
display: block;
text-align: center;
padding: 16px 24px;
}
.pricing-table a.pricing-button:hover {
background-color: #000;
border: 3px solid #000;
color: #fff;
}
/* Pricing Table - Media Queries for Mobile Devices
--------------------------------------------- */
@media only screen and (max-width: 1140px) {
.pricing-table .one-third {
width: 32%;
}
}
@media only screen and (max-width: 800px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 568px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 420px) {
.pricing-table .one-third {
width: 100%;
margin: 20px 0;
}
}
ヘッダーと価格を目立たせるため、シンプルで基本的なスタイルを加えています。また、特定のパッケージを強調するために、中央のテーブルの周囲にボックスシャドウ、料金表がレスポンシブであることを確認するために、いくつかのメディアクエリも追加しています。
両方のCSSスニペットを貼り付けたら、「ファイルを更新」をクリック。これで料金表が適切に表示されるか確認しましょう。
料金表について、何かご質問やご意見がありましたら、以下のコメント欄でお聞かせください。
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
