いろんな言語で使えてしまうWordPressテーマ「meets（ミーツ）」の解説をしたいと思います。デモサイトは日本語の他に英語、台湾語（中国語）でつくっています。
開発のきっかけは、大好きな台湾にフォーカスしたテーマをつくりたいというシンプルなところから始まっています。台湾のいいところにスポットを当てました。台北だけでなく、台中、台南、高雄も好きです。
前置きはこれくらいにし、当記事ではmeetsのトップページの構成についてご紹介いたします。トップページからして「イケている」というところをお伝えできればと思います。
世界観を表現できる、高機能ヘッダー
meetsトップページのヘッダーでは、あなたがやりたいであろうことができます。静止画や動画を表示したり、レイヤー構成で画像を設置したり。奥行きや立体感の演出等、色々と遊べるようになっています。
こんなことができるのはもちろんTCDだけです。
レイヤー機能を搭載したヘッダー画像
上記画像でいう、右上、左下の雲の画像の箇所です。四隅にレイヤー画像を設置できるので、お好みの画像を作るなり、素材サイト（無料・有料）からダウンロードして設置するなどして、簡単にサイトの雰囲気を彩れます。レイヤーに設置する画像はpng形式を推奨します。
無料のpng素材をダウンロードできるサイトの一例には以下のようなものもあります。
→Pngtree
画像のファイル形式については下記記事で解説しています。
ブラウザが表示できる画像ファイルには大きく分けてJPEG,PNG,GIFの3種類の拡張子があります。WEB関連の業界人でも明確な使い分けができていない方々もいらっしゃいます。いかに画像を綺麗に見せ、容量を軽くするかが肝心なので、本項ではそれぞれの拡張子のメリット、デメリットや、画像の内容に応じてどの...
また、レイヤー画像の表示アニメーションは、デモサイトと同様のスライドインとその場で浮かび上がるフェードインの2タイプから選択可能です。
直感的にサイズを調整できる中央のロゴ
画面中央には、ロゴ画像などを設置することができます。また、設定画面は下記のようになっており、プレビューを見ながらドラッグしてサイズを直感的に変更可能です。
ロゴ無しの場合でも、キャッチフレーズ・説明文・ボタンもセットできるので、トップページヘッダーをお好みにカスタムできます。
中央のロゴ有り
お好みでヘッダーアニメーションの有無を変更可能
下記のようなヘッダーのアニメーションは、ワンタッチで一括無効化もできるので、キャッチフレーズやロゴを瞬時に表示させてアピールする使い方も可能です。
スライドする画像カルーセル
ヘッダー下の画像カルーセルは、ミニギャラリーとしてお使いいただけます。5枚以上の画像をセットすることで、無限に動き続けるスライダーが簡単に完成します。同じサイズの画像を複数用意して設置するだけです。管理画面では、ドラッグのみで並び替えることもできます。
自由にコンテンツを配置できるコンテンツビルダー
meetsのトップページは、内蔵のコンテンツビルダーで作るか、自由に一から制作するかをお好みで選択いただけます。下記のラジオボタンでいつでも切り替えることが可能です。
「コンテンツビルダーの代わりにフロントページに設定している固定ページの本文を表示する」を選べば、WordPressデフォルトのブロックエディター（グーテンベルグ）で制作することができるわけです。
ヘッダーコンテンツのカルーセルを表示して、その下はブロックエディターで制作するなど、汎用性の高い仕様となっています。ここからはmeetsに搭載されているコンテンツビルダーをデモサイトの上から順でご紹介いたします。
ギャラリーページのカテゴリーリンク
meetsに実装されているカスタム投稿タイプ「ギャラリー」に設定できるカテゴリーを最大3つまでセットできます。ギャラリー機能は、観光名所や美しい景観をアピールするために作られたmeetsの中でもとりわけ目立つ機能です。
トップページからスムーズにギャラリーページに誘う導線として当コンテンツをご活用ください。
ギャラリー詳細ページの一覧
上述のカスタム投稿タイプ「ギャラリー」の詳細ページの一覧を表示するブロックです。カテゴリーソートと追加読み込み機能を搭載しています。
「more」ボタンをクリックで、ページを追加読み込みします。ページが長くなりすぎないように一度に表示する記事数をPC/SP別に設定できます。
このようにトップページ→ギャラリーページへの導線はカテゴリーと詳細ページの2パターン用意されているので、お好みでご利用ください。
特集記事の一覧
「meets」では特定のテーマに絞った特集記事をカスタム投稿タイプで投稿できます。
特集記事は、例えばイベント・対談・インタビュー・取材・タイアップなどの特別な記事を投稿するために用意されています。その特集記事の一覧をトップページに表示できます。
デモサイトでは、上記のように大サイズ1つと小サイズ3つ分の記事を表示していますが、小サイズの記事数は任意に変更可能。カスタム投稿機能の管理画面からドラッグするだけで、表示順序を変更できます。
大サイズの記事に、タイムリーな記事をセットしておくのもいいでしょう。
パララックスも使えるバナー
パララックスやオーバーレイも使える高機能なバナーを設置できます。デモサイトでご覧いただけるパララックス効果（背景画像がずれて動く効果）はお好みでon/off可能です。
単純にバナーといっても、豊富な設定が用意されています。バナーの上にキャッチフレーズやボタンを入れたりできるので、申込ボタンやPRしたいページへの誘導としても使えますね。
- キャッチフレーズ/サブキャッチフレーズ
- フォントタイプ/サイズ/カラー
- ボタン（ラベル名/URL/ホバーエフェクト）
- 背景画像（PC/モバイル）
- パララックス（表示の有無）
- オーバーレイ設定
レイアウト済みのデザインコンテンツ
トップページと同様に四隅に任意でレイヤー画像（デモサイトではグレーの雲）を設置できるデザイン済みのコンテンツです。
見出しの位置から各所のマージンなども計算されたコンテンツを設置できます。また、上部のニュースティッカーも簡単な設定で表示可能です。テーマ内に用意されているカスタム投稿タイプや、通常の投稿から表示する記事を選択できて、表示順も日付順かランダムから選べます。
なんにでも使える「フリースペース」
これまでは用途が決まったコンテンツばかりでしたが、自由に用途が決められる「フリースペース」も用意しています。機能的にはこのようになっています。
- いくつでも使える
- HTML利用可
- フォントサイズ変更可
「トップページにお問合せフォームを設置したい」
「デモサイトにはない独自のコンテンツを表示したい」
という人にはフリースペースは重宝しますね。
以上、
ここまでご紹介したそれぞれのコンテンツは、任意の数だけ追加したり、簡単に並び替えできます。オリジナルでトップページをレイアウトして、不要なものは設定を保存したまま非表示にもできます。
足元までカッコいいフッターエリア
固定ページを除く全ページに表示できるフッターエリア。「たかがフッター、されどフッター」と言えるほど、高機能なフッターを搭載しています。
用途は自由。3点バナー
3点までバナーを表示できます。任意の画像、ラベル、URLを設定できるので、用途は自由です。「アバウトページ・採用・会社概要」など、組み合わせは無限ですね。
以下のように数を減らしても自動で横幅が変更されるので、背景画像を差し替えれば、柔軟に活用できます。見出しを横書きにしてみました。
動画or画像の配置も可能
フッターの中でもっともアピールしたいのがこのエリア。動画を配置すれば、すべてのページ（固定ページを除く）のクオリティが格段にアップしますね。
このエリアは、動画も配信できますし、画像の設置も可能です。具体的には下記の設定項目を用意。
- 動画・画像の選択可
- ロゴの設置
- オーバーレイ
- キャッチフレーズ
- フォントサイズ/カラー
ロゴやメッセージも表示させない場合でも、背景に動画をセットすれば、サイトの世界観を演出してユーザーの興味を引くことができます。
その他、一括変更機能について
デモサイトは、台湾観光メディアをイメージしていますので、アジア感溢れるエスニックな雰囲気で統一していますが、サイトの印象を簡単に変更できる機能も搭載してますので、幅広くご活用いただけます。
メインカラーやサブカラーを変更する
メインカラーやサブカラーを変更すると、先述のトップページコンテンツビルダーで表示できるボタンや、ヘッダーのグローバルメニュー、フッターのコピーライトエリアなどの色を一括変更できます。
例えば、画像を差し替えてメインカラーをモノトーンに変更すれば、このように和の雰囲気に一気に様変わりするわけです。
アイコンを非表示 or 差し替える
もう一つは、デモサイトの各所の見出しの上に表示されている赤い雲のアイコンですね。こちらも非表示にしたり、一括で変更することが可能です。
2つともトップページの広範囲に一気に適用できる機能なので、作るサイトに合わせて自由に設定してみてください。これだけでもサイトの印象は大きく変わります。
「圧倒的魅力」のトップページを制作するために。
大風呂敷を広げるという意味でも、トップページは「事業の器」を指し示すようなもの。ボリューム・バリエーション・クオリティ、共に抜きん出たトップページは、それだけユーザーの目も引くものです。
それだけトップページは重要なのですが、meetsでは「これでもか」というほど充実したコンテンツが揃えられることがお分かり頂けたかと思います。瞬時に惚れさせるパワーを持っている。ぜひパワフルなWordPressテーマで、あなたの事業を世界に展開させてください。
合わせて読みたいWordPressテーマ「Muum」の関連記事
第1回 : 観光業で使えるWordPressテーマ「meets」の機能解説（トップページ編）（当記事）
第2回 : WordPressテーマ「meets」の豊富なデザインページと用途について
第3回 : WordPressテーマ「meets」のページテンプレート「ランディングページ」の使い方
コメント