WordPressに美しい料金表を追加する方法 (コード不要)

見やすくスキャンしやすい美しい価格表を追加することで、ユーザーは適切な製品を選択でき、意思決定プロセスが簡素化されます。

当社のパートナーブランドのいくつかは、さまざまな料金プランを提供しており、それらを紹介するための料金テーブルを作成しています。彼らは、カラフルなCTAボタンとブランドに合わせた明確なデザインで、テーブルを視覚的に魅力的にしています。 🎨

これにより、統一感のある外観が作成され、ユーザーの購入が促進されます。

この記事では、コードを書かずにWordPressに美しい価格表を簡単に追加する方法を紹介します。

WordPressに美しい料金表を追加する方法 (コード不要)

WordPressプラグインで価格表を追加する理由

WordPressウェブサイトに新しい機能を追加するには、2つの方法があります。コードを使用して手動でプログラムするか、WordPressプラグインを使用します。

HTML および CSS に慣れている場合は、コードを使用して価格表を作成したい場合があります。必要なプログラミングおよびデザインスキルは特に高度ではなく、テーブルのデザインを完全に制御できます。

ただし、コードの作成とテストには時間がかかります。また、モバイルデバイスを使用するユーザーや、異なるウェブブラウザを使用するユーザーも考慮する必要があります。結果として、すべてのユーザーにとって見栄えの悪い価格表になる可能性があります。

WordPressプラグインを使用すると、より迅速かつ簡単に行えます。デザインやコーディングの経験がない場合に最適なソリューションです。

それを踏まえて、コードを書かずにWordPressで美しい価格表を追加する方法を見てみましょう。2つの異なるWordPressプラグインを取り上げます。どちらがあなたに適しているかを選択できます。

方法1:Easy Pricing Tablesで美しい価格表を追加する

この方法は、デフォルトのWordPressエディターを使用して、任意のページまたは投稿に価格表を追加するのに最適な選択肢です。

ページ全体のレイアウトをデザインするための完全なドラッグアンドドロップページビルダーを好む場合は、方法2にスキップすることをお勧めします。

まず、Easy Pricing Tablesプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドを参照してください。

注: このチュートリアルでは、無料のプラグインを使用します。より多くの機能を提供するプレミアムプラグインもあり、シングルサイトライセンスは49ドルから利用できます。追加のテンプレートにアクセスしたり、画像を追加したり、テーブルをWooCommerceと統合したりする場合は、プレミアムバージョンが必要です。

例えば、プレミアムバージョンでは、各価格列内に製品の写真を挿入できます。

ステップ 1: 価格表の作成

有効化したら、WordPress管理サイドバーから**価格表 » 追加**ページに移動します。プラグインは、テーブルをどこに追加したいか尋ねます。

このチュートリアルでは、最初からどのように機能するかを示すために、「価格表付き新規ページ」オプションを選択します。ただし、既存の投稿やページに価格表ブロックを追加することもできます。

価格表を追加したい場所を選択してください

これにより、WordPressブロックエディターに新しい価格ページが開かれ、画面に「テンプレートを選択」というプロンプトが表示されます。

ここから、お好みのデザインを選択して、WordPressページに価格表を埋め込みます。

価格表テンプレートを選択する
ステップ 2: 価格表のカスタマイズ

価格表のカスタマイズは非常に簡単です。たとえば、価格プランの見出しを変更することから始めることができます。

その後、テーブルをクリックして、小見出し、機能、価格などを追加できます。

価格表を編集

テーブルブロックの上部にあるブロックツールバーを使用して、新しい列を追加したり、行と列の配置を変更したり、列の順序を変更したり、サイズを変更したりできます。

価格表では、特定のプランが「おすすめ」または「最も人気」としてマークされることがよくあります。これは、強調したい列を選択し、ツールバーの星アイコンをクリックすることで実行できます。

画面右隅のブロックパネルから、テーブルの視覚的な外観を変更することもできます。

たとえば、アクセントカラーを変更して最適な価格プランを強調したり、テーブルの下部にあるボタンの色を変更したりできます。

価格表のアクセントカラーを変更する

ボタンをクリックしてラベルを編集することもできます。

それが完了したら、フィールドに任意のラベルとURLを追加できます。

ボタンのラベルとURLを追加
ステップ3:価格表の公開

WordPressサイトに価格表を公開するには、画面右上にある「更新」または「公開」ボタンをクリックするだけです。

「プレビュー」リンクをクリックして、ウェブサイトで公開する前にページを確認することもできます。

価格ページを保存して公開する

これで、ウェブサイトにアクセスして最終結果を確認できます。

価格表プレビュー

方法2:ページビルダーで美しい価格表を追加する

この方法は、価格ページのデザインを完全に制御したい場合に最適です。

このために、SeedProdをお勧めします。これは、ビジネス、ブロガー、ウェブサイト所有者向けのドラッグアンドドロップWordPressページビルダーであり、コンバージョン率の高い価格ページを作成するための最良の選択肢です。

私たちのパートナーブランドのいくつかは、それらを使用してウェブサイト全体を再設計しており、ユーザーはその新しい美学を気に入っています。詳細については、SeedProdの詳細レビューをご覧ください。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

注: このプラグインには無料プランがあります。ただし、このチュートリアルで使用する価格表ブロックにアクセスするには、ProまたはEliteプランが必要です。

有効化したら、SeedProd » 設定ページに移動して、プラグインライセンスキーを入力してください。この情報は、SeedProdウェブサイトのあなたのアカウントで見つけることができます。

SeedProd ライセンスキーを入力してください

ライセンスキーを入力した後、新しいランディングページを作成し、次に価格表ブロックを追加します。

ステップ1:新しいランディングページを作成する

価格表のランディングページを作成するには、SeedProd » Landing Pages に移動し、「新しいランディングページを作成」ボタンをクリックする必要があります。

新しいSeedProdランディングページを追加

次の画面で、ランディングページテーマを選択するように求められます。SeedProdには、さまざまなキャンペーンタイプに合わせてきれいに整理された、数十種類の美しいランディングページテンプレートが用意されています。

開始点として使用したいテンプレートを選択するには、クリックするだけです。

SeedProdランディングページテンプレートを選択

WordPressでのランディングページの作成方法に関するガイドで、ページのカスタマイズ方法や新しいブロックの追加方法を学ぶことができます。準備ができたら、価格表を追加しましょう。

ステップ2:価格表を追加する

まず、価格表ブロックを配置する場所を確保するために、いくつかの列を追加する必要があります。

「カラム」ブロックをページにドラッグし、価格を表示するのに十分なカラムを選択できます。このチュートリアルでは、3つのカラムを選択します。

ランディングページにカラムブロックを追加することから始めましょう

その後、「価格表」ブロックを見つけて、作成した各セル内の「ここに新しいブロックをドラッグ」という言葉の上にドラッグします。

このチュートリアルでは、各列につき1回ずつ、ブロックをページに3回ドラッグする必要があります。

各列にSeedProd価格表ブロックを追加する

価格表を編集するには、それをクリックするだけです。

これで、コンテンツタブの設定を使用して、プラン名を編集し、製品またはサービスの С名を入力できます。価格と通貨を変更したり、セール時以外の商品が通常かかる価格を追加したりすることもできます。

コンテンツタブを使用して価格表ブロックをカスタマイズする

その後、高度なタブに切り替えて、テキストのフォントとサイズ、ボタンの色とサイズ、間隔、ホバー効果などをカスタマイズする必要があります。

たとえば、他の価格帯よりも1つの価格帯を目立たせることで、ユーザーがそのオプションを選択するように促すことができます。

高度なタブを使用して価格表ブロックをカスタマイズする
ステップ3:価格表を公開

ランディングページと価格表に満足したら、公開する時間です。

「保存」ボタンのドロップダウン矢印をクリックし、「公開」をクリックします。

SeedProdランディングページを公開する

ページが公開されたことを知らせる通知が表示されます。

「ライブページを表示」ボタンをクリックして、新しいWordPress価格ページの外観を確認することもできます。

SeedProd 価格表プレビュー

ボーナス:価格ページコンバージョンをブースト

魅力的な価格ページを作成したら、コンバージョンを最適化し、ユーザーに購入を促すことが重要です。

これを行うには、特定の価格プランで新規ユーザーに割引を提供できます。これはインセンティブとして機能し、ユーザーを動機付けることができます。

クーポンを作成するには、Advanced Coupons プラグインの使用をお勧めします。詳細は、WooCommerceでスマートクーポンを作成する方法のチュートリアルをご覧ください。

高度なクーポン

価格ページでの売上を伸ばすもう1つのヒントは、緊急性を生み出すことです。これは、ユーザーの間でFOMOを構築し、行動を促すことができます。

カウントダウンタイマーを追加したり、限定商品を販売したり、期間限定の割引を提供したりすることで、これを行うことができます。

さらに、市場で最高のWordPressソーシャルプルーフプラグインであるTrustPulseを使用することもできます。

TrustPulse

ウェブサイトでの購入やサインアップなどのライブ顧客アクティビティを表示し、コンバージョンを向上させます。その他のヒントについては、価格ページコンバージョンを30%増やす方法をご覧ください。

よくある質問

WordPressで価格表を追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

WordPressに最適な価格表プラグインは何ですか?

最適なプラグインは、お客様の特定のニーズによって大きく異なります。シンプルで無料のソリューションをお探しなら、Easy Pricing Tables は既存の投稿にテーブルを追加するのに最適な選択肢です。

ページ全体のデザインを完全に制御したい場合は、SeedProdのようなページビルダーが最良の選択肢です。コンバージョン率の高いページを作成するための、専用の価格表ブロックやその他の多くのツールが含まれています。

いくつの価格プランを提供すべきですか?

ほとんどのビジネスでは、3〜4つの価格プランを提供することが最適だと考えています。これにより、顧客は圧倒されることなく十分な選択肢を持つことができます。

なぜ特定の価格プランを強調する必要があるのですか?

プランを「最も人気」または「最良の価値」として強調することは、顧客の意思決定を導く賢い方法です。

それは彼らの選択を簡素化し、機能と価格の最適なバランスを提供するオプションへと優しく導きます。

価格表をモバイルフレンドリーにするにはどうすればよいですか?

価格表をモバイルフレンドリーにする最も簡単な方法は、レスポンシブプラグインを使用することです。

SeedProdやEasy Pricing Tablesのようなツールは、テーブルのレイアウトを自動的に調整するように設計されており、デスクトップからスマートフォンまで、あらゆるデバイスで美しく表示されます。

このチュートリアルで、コーディング不要でWordPressに美しい価格表を追加する方法を学べたことを願っています。また、初心者向けWordPress eコマースセットアップガイドや、オンラインで販売できる人気のデジタル製品のリストもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

13 CommentsLeave a Reply

    • 具体的にどのように意味するかによりますが、例えばEasy Pricing Tableプラグインには、切り替え可能な通貨オプションがあり、それを使用できます。

      管理者

  1. 以前、小規模事業主として、自分のサービスのために見栄えの良い価格表を作成するのに苦労していました。実際、ゼロから作成する必要があり、あまり良い出来栄えではありませんでした。
    Easy Pricing Tablesの使い方に関するこのステップバイステップガイドは、まさに私が求めていたものでした。ありがとうございます!

  2. コーディングなしでWordPressサイトに価格表を追加することは、特にページビルダーを使用する場合、ゲームチェンジャーです。私はElementorとSeedprodの両方を使用しました。ページビルダーを使用すると、これらのテーブルの作成が非常に直感的になり、デザインと明瞭さに集中できるようになります。このアプローチにより、価格情報が魅力的でユーザーが理解しやすいものになり、コンバージョンにとって非常に重要です。私にとって、適切に設計された価格表は、製品またはサービスのすべての必須機能が適切にリストされている場合、ユーザーの意思決定に大きく影響を与える可能性があります。だからこそ、このガイドは特に価値があると感じました。

  3. 価格表は、製品やサービスをオンラインで販売するあらゆるウェブサイトにとって必須の機能です。
    見栄えが良く、情報が豊富で、行動喚起(コールトゥアクション)のある価格表は、迅速な購入決定を助けます。
    また、コストの微調整のためにさまざまなオプションを比較することもでき、ニーズに最適なプランに関する情報に基づいた意思決定を助けます。

    • 価格ページの重要性については完全に同意します。ユーザーが選択できるさまざまな価格プランが含まれており、最も手頃なプランを選択するために比較することができます。

  4. こんにちは
    価格表を作成し、「今すぐ購入」ボタンを追加したいと考えています。「今すぐ購入」ボタンをクリックすると、WordPress管理者にユーザーが選択したプランのメール通知が届きます。
    このプラグインで可能ですか

  5. I’ve created a really nice price table, which i can preview in table editing, but when I copied the ‘deployed’ text into the wanted webpage, nothing shows up. In page editing the deployed text is just written and in preview the page is blank :(

    したがって、2つの質問があります。1)デプロイされたテキストはどこに挿入しますか? 2)テキストをコピーした後、それをウェブページに表示できるようにするにはどうすればよいですか?

    ありがとうございます!

  6. 私は何も販売していません。動物製品のレビューをして、広告主を獲得したいのです。しかし、フォロワー数を増やすのに苦労しています。レビューを書いて、企業に連絡して、私のページに広告を掲載してもらうよう依頼すべきでしょうか?もし彼らが「はい」と言ってくれたら、どうやって私のサイトに広告を掲載すればいいですか?

  7. このプラグインは良さそうですが、少し高価だと思います。Elementorは同じことを、それ以上の機能を45ドルで提供します。ページビルダーが何らかの理由で使用できない場合にのみ、これが役立つでしょう。

  8. これは私にとって非常に役立つ記事です。ちょうどこれらのテーブルを作成する方法を探していました。共有してくれてありがとう。

  9. WordPressのカスタムページや左ナビゲーションバーの作成方法について、チュートリアル動画を作成してください。w3schoolのようなチュートリアルサイトのように、彼らのウェブサイトには美しいナビゲーションサイドバーがあります。私もWordPressウェブサイトにこの機能が欲しいです。迅速に対応し、メールで通知してください。

返信を残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。