WordPressテーマ「MASSIVE」では、幅広い種類のページをスムーズに制作できます。TCDテーマの中でも過去最高レベルの柔軟性といっても過言ではありません。ランディングページ(以下、LP)制作の自由度はもちろん、複数の下層ページを連結できる機能も搭載しており、サイト内の導線設計がスムーズです。

LPの意味や構成については、下記記事を参考にご覧ください。

LPの意味を理解した上で、重要なのは使いやすいページ制作機能です。当記事では、シンプルな使い心地で自由度も高いMASSIVEの固定ページテンプレート「ランディングページ」の使い方についてご紹介いたします。

LPを制作する場合と、サイト内の下層ページを制作する場合との二つのケースに分けて解説いたします。

読みやすさも調整できる訴求力抜群のLP制作機能

まずは、イベントやキャンペーンなどの特設ページ(LP)を制作する場合に活用できる機能のご紹介です。多くのバリエーションのLPをこの機能ひとつで作成できます。
例えば、こんな感じのページです。

各所で編集できる部分を解説いたします。

ヘッダーのサイズを変更可能

  • ヒーローヘッダーのLPサンプル
    全画面ヘッダー(ヒーローヘッダー)

まずは、第一印象にかかわるヘッダーのサイズ感です。ヘッダーの高さを全画面か700pxから選択できます。PCのサイズにもよりますが、全画面のヘッダーと700pxのヘッダーでは印象が異なります。特にスマホ環境では大きくデザインが変わるので、ぜひ実機で確認してみてください。

スマホ環境での比較

キャッチフレーズと背景画像を全画面でアピールできるタイプと、ベーシックなヘッダータイプの2種類ですね。全画面表示をしている場合でも下部にアローボタン(メインコンテンツへスムーズに移動するボタン)を表示できるので、インパクト抜群なだけでなく、ユーザービリティも高いです。

また、LPを制作する際は、ユーザーの選択肢をできるだけ絞る必要があります。そういった面でもヘッダーやフッターをワンタッチで非表示にできるので、効果的なLPを簡単につくれます。

LPの編集画面

ヘッダーに4種類のアニメーションを適用できる

サイズを変更できる機能の他に、適用できるアニメーションも豊富に用意しました。下記4種類のアニメーションを任意に適用できます(アニメーション無しも可)。

ズームイン

ズームアニメーション

ストライプアニメーション

ストライプアニメーション

左からスライドイン

左からスライドイン

右からスライドイン

右からスライドイン

サイズとアニメーションの組み合わせだけでも豊富なバリエーションのページヘッダーをつくれます。

メインコンテンツの幅を調整して読みやすさをアップできる

コンテンツの幅についても柔軟に変更可能です(最大1200px)。コンテンツの幅はデザイン面の美しさが変わるだけでなく、テキストの読みやすさにも影響します。幅が狭すぎても不格好ですが、広すぎても読み辛くなるわけです。

例えば、メインコンテンツがワンカラムで一般的なテキスト(サイズ16px)のみで構成されている場合、コンテンツ幅を1200pxにすると無駄に間延びして読みにくくなります。カラム数を2つ以上にして、文章を要点別に分けたり、画像を横並びに設置する際にコンテンツ幅を広げてご活用ください。

デモサイトのLPサンプルでもそれぞれコンテンツ幅を変更してます。

下層ページを連結して、サイト内回遊をスムーズに

ここでは、LPとは異なる役割の下層ページを作成する際に役立つ機能をご紹介いたします。MASSIVEのデザインに基づいた独自の仕様になります。デモサイトでいう以下のようなページです。

ヘッダー画像下部のタブボタンをクリックすると読み込み無しでスムーズに遷移します。MASSIVEのデザイン上、ヘッダーにナビメニューはありませんが、この仕様によりサイト内のスムーズな回遊を促せます。

シンプルな操作のみで固定ページを連結可能

設定は至って簡単で、ランディングページの基本設定の部分で、「子ページを設定する」にチェックを入れるだけです。

子ページを設定するキャプチャ

これによりチェックを入れたページが親ページとなり、設定項目が最小限に省略されます。親ページの設定項目は、ヘッダーサイズやコンテンツの幅、フッターの有無など、子ページに共通して適用される箇所のみです。上記画像の通り、本文を囲む枠線の有無もここで簡単に設定できます。

次に、新たなページを制作し、ページ属性の部分で親ページと紐付けます。

親ページと紐付けする箇所

ここでメインコンテンツを設定すれば、親ページに紐づいた子ページが完成です。子ページのタイトルが親ページのタブボタンに反映され、心地いいフェードインアニメーションで表示されます。

デモサイトのように関連するコンテンツをひとまとめにする際にご活用ください。以下のように各ページを読み込みなしで表示できます。

子ページ遷移時のイメージ

汎用性の高いテンプレートを使ってページをスマートに作成できる

メインコンテンツには、以下の4種類の雛形が用意されています。TCDではお馴染みのコンテンツビルダー仕様ですので、自由に追加・並び替え可能です。

矢印コンテンツ

手順や、フローチャート、簡単なスケジュールなどを作成する際にご活用ください。

矢印コンテンツ

FAQコンテンツ

アコーディオン式(クリックして展開する形式)のFAQコンテンツを直感的な操作のみで作成できます。

FAQコンテンツ

アクセスマップ

MASSIVEのデザインに合わせたGoogleマップを表示できます。

アクセスマップコンテンツ

フリースペース

通常のエディター(テキスト・ビジュアルエディター)で入力可能なフリースペースです。

また、上記4種類すべてのコンテンツで表示できる「見出し」では、通常の見出しに加えて以下のような「画像付き見出し」でもアプローチできます。

画像付き見出し

直感的にイメージしやすいビジュアルでアピールします。サイトの下層ページではなく、LP内に取り入れるのも実用的です。

LPとサイト制作の両方が捗るMASSIVEのページ制作機能

デモサイトの半分以上のページをこのテンプレートのみで作成できるほど、汎用性の高い機能です。

MASSIVEなら、コンバージョンを期待できるLPと、サイト内回遊率を高める下層ページの両方をスマートに制作できます。同時に、企業や個人の魅力を強力にアピールできるサイトデザインも手に入るわけです。他社を圧倒するサイトをスムーズに制作できるのがWordPressテーマ「MASSIVE」です。

販売ページ デモサイト

合わせて読みたいWordPressテーマ「MASSIVE」の関連記事

第1回 : 自社制作の採用サイトでリクルートしよう。企業文化を力強く発信できるWordPressテーマ「MASSIVE」
第2回 : WordPressテーマ「MASSIVE」でマイナーチェンジしたサイトカラー設定と配色の決め方について
第3回 : ランディングページや下層ページも簡単につくれる。WordPressテーマ「MASSIVE」のページ制作機能を徹底解説。(当記事)