「お寺の文化や伝統を美しく伝えるホームページを作りたい。」
「縦書きを取り入れた和風のウェブサイトをつくりたい。」

そんな方のために開発されたのが、WordPressテーマ「ZEN」。縦書きや余白を活かしたデザインが特徴です。日本語や日本文化を美しく表現できるテンプレートで、お寺や神社のサイトに最適化されています。

この記事では、ZENの機能概要をご紹介します。サイトの各部分でできることを参考にしてみてください。

WordPressテーマ「ZEN」とは

TCDシリーズ113作目のWordPressテーマで、お寺のサイトをコンセプトに開発されています。ネーミングは「禅」からきています。縦書きレイアウトなど、和の雰囲気を醸し出すデザインです。

WordPressテーマ「ZEN」

できること

  • 縦書きレイアウトの美しいデザイン表現
  • お寺の行事を発信するページの作成
  • 寺院の紋章である寺紋や家紋をあしらえる
  • 奥行きを感じる視差効果の表現
  • 自由度の高い固定ページ作成
  • ユーザーをスムーズに案内するナビゲーション

向いているサイト・ジャンル

  • お寺
  • 神社
  • 着物・呉服店
  • 日本料理
  • 日本庭園

などを基本に、日本の伝統文化や工芸品を扱うお店や、文化財や歴史的建造物などの施設サイトにご活用いただけます。

デザインとカスタマイズ

ZENのデザインやカスタマイズ機能についてご紹介します。

ロード画面

ロード画面

サイトを訪問時に表示されるロード画面。デモサイトでは、観音様の画像が表示されます。その後にお寺のロゴが表示され、サイトのトップページが表示される仕組みです。

この部分では、お好きな画像やテキスト、ロゴ画像等を登録してファーストビューを演出できます。

できること・仕様
  • ロード画面は未設定でも使えます。
  • 画像を用意できない場合は、任意の背景色を設定可能。
  • ロゴ(もしくはキャッチフレーズ)だけでも表示可能。
  • トップページのみに毎回表示するなど、表示頻度設定が可能。

詳しい設定方法や仕組みについては、こちらの記事で解説しています。

トップページ

デモサイトのトップページヘッダーには動画とお寺のロゴをセットしていますが、以下のように代わりにテキストと静止画の登録もできます。

トップページヘッダー

トップページヘッダーより下の部分(メインコンテンツ)は、以下のアイテムを自由に組み合わせて表示する仕様です。ドラッグ&ドロップで追加・並び変えが可能です。

フリースペース HTML、またはパターンを使ってお好きな内容を表示できます。
ラージバナー 画面幅サイズのバナーを表示できます。視差効果をお好みで設定可能。
お知らせ一覧 カスタム投稿「お知らせ」の記事一覧を表示します。
季節の行事一覧 カスタム投稿「季節の行事」の記事一覧を表示します。
投稿一覧 WordPressの通常の投稿一覧を表示します。
バナーリスト 画像とテキスト、リンク先URLを4枚まで登録できます。

それぞれの詳しい仕組みや設定方法は、こちらの記事で解説しています。

できること・仕様
  • トップページヘッダーには、静止画 or 動画を設置可能。
  • ロゴ画像の他に、キャッチコピーも設定可能。
  • キャッチコピーは縦書き or 横書きを選択可能。
  • ヘッダーのメニュー項目も縦書き or 横書きを選択可能。
  • メインコンテンツは、ボタン操作とドラッグ&ドロップのみで作れる。

見出し上部のアクセント

見出し上部のアクセント

見出し上部のアクセントを設定できます。ここには、お寺の紋章である「寺紋」などの画像を設置いただくことを想定しています。格式ある印象を演出する機能です。

和食店や日本の伝統工芸品などを紹介するサイトであれば、お店やブランドのロゴをセットする使い方も可能です。

できること・仕様
  • 見出し上部のアクセントは未設定でもOK。
  • 該当する見出しに一括反映される。

ラージバナーと視差効果

ラージバナーと視差効果

トップページでいう上記箇所が、ラージバナーです。画面幅サイズで大きなバナーを表示できます。

見出しやリンク先を登録できるほか、お好みで次のような視差効果をつけていただけます。

スクロールしても画像が固定されていることがわかります。デモサイトでは「遅延スクロールする」タイプの視差効果を設定しています。いずれかをお好みで設定できる仕様です。

また、以下のようなレイアウトタイプに変更することも可能です。

シンプルなレイアウトのラージバナー

シンプルにテキストとボタンを表示するタイプです。

できること・仕様
  • ラージバナーのタイプは2種類から選べる。
  • 見出しとリンク先を登録可。
  • 視差効果を使わない選択肢もある。
  • ラージバナーごとに視差効果を設定可。

コンテンツ管理

ZENでは、通常の投稿機能とは別に3つのコンテンツ管理機能が搭載されています。

お知らせ(カスタム投稿)

カスタム投稿「お知らせ」

お寺からのお知らせやニュースを伝えるためのカスタム投稿タイプです。アイキャッチ無しでも使えるのが特徴ですが、綺麗なアイキャッチをセットすれば、次のように美しくレイアウトされます。

画像ありのカスタム投稿「お知らせ」

お寺からの季節の挨拶や、行事案内などを発信する際に使う機能です。

>> お知らせのデモページを見る

できること・仕様
  • アイキャッチ無しでも使える。
  • アイキャッチの有無で一覧ページのデザインが変わる。
  • デモサイトでは1カラムだが、投稿記事のように2カラムに変更も可能。
  • 2カラム時のサイドバーは左右入れ替えも可能。

季節の行事(カスタム投稿)

カスタム投稿「季節の行事」

上記のような1カラムの専用ページをつくる機能です。

アイキャッチがグレーの背景の中に表示される仕様で、本文とは別にアイキャッチ上部(または下部)にテキストを表示できます。見出し上部のアクセントを登録している場合、タイトル上部に反映されます。

本文内は、WordPressのエディタを使って自由に作成できますので、テーブル(表)を使ってスケジュールを設置したり、行事の写真を掲載しておくような使い方が可能です。

お寺のイベントや行事のアーカイブとしてご利用いただく想定です。基本は、春夏秋冬で行事を整理しておくだけでも綺麗にレイアウトされます。

>> 季節の行事のデモページを見る

できること・仕様
  • アイキャッチ上部(または下部)の説明文は未入力でもOK。
  • 一覧ページは1カラムで縦に並ぶが、新しい順 or 古い順で並び替え可能。
  • 1ページに表示する記事数を指定可能。

固定ページ

ZENの固定ページ

ZENでは、いろんなレイアウトの固定ページを作成できます。上記のような1カラムのページのほか、次のような2カラムのページもつくれます。

2カラムの固定ページ

「導線が少ない、デザインやコンバージョン重視のページ」or 「導線が多い利便性の高いページ」

をお好みで作成可能です。

サイトの下層となるアバウトページや、ランディングページ(LP)などのデモページをつくっているので、参考にご覧ください。本文内はWordPressのエディタを使って自由に作成できます。

アバウトページ サイドバー無し、デザイン重視のページ
アクセスページ サイドバー無し、デザイン重視のページ
スタートガイド サイドバー有り、ウィジェットを設置した利便性重視のページ
LPサンプル1
LPサンプル2
LPサンプル3
サイドバー、ヘッダーやフッターも非表示のコンバージョン重視のページ。ヘッダー画像のサイズを変更したり、本文幅も自由に変更可能。
できること・仕様
  • ヘッダーの縦書き・横書きは変更可。
  • 作成ページ数に制限無し。
  • サイドバーの有無や配置変更(左右)。
  • LPテンプレートを使えば、ヘッダーやフッター、コンテンツ幅も変更可。
  • 1カラムの固定ページには、ラージバナーも設置可。

ナビゲーション

お寺のサイトに訪れた方をナビゲーションする機能をご紹介します。柔軟なカスタマイズが可能です。

ヘッダーメニュー

ZENのヘッダーメニュー

サイトの全ページ表示されるヘッダーメニュー。縦書き・横書きは1クリックで変更できます。

ZENのヘッダーメニュー(横書き)

横書きのヘッダーメニューのサンプルとして、英語版サイトをご覧いただけます。

できること・仕様
  • 縦書き・横書きは1クリックで変更可。
  • メニューの上部固定表示のON/OFFが可(デモサイトでは上部固定中)。
  • 上部固定表示時は、横書きに変更される。
  • 横書きタイプでは、検索アイコンや言語ボタンを表示可(英語版サイト参照)。

メガメニュー

記事カルーセル

メニューには、任意で上記のようなメガメニューを登録できます。デモサイトの「取扱説明書」箇所にホバーすると表示されます。任意の投稿記事を表示できます(新着順、ランダム、ID指定)。

バナーリスト

「バナーリスト」は、もう一つのタイプのメガメニューです。こちらは、画像、タイトル、URLを登録して任意の数だけ登録できます。5つ目以降は左下に表示される仕様です。

デモサイトでは季節の行事ページにリンクしますが、リンク先はご自身で自由に設定していただけます。

できること・仕様
  • 記事カルーセルは、記事のタイプを指定可能(すべての記事、カテゴリー、ID指定)。
  • 並び順は新着、ランダムから選択可能。
  • バナーリストのアイテムに上限無し。
  • 登録したバナーの並び替えや非表示も可能。

ニュースティッカー

ニュースティッカー

トップページヘッダー、右下に表示されるニュースティッカー。こちらもユーザーをナビゲーションする要素です。投稿記事かカスタム投稿「お知らせ」で書いた記事へリンクできます。

新着順で表示されるので、記事を更新すれば自動的に最新記事へのリンクとなる仕組みです。

できること・仕様
  • 投稿 or カスタム投稿「お知らせ」の記事を表示。
  • 表示される順番は新着順。
  • ニュースティッカー自体を非表示にもできる。

サイドボタン

サイドボタン

サイト内の全ページに表示されるサイドボタンです。ページをスクロールすると、横からスライドインしてくる仕様で、任意の数だけ登録できます。

お寺や施設のサイトであれば、アクセス情報やお問い合わせ先のリンクを登録しておくと便利です。

アイコンは、テーマ内に複数用意されていますので、すぐお使いいただけます。

サイドボタンで使えるアイコン

ご自身でオリジナル画像をアップして登録することも可能です。

できること・仕様
  • サイドボタンは任意の数だけ登録可能。
  • 登録後の並び替え、個別非表示も可能。
  • あらかじめ汎用的なアイコンが用意されている。
  • 自前のアイコン画像もアップして登録できる。
  • 登録したサイドボタンは全ページに表示される。

フッター

ZENのフッター

フッターにもメニュー項目を登録できます。縦書き・横書きも変更可能です。

メニュー項目の下部には、ロゴを表示するエリアが設けてあります。お寺や施設のブランディングにお使いください。所在地や電話番号もフッターに登録できます。

また、スマホでは専用のフッターを表示できます。

ZENのスマホ用固定フッターバー

テーマ内に用意されているアイコンを選び、テキストとリンク先を登録する仕組みです。スマホユーザー向けに、お問い合わせ先やお寺へのアクセス情報をナビゲーションする機能となっています。

設定方法は下記記事で公開中です。ご希望の使い方が可能か、ぜひ確認してみてください。

できること・仕様
  • PCフッターは縦書き・横書きを変更可能。
  • フッターのロゴは非表示でも使える。
  • SNSアイコンを表示可能。
  • コピーライトを入力可能。
  • スマホ専用フッターを設定できる。

日本の伝統を活かしたサイトをZENで

お寺・神社・日本料理店など、日本の伝統を大切にするサイトがつくれるWordPressテーマ「ZEN」の機能概要をご紹介しました。

縦書きデザインや見出しのアクセントなどを活用して、格式ある和の雰囲気を表現できます。

サイドボタン・メガメニュー・スマホ専用フッターによるナビゲーションも活かして、デザイン・実用面で優れた和風サイトを構築してみてください。

WordPressテーマ「ZEN」