WordPressでショッピングサイトなどサービスを提供するサイトを運営する場合、必須となってくるのが「料金表」の記載です。
「うちはこのくらいのプランやサービスをいくらで提供しています」というものは、必ず必要になってくるものです。しかし、そもそも料金表がわかりづらいと直感的に感じると、ユーザーが離脱してしまう可能性もあります。
でも、今回ご紹介するWordPressの料金表専用のEasy Pricing Tablesプラグインを使えば、直感的に見やすい料金表が誰にでも簡単に制作することが可能です。難しいテーブルタグやCSSの知識も一切必要ありません!
料金表の見た目や掲載に四苦八苦している方は、ぜひ本記事を参考にEasy Pricing Tablesの導入を検討してみてはいかがでしょうか?
料金表の作り方はさまざま
Easy Pricing Tablesをご紹介する前に、皆さんは料金表を制作するうえで以下のようなお悩みを持ってはいないでしょうか?
- テーブルタグで制作しているが、飾りっ気の無い料金表になってしまう
- SEOを気にしてテキストで制作した方がいいのは分かっているが見た目を装飾したいので、画像で料金表を制作している
代表的なところでいうとこんな感じのお悩みを持ったまま、料金表を制作されている方が多いのではないでしょうか?
一般的に表の構成のものは、テーブルタグで制作するのが当たり前ですが、CSSを理解していないと見た目の部分で装飾ができず、料金表そのものが目立ちません。
一方、画像で制作した場合は、見た目は自由に綺麗に制作できますが、SEOの観点からみると不利になってしまいます。
Easy Pricing Tablesプラグインで出来ること
料金表を制作するうえでは、上記のようにテーブルタグと画像で制作する場合は、一長一短の部分が存在しますが、これを一挙に解決できるのが今回ご紹介するEasy Pricing Tablesプラグインです!
Easy Pricing Tablesプラグインでは、直感的な操作で綺麗で見やすい料金表を制作することができます。
プラン名や料金、ボタンの文言の作成からリンク先の設定まで、HTMLやCSSを知らない方でも項目を選択していくだけでOK!
さらに目立たせたいプランがある場合には、フォントサイズやフォントの色を変更を直感的に変更できるため、「おすすめ!」や「1番人気のプラン!」といった形で、ユーザーを惹きつけるための機能も搭載しています。
Easy Pricing Tablesのインストール方法
それでは、Easy Pricing Tablesプラグインのインストールの方法と使い方をご紹介しましょう。WordPress管理画面のプラグイン>新規追加から、「Easy Pricing Tables」を入力し、いますぐインストールボタンをクリックすることで、インストールすることが出来ます。
もしくは、以下よりEasy Pricing Tablesをダウンロードし、FTPからpluginフォルダにアップしてもインストールすることが可能です。
Pricing Tables WordPress Plugin – Easy Pricing Tables
インストールが完了したら、忘れずに最後に有効化をしておきましょう!
Easy Pricing Tablesの使い方
Easy Pricing Tablesプラグインのインストール・有効化が終了したら、すぐに料金表の制作を始めることが出来ます。以下では、新しく料金表を制作する流れをご紹介します。
新規で料金表を制作
WordPress管理画面の左側に「Pricing Tables」という項目が追加されています。そこから、「Add New」をクリックし新規で料金表を追加しましょう。
料金表の項目の制作と見た目を装飾
料金表の制作するうえで、料金表内に表示させるタイトルや料金、文章を設定する「Content」タブと、文字色やサイズの変更の設定をする「design」タブに分かれます。
「Content」の項目では、以下の構成で料金表の項目を設定することが出来ます。
Name | コースやプランの名前 |
Pricing | コースやプランの価格 |
Features | コースやプランの特徴 |
Button Text | ボタン内のテキスト部分 |
Button URL | ボタンのリンク先 |
なお、「☆ Feature」ボタンは、各プランやコースの中でイチ押しやおすすめで設定する場合に使用します。「+ New Column」をクリックすることで、料金表の項目(プランやコース)を増やすことが出来ます。
続いて、料金表の見た目を装飾する場合は、「design」タブをクリックし切り替えます。
「design」で編集出来る点は以下のとおりです。
- General Settings (一般設定)
- Font Sizes(文字サイズ)
- Button Colors (ボタンカラー)
- Custom CSS (CSSの設定)
General Settings(一般設定)
General Settingsでは、以下のようにおすすめの箇所の見出し文言や表の角丸の付加などの設定をすることが出来ます。
Featured Label Text | 「☆ Feature」ボタンで選択したおすすめ箇所の見出し文言を設定 |
Border Radius | 表の角に丸みをつけるかどうか |
Automatically match Row Height | 自動的に各プランの表の高さを調整させる機能 |
Font Sizes(文字サイズ)
Font Sizesでは、各項目のフォントサイズを設定、変更することが出来ます。
Featured Label Font Size | 「☆ Feature」ボタンで選択したおすすめ箇所の文字サイズ |
Plan Name Font Size | 各コースやプラン箇所の文字サイズ |
Price Font Size | 料金箇所の文字サイズ |
Bullet Item Font Size | 各特徴箇所の文字サイズ |
Button Font Size | ボタン内箇所の文字サイズ |
Button Colors (ボタンカラー)
Button Colors では、通常ボタンと「☆ Feature」で設定したおすすめボタンの各カラーを個別にカラーパレットから設定や変更することが出来ます。
なお、ボタンの背景や枠の線の色など、細部に渡って設定・変更することが可能ですので、色々試して、見やすい料金表のデザインを見つけてみてください。
Button Color Featured-Button Color | ボタン背景カラー |
Button Border Color Featured-Button Border Color | ボタン枠線カラー |
Button Hover Color Featured-Button Hover Color | マウスオーバー時のボタン背景カラー |
Button Font Color Featured-Button Font Color | ボタン内の文字カラー |
Custom CSS (CSSの設定)
Custom CSS では、CSSコードを入力することでオリジナルの装飾を施すことが出来ます。CSSがわかる方は、ここで見た目を整え、自分だけの料金表を制作してみましょう!
制作した料金表を保存してコードを埋め込む
料金表の各設定が終了したら、saveボタンをクリックし、料金表を保存しましょう。
続いて、料金表を埋め込みたいページにアクセスし、場所をカーソルで指定します。その後、「Insert Pricing Table」ボタンをクリックし、「Insert」ボタンをクリックすると、料金表のショートコードが埋め込まれます。
なお、「Deploy(Get Shortcode)」からショートコードを取得して、料金表を設置したいページに埋め込む操作でも同様の形で料金表を設置することが可能です。
最後にプレビューから制作した料金表が表示されているかどうか、確認してみましょう!無事表示されていれば、これでEasy Pricing Tablesを使った料金表の制作は終了です。
まとめ
いかがでしたでしょうか?
今回は、項目は費用などを入力していくだけで誰にでも簡単におしゃれな料金表を制作することができるWordPress用プラグインEasy Pricing Tablesをご紹介しました。
料金は、「このサービスはどのようなサービスで一体いくらなのか?」というようにユーザーにとっても非常に重要なコンテンツです。
テーブルタグでも作れますし、画像としても制作することが可能ですが、どうせなら見やすくパッと見てわかりやすい料金表を作ってユーザーに対して優しいコンテンツ作りをしてみてはいかがでしょうか?
最後までお読みいただきありがとうございました。