ウェブサイトには価格表を掲載していますか?芝生の手入れに関する価格表かもしれませんし、ソフトウェアのパッケージのものかもしれません。技術的な分野からヨガの教室まで、大抵の企業なら自社のサービスを分かりやすく紹介するために価格表が使えます。最適なWordPressの価格表作成プラグインを確認し、それからプラグインをウェブサイトに実装する流れが一般的です。

ところで、価格表の作成はなぜ重要なのでしょうか?

その答えは明白なようにも思えますが(コンバージョン率を上げたいとお思いでしょう?)、その理由をきちんと理解するのは良いことです。何故、プラグインを利用した価格表は単なる箇条書きや文章、画像などよりも売り上げを伸ばすのに効果があるのでしょうか?

Having a sleek looking prices page can make your services pop and increase conversions. Check out these handy WordPress pricing table plugins. 🛒Click to Tweet

WordPressの価格表プラグインに必要な機能は?

WordPressの価格表作成プラグインの利点を理解したところで、今度は必要な機能を考えてみましょう。

他にも価格表を魅力的にする機能はいくつもありますが、まずは基本を押さえるのが良いでしょう。

おすすめのWordPress価格表作成プラグインの比較 ( +自分で作成する方法)

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. 一からWordPressの価格表を作成する方法

価格表作成プラグインやWordPressサイトに関しては、利用できる選択肢に事欠きません。おすすめの価格表作成プラグインには無料のものもあれば、無料版のない有料だけのものもあります。ご紹介するプラグインはどれも一見の価値があるものばかりですが、そのうちいくつかには、特定の業界や企業のウェブサイトでの使用に最適な独自の機能が備わっています。

1. Responsive Pricing Table by WP Darko

Responsive Pricing Tableは利用者に最も親切な価格表作成用のパッケージの一つです。無制限にプランを組み、自由に表を作成できる素晴らしい無料のバージョンがあります。一方で、スキンや列の幅を均一にするための「Equalizer」などの便利な機能を使いたい場合、有料版へのアップグレードも可能です。

Responsive Pricing Table WordPressプラグイン

Responsive Pricing Table WordPressプラグイン

作成する価格表は、シンプルな入力欄とバックエンドボタンを実装。標準装備の入力欄の一例としては、料金、プラン内容、プランの名前、アイコンなどがあります。カスタマイズ可能なボタンにはStripeやPayPalなどをリンクさせることができますし、上級者にはカスタムCSSのクラス設定が役に立つでしょう。

料金

無料のプランがあります。

有料版のプラグインはウェブサイト1件での利用の場合19ドル、または無制限のウェブサイトでの利用の場合49ドルです。

Darkoは他のプラグインも販売しており、全てのプラグインが入ったパッケージは79ドルで購入できます。企業によっては便利なパッケージでしょう。 

おすすめの理由

2. Go Pricing

Go Pricing のアプリには無料版は存在しませんが、CodeCanyonでは何千もの売上を誇り、レビューも高評価。さらにこの最高の価格表作成プラグインの一つは、たったの27ドルで購入可能です。

Go Pricing – WordPress Responsive Pricing Tables

Go Pricing – WordPress Responsive Pricing Tables

Go Pricingプラグインはどこが優れているのでしょうか?まず、モダンな色使いと見やすい余白が十分にある、美しい価格表が特徴です。また、特定の業界向けに特別に作られたものなど、幅広いテーマから選択することができます。 さらに、いくつかのページビルダーと統合している点と、コーディングに詳しくなくても簡単に価格表が作れるようショートコードにも対応している点も特筆すべきでしょう。

料金

一回限りの料金は27ドル、1年間のサポート延長は8.25ドルです。

おすすめの理由

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

余分な要素のないシンプルな比較表、価格表を作成したい場合、Pricing Tables WordPress プラグインが堅実な選択肢でしょう。無料版と有料版があり、有料版は1つのウェブサイトで1年間29ドル、無制限のウェブサイトで1年間99ドルです。有料版ではWooCommerceのアドオンやGoogleアナリティクスとの統合など、魅力的な追加の機能が利用できます。

Pricing Tables WordPress Plugin – Easy Pricing Tables

Pricing Tables WordPress Plugin – Easy Pricing Tables

有料版はその他、Easy Digital Downloads、Stripe、Pricing Toggle などを実装できます。さらに、既存のデザイン10個をもとにデザインを作成できます。上述のとおり、このプラグインは最もシンプルな価格表を作成できるプラグインの一つなので、アニメーションや図などは不要という方におすすめです。

料金

基本のプラグインは無料です。

有料版は1ウェブサイトあたり年間で29ドル、5ウェブサイトあたり年間59ドル、無制限のウェブサイトでの使用で年間99ドルです。

おすすめの理由

4. Pricing Table by Supsystic

Supsysticはフォトギャラリーや、ポップアップ画面、データ表などが作れる様々なプラグインを作成していることで有名ですが、今回はたくさんの機能を備えた無料のプラグインである Pricing Table プラグインをご紹介します。この無料版のプラグインには既存のテンプレートやホバーアニメーション、ボタンのカスタマイズなどの機能が備わっています。表の情報を簡単にインポートしたりエクスポートしたりすることも可能です。

Pricing Table by Supsystic

Pricing Table by Supsystic

有料版のプラグインも1ウェブサイトあたり年間で39ドルから有り、たくさんのテンプレートの利用と権限の管理ができるので、なかなかおすすめです。総合的に見て「有料版は避け、無料のプラグインのみを利用したい」という場合には、理想的な価格表作成プラグインの一つだと言えるでしょう。ただ、有料のテンプレートでかなり見栄えがよくなり、それほど高額でもありません。

料金

無料版があります。

有料版へのアップグレードは1ウェブサイトあたり39ドル。5つのウェブサイトの場合は39ドルになります。無制限のウェブサイトでの利用の場合は149ドルです。

おすすめの理由

5. CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive pricing table プラグインは20ドルという価格で十分すぎるほどの機能を誇ります。CodeCanyonでしか販売されておらず、無料版は存在しないことは留意しなければなりません。とは言え、この高評価のレビューのついた有料のプラグインに20ドルを支払うのをためらう人は少ないでしょう。このプラグインにはいくつもの美しいテンプレートが用意されています。色やフォントを変えられるほか、おすすめのプランをハイライトすることもできます。

CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive WordPress Compare Pricing Tables

今回ご紹介している価格表の多くはレスポンシブ対応ですが、私がスマートフォンやタブレットで試したところ、このプラグインの表は特に綺麗に表示されました。また開発者の応対も良く、新機能を開発してアップデートとして公開する意欲があるようです。例えば、この記事の執筆時点で3つの新しい機能のリリースがありました。スライディングカラム、レスポンシブモード、データのインポート/エクスポートです。

料金

全ての機能込みで20ドル。 

5.63ドルでサポートを1年間延長できます。無料版は存在しません。 

おすすめの理由

6. ARPrice – Responsive WordPress Pricing Table Plugin

ARPriceプラグインもCodeCanyonにて販売されていますが、こちらの販売価格は23ドルです。企業や個人ユーザーの多くは、一部の機能が利用できない無料のプラグインを使うのではなく、少額の料金を払ってでも必要な機能を手に入れた方がいい、というのが私たちの考えです。ともかく、この価格表作成プラグインは背景のイメージやアイコンなどの幾つかのメディア要素に対応しているため、今回ご紹介する中でも最も見栄えの良いものの一つでしょう。

ARPrice - WordPress Pricing Table Plugin

ARPrice – WordPress Pricing Table Plugin

バックエンドデザイナーは視覚的なつくりで、実際のウェブサイトでどの様に表示されるかが、そのままわかります。次に料金プランの単位を年間、月間、その他の期間から選べます。まずはテンプレートを選択し、続いてデータをインポートし、効果を変更したりフォントを選択するといった流れです。総合的に見て、ARPriceプラグインは美しいユーザーインターフェース、優れたフロントエンドのバランスがいい選択肢です。

料金

一回限りの料金は23ドル。1年間のサポート延長で6.75ドルです。 

おすすめの理由

7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

もう一つお手頃価格の価格表作成プラグインをご紹介します。WP Pricing Table Builderは90種類のテンプレートから選ぶことができます。また、カスタムテーマジェネレーターとドラッグ&ドロップビルダーにより、操作性の高いデザインが可能です。

WP Pricing Table Builder – WordPress用レスポンシブ価格表プラグイン

WP Pricing Table Builder – WordPress用レスポンシブ価格表プラグイン

このプラグインのいいところは、「何百ものパターンのテンプレート」がないこと。代わりに、開発者は質に重点を置き、すべてのテンプレートをモダンで美しいものに仕上げるためにかなりの時間を費やしたことがわかります。テーマカラージェネレーターは、他のプラグインにはない興味深い機能です—選択した1色を使用して、カラーテーマが生成できます。これを使えば、価格表の色合いについて心配する必要はなさそうです。

料金

プラグインの値段は24ドル。1年間のサポート延長には7.13ドルかかります。

おすすめの理由

8. Pricing Table – Price list, Price Table, Easy Pricing Table

Pricing Table – Price List pluginは、A WP Life提供のプラグインです。これはやや新しいものですが、すでに信頼を勝ち得ています。無料版でも、プラグインにはいくつかのテンプレートが付属し、カスタマイズもできます。 アニメーションがすでに用意されており、アイコンや機能のリストといったアイテムの挿入も可能。「今すぐ購入」ボタンをリストに配置し、「注目」や「人気」といったタグを組み込むのがおすすめです。

読み込みの遅いウェブサイトが売上に悪影響を与えてはいませんか?Kinstaならではの最適化された性能で売上を伸ばしてみるのはどうでしょうか?当社のホスティングプランをご確認ください

Pricing Table – 価格表、価格リスト、簡単に使える価格表

Pricing Table – 価格表、価格リスト、簡単に使える価格表

このプラグインのプレミアム版では機能はそのままに、19の追加のテンプレートをご利用いただけて…たったの9.99ドル。あなたのブランドにぴったりなテンプレートで是非ともご利用ください!

料金

無料で利用でき、プレミアム版にアップグレードすると9.99ドルかかります。

おすすめの理由

9. WRC Pricing Tables

WRC Pricing Tablesプラグインは無料のプラグインですが、10ドルでアップグレードすることもできます。プレミアムバージョンはもう少し高度で、500以上の追加のテンプレートが利用できる、PayPalとの統合、月額プランと年額プランを切り替えるための価格スイッチもあります。プレミアムプランには他にもいくつかの機能が付属しており、価格も安いため、購入を検討してみる価値はあるでしょう。

WRC Pricing Tables

WRC Pricing Tables

無料版であっても、シンプルな価格表を作成するのには便利。しかも作成できる行と列の数に制限はありません。すべてのデザインは、ドラッグ&ドロップエディターから行います。私が、WRC Pricing Tablesプラグインで最も気に入っている点の1つは、カラーピッカーを利用できること—好きな場所から色を取得すると、そこからランダムな表デザインが生成されます。

料金

無料で利用可能。アップグレードは10ドルです。

おすすめの理由

あなたにとって一番最適なのはどのWordPress価格表プラグイン?

上記のプラグインはすべて、試してみる価値があります。それでも、皆さんの判断をより簡単にするために、こんな指標をご用意しました。

今回ご紹介した他のすべての価格表プラグインにそれぞれの強みがありますが、これらが、私が特におすすめするものです。

それでは、どのプラグインの使用にも興味がなく、独自の価格表をコーディングでつくりたい場合はどうでしょうか?

もちろん、作り方をご紹介します。

WordPressでゼロから価格表を自作する方法

ゼロから価格表を作成するには、HTMLコードを使用して表の構造を組み立て、CSSでスタイルを調整します。

開始するには、WordPress Webサイトにログインし、「ダッシュボード」に移動して、「ページ」→「新規追加」をクリックします。 価格表を表示したい既存のページにコードを追加することもできます。

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;
 }
 }

価格表にシンプルで基本的なスタイルを設定し、目立つようにヘッダーと価格を別のスタイルにしました。また、特定のパッケージを強調するために、中央の表の周りにボックスシャドウを追加しました。最後に、メディアクエリを追加し、表をレスポンシブにしました。

pricing table in wordpress with code

全て指示通りにこなすと、こんな見た目に仕上がります

両方のCSSスニペットを貼り付けたら、「ファイルの更新」をクリックします。次に、ページを見て、すべてが希望どおりに表示されているかどうかチェックしてください。

価格表についてご質問がある場合、または他の人への提案がある場合には、コメントでお知らせください!


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。