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

【日本語Wordpressテーマ】DROP(TCD087)

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

DROPの方向性

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

管理人

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

購入ボタン画像

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

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

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

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

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

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

DROPではTCDテーマオプションが刷新されてます。

各見出しのフォントタイプやサイズなんかが一括で設定可能。
ここを調整するだけでほぼ全体のフォント調整が完了します。

キャプチャ画像

またトップページに表示されるボタンも一括設定が可能。

通常ボタンの他、スワイプアニメーションボタン、グラデーションボタンなんかも作成できます。

カラーも自由に変更可。

キャプチャ画像

これらの設定を行うことで、一部だけフォントサイズが違ったりバランスがおかしいという状況が起きにくくなります。

なお固定ページで作成したページ(ランディングページも含む)に関しては、個別でフォントサイズやボタンの種類が編集可能。

よってランディングページのような個性を前面に出すようなページではテキストサイズを変えてみたりボタンを目立たせてみたりといったカスタマイズもできちゃいます。

フリースペースが使えるエリアではクイックタグに登録したオリジナルボタンも使えます。

サイトデザイン

ヘッダー

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

キャプチャ画像

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

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

キャプチャ画像

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

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

キャプチャ画像

ニュースティッカー

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

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

キャプチャ画像

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

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

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

キャプチャ画像

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

キャプチャ画像

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

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

オリジナル機能

オリジナル機能の妙

DROPは通常のウェブサイトとしてのトップページはもちろんのこと、1枚のランディングページ(LP)としても使えるトップページが特長的です。

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ももちろん作成できます。

(※固定ページテンプレート)

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

管理人

内容的には「DROPのトップページ用コンテンツビルダーで使えるコンテンツ群を固定ページ内(LP内)でも使える」という感じですね。

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

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

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

画像カルーセル

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

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

キャプチャ画像

バナーコンテンツ

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

キャプチャ画像

レイヤー画像コンテンツ

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

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

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

キャプチャ画像

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

キャプチャ画像

LPの基本設定ではヘッダーやフッターなどコンテンツの表示・非表示が選択できたりヘッダーのサイズ調整も可能。

(すべての項目はチェックの有無だけで変更可)

キャプチャ画像

プラン

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

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

キャプチャ画像

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

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

キャプチャ画像

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

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

キャプチャ画像

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

キャプチャ画像

表作成機能は付いてません。

そのため通常のエディターで表を作成するか、あるいはデモサイトと同じ表でよければデモサイトに載ってるコードをコピー&ペーストして必要部分だけを修正するというやり方になります。

プランが作成可能な固定ページではランディングページ同様、ヘッダーやフッター、メニューやパンくずリストなどのコンテンツ類の表示・非表示が選択可です。

広告・収益化

広告・収益化の妙

記事を読んだ利用者をランディングページ(LP)へ誘導する強力な動線としてのCTA機能はとても重要なコンテンツと言えます。

記事内CTA

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

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

キャプチャ画像

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

キャプチャ画像

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

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

キャプチャ画像

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

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

フッターCTA

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

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

(コンバージョンも計測できます)

キャプチャ画像

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

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

(HTMLでの入力も可)

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

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

キャプチャ画像

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

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

キャプチャ画像

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

キャプチャ画像

管理人

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

その他の主な機能

どんな方におススメ?

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

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

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

購入ボタン画像

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


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

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

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

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