「そろそろ、ちゃんとしたホームページが必要かも」
ヨガ・ピラティスなどのスタジオを運営していると、そんなふうに思う瞬間があるかもしれません。体験レッスンの申し込みがSNS経由ばかりだったり、Google検索しても自分の教室が見つからなかったり。
広がるヨガ市場の中で選ばれるためには、清潔感ややわらかさのある、美しいホームページを持つことも大切です。
とはいえ、ゼロからホームページを作るのは大変です。そんな方に向けて開発されたのが、WordPressテーマ「QUALIA」。女性的でナチュラルなデザインを、簡単に実現できるテンプレートです。
この記事では、WordPressテーマ「QUALIA」の機能概要をご紹介いたします。
目次
WordPressテーマ「QUALIA」とは
QUALIA（クオリア）は、TCDシリーズ114作目となるWordPressテーマで、ヨガ・ピラティススタジオをイメージして開発されました。サイト全般に柔らかい雰囲気のアニメーションが施されており、レッスンプログラムや料金表を綺麗に整理できる点が特徴です。
できること
- トップページヘッダーでの縦書き表記
- レッスンプログラム紹介ページの作成
- インストラクター紹介ページの作成
- 料金表やバナーの登録・再利用
- 自由度の高い固定ページの作成
- レッスン予約につながる豊富なナビゲーション
向いているサイト
- ヨガスタジオ
- ピラティススタジオ
- フィットネスジム
- 健康・美容関連の教室やサロン
- 自然派カフェ・オーガニックショップ
- 瞑想やマインドフルネス関連
など、ナチュラルで優しいデザインが求められるサイトと相性がいいです。女性顧客が多い業種や、清潔感や柔らかさを表現したいサイトにも最適です。
デザイン
まずはQUALIAのデザイン面についてご紹介します。
ロード画面
デモサイトの最初に表示されるロード画面。ページ読み込み中の画面をカスタマイズできる機能です。
ロード画面は、次のデザインを選択可能です。
- テーマ内蔵のロードアイコンを表示
- ロゴとキャッチフレーズを表示
- キャッチフレーズとロゴを別画面で表示
デモサイトでは、「キャッチフレーズとロゴを別画面で表示」に設定しています。
また、表示するページや表示頻度も指定できるので、「トップページにのみ毎回表示する」という使い方も可能です。詳しい仕様は下記記事をご覧ください。
多くのTCDテーマには、ロード画面を表示&カスタマイズできる機能が備わっています。 サイト訪問時やページ読み込み時に表示されるロード画面を、お好みに合わせて設定可能です。 当記事では、TCDテーマオプション「ロード画面」の設定方法を解説いたします。 Word...
QUALIAでは、柔らかい雰囲気を演出するため、テキストがじんわり浮かび上がるアニメーションを採用しています。
・ロゴやキャッチフレーズを設定してトップページのみに毎回表示する。
・単なる待機画面としてではなく、ヨガスタジオのブランディングの一環として活用する。
トップページ
トップページは、訪問者が最初に目にする部分です。
- ヘッダーコンテンツ
- 3列バナー
- メインコンテンツ
で構成されています。
静止画や動画を設置し、キャッチコピーを設定できます。キャッチコピーは縦書き・横書きの両方で設定可能です。
日本語版デモサイトと英語版デモサイトで比較していただけます。
ヘッダーコンテンツ直下に、最大3列まで表示できるバナーです。非表示にもできますが、特に見てほしいページへのリンクを設定したり、キャンペーンページへ繋ぐための導線を想定した機能です。
デモサイトでいう上記箇所がメインコンテンツにあたります。基本的には、下層ページにスムーズにアクセスしてもらうために設定します。必要に応じて外部リンクも設置可能です。
あらかじめ用意されている以下のコンテンツを、追加・並び替え・削除して組み立てていく仕組みです。
| フリースペース | HTMLまたは、パターンを使ってお好きな内容を表示。 |
| グリッドレイアウト | デザインされたブロックを2カラムまたは3カラムで表示。 |
| お知らせ一覧 | お知らせ記事を一覧表示。カテゴリーごとの表示も可能。 |
| スプリットレイアウト | 画像とテキストを左右に分けて表示するレイアウト。 |
| 投稿スライダー | 投稿記事を2件ずつスライダー形式で表示。 |
すべてのコンテンツは、スマホでも綺麗に表示されます。コードを書く必要は一切ありません。
詳しい仕様や設定方法は、こちらの記事で解説しています。
サイトの玄関口となるトップページを設定していきます。 トップページはサイトのメインとなるぺージです。サイト（お店など）の概要や、サイト内の各コンテンツへの導線をイメージして作成しましょう。下層ページ（詳細ページ）をある程度準備してからの方が設定しやすいです。 下層ページとは、以下のことを指しています。 >>投稿タイプの使い分けについて 投稿ページ：集客ブログやコラム お知らせページ：告…
・ホームページ（サイト）の玄関口として設定する。
・ヘッダーコンテンツには、訪問者の興味を引きつけるコピーやビジュアルをセットする。
・下層ページの概要をセットし、スムーズにアクセスできるように構成する。
フォント
QUALIAでは、フォント機能を刷新しています。和文フォントにはゴシック体、明朝体に加え、教科書体を追加しました。欧文フォントには、システムフォント、Webフォント含めて豊富な選択肢を用意しています。
| フォント種別 | フォント名 | 対応デバイス | 特徴 |
|---|---|---|---|
| サンセリフ体 | Arial | Win, Mac, iOS | 最もベーシックなフォント |
| Optima | Mac, iOS | 美しいフォルム（※WinではSegoe UI） | |
| Helvetica | Mac, iOS | バランスのとれたフォント（※WinではArial） | |
| Avenir | Mac, iOS | モダンで直線的（※WinではCalibri） | |
| Verdana | Win, Mac, iOS | 大きな文字間隔と広めの字形 | |
| セリフ体 | Palatino | Win, Mac, iOS | 古典的なセリフフォント |
| Times New Roman | Win, Mac, iOS | 最もベーシックなフォント | |
| Georgia | Win, Mac, iOS | 洋書風 | |
| Didot | Mac | 上品で華奢（※WinではTimes New Roman） | |
| Baskerville | Mac | 細さの緩急大きめ（※WinではGeorgia） | |
| Rockwell | Win, Mac | タイプライター風（太め） | |
| スクリプト体 | Zapfino | Mac, iOS | エレガントで優雅（※WinではInk Free） |
| フォント種別 | フォント名 | 特徴 |
|---|---|---|
| ゴシック体 | Noto Sans JP | 読みやすく、癖のないモダンな印象。多用途に使える。 |
| ゴシック体 | Zen Kaku Gothic New | やわらかく親しみやすい印象。女性向けサイトにも合う。 |
| 明朝体 | Noto Serif JP | 落ち着きがあり、信頼感を与えるデザイン。 |
| 明朝体 | Zen Old Mincho | クラシカルで品のある明朝体。和の雰囲気にも適する。 |
| 教科書体 | Klee One | 手書き風の柔らかい表情。ナチュラルで親しみやすい印象に。 |
Webフォントは、どのデバイスでも同じ見た目で表示されます。
詳しくは下記記事でご覧いただけます。
フォントは、人々の印象を司る重要な要素のひとつ。Webデザインにおいて、フォントは単なる文字の表示以上の役割を果たします。 Appleは、なぜWindowsとの差別化に成功したのか。スティーブ・ジョブズ氏がタイポグラフィの美しさに魅了され、フォントにこだわり抜いたOSを開発したからです。美しい...
日英デモサイトのフォントに着目してご覧ください。
モダンで洗練された印象を与えてくれます。
・サイト全体の印象を変えたい時に使う。
・「ヘッダー見出しのみフォントを変える」などの設定も可能です。
アニメーション
QUALIAには、サイト全体にゆったりとしたアニメーションが組み込まれており、ページの表示にわずかな“タメ”をつくる仕様になっています。動きに緩急があることで、スタジオのやさしく落ち着いた空気感を演出します。
アニメーションは、テーマを有効化した時点で自動反映される仕様です。
・静的すぎる印象を避け、自然な動きで情報を見せられる。
・やわらかく洗練されたブランディングの実現。
ナビゲーション
QUALIAは、各所のナビゲーションが豊富なテーマです。それぞれご紹介します。
ヘッダー（グローバルメニュー）
ヘッダー（グローバルメニュー）＝サイトの各項目にリンクするメニュー。ここは基本的なナビゲーションですね。デモサイトでは、ページスクロール時にも上部に固定表示されていますが、お好みで解除可能です。
・スタジオや教室の主要なページやプログラム、料金などをメニュー項目に整理する。
・下層ページへのリンクをここにまとめる。
・右端にはサイト内検索フォームも表示できる。
メガメニュー
複数のリンクを一括表示できるメガメニュー。QUALIAには2タイプのメガメニューを実装しています。
投稿記事を記事カルーセルで表示できます。ヨガやピラティスの情報をブログで発信しているなら、このメガメニューを使ってブログへのアクセスを促せます。特定の記事を指定して表示することも可能です。
デモサイトでは「プログラム」に設定しています。画像とテキストを設定してバナーを表示できます（表示数に制限はありません）。下層ページへのリンクとしてもいいですし、外部リンクとしても活用可能です。
・特に見てほしいブログ記事をカルーセル化して表示する。
・プログラムや料金プランへのリンクを画像付きで設定し、すぐにアクセスできるようにする。
サイドボタン
サイドボタンを設定すると、1カラムの固定ページ以外の全箇所に表示されます。訪問者がすぐにアクセスできるように、特に重要なページへの誘導に役立ちます。デモサイトでは、「無料体験レッスン」「レッスン予約」と設定しています。
ちなみに、スマホではドロワーメニュー内に表示されます。
特に目立たせることができるナビゲーションです。
・予約ボタンやお問合せボタンを目立たせて、訪問者がすぐにアクセスできるようにする。
・特別オファーやキャンペーンページにリンクさせる。
フッター
QUALIAのフッターでは、豊富なナビゲーション追加できる仕様です。4列バナーや、メインエリアのバナーの他、補足情報やフリースペースも用意されています。
連絡先やSNSリンク、重要なページへのリンク、メニュー項目をまとめられる箇所です。
・バナーを設置し、フッターからの離脱を減らす。
・SNSリンクやアクセス情報をフッターに整理し、訪問者が簡単に繋がれるようにする。
・メニュー項目を一覧表示して、サイト内回遊率を高める。
固定フッター（モバイル端末専用）
モバイル端末専用で固定フッターも設置可能です。デモサイトでは上記のようなリンクを表示しています。
他にもアイコンメニューや、バナー画像を表示可能です。詳細はこちらの記事でご紹介しています。
サイト内の全ページで表示されるフッターと、スマホ用固定フッターの設定方法です。QUALIAではバナーや補足情報など多くの導線・情報を表示することができます。 フッターは重要なパーツで、意外とよく見られています。役割を確認しておくと、設定が進めやすいかもしれません。 >> WEBサイトのフッターが重要な理由 設定できる内容 4列バナー 最大4つのバナーを表示する ・小見出し ・見出し ・…
・ヨガスタジオのキャンペーンページなどへリンクさせる。
・スマホユーザーに向けて、アクセス情報が記載されたページへリンクさせる。
・期間限定のキャンペーンなどを「バナー画像」に登録する。
コンテンツ管理
ヨガスタジオのサイトに必要なコンテンツを管理するための機能です。
カスタム投稿「プログラム」
>> デモページを見る（ヨガ）
レッスンプログラムを管理するためのカスタム投稿タイプです。レッスン内容やプログラムを綺麗に整理するページです。
1カラムのページですが、セクションごとにアンカーリンクを設定できます。「ホットヨガ」「モーニングヨガ」「グループレッスン」の部分です。
この部分には、以下のような設定項目が用意されており、柔軟な設定が可能です。
| 表示しない | 何も表示されません。 |
| 本文内のH2から自動作成 | 本文内のH2と連動するため、目次のようにご利用いただけます。 ※デモサイトのように、H2のテキストを短くして使う想定です。 |
| ラベルとURLを個別に設定 | テキストとURLを個別に追加して自作できます。 ※この設定の場合、外部ページにリンクさせることも可能です。 |
・レッスンプログラムの内容などを、アンカーリンクを使って整理できる。
・アイキャッチ=ヘッダー画像なので、サービスを視覚的にアピールするときに使える。
カスタム投稿「よくある質問」
よくある質問（FAQ）を管理するためのカスタム投稿タイプです。訪問者が気になる質問に簡単にアクセスでき、問題解決をスムーズにします。カテゴリー別に整理できる点が特徴です。
- タイトル：質問文
- 本文：回答
という形で、アーカイブページのみが生成されるシンプルな仕様です。よくある質問カテゴリーを追加すると、自動的に整理されます。
・よくある質問をカテゴリー別に整理し、訪問者の疑問を解消できるようにする。
インストラクターページ
WordPressのユーザーを、インストラクター（スタッフ）として表示する機能です。 ユーザーごとにプロフィールや写真を登録しておけば、次のような設定項目でチェックを入れるだけで一覧ページが自動作成される仕組みです。
やることは、プロフィール情報を登録するだけですので、複雑な設定は不要です。投稿者と連動しているので、スタッフが書いたブログ記事も読まれやすくなります。
・ジムやスタジオのスタッフ（インストラクター）プロフィールを一覧で表示する。
・スタッフの詳しいプロフィールや、ブログ記事を読んでもらえるページをつくる。
料金表・バナー
スタジオの料金プラン表やバナーを作成・管理するための機能です。
上記デモページのような料金表は、TCDテーマオプションから作成する仕様です。
上記のようにイメージ画像を見ながら、ひとつづつ登録していきます。あとは、表示したい箇所にショートコードを貼り付けると表示される仕組みです。下層ページ内に設置することが多いと思いますが、トップページやブログ記事内にも設置可能です。
バナーも同様の仕組みで、テーマオプション側に登録したものを、ショートコードで呼び出して使います。
画像・小見出し・見出しがレイアウトされたバナーをノーコードで作成する機能です。
いずれもスマホ時に綺麗に変形してくれますので、レイアウト調整は不要です。
・料金表をスマートに作成し、訪問者にスタジオの価格帯を伝える。
・期間限定のキャンペーンやお得な情報をバナーで目立たせ、集客を促進する。
・PC、スマホで綺麗に表示される料金表やバナーを効率よく作成する。
固定ページテンプレート
固定ページテンプレートを使って、スタジオの情報を整理できます。基本的に更新が少ない情報を掲載しておく機能です。
例えば以下のようなページです。
いずれも同じテンプレート「ランディングページ」で作成しており、コーディングは一切不要です。用意されている項目を埋めれば、美しいレイアウトで再現されます。
上記のようなレイアウトも、画像をアップしてテキストを入力するだけです。
「ランディングページ」というテンプレート名のとおり、次のようなキャンペーンページも作成できます。
ヘッダー、フッターの有無や、ヘッダー画像サイズ・本文幅の変更などがボタン操作のみで行える仕様です。
ひとつの固定ページテンプレートで多彩な表現が可能です。
・ABOUTページやアクセスページを作成し、スタジオの基本情報を伝える。
・キャンペーン告知など、後から必要になるランディングページを柔軟に追加する。
QUALIAでヨガ・ピラティススタジオをもっと魅力的に
ヨガ・ピラティススタジオ向けのWordPressテーマ「QUALIA」の機能を、以下の3つのポイントでご紹介しました。
アニメーションやモダンなフォントを活用した女性的で柔らかな雰囲気、そしてヨガスタジオに必要なコンテンツを簡単に整理できることがQUALIAの特徴です。
魅力的で心地よいヨガスタジオのホームページ制作には、ぜひQUALIAをご活用ください。
コメント