【日本語WordPressテーマ】ANTHEM（TCD083）

集客から販売に至るまでのプロセスをパッケージ化した企業向けWordPressテーマがTCD83番目のANTHEM（アンセム）です。

ANTHEMの方向性

大手プラットフォームに頼る販売方法では高い手数料がネックで利益は上がらないし、テンプレート化された見せ方では商品の魅力も半減してしまいます。

かといって業務内容もよく知らない外部のウェブサイト制作会社に自社サイトの構築＆運営を任せたところで意思疎通がうまく行かないことも多く、無駄な費用が出るばかりなんてところも多いでしょう。

なにより反映スピードが遅いですよね。

これが自分たちでサイト管理ができればどうでしょう。

自社商品に対する思いや販売戦略はダイレクトに反映され、サイトの更新頻度ひんども上がり、少ない投資でスピード勝負ができると思いませんか。

ANTHEMアンセムはこうした独自の販売力を成長させるワードプレス・テーマとして開発されたということです。

強力な自社サイトを自ら運営することで商品の魅力や付加価値もきちんと消費者に伝わり、結果として商品のブランディング化にもつながります。

[themeoption]

サイトデザイン

ヘッダーエリア

ANTHEMの最も特長あるデザイン・仕様の一つがヘッダーエリアです。

デモサイトを例にご説明しますと、①背景におかれた動画（or 静止画）に加えて②見出しとその下の③リード文、そして④レイヤー画像までもが心地いいいリズムでアニメーションします。

これらはすべて商品のイメージアップのための演出になってます。

（アニメーションをオフにすることも可）

ただ公式サイトの説明を読んでもレイヤー画像って何？ 構造はどうなってるの？という方もいらっしゃるんじゃないかと思って説明画像を用意してみました。

（慣れてない方にはピンとこない）レイヤーというのは画像を層のように重ねて表示する機能のことで、画像加工ソフトなんかではお馴染みの機能です。

層になってるのでたとえば一番下の背景画像（動画）を一番上に移動した場合はテキスト類やレイヤー画像は一切見えなくなるという仕組みです。

デモサイトのヘッダーはこれら複数のレイヤーが重なって1つの枠内で表示されてるイメージです。

本題に戻ります。

トップページのヘッダーは大きく分けて次の5つの設定から成り立ってます。

• 背景（動画［MP4,YouTube］or 静止画スライダー）
• 見出し、リード文（フォントサイズ・カラー変更可）
• アニメーションが可能なレイヤー画像（左右からスライドイン or その場でフェードイン）
• ボタン（カラー・背景色・透明度変更可）
• モバイル設定（PCとは別の設定が可）

基本的には背景に表示したい動画（静止画でもOK）を設定し、その上に表示したいレイヤー画像とテキスト（リードコピーなど）を設定するだけ。

レイヤー画像やテキストの表示位置は選択肢から選ぶだけなので簡単です。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

レイヤー画像とスライドするテキストは任意の数だけセットできますが、せいぜい3つが限界でしょう。

そんなにじっとヘッダーを見てくれる利用者なんてそうはいませんからね。

[/bln_left]

スライドごとに背景画像を変更したい場合もチェックボックスひとつで設定が可能です。

オリジナル機能

トップページのコンテンツ

デモサイトのトップページは以下のような構成になってます。

ニュースティッカー

ヘッダーのすぐ下にはブログ記事やお知らせをニュースティッカーで表示しておけます。

並び順は日付順やランダムから選択可能。

カルーセルスライダー

このあとご紹介するカスタム投稿タイプ「商品」で作成したコンテンツ（商品詳細ページ）をスライダー形式で連動表示できます。

目につきやすい場所でもあるので特にアピールしたい商品なんかを設定するといいんじゃないでしょうか。

フリースペース

HTMLも使える自由なスペースです。

デモサイトでは見出しとリード文、その下にフル画面幅の画像が設定されてます。

レイヤー画像 or 静止画像

ヘッダーエリアでも紹介したレイヤー画像（アニメーション付き）とシンプルな静止画像（背景）＋テキストのコンテンツが設定されてます。

詳細ページへのリンクボタンが添えられたコンテンツもあればシンプルに説明だけのコンテンツと使い方はいろいろ。

記事カルーセル

ブログ記事もしくはお知らせのいずれかをカルーセルスライダー形式で表示可能なコンテンツになります。

記事の並び順、表示する記事数、カルーセルのスピードなどは調整可。

商品一覧

こちらはカスタム投稿タイプ「商品」で作成した画像と説明文が連動して表示されます。

表示する商品数はPCとスマホ（モバイル）で別々の設定ができるのでスマホでは数を少なめになんてこともできます。

フッターエリア

サイト最下部でも自社商品を強力にアピールすべく、ANTHEMのフッターエリアは広めにとられています。

エリアは大きく2つに分かれていて、一つはカスタム投稿タイプ「商品」で作成した商品ページを、一つは通常のブログを表示しておくエリアになります。

（いずれのブロックも表示・非表示が選択可）

上の段の商品サムネイルには「おすすめ」や「人気商品」といった各商品ページの編集画面にて設定したオリジナルのラベルを表示できます。

また商品ページのカルーセルでは表示する商品数や並び順（管理画面で並べた順 or ランダム）も調整可能です。

下の段にはブログ記事を3記事までピックアップ表示できます。

記事の並び順（日付順・ランダム）などは選択可能で、読んでほしい記事や人気記事などを設定しておくといいんじゃないでしょうか。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

”個人で制作したとは思えないクォリティのトップページ”という公式サイトの言い分もわかるような気がする。

[/bln_left]

カスタム投稿タイプ「商品」

商品やサービスを売るためのセールスページ（商品詳細ページ）はだらだらと長く書き過ぎれば途中で飽きられてしまうし、反対に短かすぎると何のページか伝わらなくなります。

いかに効率よくかつ効果的に商品をアピールできるか、そのために搭載されてるのがANTHEMの目玉機能とも言えるカスタム投稿タイプ「商品」です。

 

※登録した商品詳細ページの特長について、ここではデモサイトの商品ページ（TCDテーマ「Be」）を例にご紹介していきます。

ヘッダー

トップページ同様、背景画像の上にレイヤー画像をセットできます。

（アニメーションの向きや見出しテキストとの位置調整も可能）

背景画像には①ボカシをかけることができ、瞬時に背景画像を磨すりガラス状にすることができます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

ボカシをかけるとその上にある②レイヤー画像（商品画像）が引き立つのでより商品画像が目立つことになるね。

[/bln_left]

メインコンテンツ

メインコンテンツ最上段には③中央にキャッチフレーズとリード文が表示可能。

続くエリアは下記のコンテンツビルダーが力を発揮してくれます。

• 特徴一覧
• レビュー機能
• フリースペース

デモサイトでは最初にフリースペース機能を使ってコンテンツが作成されており、（画像とテキストで）TCDテーマの概要紹介から始まってます。

その際ブロックごとに④見出しを設定すると自動で⑤コンテンツリンクボタンと呼ばれるメニューに⑥連動表示される仕様になってます。

（右端には⑦外部リンクを設定可能なボタンも任意でセット可能）

コンテンツリンクボタンはスクロール時に上部に固定表示させることもできます。

常時表示であればいつでも見たいブロックをクリックするだけで一瞬で目的地までジャンプできるので、利用者目線に沿った機能と言えますね。

フリースペースエリアの次には画像付きでリストを表示可能な特徴一覧コンテンツが続いてます。

リスト先頭には直感的にわかりやすいアイコン風の画像がセットされてますが任意の画像も設定できます。

リスト項目はいくつでも追加でき、並び替えも可能。

レイアウトも1列か2列（PCのみ）を選択できます。

カスタム投稿タイプ「商品」詳細ページではお客の評価付きレビューを表示できます。

レビュー内容は管理画面からの入力仕様で、実際の利用者の評価に合わせて5段階のスターが設定可能。

表示順番は「日付順」と「参考になった順」から選択可能です。

サイドエリアの追従バー

サイドエリアには商品名や概要、購入ページへのリンクボタンなどが設置可能なウィジェット形式の⑧追従バーを表示できます。

キャッチフレーズ・説明文・価格が表示でき、リンク先を設定できるボタンは任意の数だけ設置できます。

（といっても画面サイズを考えるとせいぜい3個が限度でしょう）

ボタンのラベルとリンクURLを変更すると銀行振込やPayPal決済などに変えることもできます。

（決済手段はご自身で用意する必要があります）

基本設定

セールスページ（商品詳細ページ）には基本設定の項目があります。

そこでは商品のキーカラーや一覧ページに表示するサムネイル画像や「おすすめ」といったラベルを表示するかといった設定が保存しておけます。

まとめるとANTHEMの集客・販売フローは基本的には以下のようになります。

ヘッダーで利用者の興味をかきたてる

↓

コンテンツリンクボタンでスムーズに記事を閲覧してもらう

↓

追従バー経由で商品購入

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

どうやったら成約率をよりいっそう高められるかはまさにテーマ作りの根幹といってもいいよね。

みんなそこに”全集中！”（by 炭治郎）ってか。

[/bln_left]

商品アーカイブページ

カスタム投稿タイプ「商品」で商品を登録していくと、自動的にアーカイブページ（カテゴリー別の一覧ページなど）が生成されます。

このとき商品詳細ページでカテゴリーを設定しておくと、一つのページ内でカテゴリー別に分類された商品群がソートされた状態で表示されます。

カテゴリー分けされたタブは読込み（ローディング）なしでスムーズに切り替わるため、利用者はストレスフリーな操作感で閲覧できます。

幅広くカスタマイズ可能なランディングページ機能

特定の商品を大々的に売り出したいとかメルマガ登録を促すとかオリジナルサービスの会員を増やすとかに最適なのがランディングページ（LP）ですね。

ANTHEMのランディングページはページごとにヘッダーやフッターの有無、グローバルメニューの有無、コンテンツ幅の変更など様々なレイアウトデザインがチェック一つで選択できます。

LPのメインエリアは基本的に以下の3種類のコンテンツの組み合わせで構成されます。

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

3列までで折り返すページデザインが適用できます。

画像に加えて見出しや説明文はカスタマイズが可能。

コーポレートサイトであれば企業のモットーなどを、販売サイトなら商品やブランドの強みなどの紹介に向いてるでしょうか。

レイヤー画像表示可能なフル幅コンテンツ

ヘッダーエリアでご紹介したレイヤー画像付き背景画像を画面フル幅で表示できるコンテンツです。

（レイヤー画像なしでも問題なし）

もちろんレイヤー画像にはアニメーションを付けられるので目立つコンテンツとなるでしょう。

テキストやレイヤー画像の位置は調整可。

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

通常の記事と同じくあらゆるコンテンツが作成可能なフリースペース。

見出し・キャッチフレーズ・本文で構成されます。

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

見出しを作成すると（商品詳細ページ同様に）ヘッダー下のコンテンツリンクボタンに連動表示されるようになり、ページ内コンテンツへのアクセスがスムーズになります。

コンテンツリンクボタンはスクロール時に上部に固定表示させることも可能。

ランキング機能

ランキングは販売サイトに於いてはとても強力な販促ツールになりえます。

ANTHEMのランキング機能は期間別（今月、先月、年間など）やジャンル別、用途別など複数ランキングが作成可能で、ランキングコンテンツが追加されるたびにページ上部のコンテンツリンクボタンに連動表示される仕様です。

しかも1ページ内に複数ランキング表示が可能で、こちらも読込み（ローディング）不要のタブ操作で別のランキングがすぐに閲覧できます。

（商品詳細ページやランディングページと同じ仕様）

またページ内にはカテゴリーごとのランキングも同時表示できます。

ランキング一覧の作成はセールスページ（商品詳細ページ）の記事IDを並べるだけ。

実際に購入された数を決済システムなどを利用してカウントし、その商品詳細ページの記事IDを一行ごとに並べるのも一つのやり方ですね。

ランキング一覧の上下にはフリースペースを使って自由にコンテンツを作成することもできます。

オリジナルのバナーや広告ボタンを設置してもいいでしょう。

カスタム投稿タイプ「サポート」

カスタム投稿タイプ「サポート」では、よくある質問などをアコーディオン（開閉）形式のQ&Aで簡単に表示できます。

しかもこのQ&Aページはカテゴリーごとの分類もできます。

設定したカテゴリーはヘッダー下に（もうお馴染みとなった）コンテンツリンクボタンで連動表示されます。

各項目には日付を表示することもできるので、たとえば商品のアップデート情報なんかの表示もできちゃう。

作成方法は至って簡単。

タイトル部分に質問を、本文エリアに回答を書くだけ。

（本文エリアにはボタンやリンクの設置も可能）

重要告知に最適なヘッダーバー

ヘッダー最上部には前作のテーマCURE（TCD082）で実装されたヘッダーバーがANTHEMでも表示可能です。

”緊急アラート”を告知してもいいし”新商品発表”などの告知でもいいでしょう。

（デモサイトでは非表示になってるようです）

1カラム機能

投稿記事やお知らせ記事は1カラムで表示することもできます。

利用者にコンテンツ内容をストレートに伝えられるという点ではオーソドックスだけど効果的な手法ですね。

一括設定でも記事単位で設定することもできる柔軟設定。

広告・収益化

ANTHEMではブログ詳細ページとお知らせ詳細ページの以下の位置に広告を表示できます。

• アイキャッチ画像の下
• 関連記事の上

HTMLコードが利用可能なエリアもあるので大方の広告コードは掲載可能です。

また事前に登録した広告コードをショートコードとして出力する機能もあるので、記事本文内の任意の位置にショートコードを貼り付ければ好きな箇所で広告を表示させることもできます。

スマホ（モバイル）専用の広告設定もあります。

こちらはスマホ表示時のみPCとは別の広告を表示させたい時なんかに使えます。

SEO＆高速化設定

ANTHEMにはページ読み込み時間を少しでも縮めるために、HTML・CSS・Javascriptのコード最適化機能（圧縮）が搭載されてます。

その他の主な機能

• （イメージ画像付き）メガメニュー対応のグローバルメニュー
• モバイル用ドロワーメニュー
• インストール後に初期設定を一括完了させる[themeoption_kanri]
• フォント変更機能（メイリオ、游ゴシック、游明朝）
• [headerbar]（PC/スマホ）
• 新[footerbar_sp]
• [customcss]
• [customscript]
• [sns_open]（Twitter・Facebook・Youtube・Instagram）
• [ogps]
• 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能
• [retina]（ヘッダー・フッター・モバイル）
• 詳細ページのレイアウトタイプ（2カラム左・右 or 1カラム）
• [hover_effect]（ズーム・スライド・フェード）
• 直感的操作の[page_builder]
• 404ページカスタマイズ機能
• [newquicktag]（Gutenberg対応）
• microdata形式の構造化マークアップ適用済みパンくずリスト
• 高速化設定（絵文字読み込み・遅延読み込み・コード最適化）
• ウィジェット「広告（ランダム表示機能）」
• ウィジェット「Googleカスタム検索」
• 管理画面の多言語対応（日本語・英語）
• パスワード保護ページ機能

どんな方におススメ？

• 自社（商品）の旗艦サイトになりうるサイトを作りたい
• 集客から販売まで一貫したテーマを探している

ANTHEMは多彩なレイアウトデザインと豊富なオリジナル機能でまさに”かっこよくて実用的な”サイトが構築できるテーマと言えます。

ポータルサイトとしても十分な成長が見込めるサイトを構築したいなら、集客も販売もできるANTHEMはおススメです。