DROPは、WEBサービスやアプリなどのプロモーションサイトに最適なWordPressテーマです。トップページに表示できるコンテンツが充実しており、そのまま本格的なランディングページ（LP）としてもお使いいただけます。
また、新機能として「グラフ」機能を実装しました。横・棒・線・円グラフなど様々なチャートを簡単に作成でき、データを使っての表現が広がりました。他にも、ヘッダーやボタンに美しいグラデーションを施せるデザイン機能など、優秀なLP・セールスページができます。
それではDROPのトップページの解説をします。
フォントやボタンのデザインを瞬時に統一できる仕様
DROPでは各見出しのフォントタイプ・サイズ、ボタンのデザインを一括で設定できます。必要な箇所が一括変更できるため、セットアップが簡単になった上、デザインの調和が取りやすい仕様になっています。
フォントの設定
フォントは以下のように詳細に設定できます。選べるフォントは「メイリオ」「游ゴシック」「游明朝」で、PC/モバイルとそれぞれサイズ調整が可能です。
この2箇所のフォント設定を指定するだけで、ほぼ全体のフォント調整が完了します。
ボタンの設定
トップページに表示されるボタンも、一括設定が可能です。通常のボタンの他、スワイプアニメーションボタン、グラデーションボタンも作成できます。カラーも直感的操作で自由に変更できます。
上記のように様々なデザイン・アニメーションのボタンが作成できます。コンバージョンへの動線として使われることも多いボタンですが、アニメーションで目立たせたり、グラデーションで調和の取れたデザインのボタンも作成できますね
グラデーションオーバーレイ搭載のヘッダー
DROPのトップページで最初に目に入るヘッダーエリアについてご紹介いたします。ここには美しいグラデーションオーバーレイを施すことが可能です。シンプルな画像にも画像編集ソフト不要で、簡単にデザイン性をプラスできます。グラデーション無しと比較するとこんな感じです。印象は大きく変わります。
グラデーションの方向は縦横を変更可能で、色の透過率もお好みで設定できます。
また、右下のメッセージではキャンペーンなどを訴求しやすくなっています。ふわふわと浮くアニメーションがかわいいですね。
デモサイトでは、体験中の人数を明記し、テーマのダウンロードページへとリンクさせています。リンク先やメッセージのサイズや色は、自由に変更できるので、ご自身のサービスやページ内で特に見せたいページへリンクさせておくといいでしょう。
ヘッダー上部には、ニュースティッカーを表示して、任意の記事タイプ（ブログ記事 or お知らせ記事）を選んで、表示順も日付順かランダムから選べます。
お知らせ記事ならタイムリーに見せるために日付順、ブログ記事なら過去記事も満遍なく訴求するように、ランダム表示にするなどの工夫が可能です。
また、左側にドロワーメニュー形式で表示されているグローバルナビメニューですが、以下のように一般的なヘッダー箇所にもワンタッチで切り替え可能です。
2通りの使い方ができるLP仕様のグローバルメニュー
DROPのトップページのグローバルメニューは、2通りの使い方が可能です。
- トップページを1枚のLPとして見せる使い方（1ページ内でスクロールさせて見せる使い方）
- 通常のサイトのトップページとしての使い方（下層ページへのリンクとしての使い方）
前者の使い方を実現するために、DROPではWPデフォルトの外観＞メニューで、「トップページ専用のメニュー」を別で設定可能です。
これによって、トップページのメニューでは各コンテンツにページ内リンクできて、かつ、下層ページに表示されるメニューは通常のサイト内リンクとして機能させられます。
上記箇所で、トップページ専用のグローバルメニュー（ページ内リンク）を設定している例です。トップページをページ内リンクにすることで、ページ遷移の必要もなく、全体に目を通してもらいやすくなります。ユーザーにストレスフリーに閲覧いただけます。
デモサイトでは、通常のメニューのみを設定していますが、上記のようにトップページ専用のメニューにコンテンツIDを設定した場合は以下のような動きになります。各コンテンツIDは、テーマオプションから任意のものを設定可能です。
口コミや、FAQなどユーザーから需要の高いコンテンツを設置すれば、1ページ内のみでコンバージョンに繋がる可能性も上がるわけです。
コンテンツを組み合わせて自由につくれるトップページ
DROPのトップページには、幅広い需要をカバーできるコンテンツが用意されています。トップページをLPとして活用するには、1ページ内でユーザーのあらゆるニーズに応えることが必要です。コンテンツビルダー仕様なので、以下のコンテンツは追加・並び替え・削除が直感的な操作で可能です。
画像カルーセル
シンプルな画像カルーセルですが、見出しや説明文、ボタンの位置までが美しく配置されるように細部にこだわってデザインされています。スマホでも美しくレスポンシブ表示されます。
サービスや商品のイメージをセットするなど幅広い用途でお使いいただけます。
デザインコンテンツ
ここはデザイン性の高いコンテンツになっており、上記のような画像エリアとコンテンツエリアの2箇所をそれぞれ詳細に設定可能です。
画像エリアでは、背景画像に重ねる画像を設定できるので、奥行きのある演出が可能です。コンテンツエリアにもテキストの背景に表示できるレイヤー画像を設定できます。
それぞれ上下左右から表示位置を細かく設定できるので、画像に合わせて調整してみてください。コンテンツエリアに表示する画像は浮遊感のあるアニメーションを適用可能で、シンプルなデザインにこなれた雰囲気をプラスすることができます。
レイヤー画像が無くてもお使いいただけるので、サイト制作の仕上げ時など、遊び心を加えたい時にご活用ください。少しの工夫でオリジナリティ溢れるトップページに進化します。
チャートコンテンツ
DROPの最も特徴的な機能の一つです。データを直感的（視覚的）に伝えることのできるグラフを表示できます。チャートのタイプは全部で4種類で、数値を入力した後でもいつでも変更可能です。
アピールしたいデータによって、最も適したチャートのタイプに簡単に変更できます。また、PC環境では横並びに2つ表示可能なので、以下のデモページのように売上や純利益などを並べて表示する使い方もできます。
また、上記ページで確認できるようにチャート下にテーブルを自動出力し、詳細な数値も表示できます。売上高のグラフの場合は、直感的に売り上げの動向を知れるだけでなく、正確な数字でもアピールできるということです。
ボックスコンテンツ
主に下層ページへの導線として活用いただけるボックスコンテンツです。デモサイトでは、音楽ストリーミングサービスで用意されている3つのプランにリンクするように設定しています。
プランが2つの場合や、3つ以上の場合もあるかと思いますが、柔軟に対応できるように個数によって幅が可変する仕様になっています。例えば、プランが5つある場合は、3列表示のボックスコンテンツと、以下のような2列表示のボックスコンテンツを組み合わせてお使いいただけます。
バナーコンテンツ
画面幅サイズのバナーコンテンツを表示できます。大きな特徴は、グラデーションオーバーレイをかけられる点と、滑らかに動くパララックスエフェクト（視差効果）を実装できる点です。
実際にデモサイトで動きを見てみてください。トップページ中段の「選べる3つのプランで楽しむ音楽ライフ」の部分です。
グラデーションとパララックスを併用すると、かなり先進的なバナーになります。中央にボタンリンクも表示できます。ボタン無しでサイトのデザインの一部としてレイアウトしてもかっこいいですし、スタイリッシュな導線としてもお使いいただけるわけです。
インタビューコンテンツ
DROPのカスタム投稿タイプ「インタビュー」コンテンツを表示できるエリアです。実際のユーザーの顔写真などを掲載できれば、高い訴求力を期待できるコンテンツです。
いくつかインタビュー記事があれば、トップページに表示する作業はボタンひとつで完了します。実際のユーザーのインタビュー記事を読んだユーザーは、客観的な意見も参考にできるので、成約に繋がりやすくなるはずです。
カテゴリー分けできるコンテンツなので、デモサイトのようにユーザーインタビューとして使う以外にも、通常の投稿記事と別角度の情報発信にも使えます。
レビューコンテンツ
こちらはデモサイトでは表示していませんが、上記のようにシンプルにテキストのみを表示できるコンテンツです。2カラムか1カラムのレイアウトを選択して表示できます。レビューの数に合わせてレイアウトを調整してみてください。
インタビューコンテンツと同じく、LPとして運用する際にも効果的ですが、インタビューコンテンツに比べて制作ハードルが低いので、ぜひご活用ください。
FAQコンテンツ
アコーディオン形式のレイアウトで表示できるコンテンツで、よく聞かれる質問をまとめておくのに最適です。ユーザーが気になる質問をクリックして展開します。回答欄には上記のように画像もセットできるので、より分かりやすくご案内可能です。展開式なのでコンテンツが多くても、ページの見た目に影響しません。
スマホのような小さなデバイスとも相性がいいので、ユーザーのニーズを満たせるコンテンツをセットしておきましょう。こちらもトップページに表示しておくことで、ユーザーの不安感を取り除く効果があります。
フリースペース
通常のエディターで自由に作成できるフリースペースもご活用ください。HTMLで入力できて、クイックタグ機能もお使いいただけます。一例ですが、コンタクトフォームのプラグインを使えば、上記のようなフォームを設置することも簡単です。
トップページのコンテンツを充実させて、最下部にメールフォームを設置しておけば、見込み顧客のリストを獲得できる可能性を広げられます。
入力画面のイメージ
トップページを自分好みにカスタマイズしたい際にフリースペースを使ってみてください。
このフリースペースはもちろん、ここまで紹介しましたどのコンテンツも好きなだけ追加したり、並び替えもできるので、トップページのバリエーションをたっぷりと試せます。すべて直感的に操作できるのでレイアウト変更に時間はかかりません。
シンプルかつ存在感のあるフッター
DROPのフッターは、シンプルかつミニマルにデザインされています。フッターメニューはデザイン上設けておらず、中央のボタンでリンクをひとつ設定できる仕様です。フッター部分にもグラデーションやパララックスエフェクトを適用できるので、シンプルなレイアウトながらもインパクトを与えられます。
また、背景コンテンツには、動画もセットできます。
グラデーションオーバーレイを重ねれば、「映像＋グラデーションオーバーレイ」のさらに印象的なフッターに仕上がります。シンプルな動画でもグラデーションオーバーレイを適用すれば、十分な色気を醸し出せるわけです。フッターでの見せ方にこだわりつつ、動画に編集を加える工程も省略できます。
1ページであらゆるニーズに応えるDROPのトップページ
ここまで紹介してきたトップページの構成・機能概要ですが、バリエーションの富んだコンテンツを制作できることがお分かりいただけたかと思います。チャートや口コミなどの客観的なデータを訴求できるDROPのトップページは、LPとして活用することも視野に入れたベストな仕様です。
各所の見出しやボタンの設定は共通で反映されるので、複数のコンテンツをセットしてもページ全体で美しい整合性を保てます。
コンテンツ量に伴い、縦に長くなるトップページもページ内リンクを設定すれば、ユーザビリティも損ないません。LPとして活用する場合、1ページ内で商品やサービスの概要をまとめることも重要ですので、ぜひ設定してみてください。
上記のDROPの特徴を活かし、あなたのサービスの成約率アップに貢献できれば嬉しいです。
合わせて読みたいWordPressテーマ「DROP」の関連記事
第1回 : WEBサービスやアプリのランディングページに最適なWordPressテーマ「DROP」のトップページ（当記事）
第2回 : WordPressテーマ「DROP」に用意されているページテンプレート「プラン」の機能と活用例
コメント