ANTHEMには、ユーザーのニーズに答えたり、サイト管理者の業務を軽減できるページを制作する機能が搭載されています。本稿は、ページの種類ごとに活用できる機能の解説記事です。最も大きな特徴であるセールスページ制作機能については、下記記事で詳しく解説していますので、よろしければご覧ください。

ユーザーの疑問を解消するFAQページをつくる

商品やサービスを購入する前にユーザーの不安や疑問を解消しておくことは、有効な施策です。商品購入のハードルを下げたり、サポート業務を効率化できます。

ANTHEMに搭載されているカスタム投稿タイプ「サポート」を使って、FAQページを作成してみましょう。以下のように通常の投稿と同じく、タイトル・本文を入力して作成してください。

サポートページ設定画面

質問(タイトル)と回答(本文)という形でアコーディオン(開閉)式のページが出来上がります。通常の投稿と同様に「メディアを追加」やクイックタグも使えるので、展開する本文の部分にボタンやリンクを設置させることも可能です。

カテゴリーを追加・設定すると読み込み無しでソート可能なページが生成され、上部のボタンでノンストレスに切り替わります。

サポートページサンプル

デモサイトでは、上記のようにFAQページを制作していますが、タイトルを表示する部分に日付も表示できるので、アップデート情報やお知らせを表示させる使い方もできます。

サポートページフロント

人気商品をアピールするランキングページをつくる

販売している商品のバリエーションが多く、それぞれに異なる特徴があると消費者は迷います。それらを解決するために、商品の販売個数などを元にランキング形式で掲載しておくといいかもしれません。

ANTHEMに搭載されているランキングページ制作機能は、以前の記事で紹介したセールスページの記事IDを並べることで、ランキング一覧が生成される仕様になっています。任意の順位でランキングページを制作可能です。

ランキングページサンプル

また、下記のような編集画面になっており、ランキングコンテンツを追加するごとにページ上部ヘッダー下に表示されるボタンが追加される仕様となっています。クリック時は読み込み無しで遷移します。上記のデモページフロント画面と照らし合わせてみてください。

ランキングページ編集画面

また、1ページ内にカテゴリーごとのランキングを表示することも可能です。手動で見出しやサブタイトルも変更できるので、商品のカテゴリー以外にも、販売者側オリジナルの目線でも制作できます。

カテゴリーランキング設定画面

例えば、初心者向けのおすすめや、用途別、コスパやデザイン面から見たランキングなどでしょうか。販売者目線の比較もお客さんが購入する際の判断材料のひとつになるはずです。

ランキング一覧の上下にはフリースペースで自由にコンテンツを作成できます。通常の投稿のようにクイックタグもご活用いただけますので、ランキングページ内を柔軟にカスタマイズ可能です。

ランキングページ内フリースペース編集画面

シンプルな売り上げ順の他に、目線を変えたランキングを制作したり、フリースペースにはオリジナルのバナーやボタンを設置するのもアリですね。

企業やサービスのアバウトページをつくる

1ページに概要がまとめられたページである「アバウトページ」や「ランディングページ」(以下、LP)を制作できる機能を解説します。両者は性質が全く異なるページです。詳しい内容は割愛しますが、サイト内の下層ページであるアバウトページ、広告のリンク先などにセットするLPという認識で考えましょう。

LPでは商品やサービスを売ることだけでなく、後々、商品を購入してくれるような見込み客リストを集めることも重要です。より詳しい内容は下記記事を参考にご覧いただけます。

ランディングページ制作機能

性質の異なるページはレイアウトを変える必要があります。ここでは汎用性の高いANTHEMのLP制作機能について解説いたします。

例えば、以下のデモページを比較してみてください。すべて同じ機能で作成していますが、一つ目は企業やブランドのABOUTページとして、それ以外は前作のテーマ「CURE」の販売にフォーカスしたLPのサンプルとなっています。

以下のようにページごとにヘッダーやフッターの有無、グローバルメニューの有無、コンテンツ幅などを簡単に変更できるので、ページの性質をガラッと変えることができます。

基本設定キャプチャ

メインコンテンツの部分は、LP用のコンテンツビルダーを使って編集できます。下記の3種類のコンテンツを組み合わせて構築可能です。

見出しのデザインを選べるフリースペース

フリースペース

レイヤー画像をアニメーションさせれるフル幅コンテンツ

レイヤーコンテンツ

デザインされた3カラムコンテンツ

3カラムコンテンツ

各コンテンツの見出しのデザインはあらかじめ用意さてれている以下の3タイプから選べます。

ワンタッチでいつでも変更できて、色や背景画像、オーバーレイも設定可能です。

見出し設定箇所

また、見出しを入力するとヘッダー下部に表示できる「コンテンツリンクボタン」に自動で連動する仕様です。スクロール時に上部に固定することもできます。これにより高いユーザービリティを実現しています。

コンテンツリンクボタン反映箇所

縦に長くなりがちなLPで、いかにユーザーがストレスを感じず、自然にコンテンツを閲覧できるかを考えた仕様です。このテンプレート一つで実用性の高いページをさまざまなバリエーションでつくれます。

また、フリースペースで制作したコンテンツには、テーマに搭載されているCSS(class=”inview”)を指定してスクロールと同時にアニメーション表示させることができます。例えば、テキストと画像を別々にフェードイン表示させたい時は、以下のように個別にクラスを適用すると実現可能です。

<div class="inview">テキストテキストテキスト</div>
<img class="inview" src="画像URL"/>

LPサンプルのテキストや画像には、このように指定しています。

※クラスを指定するには、テキストエディターを使う必要があります。
※YouTube動画など外部サイトから埋め込んでいるコンテンツには、うまく反映されない場合がありますので、ご了承ください。

ランディングページの効果的な使い方

アバウトページに加え、バリエーション豊かなLPを制作できますが、LPの目的である「見込み客リストの獲得」を実現するポイントを少しお話します。

デモサイトでは前作「CURE」の販売にフォーカスしているLPサンプルですが、例えば無料でダウンロードできるテーマ(商品)のLPにしてみるとどうでしょうか。下記のようなページですね(実際に弊社テーマを無料でダウンロードいただけます)。

優れたコンテンツを無料でダウンロードできるとなると、そこから他のテーマにも興味をもっていただける可能性も生まれます。このようなLPが見込み客リストを取り込むきっかけになるわけです。

商品なら無料で提供したり、サービスなら「無料体験のお申し込み」などのリンクをセットするといいでしょう。上記ページもそうですが、メールアドレスを入力していただき、そこに商品を送付させていただいております。

つまり、取得したメールアドレス宛にメルマガを発信するなどのマーケティングが可能になるということです。お客様に役立つ情報を発信したり、別の商品をPRするような施策を打てるようになります。

商品やサービスが優れていること、役立つコンテンツを発信することが大前提ですが、工夫したLPで見込み客リストを取得し、そこにメルマガなどでアプローチをかけるという戦略は極めて有効です。

各種ページ制作機能を活用して目的にあったページを作成しよう

目的別にさまざまなバリエーションのページを制作できるANTHEMの機能を紹介してきました。巧みに活用して、幅広い角度から戦略を考えてみてください。

ページの導線設計やデザインはANTHEMにお任せいただき、いかに優れたコンテンツを提供するかに注力いただけます。

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

第1回 : どうすれば成約率を高められるか?「ANTHEM」に実装されたセールスページを徹底解説
第2回 : WordPressテーマ「ANTHEM」の販売ページで紹介できなかった16の機能一覧
第3回 : FAQ、ランキング、アバウトページをWordPressテーマ「ANTHEM」で作成する方法(当記事)
第4回 : CSS不要。思わず押したくなる「ANTHEM」のボタンホバーアニメーションの活用方法