WordPressテーマ「DROP」のページテンプレート「プラン」の機能と活用例

Webサービスやソフトウェア販売サイトにおいて、必須となる「プランページ」。

「松・竹・梅」でプランごとにランク付けして販売する手法はどこにでも見られます。ゆえに、プランページの役割は、商品スペックや料金などプランごとに異なる重要ポイントを視覚的にわかりやすく伝えることです。

プランが複数あるからこそ、できるだけユーザーが迷うことなく適切なプランに誘導していく必要がある。そのためにプランページは存在します。

本稿で紹介するWordPressテーマ「DROP」でもプランページが簡単に制作できる機能を実装しています。どんなプランページが作成できるのか？ユーザーの購買意欲を掻き立てる施策が組み込まれているのか？そんなところから詳しく解説していきます。

固定ページテンプレート「プラン」の機能概要

プランページは、DROPの固定ページテンプレート「プラン」で作成できるページで、HTMLなどの専門知識がなくても制作できる仕様となっています。

プランページ

フリースペースを織り交ぜながら自由に順番入替もできるため、あなた好みのプランページが作成できます。具体的には次のことができます。

• ヘッダー画像のサイズを選択できる
• ヘッダー下にスクロールボタンを表示できる
• 箇条書きのカード型コンテンツを簡単に作成できる
• HTMLでオリジナルのコンテンツを設置することもできる
• プランコンテンツと連動するヘッダーナビゲーションを表示できる

基本設定

基本設定では、コンテンツ（ヘッダー・フッターなど）の表示・非表示選択やヘッダーのサイズ調整が可能です。どういうプランページにするかで、自由にカスタマイズが可能です。

• ヘッダーを表示しない： あまり使わない
• フッターを表示しない： LP向け設定
• フッターCTAを表示しない： 動線作成用
• ロゴを表示しない： LP向け設定
• グローバルメニューを表示しない： LP向け設定
• パンくずリンクを表示しない： LP向け設定
• コンテンツの横幅を変更する： LP向け設定
• スクロールボタンを表示する： LP向け設定
• ヘッダーナビゲーションを表示しない： プランページ向け設定

プランページを作成する場合は、赤枠で囲っている「ヘッダーナビゲーションを表示しない」にチェックを入れないようにしてください。ヘッダーナビゲーションについては後述しますので、ここでは、選べるヘッダーのサイズやスクロールボタンについてご紹介いたします。

デモページでは他のページヘッダーと同様のサイズになっていますが、全画面のヒーローヘッダー式にも変更可能です。

また、↑の画像の通り、デモページには表示されているパンくずリンクを消して、スクロールボタンも表示可能です。基本設定内のすべての項目は、チェックの有無だけでいつでも変更できます。

独立したページとしてプランページを使う場合は、ヒーローヘッダーにしてパンくずリンクを非表示にすると、ページを開いたときのインパクトが変わりますね。全画面のヒーローヘッダー形式にしてもスクロールボタンを表示しておけば、ユーザービリティを損なうこともありません。

プランコンテンツ

プランコンテンツは、DROPのデザインに合わせたカード型の箇条書きでリストアップできるコンテンツです。左側の画像箇所と右側の箇条書き箇所を用途に合わせて設定できます。

用意されている設定項目に必要な情報を入力するだけで、誰でも作れます。以下のように設定項目は左右に分かれており、クリックすると設定項目が展開する仕様です。

下部に表示される説明文とボタンまでのスペースなどもあらかじめ計算されているので、誰が作っても美しい仕上がりになります。なお、ボタンや説明文は、すべて設定が必要なわけではありません。

コンテンツ右側には浮遊する「おすすめアイコン」も任意で表示可能です。特に人気のプランや初心者向けなどとアピールするのもいいですね。

フリースペース

フリースペースでは通常のエディター（ビジュアル/クラシック）を使って自由に作成できます。デモページの最下部ではHTMLでプラン比較表を作っていますが、これはあくまで一例です。

デモサイトと同じ比較表を作りたい方は、こちらのページをご覧ください。HTMLの記述を公開していますので、コピペしてご活用いただけます。

比較表の他にも、お試しプランや無料のサービスを提供するためにメールフォームなどを設置するのもいいかもしれません。プラグインを使えば、フォームは簡単に設置できます。

上記の他にも「Contact Form 7」などが定番ですね。また、コンテンツの横幅を選択できるので、画面幅いっぱいしてコンテンツのデザインを調整可能です。フルサイズで画像やバナーを設置したり、自由にレイアウトしてみてください。

ヘッダーナビゲーションの設定

プランページでは、先述の「プランコンテンツ」と「フリースペース」を組み合わせてページを作るわけですが、ヘッダー下部には「ヘッダーナビゲーション」をワンタッチで表示できます。ユーザーが知りたいコンテンツへとスムーズに誘導できるデモページのこの部分です。

ヘッダーナビゲーションは、プランコンテンツと連動する仕様です。プランコンテンツごとに表示する文言を設定できて、文言をクリックすると該当するプランコンテンツへとスムーズにリンクするというわけです。

ユーザーは、検討しているプランへ瞬時にスクロールして、目的の情報のみをすぐにチェックできます。

プランページの機能を活用した実用例

展開する商品やサービスのまとめページや比較ページの他にも、カード型のデザインとチェックリスト項目をそのまま活用して、箇条書きで不安を解消するような使い方もできます。

上記の例では、左側には画像を設定しているのみで、右側にはじめてのユーザーが気になるようなポイントを列挙しています。

ボタンや説明文を表示していませんが、ヘッダーナビゲーションの文言を変更し、以下のように表示すれば、ユーザーの種類別に箇条書きでアピールできるコンテンツとしても使えるわけです。

ユーザーが迷った際に不安を解消できるガイドページとしてもご活用いただだけるはずです。ポイントのみを端的にまとめた箇条書きは目に入りやすく、伝わりやすいので、このような使い方もオススメです。

プランページを作成できるTCDテーマ

今回はDROPのプランページについて解説いたしましたが、過去のTCDテーマでもプランページを作成できるものがあるので、いくつかご紹介いたします。サイトやプランの構成別にご活用ください。

WordPressテーマ「Tree」

「Tree」では、固定ページ内でプランの概要を伝えるコンテンツを簡単に作成できます（最大3つ）。カフェアンドバーをイメージしたデモサイトではパーティープランの概要を確認できるコースリストを作成しています（デモサイトでは2つのみ表示しています）。シンプルですが、メニューの内訳などを列挙して比較するのに向いている機能です。

WordPressテーマ「Switch」

コワーキングスペースをコンセプトに開発した「Swtich」では、かなり詳しくプラン内容を掲載できます。詳細な内容までは、上のスクリーンショットには収まりきっていないので、ぜひデモサイトでご覧になってみてください。細分化されているプランに最適なページが作れます。

DROPに実装されているプランページを使いこなそう

当記事では、主に下層ページで使用することを想定したページテンプレート「プラン」をご紹介いたしました。あえて”主に”という言い方をしているのは、下層以外の独立したランディングページ（LP）として使うことも可能だからです。

プランコンテンツだけでなく、フリースペースを使い、基本設定でグローバルメニューやフッターを非表示にすれば、LPの体裁としても全く不自然ではありません。

商品やサービスのプラン紹介以外にも工夫次第でさまざまな使い方が可能です。ぜひオリジナルの使い方を発見してみてください。

販売ページ　デモサイト

TCDテーマは、デモサイトを再現するためのテーマというわけではありません。デモサイトでは、あくまで一例としてベーシックな使い方をご提案させていただいているだけです。あなただけの使い方は、ぜひ弊社運営のTCD MUSEUMでも取り上げさせてください。

合わせて読みたいWordPressテーマ「DROP」の関連記事

第1回 : WEBサービスやアプリのランディングページに最適なWordPressテーマ「DROP」のトップページ
第2回 : WordPressテーマ「DROP」に用意されているページテンプレート「プラン」の機能と活用例（当記事）