【日本語WordPressテーマ】DROP（TCD087）

ランディングページ（LP）型のトップページ作成機能を備え、高機能なグラフ（チャート）も使えるプロモーションサイトに最適なWordPressテーマがTCD87番目のDROP（ドロップ）です。

DROPの方向性

DROPはトップページ自体をランディングページ（LP）として見せる機能が充実しており、アプリやWebサービスなどの販売力を一段加速させるのが得意なテーマと言えます。

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

もちろん通常のトップページとしても使えます。

[/bln_left]

[themeoption]

サイトデザイン

ヘッダー

DROPのファーストビューはグラデーションオーバーレイ機能（色を薄く加味させる）やアニメーションまで加わった（全画面に表示される）ヘッダー画像で、サイト訪問者にインパクトある印象付けができます。

しかも画像編集ソフトなしでオーバーレイがかけられるコスパのよさ。

設定画面から効果を設定するだけで完了します。

ヘッダー右下のふわふわ浮いてる（※デモサイト参照）アニメーションメッセージは、ちょっとしたキャンペーン情報なんかをセットすると嫌味のないアピールができますね。

リンクも設定でき、リンク先やメッセージの色・サイズ等も自由に変更可。

ニュースティッカー

ヘッダー上部にはニュースティッカーも表示可。

任意のブログ記事 or お知らせ記事が選べて表示順も日付順かランダムから選べます。

2種類のグローバルメニュー

トップページのグローバルメニューは、デモサイトのように左のハンバーガーメニューにマウスを乗せるとす～と右に開くドロワーメニューと通常のグローバルメニューの2タイプから選択可。（PC環境のみ）

ドロワーメニューであればスクロール時にも常に視界に入ってるため、各記事コンテンツ（下層ページ）への動線が確保しやすいというメリットがあります。

一方でトップページを商品やサービスの概要をまとめたLP仕様で使うのであれば、”トップページ専用のメニュー”として別で設定してページ内リンクとして使うやり方もあります。

とかく縦に長くなりがちなLP仕様の場合はページ内リンクを設定することでページ全体に目を通してもらいやすくもなります。

その結果（このあとご紹介するプランや口コミやFAQといった需要の高いコンテンツにすぐにたどり着けるので）トップページのみでコンバージョンにつながる可能性も高くなります。

オリジナル機能

LPとしてのトップページ作成

トップページはTCDオリジナルのコンテンツビルダーを使って、以下に記した汎用性の高いコンテンツを自由に組み合わせての構築が可能です。

• チャートコンテンツ
• レビュー一覧・インタビュー一覧
• 画像カルーセル
• デザインコンテンツ
• ボックスコンテンツ
• バナーコンテンツ
• よくある質問一覧
• フリースペース

チャートコンテンツ

DROPの目玉としては高機能なチャート（グラフ）作成機能が新たに実装されたことでしょう。

チャートを使うと視覚的にダイレクトにデータをアピールしやすいという側面があります。

ただチャートの作成はなかなか敷居が高いため、webの世界ではイマイチ浸透しきれない部分もありました。

それがDROPでは数値を入れるだけでチャートが簡単に利用できるんです。

チャートは「円グラフ」「棒グラフ（縦 or 横）」「線グラフ」の4タイプから選べ、数値を入力すれば自動的にグラフが生成されます。

チャートの種類はワンタッチで変更でき、グラフの色や上限幅の指定も自由に設定可。

途中でグラフの色を変更することもできます。

またグラフ下に説明文を表示することも可能。

数値をテーブル化（表）してグラフ下に自動で表示できる機能も搭載しています。（非表示も可）

チャートで直感的に印象付けし、テーブルでは正確な数字でダメ押しアピールみたいな感じでしょうね。

レビュー・インタビュー

商品を購入する際やサービスを利用する際にはレビューやインタビュー記事が客観的な意見として重要な指標となります。

DROPのレビュー（口コミ）はシンプルにテキストのみの表示コンテンツ。

通常の記事を書く感じでタイトルや本文を入力するだけで、カード型レイアウトで表示されます。

（1列 or 2列表示は選択可）

実際のユーザーに直接インタビューをするのはハードルが高いものですが、その分アピール力はレビューに比べてより高いものとなります。

そのインタビューページですが、通常のエディターで自由に書くことのできる記事本文に加えて写真付きで表示することができます。

ボタンなども自由に設定できるので、記事を読んだ後に次に見てほしいコンテンツへの動線も確保できる仕様。

デモサイトでは（サンプルとして）Q＆A形式でコンテンツが作られてます。

こうしていくつかインタビュー記事ができればトップページへの表示はボタン一つで完了します。

さらにインタビューアーカイブページにはインタビューのほかにレビューも同じページ内に表示することができるため、たとえばインタビュー記事が仮に少なかったとしてもアーカイブページの下部にレビューコンテンツを表示できるので、ページのボリュームを確保することもできます。

画像カルーセル

見出しや説明文のデザインが済ませてある画像カルーセルになります。

デザインコンテンツ

画像とテキストを組み合わせたコンテンツエリア。

それぞれにレイヤー画像を重ねることができ、アニメーションも可能。

ボックスコンテンツ

最大3つまで横並び表示が可能なコンテンツエリア。

（タイトルや説明文を入れるだけのカンタン設置）

3つ未満の場合は自動的に画面幅に合わせて調整され、4つ以上の場合は2段表示で自動レイアウトされる仕様。

バナーコンテンツ

横幅100%で表示可能なバナーコンテンツ。

（見た目は記事内CTAと似てます）

グラデーションオーバーレイ機能やパララックスエフェクトを任意でかけられるのが特長。

（ボタン一つで効果のON/OFFが可能）

グラデーションの向き（縦 or 横）や色の透過率も細かく設定しての調整が可能です。

これらを使えばシンプルな画像でも”かっこいい”画像にレベルアップさせることができますね。

よくある質問（FAQ）一覧

利用者の不安を取り除く効果が期待できるFAQ。

アコーディオン形式のレイアウトで表示できるDROPのFAQは小さなスマホ画面とも相性がいいです。

通常の投稿のタイトルに質問を、記事本文内に回答を書くだけ。

通常のエディターを使う感覚なので回答内にリンクを貼ったり画像や動画なんかも置けます。

（ドラッグ&ドロップによる並び替えも可）

よく使う操作方法や退会方法などを書いておくだけで安心感や信頼感がアップするのでうまく活用したいところですね。

フリースペース

上記に挙げた専用コンテンツ以外に通常のエディターで自由に作成できるフリースペース（HTML記述可）も搭載してます。

プラグインの「Contact Form 7」を使えばメールフォームも簡単に設置できる等、自由度の高い設計が可能。

またトップページや重要な部分ではPCとスマホで異なるコンテンツが設定可能なので、スマホで見た時はPC用画像を単に縮小した画像ではなくスマホ画面に最適化した画像をセットしたりスマホ画面用のキャッチコピーなんかを別に付けることもできます。

ランディングページ（LP）

（トップページ以外の）通常のLPももちろん作成できます。

（※固定ページテンプレート）

基本的には（トップページ専用の）コンテンツビルダー仕様なので、トップページ同様各専用コンテンツの追加・並び替え・削除は直感的な操作で完了します。

LPでは以下に記したコンテンツを自由に組み合わせての構築が可能。

• チャートコンテンツ
• 画像カルーセル
• デザインコンテンツ
• バナーコンテンツ
• レイヤー画像コンテンツ
• フリースペース

ここではトップページ（LP仕様）の表示方法と若干異なる部分だけご紹介します。

画像カルーセル

トップページではどちらかというとビジュアルイメージで直感的にアピールする画像カルーセルなのに対し、LPではスライドする画像ごとにキャプションを付け加えることができます。

これにより商品やサービスなどの特徴をより具体的にアピールすることができるというわけ。

バナーコンテンツ

画像とテキストによるバナーですが、LPでは3タイプのデザインから選択可能。

レイヤー画像コンテンツ

一つの画像にさらに（商品）画像などを重ねることのできるLPオリジナルの機能。

（トップページでは未搭載のコンテンツ）

デモサイトのように動きを伴わせることもできるので、美しく迫力のある見せ方ができます。

設定項目が用意されているのであなたはレイヤー画像やテキストの位置、スマホ環境でのコンテンツの高さなどを微調整するだけ。

プラン

DROPには商品スペックや料金などをプランごとにわかりやすく伝えられるプランページ作成機能が用意されています。

見出しや背景画像を設定し、各プラン・サービスの特徴を追加していくだけのカンタン設定。

入力後はカード型のデザインで表示されるようになります。

（おすすめのプランにはおすすめアイコンを表示することも可）

プランページのヘッダー下部にはコチラ↓のようなプラン専用ナビゲーションを表示させることも可。

複数プランがある場合はここをクリックすることでスムーズに目当てのプランまでスクロールする仕様です。

プラン別の特徴をテンプレートで作成した後にオリジナルの表を載せてあげるとプランの比較がよりわかりやすくなります。

広告・収益化

記事内CTA

DROPでは3タイプの記事内CTAが選択できるようになっています。

記事ごとの表示・非表示設定やサイト全体を通しての一括設定も可。

複数のCTAを登録してる場合はどのCTAが最も反応率が高いのかのABテストも可能。

なおDROPからは、記事内に表示できるCTAの位置を記事上・記事下・記事内から選択できるようになってます。

「ショートコードを利用する」を選択するとCTAのショートコードが生成されるので表示したい位置にコピー＆ペーストするだけ。

記事ごとの編集が可能なので記事内容に合わせての位置設定が調整可。

（全記事統一での表示位置設定もテーマオプションからワンタッチで可能）

フッターCTA

フッターにもCTAを表示できます。

下記の2種類のデザインから選択可。

（コンバージョンも計測できます）

ブログ記事ページに追加コンテンツ

ブログ記事ページには、記事本文の上か下にオリジナルのコンテンツを表示させることができます。

(HTMLでの入力も可)

画像を指定してリンク先URLを付けてのバナー広告としての利用でもOK。

HTMLの知識がなくても利用できます。

ドロワーメニュー下部に追加コンテンツ

スマホ右上から表示されるドロワーメニュー下部にはコンテンツが追加表示できます。

デフォルトでは先のキャプチャ画像のように検索フォームの有無設定が付いてるほか、任意のコンテンツを3つまで設定可能なHTML入力欄が用意されてます。

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

こちらもシンプルに画像1枚とリンク先を設定するだけのオリジナルバナー広告としての利用も可能なので、必ずしもHTMLの知識が必要というわけではありません。

[/bln_left]

その他の主な機能

• トップページヘッダー（静止画スライダー・動画・Youtube）
• アラート表示可能な[headerbars]
• インストール後に初期設定を一括完了させる[themeoption_kanri]
• フォント変更機能（メイリオ、游ゴシック、游明朝）
• レスポンシブ対応（PC・タブレット・ミニタブレット・スマホ）
• 新[footerbar_sp]
• [customcss]
• [customscript]
• [sns_open]（Twitter・Facebook・Youtube・Instagram）
• [ogps]
• 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能
• [hover_effect]（ズーム・スライド・フェード）
• 直感的操作の[page_builder]
• 404ページカスタマイズ機能
• [newquicktag]（Gutenberg対応）
• microdata形式の構造化マークアップ適用済みパンくずリスト
• 高速化設定（絵文字読み込み・コード最適化）
• 管理画面の多言語対応（日本語・英語）
• パスワード保護ページ機能

どんな方におススメ？

• トップページから一気に利用者の目を惹きつけたい
• トップページをランディングページ化したい
• プロモーションサイトとしてのサイト構成を考えている

DROPは自社商品はもちろんWebサービスなどを販売する企業サイトに向いてます。

特にトップページのLPとしての構築の自由度は高く、新機能の「グラフ」機能や「プラン」機能を効果的に活用することでデータによる販売力アップが大いに期待できそうです。