アイキャッチ画像
HOME > テーマ一覧 > TCD > 【日本語WordPressテーマ】Tree(TCD081)

【日本語Wordpressテーマ】Tree(TCD081)

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

Treeの方向性

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

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

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

購入ボタン画像

”初心者”のための用語解説

※当サイトで紹介しているテーマ内に出てくる独自(専門)用語の意味がイマイチわからないという方のために用語の解説ページを作っておきました。

以下の用語について簡単に解説してます。【五十音順】

【ABテスト・AMP・CSS非同期読み込み・CTA・ECサイト・gzip・OGP&ツイッターカード・PWA・Welcart(ウェルカート)・WooCommerce(ウーコマース)・アップセル&クロスセル・ウィジェット・ウィッシュリスト・オンラインサロン・カスタム投稿タイプ・コーポレートサイト・サイトアフィリエイト・サイト回遊率・ショートコード・スクロール追尾・スプリット仕様・ドロップシッピング・ニュースティッカー・バイラルメディア・パララックス(デザイン)・ハンバーガーメニュー・ヒーローヘッダー・ファーストビュー・ファビコン・プラットフォーム・ブランディング・フルードグリッド・ブログアフィリエイト・ポータルサイト・ポートフォリオサイト・マイクロコピー・メガメニュー・モーダルウィンドウ・ランディングページ・リッチスニペット&構造化マークアップ(JSON-LD)・レスポンシブデザイン・子テーマ】

TCDテーマの管理画面には「テーマオプション」というカスタマイズ項目が出てきます。

サイト全体のカラーを変えたりロゴを設定したり、ファビコンの設定や文章・見出しのフォント(書体)設定、フッター情報の登録、SNSボタンの設定といった通常ならとても面倒な設定が、この「テーマオプション」操作画面上で手順通りに進めるだけで完結します。

サイトデザイン

デザインの妙

Treeのヘッダーエリア画面幅をフルに利用した動画や静止画で利用者を一瞬でひきつけます。

またトップページの各コンテンツスクロールに合わせて滑らかなアニメーション(フェードイン)で表示される仕様で、各詳細ページへの導線がわかりやすく配置される機能的なレイアウトデザインになってます。

ヘッダーコンテンツ

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

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

キャプチャ画像

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

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

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

(上記赤枠部)

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

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

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

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

キャプチャ画像

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

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

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

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

(※前の画像右端の三本線アイコン)

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

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

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

キャプチャ画像

管理人

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

オリジナル機能

オリジナル機能の妙

トップページはもちろん、アーカイブページや商品詳細ページに関してもお客さんを飽きさせず印象に残るページ作りの機能がここかしこに搭載されています。

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

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

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

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

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

管理人

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

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

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

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

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

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

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

デザインコンテンツ

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

キャプチャ画像

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

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

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

管理人

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

画像スライダー

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

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

キャプチャ画像

記事カルーセル

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

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

キャプチャ画像

メッセージ

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

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

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

キャプチャ画像

管理人

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

フリースペース

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

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

キャプチャ画像

上記5点のコンテンツはすべて自由に追加したり並び変えも自在です。

スマホ(モバイル)用に別コンテンツ

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

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

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

キャプチャ画像

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

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

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

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

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

キャプチャ画像

リンクコンテンツ

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

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

設定は簡単。

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

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

キャプチャ画像

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

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

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

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

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

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

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

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

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

キャプチャ画像

管理人

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

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

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

このあとご紹介するいずれの固定ページテンプレートもあらかじめデザインは設定済み

コンテンツビルダー搭載済みなのでページ作成はサクサク進みます。

どのテンプレートもグローバルメニューやヘッダー&フッターの有無などがボタン一つで変更可能。

LP風のレイアウトに変更することもできます。

さらにはHTMLを使っての自由に入力可能なフリースペースも搭載してるのでページ制作の幅は自由自在。

管理人

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

デザインページ1

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

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

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

デザインページ2

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

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

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

キャプチャ画像

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

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

とても簡単。

キャプチャ画像

アクセスページ

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

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

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

メガメニュー

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

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

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

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

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

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

キャプチャ画像

広告・収益化

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

Treeの広告機能

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

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

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

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

ショートコード

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

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

モバイル用

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

その他の主な機能

どんな方におススメ?

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

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

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

購入ボタン画像

記事はお役にたてましたか?

記事にご興味をもっていただけましたら下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓


コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)