インターネットを使って「商品を売るとき」や「サービスの申し込みを獲得する際」に必要になるのがランディングページです。
そのランディングページには、商品の価格やサービスのスペックがひと目で分かるように「料金表」や「比較表」を設置したい場合がありますが、これまでのWordPressテーマではプラグインを使ったり、自分でテーブルを組んで作らなくてはなりませんでした。
しかし、自力で作った見た目の悪い「料金表」や「比較表」だと、デザインが浮いてしまい成約率にも影響が出てしまうし、WEB制作会社などで作ってもらったホームページの場合には、ちょっとした変更でもいちいち修正依頼を出さなくてはならず、そのたびに手間と時間と費用がかかってしまいます。
- 「料金表を作るのが結構手間で面倒くさい。」
- 「なかなかデザインがしっくりこない・・」
- 「修正があったときにも自社でサクッと変更したい。」
そんな悩みを解決するため、ここではランディングページのデザインにバシっとはまる、美しくてカッコよい「料金表」や「比較表」がサクっと作れるWordPressテーマの使い方を解説します。
インターネットからの集客と、商品やサービスの販売促進に必要な機能を兼ね備えたWordPressテーマ【SOURCE】をインストールすれば、業種に合わせて ↑ のような「料金表」や「比較表」が驚くほど簡単に設置できます。
目次
WordPressテーマ【SOURCE】で「料金表」を設置する方法
WordPressテーマ【SOURCE】をインストールしたら管理画面を開き、まずはじめに固定ページを新規で作成します。
WordPressで記事を投稿する際には、ビジュアルエディタとテキストエディタが用意されています。
しかし、【SOURCE】にはビジュアルエディタとテキストエディタのほかに、TCDオリジナルページビルダーが搭載されており、このページビルダーを使うことでWordPress初心者でも簡単に「料金表」「比較表」を作ることができます。
ページビルダーのエディタをクリックすると ↓ のような画面になるので、はじめに[行を追加する]をクリックしましょう。
ページのカラムを1～6まで分割することができますが、「料金表」「比較表」を作る際は『1カラム』でOKなので、そのまま[追加]ボタンをクリックします。
“追加された行を選択してある状態”で[コンテンツを追加する]をクリック。
すると、ここに「画像」「見出し」「キャッチフレーズ」「文章」「Googleマップ」「スライダーの設定」「タブ」のほかに、【SOURCE】の新機能として追加された「料金システム表」「機能比較表」が搭載されているので、ここでは「料金システム表」をクリックします。
表の名前を入力して[新しいアイテムを追加する]をクリック。
仮に、料金表を【PLAN A】【PLAN B】【PLAN C】とした場合には、3つのアイテムを追加して ↓ のようにプランごとの帯のカラーや料金、説明文などを入力（ボタンを設置することも可）します。
すると、サクッとこのような料金システム表が完成します！
機能一覧やスペック比較に活用できる【機能比較表】の作り方
先ほど作成した「料金システム表」が入った”行を選択した状態”で「コンテンツを追加する」をクリックします。（※「機能比較表」を「料金システム表」と別ページに設置したい場合には、固定ページを新規で作成します。）
「機能比較表」をクリックして追加します。
表の名前を入力し、比較列数を（1～10）任意で設定し、見出しの文言やカラーを設定します。
[新しいアイテムを追加する]をクリックしていくと、比較させたい機能項目をどんどん追加していくことができます。
機能比較表には、「チェック時に表示するマーク」と「未チェック時に表示するマーク」が設定することができ、プランごとにチェック（未チェック）できる項目があります（備考を入力することも可）。
これらの設定項目によって、サクッと機能比較表が完成しました！
【機能比較表】の応用
この機能比較表に用意されている「チェック時に表示するマーク」と「未チェック時に表示するマーク」を”設定せず”に備考だけを入力してみましょう。
すると、プラン・機能ごとに自由な表示にすることもできます。
自由度の高いレイアウトページが作れるTCDページビルダー
「料金システム表」「機能比較表」を設置した固定ページには、ヘッダー画像やキャッチコピーを設定することができ、TCDページビルダーをそのまま使うことで、[数カラムの行]や[各種コンテンツ]を追加してランディングページとして完成させることができます。
業種や目的に合わせて、ユーザーに訴求するための画像や各コンテンツを追加してみましょう。
これで「料金システム表」「機能比較表」付きの訴求力バツグンのランディングページが完成です！
スマホ表示にも最適化されたWordPressテーマ【SOURCE】
WordPressテーマ【SOURCE】は、モバイルファーストに先駆けたフルードグリッド仕様のレスポンスデザインになっているので、「料金システム表」「機能比較表」も美しく表示されます。
「料金システム表」はプランごとに分割されて縦並びに表示され、「機能比較表」は機能が横並びに展開し、項目数が多くてもスライドで見せることができる仕様になっています。
トップページにも「料金表」「比較表」の表示が可能
WordPressテーマ【SOURCE】は、ハンパない機能が搭載されたランディングページ仕様のトップページになっているのですが、TCDテーマオプションからの簡単な設定だけで、固定ページで作成した「料金表」「比較表」をトップページにも表示させることができます。
TCDテーマオプション 》トップページ 》料金システム表/機能比較表の表示設定 の[料金システム表/機能比較表を表示する]にチェックを入れて、「料金システム表」「機能比較表」が設置された固定ページのIDと、表が表示されている順番を入力します。
固定ページのIDは、管理画面の固定ページ一覧から確認できます。
すると、↓のようにトップページ最下部にあるCTA（行動喚起）のすぐ上に、「料金システム表」「機能比較表」を表示することができます。
WordPressテーマ【SOURCE】のトップページは、ただページが表示されるだけではなく、ページをスクロールする度に絶妙な動き（洗練されたモーション）でユーザーの視線を誘導するようにコンテンツが表示されます。
これによって、申し込みや資料請求、お問合せ、ダウンロード、メールマガジン登録などの、CTA（行動喚起）へと自然に引き込むことができるので、さまざまな業種のインターネット集客と売上アップのための販売促進ツールとして活用できます。
「ヘアサロン」ホームページでのカット料金表設置イメージ
「美容外科クリニック」ホームページでの施術費用表設置イメージ
クロージングテクニック『決定回避の法則』と『松竹梅の法則』
ランディングページには購入や申し込みをしてもらうという大きな目的があります。しかし、類似商品（サービス）が同列に並んだ場合・・ターゲットはどれにすれば良いのか迷ってしまい、「よく考えてから購入しよう」と”決断する”ことを遅らせてようとする心理（決定回避の法則）が働くことがあります。
特にWEB上では、一旦「決定回避の法則」が働いてしまいページから離脱してしまったユーザーは、その後わざわざページに戻ってきて購入することは無いと考えるべきです。
そのため、ランディングページのCVR（コンバージョン率）を高めるためには、迷わせず1つのおすすめを明確に提示する『松竹梅の法則』を取り入れたテクニックを活用するのも良いでしょう。
『松竹梅の法則』とは、「どうせ手にするのであれば、最低限のAよりも充実した機能が備わったほうがBのほうが良いだろう。といっても自分にはCほどの機能は必要ないからやっぱりBかな？」といったように、「3つの選択肢が並んだ場合、多くの人は真ん中を選ぶ」という心理傾向のことです。
WordPressテーマ【SOURCE】で作成した「料金表」は、カラーピッカーを使った直感的な操作で、見出しやボタンの色を変更することができるので、おすすめプランを明確に表示して強烈にクロージングすることもできます。
料金表付きランディングページWordPressテーマ【SOURCE】
ランディングページとは、インターネットを使って「商品を売る」ときや「サービスの申し込み」を獲得する際に必要になる販売促進ページのことですが、単純に「料金表」や「比較表」を設置しただけでは、効果的に売上に結びつけることはできません。
美しいデザインと洗練されたモーションで”あなたの事業のターゲットの視線を引き込む”ことができる、マーケティングに裏打ちされたランディングページが必要です。
また、WEB制作会社などで作ってもらったホームページの場合には、ちょっとした変更だけで1万、2万も請求されてしまうことがありますが、WordPressテーマの【SOURCE】で構築したホームページであれば、自社で簡単に修正することができるので、その費用対効果ははかり知れません。
ぜひ、驚くほど低コストで導入可能なWordPressテーマ【SOURCE】をインストールして、あなたの事業の集客と売上をUPさせるための販売促進ツールとしてご活用ください。
合わせて読みたい【SOURCE】の関連記事 : 「この機能ハンパないって！」WordPressテーマ【SOURCE】のトップページに搭載された10個＋αの革新的な機能について
