アイキャッチ画像
HOME > テーマ一覧 > TCD > 【日本語WordPressテーマ】ANTHEM(TCD083)

【日本語Wordpressテーマ】ANTHEM(TCD083)

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

ANTHEMの方向性

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

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

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

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

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

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

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

購入ボタン画像

”初心者”のための用語解説

※当サイトで紹介しているテーマ内に出てくる独自(専門)用語の意味がイマイチわからないという方のために用語の解説ページを作っておきました。

以下の用語について簡単に解説してます。【五十音順】

【ABテスト・AMP・CSS非同期読み込み・CTA・ECサイト・gzip・OGP&ツイッターカード・PWA・Welcart(ウェルカート)・WooCommerce(ウーコマース)・アップセル&クロスセル・ウィジェット・ウィッシュリスト・オンラインサロン・カスタム投稿タイプ・コーポレートサイト・サイトアフィリエイト・サイト回遊率・ショートコード・スクロール追尾・スプリット仕様・ドロップシッピング・ニュースティッカー・バイラルメディア・パララックス(デザイン)・ハンバーガーメニュー・ヒーローヘッダー・ファーストビュー・ファビコン・プラットフォーム・ブランディング・フルードグリッド・ブログアフィリエイト・ポータルサイト・ポートフォリオサイト・マイクロコピー・メガメニュー・モーダルウィンドウ・ランディングページ・リッチスニペット&構造化マークアップ(JSON-LD)・レスポンシブデザイン・子テーマ】

TCDテーマの管理画面には「テーマオプション」というカスタマイズ項目が出てきます。

サイト全体のカラーを変えたりロゴを設定したり、ファビコンの設定や文章・見出しのフォント(書体)設定、フッター情報の登録、SNSボタンの設定といった通常ならとても面倒な設定が、この「テーマオプション」操作画面上で手順通りに進めるだけで完結します。

サイトデザイン

デザインの妙

ファーストビュー(ヘッダーエリア)でのリズミカルなレイヤー画像の表示機能がANTHEMの大きな特長。

全体的にトップページは個人制作とは思えないクォリティでの仕上がりになってます。

ヘッダーエリア

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

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

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

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

キャプチャ画像

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

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

キャプチャ画像

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

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

④レイヤー画像は3枚の画像のようにも見えますが、実際は3枚の画像を組み合わせて赤枠で囲ったサイズに加工した1枚画像です。

1枚画像なのになぜギザギザに切り取ったような画像に見えるのかと言えば、切り取った部分を透明化できるPNGという形式で出力されてる画像だからです。

(一般的なJPEG形式の画像には透明化機能がないので切り取った部分は白で表示されます)

これにより透明化された部分だけ下の層にある背景動画が透けて見えるというわけです。

本題に戻ります。

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

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

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

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

キャプチャ画像

管理人

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

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

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

キャプチャ画像

レイヤー画像を用意できない(しない)場合は無理に設定しなくても問題なく、背景画像+テキスト中央表示という使い方でもOK。

※ヘッダーエリアはiPhoneではコチラのように表示されます。

キャプチャ画像

スマホファースト

トップページおよび下層ページのヘッダーといった箇所は画像やテキストはPCとは別の設定が可能など、スマホ(モバイル)専用のコンテンツが設定できます。

オリジナル機能

オリジナル機能の妙

”いかに商品に興味をもたせるか”に特化した独自の商品イメージアップ機能が豊富に搭載されてます。

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

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

キャプチャ画像

ニュースティッカー

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

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

カルーセルスライダー

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

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

フリースペース

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

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

フリースペース以下のコンテンツの表示順は自由に入れ替えられます

レイヤー画像 or 静止画像

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

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

記事カルーセル

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

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

商品一覧

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

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

デモサイトではTCDの各テーマが「商品」コンテンツになってます。

フッターエリア

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

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

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

キャプチャ画像

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

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

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

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

管理人

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

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

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

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

 

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

デモサイトではTCDの各テーマが「商品」として登録・表示されています。

キャプチャ画像

ヘッダー

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

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

商品詳細ページのヘッダー背景画像には静止画像のみセット可能で動画は不可です。

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

キャプチャ画像

管理人

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

メインコンテンツ

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

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

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

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

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

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

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

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

特徴一覧

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

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

キャプチャ画像

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

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

レビュー

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

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

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

キャプチャ画像

サイドエリアの追従バー

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

キャプチャ画像

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

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

キャプチャ画像

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

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

キャプチャ画像

基本設定

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

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

キャプチャ画像

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

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

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

追従バー経由で商品購入

管理人

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

みんなそこに”全集中!”(by 炭治郎)ってか。

商品アーカイブページ

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

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

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

キャプチャ画像

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

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

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

デモサイトのABOUTページがランディングページ機能で作成されてます。

キャプチャ画像

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

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

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

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

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

キャプチャ画像

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

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

(レイヤー画像なしでも問題なし)

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

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

キャプチャ画像

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

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

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

キャプチャ画像

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

キャプチャ画像

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

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

キャプチャ画像

コンテンツリンクボタンは、ともすれば縦にど~んと長くなりがちな商品詳細ページやランディングページで、いかに利用者がストレスを感じることなくスムーズにコンテンツを閲覧することができるかを考えた結果の便利仕様と言えます。

ランキング機能

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

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

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

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

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

キャプチャ画像

キャプチャ画像

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

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

キャプチャ画像

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

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

キャプチャ画像

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

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

デモサイトの「SUPPORT」で確認できます。

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

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

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

作成方法は至って簡単。

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

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

キャプチャ画像

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

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

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

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

キャプチャ画像

1カラム機能

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

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

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

広告・収益化

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

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

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

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

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

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

SEO&高速化設定

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

キャプチャ画像

その他の主な機能

どんな方におススメ?

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

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

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

購入ボタン画像

記事はお役にたてましたか?

記事にご興味をもっていただけましたら下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)