「提供する商品やサービスのプランを綺麗に無駄なくアピールしたい。」
WordPressテーマ「DROP」には、デザインされたカード型レイアウトで各プランの概要をスタイリッシュにアピールできるテンプレートが搭載されています。
商品やサービスの概要を効率よく端的に伝えるのに最適なページテンプレートです。
本稿では、DROPに実装されている固定ページテンプレート「プラン」の機能と活用例をご紹介いたします。
固定ページテンプレート「プラン」の機能概要
プランページは、DROP独自のプランコンテンツと自由に制作できるフリースペースを組み合わせて作れるページ制作機能（ページテンプレート）です。
ページレイアウトの柔軟性はかなり幅広く、デフォルトの固定ページと共通の機能もあるので、プランページで使用頻度の高い機能の一部をかいつまんでご紹介いたします。
- ヘッダー画像のサイズを選択できる
- ヘッダー下にスクロールボタンを表示できる
- 箇条書きのカード型コンテンツを簡単に作成できる
- HTMLでオリジナルのコンテンツを設置することもできる
- プランコンテンツと連動するヘッダーナビゲーションを表示できる
プランコンテンツと連動するヘッダーナビゲーションを設定して、美しい動きで無駄なくアピールできます。
基本設定
ヘッダーのサイズ変えたり、スクロールアイコンを表示できる機能はデフォルトの固定ページとも共通の仕様ですが、ヘッダー下部にヘッダーナビゲーションを表示できる点がプランページの特徴です。
上記箇所にチェックを入れずに、プランコンテンツを作成するとデフォルトで表示される仕様です。ヘッダーナビゲーションについては後述しますので、ここでは、選べるヘッダーのサイズやスクロールボタンについてご紹介いたします。
デモページでは他のページヘッダーと同様のサイズになっていますが、全画面のヒーローヘッダー式にも変更可能です。
また、↑の画像の通り、デモページには表示されているパンくずリンクを消して、スクロールボタンも表示可能です。基本設定内のすべての項目は、チェックの有無だけでいつでも変更できます。
独立したページとしてプランページを使う場合は、ヒーローヘッダーにしてパンくずリンクを非表示にすると、ページを開いたときのインパクトが変わりますね。全画面のヒーローヘッダー形式にしてもスクロールボタンを表示しておけば、ユーザービリティを損なうこともありません。
プランコンテンツ
プランコンテンツは、DROPのデザインに合わせたカード型の箇条書きでリストアップできるコンテンツです。左側の画像箇所と右側の箇条書き箇所を用途に合わせて設定できます。
用意されている設定項目に必要な情報を入力するだけで、誰でも作れます。以下のように設定項目は左右に分かれており、クリックすると設定項目が展開する仕様です。
下部に表示される説明文とボタンまでのスペースなどもあらかじめ計算されているので、誰が作っても美しい仕上がりになります。なお、ボタンや説明文は、すべて設定が必要なわけではありません。
コンテンツ右側には浮遊する「おすすめアイコン」も任意で表示可能です。特に人気のプランや初心者向けなどとアピールするのもいいですね。
フリースペース
フリースペースでは通常のエディター（ビジュアル/クラシック）を使って自由に作成できます。デモページの最下部ではHTMLでプラン比較表を作っていますが、これはあくまで一例です。
デモサイトと同じ比較表を作りたい方は、こちらのページをご覧ください。HTMLの記述を公開していますので、コピペしてご活用いただけます。
比較表の他にも、お試しプランや無料のサービスを提供するためにメールフォームなどを設置するのもいいかもしれません。プラグインを使えば、フォームは簡単に設置できます。
上記の他にも「Contact Form 7」などが定番ですね。また、コンテンツの横幅を選択できるので、画面幅いっぱいしてコンテンツのデザインを調整可能です。フルサイズで画像やバナーを設置したり、自由にレイアウトしてみてください。
ヘッダーナビゲーションの設定
プランページでは、先述の「プランコンテンツ」と「フリースペース」を組み合わせてページを作るわけですが、ヘッダー下部には「ヘッダーナビゲーション」をワンタッチで表示できます。ユーザーが知りたいコンテンツへとスムーズに誘導できるデモページのこの部分です。
ヘッダーナビゲーションは、プランコンテンツと連動する仕様です。プランコンテンツごとに表示する文言を設定できて、文言をクリックすると該当するプランコンテンツへとスムーズにリンクするというわけです。
ユーザーは、検討しているプランへ瞬時にスクロールして、目的の情報のみをすぐにチェックできます。
プランページの機能を活用した実用例
展開する商品やサービスのまとめページや比較ページの他にも、カード型のデザインとチェックリスト項目をそのまま活用して、箇条書きで不安を解消するような使い方もできます。
上記の例では、左側には画像を設定しているのみで、右側にはじめてのユーザーが気になるようなポイントを列挙しています。
ボタンや説明文を表示していませんが、ヘッダーナビゲーションの文言を変更し、以下のように表示すれば、ユーザーの種類別に箇条書きでアピールできるコンテンツとしても使えるわけです。
ユーザーが迷った際に不安を解消できるガイドページとしてもご活用いただだけるはずです。ポイントのみを端的にまとめた箇条書きは目に入りやすく、伝わりやすいので、このような使い方もオススメです。
DROPに実装されているプランページを使いこなそう
当記事では、主に下層ページで使用することを想定したページテンプレート「プラン」をご紹介いたしました。あえて”主に”という言い方をしているのは、下層以外の独立したランディングページ（LP）として使うことも可能だからです。
プランコンテンツだけでなく、フリースペースを使い、基本設定でグローバルメニューやフッターを非表示にすれば、LPの体裁としても全く不自然ではありません。
商品やサービスのプラン紹介以外にも工夫次第でさまざまな使い方が可能です。ぜひオリジナルの使い方を発見してみてください。
TCDテーマは、デモサイトを再現するためのテーマというわけではありません。デモサイトでは、あくまで一例としてベーシックな使い方をご提案させていただいているだけです。あなただけの使い方は、ぜひ弊社運営のTCD MUSEUMでも取り上げさせてください。
合わせて読みたいWordPressテーマ「DROP」の関連記事
第1回 : WEBサービスやアプリのランディングページに最適なWordPressテーマ「DROP」のトップページ
第2回 : WordPressテーマ「DROP」に用意されているページテンプレート「プラン」の機能と活用例（当記事）