リモートワークやテレワークというワードが世間で取り上げられるようになりました。世間では、デリバリーやテイクアウトの需要も増え、人と人が集まることを避けようという流れがあります。レストランやカフェなどの飲食店は少し前まで営業を自粛しているところがほとんどでしたね。
最近は人出が戻りつつありますが、今後また似たような脅威が訪れる可能性はないとはいえません。
この度リリースした「Tree」は、個人経営のカフェやバルでも大手に負けないクオリティでWEBサイトを構築できるテーマです。来店してくれるお客様の数が減った以上、別角度からのアプローチも必要になります。
言わずもがな、インターネットからのアプローチですね。
Uber Eatsなどの外部のデリバリーサービスを利用しているお店は多いですが、どのお店も決まったレイアウトでメニュー写真や説明を並べています。プラットフォームを利用する以上仕方ないのですが、お店独自の強みや他店と差別化できるポイントを訴求するには向いていないわけです。
そこで、オリジナルの店舗サイトを「Tree」で構築してみませんか？ということです。あなたのお店の強みを独自にアピールして、他とは一味違うイメージをもっていただきましょう。本稿でTreeの機能や、その使い方について解説していきます。
お店のイメージがガラッと変わるスタイリッシュなテーマ「Tree」
デモサイトでは、バリスタがいてオーガニックフードを提供するようなカフェをイメージして制作いたしました。ウッディな雰囲気で落ち着くカラートーンで統一しています。サイド部分各所に縦書き表示されるテキストや、斜めに配置されている画像レイアウト、クリックやホバー時の随所のアニメーションなどが先進性を感じさせるデザインです。個人でもこのクオリティのWEBサイトが簡単に手に入る時代になりました。ぜひデモサイトでそのお洒落さを体感してみてください。
訪れた瞬間から他店との違いを見せつけるヘッダーコンテンツ
Treeのヘッダーコンテンツは、過去のTCDテーマの中でも特徴的な部類に入ります。見た目のスタイリッシュさだけでなく、機能性も高いです。以下の3つの項目に分けて解説していきます。
背景コンテンツを妨げない二段式のグローバルナビメニュー
中央にお店のロゴなどを配置して両サイドに分けてメニュー項目を設定できます。設定方法はデフォルトのメニューから左右を選んで、それぞれに設定するだけですので、WordPressを使ったことのある方なら至ってセオリー通りの使い方になります。項目数はお店によってさまざまだと思いますが、左に4、右に3などとセットしても問題なくデザインされる仕様です。余分な空白はできないので安心して自在に設定いただけます。
左上に表示されているニュースティッカーには、ブログやお知らせコンテンツを表示できます。お好みでサイトのキャッチフレーズも表示可能です。上部にヘッダーを固定しておけば、アピール力は強力ですね。
続いて右側についてですが、バイリンガルサイトへ誘導する言語リンクボタン、次項で紹介するドロワーメニューの他に、メニューと別で設定できるリンクボタンを一つセットできます。デモサイトでは「DELIVERY」の部分です。便宜上、サイトの下層ページにリンクさせていますが、直接外部の配達サービスなどへもリンクいただけます。
また、各メニュー項目にはスロット式に切り替わるアニメーションで遊び心を加えました。デフォルトのメニュー設定内にサブタイトルという項目が表示されるので、そちらで任意のテキストを入力できます。フッターメニューにも同様に設定できますので、ぜひセットしてみてください。
PCでもスマホでも美しいアクションで展開するドロワーメニュー
続いての特徴は、右上のハンバーガーメニューから展開されるドロワーメニューです。実際にクリックしてその動きを体験いただけますとその気持ち良さがわかると思います。
ドロワーメニューそのものの表示はもちろん、下層ページへもスムーズなモーションで遷移する仕様です。グローバルナビメニューにプラスαで項目をセットして、導線を増やすこともできますし、ホバーする度に切り替わる背景画像は個別に設定することもできます。操作していて気持ちのいいUXでありながら、リンク先のページ内容をクリック前から伝達させる効果もあります。スマホでも美しく反映されるので、ぜひ実機でご覧になってみてください。
ヘッダーコンテンツ内に表示可能なロゴ背景コンテンツ
トップページヘッダーコンテンツの中央には、通常のテキストのキャッチフレーズの他に、ロゴ画像などをセットすることも可能です。また、Treeの独自機能としてセットした画像の背景に正方形のロゴ用の背景画像（デモサイトでいうオレンジの正方形の部分）を表示できます。
表示するかどうかは任意ですが、下層ページヘッダーで同じデザインで表示可能なので、サイト全体で整合性を図れます。また、正方形の背景色や透明度は自在に変更できて、セットする画像のサイズもプレビューを見ながらリアルタイムで確認できる仕様です。以下は実際の設定画面になります。
つまり、中央に表示するpng形式の画像さえ用意すれば、正方形の背景を合成したロゴ風のアイコンが完成するということです。デザインに合わせて正方形のロゴ画像を作る手間が省けます。サイズを気にせずpng形式のロゴに使えそうな画像をセットするだけですね。あとはテーマの機能で統一感のあるデザインに仕上がるというわけです。
印象に残るレイアウトで
豊富なメッセージを伝えることができるトップページ
Treeのトップページコンテンツは、複数の箇所でレイアウトされたメッセージを表示できることや、各コンテンツのレイアウトの美しさが特徴です。さらに、スクロールに合わせて颯爽とフェードイン表示されるアニメーションは、スタイリッシュな印象を与えます。
Tree独自のコンテンツブロックは、テキストエリアの後ろに画像を差し込んで表示する特徴的なレイアウトのデザインコンテンツ、シンプルにテキストのみをセットできるメッセージコンテンツです。それらをTree用にデザインされた画像スライダー、記事カルーセルと組み合わせてトップページを構成できます。
コンテンツのサイドエリアで、縦書きの見出しと小見出しを表示できる仕様も特徴的なデザインを構成する重要な要素の一つとなっています。デモサイトのように欧文と和文を混ぜて表示すると一気にスタイリッシュな印象を持たせることができますね。カフェやバルなどのお洒落な雰囲気にぴったりです。
全ページに表示されている縦書きの背景ストライプも印象的なデザインの一つです。ストライプの有無やその色を変更することも可能ですので、コンテンツやお店のイメージに合わせて柔軟に変更してみましょう。例えば、サイド部分の縦書き見出しを表示しない場合は、ストライプを無しにしてもいいかもしれません。いつでもワンタッチで変更可能です。
左右に表示できるメッセージコンテンツには、3行ほどのキャッチフレーズを表示しておくと効果的だと思います。何を提供しているどんな店なのか。お客さんにとって何が特別に感じられるのか。お客様やお店に対する愛があれば、さまざまな切り口のキャッチフレーズを設定して、お店のストーリーを伝えることができますね。
上下のスペースや文字サイズを変更でき、フォントのタイプも三種類から選択可能ですので、バランスを考えて美しいレイアウトで配置することが可能です。デバイスのサイズを考慮してモバイル環境では別の文言を設定するのもいいでしょう。
店舗サイトの制作が捗る
Treeに搭載された便利なページ制作機能
店舗運営をサポートするために、スタイリッシュなだけでなく、使い心地にもこだわった機能がTreeには豊富に用意されています。以下でそれぞれのページ別に紹介していきます。
カスタム投稿タイプ「メニュー」
実際に店舗に訪れて最初にお客さんが感じるのは、お店の入り口の雰囲気でしょう。WEBサイトでいうトップページです。
飲食店に訪れて次に見るのは、席について開くメニューでしょうか。
そのメニューに当たる部分をWEBサイトでも美しくスタイリッシュに作成しておくに越したことはありませんよね。しかもTreeで作ったサイトなら、効率的に注文したいメニューが見つけることができたり、外部のデリバリーサービスへアクセスを促すのも簡単です。サービスをスムーズに提供できることは、お店の印象が良くなる条件の一つですよね。
読んで字の如く、メニューページでは、店舗のメニューを掲載するのに最適なデザインページになっています。アーカイブページと詳細ページの2階層の構成で、アーカイブページのヘッダー下に表示されるメニューのボタンを押せば、該当箇所までスムーズにスクロールされる仕様です。
ここには4つまで横1列（PC）に表示できますが、それ以上メニューの種類があるという方でも2段目以降に表示されるので、ご安心ください。
操作も簡単で詳細ページとアーカイブページに表示されるものをそれぞれ設定するのみです。共通して表示される箇所もありますので、設定項目は多くはありません。誰もが簡単にスタイリッシュなメニューページを表現できるようになっています。
基本的には、詳細ページに用意されている「メニューのデータ」を複数組み合わせてページを制作します。写真を横並びで2枚並べて、メニュー表を表示している以下の部分までがワンセットです。
メニューの画像は2列ワンセットで任意の数だけ縦に追加していただけます。メニュー表の表示の有無や項目入力後の並びの変更など、自在に可能です。さらに2列ワンセットのメニュー画像ですが、ワンタッチでレイアウトを切り替える機能がページの作成を楽しませてくれます。以下のように同じ画像を使っていても雰囲気を気軽に変更することが可能です。サイドの見出しの位置も左右から選択できます。
右側の画像を下げたレイアウト
これらが複数組み合わせると印象はガラッと変わりますね。
また、外部のデリバリーサービスなどにリンクさせるには「リンクコンテンツ」が最適でしょう。メニューページの雰囲気を壊さずに、かつ、しっかりと目立たせるようにデザインされたリンクコンテンツを表示できます。画像を一枚登録して、説明文や色、リンク先のURLを登録するだけで完了です。
いきなり外部のデリバリーサービスで注文を始めるのではなく、店舗公式のサイトでアピールすることで、他店舗との差別化になると思います。ほとんどのお店が外部のサービスに任せっきりだからこそ、そこに注力することで効果が望めるでしょう。スタイリッシュなお店のサイトがあれば、アピールできるコンテンツの量や見え方のバリエーションが他店とはまったく異なるからですね。
デリバリーサービス側から公式の店舗サイトに流入してくる可能性だってもちろんあるわけです。
固定ページテンプレート「デザインページ1」
お店についての概要ページ、いわゆるABOUTページの作成を想定したテンプレートになります。項目に合わせて画像を2枚ずつ用意して、デモサイトのように店舗の概要を箇条書きのように列挙するとスマートなABOUTページがすぐに出来上がります。
店内はどのような雰囲気なのか。ドリンクへのこだわり、フードメニューへのこだわりなど。アピールしたいポイントが多い場合でも簡単にコンテンツを追加できます。左右のどちらの画像を下げて表示するかもボタン一つ切り替え可能です。基本的には左上から動き始めるユーザーの視線の動きに沿ってデザインするのが理想ですね。間にフリースペースで制作したコンテンツを追加する際などにも意識して考えてみましょう。
固定ページテンプレート「デザインページ2」
このページテンプレートは、特別なイベントごとやスペシャルなコースメニューなどを掲載するのに最適です。
画像を2枚並べて表示するコンテンツには、他のページのデザインと整合性を保つためにサイド部分にも見出しをセットできます。前述のコンテンツ同様で一番上に表示する場合は視線の動きに合わせて左側に表示するといいですね。ページ途中の部分に表示したい場合は、右側にも表示可能ですので、ページ構成に合わせて切り替えてみましょう。
背景画像の上にテキストを重ねるコンテンツでは、パーティやイベントのコンセプトを表現可能です。テーマの機能内で画像に重ねる色（オーバーレイ）も自在に調整できるので、画像編集ソフトで色彩調整をする手間を省けます。
デモページの中央あたりに表示されているリストコンテンツは、コースメニューの種類別リストなどにご活用ください。最大3つまでコースメニューのリストを表示可能ですが、リスト数はチェックボックスで切り替え可能で、数によって表示されるレイアウトが自動で変更される仕様です。時期によって提供しているコースが変わったりしても瞬時に表示するコースメニューを切り替えることができますね。
コースメニューが1つのパターン
固定ページテンプレート「アクセスページ」
アクセスページは、店舗の所在地やロケーションを掲載することを想定したページテンプレートです。店内の様子がわかる写真などをスタイリッシュにレイアウトすることで、実際に足を運んでいただける可能性を上げられるかもしれません。こういった状況だからこそ店内を模様替えしてみたりして、それらをWEBサイトでしっかりとアピールするのもアリだと思います。心配しながらも足を運びたいお客さんからすると、店内の環境が把握できると安心ですしね。
斜めにズラして画像がレイアウトされている部分は左右を逆にしたり、左右の位置を揃えて表示させることもできるので、写真の種類や数などに合わせて変更いただけます。あと、Google Mapを表示させておくのはマストですね。スマホで閲覧する人も多いので、お店までの道のりがすぐにわかるように表示しておきましょう。
豊富なページテンプレートを活用して様々なページを作成できる
ここまで紹介してきたTreeの固定ページテンプレートですが、デフォルトテンプレートを含む、すべてのテンプレートでグローバルナビメニューやフッター、背景の線を非表示にするなどの変更がボタン一つで可能です。また、各ページテンプレートにデフォルトのエディター（テキストエディター、ビジュアルエディター）で入力が可能な「フリースペース」も搭載しております。
つまり、ご自身にあったテンプレートを活用してLP（ランディングページ）風のページを簡単に制作することができます。デフォルトの「メディアを追加」やHTML、クイックタグ機能も使えるので、ページ制作の幅は自由自在です。
以下はデフォルトのテンプレートを使って制作したリクルート用のLPです。
このページは通常テキストエディターのみで作成しています。HTMLやCSSの知識がある方は、通常のエディターを活用してTreeに用意されているCSSを適用させることでデザインいただけます。他の固定ページでもフリースペースを活用してスタイルを適用したい箇所にクラスを指定すれば、スマートに組み合わせることが可能です。
例えば、地図を表示させておきたい場合は、アクセスページのテンプレートと組み合わせて活用するなど、LPに必要な要素の一部をテンプレートの機能を使って表現できるというわけですね。
スタイリッシュな飲食店サイトを
簡単に構築できるWordPressテーマ「Tree」
さまざまな業界で今後も影響が懸念されるコロナ問題ですが、ウイルスそのものの恐ろしさに加えて、人間がもつ恐怖心や不安感もさまざまな影響を助長しているように感じます。街中には人々が、以前のように楽しく食事ができる場所がもっと必要です。弊社が制作した「Tree」は、ひとつのWordPressテーマに過ぎませんが、多くの飲食店を応援できるツールであると確信しています。
洗練されたデザイン性と機能性をあっと言う間に手に入れることのできる「Tree」で、あなたのお店が持つポテンシャルを最大限に引き出してみて下さい。
