【日本語WordPressテーマ】Tree（TCD081）

カフェやレストランといった飲食店の運営をサポートするTCD81番目のおしゃれなWordPressテーマがTreeです。

Treeの方向性

Uber Eatsウーバーイーツや出前館といった外部のデリバリーサービスを利用しているお店が多くなってきましたが、そういった外部サイトでの店舗情報欄は”どの店舗も等しく既定のレイアウトでメニューや商品画像が紹介”されます。

これは消費者側からすれば見やすさという点ではメリットでもあるんでしょうけど、店舗側にしてみれば店独自の強みや他店との差別化をアピールしにくいというデメリットにもなりえます。

このデメリットを解消すべく、外部のサービスに任せっきりではなく独自サイトでも店の強みをアピールして、他店とは一味も二味も違うというイメージを消費者にもってもらうのがTreeの方向性とも言えます。

[themeoption]

サイトデザイン

ヘッダーコンテンツ

ヘッダー周りは2段構えのグローバルメニューとフル画面幅のヘッダーエリアが特長です。

※コチラ↓はデモサイトのキャプチャ画面

フル画面の背景には静止画、MP4動画、YouTube動画が選択可能。

静止画の場合はスライダー形式で最大3枚まで設定できます。

さらにそれぞれの背景上にはもう1枚静止画かテキストを重ねてセットできます。

（上記赤枠部）

表示位置も左右 or 中央に変更可能。

二段式グローバルメニュー

Treeのグローバルメニューは中央にはロゴ、その左右にメニューが二段階で展開するちょっと特殊なデザイン。

これにより多くの情報をヘッダー上部に表示可能で、必要なメニューはだいたいここに格納できます。

設定も簡単でメニュー画面から左右に入れる項目を選ぶだけ。

また仮に左に4つ右に3つのメニュー数にしても自動的に適切な間隔で表示される仕様です。

スタイリッシュなドロワーメニュー

通常ドロワー（ハンバーガー）メニューはスマホ（モバイル）のみに搭載されるものですが、TreeのドロワーメニューはPCでも表示可能な仕様になってます。

（※前の画像右端の三本線アイコン）

このドロワーメニューが開かれると画面全体が薄く覆おおわれてメニューが縦一列で表示されるという仕様。

（スマホでも全画面できれいに表示されます）

視認性のよさもあいまってその後のページ遷移もスムーズです。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

通常のグローバルメニューにプラスαで項目をセットすることもできるんだって。

[/bln_left]

オリジナル機能

アピール度高めのニュースティッカー機能

Treeにはニュースティッカー表示機能が搭載されてます。

（先の二段式グローバルメニュー画像・左上部）

デモサイトではお知らせ記事をランダムに表示させてますがブログ記事も表示可能。

表示順も日付順 or ランダムから選択できます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

ニュースティッカーは常時流れているのでアピール度は高めですね。

お店の最新情報を伝えてもいいしキャッチフレーズを表示させてもいいんじゃないでしょうか。

[/bln_left]

トップページの各コンテンツ詳細

Treeのトップページには5つのデザイン済みコンテンツエリアが用意されてます。

• デザインコンテンツ
• 画像スライダー
• 記事カルーセル
• メッセージ
• フリースペース

いずれのコンテンツも多くの箇所にオシャレなレイアウトでテキストを表示できる仕様でメッセージでのアピール力は充分あります。

コンテンツビルダーを使って予め用意されてる入力箇所に当てはめていくだけでトップページは完成します。

デザインコンテンツ

デザインコンテンツは大きめの画像とテキストを重ねて表示（※PC画面）されます。

斜めのレイアウトが特長で、サイドにはワンポイント的な見出しも表示可。

この見出しは縦書きの見出しと小見出しで表示されます。

デモサイトのように欧文と和文の混合体だとオシャレな演出感も持たせられますね。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

トップページ以外にもサイト全体でコンテンツのサイド部分に見出しテキストを表示させることができるよ。

[/bln_left]

画像スライダー

スライダー形式の画像表示機能もあります。

画像スライダーは最大5枚までセット可能（リンク設定も可）。

記事カルーセル

お知らせ記事もしくはブログ記事のいずれかをカルーセルスライダーで表示できます。

表示する記事の数や記事の並び順（日付順・ランダム）は細かく設定可。

メッセージ

メッセージはキャッチフレーズとなるようなテキストメッセージのみを表示するコンテンツです。

表示位置は左右から選択可というだけのシンプル仕様。

（フォントサイズやカラーなどは別途設定できます）

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

さまざまな切り口のキャッチフレーズなどアクセント的に置くのがオシャレかもね。

[/bln_left]

フリースペース

HTMLを使って自由に記述できるエリアがフリースペースです。

デモサイトでは画像とテキストを並べて表示してますが他にもいろんな使い方ができそうですね。

スマホ（モバイル）用に別コンテンツ

飲食店関連のサイトは今やスマホ（モバイル）での閲覧が大半でしょう。

ゆえにスマホに特化したデザインやランディングページへの導線はかなり重要なものとなってきます。

たとえば大画面での表示が前提のPC用のコンテンツをスマホ用に見やすく変えてみたりテキストの分量を少なくしてみたりといったスマホに特化したアレンジ（最適化）ができると嬉しいですが、Treeならそれも簡単にできちゃいます。

カスタム投稿タイプ「メニュー」

カフェや飲食店のメニューをオシャレな雰囲気で表示できます

メニュー用画像は2列でワンセット。

サイドに表示するテキストやメニュー名そして値段を設定後にデザインを選択するだけであとはTreeが勝手にレイアウト表示してくれます。

メニュー表示の有無や並びの変更などもできます。

リンクコンテンツ

Treeを使ったサイト構築において店舗のブランディングはもちろん重要ですが、はやりのデリバリーへの導線も確保しておきたいところでしょう。

リンクコンテンツを使うとメニューページの雰囲気を壊すことなく、しかしながらちゃんと目立つデザインで外部のデリバリーサービスなどへのリンクを表示させることができます。

設定は簡単。

画像を一枚用意して説明文やテキストカラー、リンク先URLを登録するだけ。

外部デリバリーサービスサイトでの自社商品の表示はもちろんのこと、ご自身の店舗公式のサイトでも商品をアピールすることで他との差別化にもなります。

ブログ機能でマーケティング強化

Treeにはブログ機能も搭載されてます。

飲食店サイトの運営においてはもちろん企業姿勢やメニュー紹介、イベントのお知らせなども大事ですが、スタッフによる（ちゃんとした）ブログ記事もそれはそれでまた別角度からのお店のPRにもなります。

たとえば商品の開発記事や商品に含まれる食材の産地についてのプロ目線のこだわり記事なんかは、利用者に安心感を与えると共に新規顧客の獲得アップにも貢献します。

動画もセット可能なフッターエリア

ヘッダーはもちろんですがTreeではフッターにも（背景）動画を設置できます（静止画も可）。

店の雰囲気の良さなんかを伝えたいならちょっとした動画の方が効果的ですよね。

ほかにも各種SNSへのリンクボタンやフッターナビゲーションメニューなども設置可。

これらの（フッター）メニューは背景を妨げることのないクリアなデザインになってます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

動画は目立つのでインパクトという点では効果的だけど、あまり使いすぎると”うるさい”印象を与えてしまうので、設置個所をよく考える必要はあるよね。

[/bln_left]

店舗経営に欠かせない各種の固定ページテンプレート

お店紹介用のアバウトページやイベント・パーティーページといった飲食店サイトには（ほぼ）必須とも言えるページも、Treeなら専門知識不要で簡単に作成できます。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

通常の固定ページもヘッダー・フッターを非表示にすることでLPとして活用できます。

[/bln_left]

デザインページ1

こちらはお店についての概要ページ、いわゆるABOUTページの作成を想定したテンプレート。

店舗概要を箇条書きのように入力するだけでかっこいいABOUTページが出来上がります。

（※デモサイトの”ABOUT”ページでご覧になれます）

デザインページ2

こちらは特別なイベントごとやスペシャルコースメニューなどのご案内などを掲載するのに最適なテンプレート。

デモサイトの”PARTY”ページ真ん中あたりに表示されているリスト形式のメニュー表は最大3つまで表示可能です。

しかもリストの表示数によってレイアウトが自動調整される仕様。

表示リストはチェックボックスで切り替え可能なので、設定さえしておけば時季によって提供されるメニューが変わってもすぐに表示メニューを切り替えることができます。

リスト自体は箇条書きしたリストをそのままコピー＆ペーストするだけでOK。

とても簡単。

アクセスページ

文字通り店舗の所在地表示が主目的のテンプレートですが、地図（Google Map）・店のロゴ画像・電話番号などがワンセットになってます。

スマホからはタップで電話がかけられる仕様。

（※デモサイトの”LOCATION”ページでご覧になれます）

メガメニュー

多くの情報を一気に見せることのできるメガメニュー、Treeでは3つのタイプが用意されてます。

メガメニューAはカスタム投稿タイプ「メニュー」の種類を表示できます。

（メニューの数が4種類以上の場合は左右にスライドする仕様）

メガメニューBはブログ記事をアイキャッチ画像付きで表示します。

メガメニューCはメガメニューBと同じデザインで中身はお知らせ記事を表示できます。

これらのメガメニューはドロップダウンメニューから簡単に設定でき、メガメニューBとCの記事の表示順は日付順とランダムから選択可能です。

広告・収益化

Treeは（主として）飲食店サイトの構築用テーマではありますが、自社広告のみならず外部広告などを効率よく狙った箇所に表示させる機能も搭載してます。

Treeの広告機能

広告の主な表示箇所はブログ詳細ページとお知らせ詳細ページ。

以下の機能が搭載されており、ページ内容に合わせての運用が可能。

アイキャッチ画像の下・関連記事の上

記事詳細ページならアイキャッチ画像の下部もしくは関連記事の上部へ広告を表示できます。

ショートコード

登録した広告をショートコードとして出力する機能もあります。

記事本文内の任意の箇所に広告を表示させたい時はそのショートコードを任意の位置にコピー＆ペーストするだけで登録広告が表示されます。

モバイル用

モバイル用（広告設定）はスマホ・タブレット上だけで表示可能な広告機能で、PC用広告と分けて運用したい時などに使える機能です。

その他の主な機能

• インストール後に初期設定を一括完了させる[themeoption_kanri]
• [headerbar]（PC/スマホ）
• フォント変更機能（メイリオ、游ゴシック、游明朝）
• [footerbar_sp]
• [retina]（ヘッダー・フッター・モバイル）
• ローディング画面の設定（ロード画面の有無の選択）
• [customcss]
• [customscript]
• [sns_open]（Twitter・Facebook・Youtube・Instagram）
• [ogps]
• 日付・カテゴリ・タグ・投稿者名・コメント・SNSボタン等表示選択機能
• [hover_effect]（ズーム・スライド・フェード）
• 直感的操作の[page_builder]
• [newquicktag]（Gutenberg対応）
• 詳細ページのレイアウトタイプ（2カラム左・右、1カラム）
• microdata形式の構造化マークアップ適用済みパンくずリスト
• 404ページカスタマイズ機能
• ウィジェット「広告（ランダム表示機能）」
• ウィジェット「Googleカスタム検索」
• 関連記事表示機能
• 管理画面の多言語対応（日本語・英語）
• パスワード保護ページ機能

どんな方におススメ？

• 自社運営の飲食店サイトを構築したい

集客力アップと店のブランド構築を目指すなら自社運営のサイトは必須といってもいいでしょう。

Treeを使えば余計な手間や時間をかけずに見栄えのいい飲食店サイトが構築できそうですね。