Cafe Mitake

【ページURL】

CafeMitake サイトはこちら

【GitHub】

CafeMitake GitHubはこちら

---

プロジェクト概要

奥多摩に向かう道中の「御岳」にお店があると仮定し制作した架空のカフェサイトです。

お店のコンセプト

都会を離れ自然の中でくつろげる癒しのカフェテラス空間

家族経営でシェフとして10年以上経験を積んだオーナーと彼の友人が作る料理と季節限定のスイーツが特徴のお店です。

お店の概要詳細はこちら

プロジェクトの目的

• 安定した集客を実現　インスタグラムやブログの更新による情報発信
• 自社メニューやサービスの認知度向上
• 御岳周辺の魅力発信と地域の定番スポットとしての定着

ペルソナ

32歳パートの主婦（夫と3歳の娘）

子育てと両立する日頃の生活でたまには1人で息抜きがしたい

ツーリングが趣味の29歳男性

ツーリングで「奥多摩　ツーリング」で検索し、おすすめのスポットで紹介されたお店で目覚ましにコーヒーを飲みたい

カフェ巡りが趣味の20歳女子大学生

カフェ巡りをしながら本を読むのが趣味で、自然の中でくつろげるカフェに行きたい

作成したペルソナシート（注. ChatGPTで作成した架空の人物です）

作成したペルソナを元にカスタマージャーニーマップも作成しました。

カスタマージャーニーマップ

制作概要

デザインの意図

TOPページ

メインビジュアルには動画を使用し、　”御岳渓谷にある季節のスイーツが売りのカフェ”　というコンセプトに寄った動画を使用することで、自然やカフェの雰囲気を視覚的に伝えることができます。

メインビジュアルの直下には、今季に提供しているスイーツの一覧を配置しています。

ビジュアルの直下によりユーザーの目に直接触れることができ、スイーツのメニューがより目立つようになると考えました。春から冬まで季節に合わせて表示されるメニュー内容とその背景色が季節の色に変わる仕様を想定しています。

Blog / Instagramによる情報発信

プロジェクトの目的でもある

• 安定した集客を実現

自社メニューやサービスの認知度向上

御岳周辺の魅力発信と地域の定番スポットとしての定着

こちらのニーズを全て満たす手段として、インスタやブログを置くことは、顧客との関係強化や集客、ブランディングなどさまざまな面で有益であると考えました。

SNSを通じて口コミやシェアが広がり、多くの人々にカフェの存在を知ってもらうことができ、ブログにはSEO対策を施すことで、検索エンジンからのアクセスを増やすことで集客に繋がります。

お店のメニュー紹介

タブボタンによるメニュー内容の切り替えを実装しました。

ページのスクロール量を減らし異なるカテゴリのメニューを視覚的に分離し情報を整理することができます。

地域の観光情報を発信

地域性の強調

地域の魅力を強調し、観光客の興味を引きつけることで、サイトによる地域との結びつきを強化し訪問者の関心を引くことができると考えました。今回のサイトで御岳渓谷とパワースポットで知られる御岳山のハイキングスポットを紹介しています。

観光客の誘致

インスタやブログでの情報発信を含めた情報により、お店への集客と食事スポットとして観光客をお店に集客することもできます。

カラーパレット

 

御岳の自然に調和したカラーを特徴としています。

ベースカラーに穏やかなメインカラーを組み合わせ、自然の中でリラックスできる雰囲気を表しました。

使用フォント

見出しやリンクのフォントには多言語に対応した「Source Serif」を使用しています。

英文フォントと日本語での明朝体の使い分けにより、洋風と自然の中の穏やかさを表現しています。

WordPress化

ブログの更新機能とプラグインによるインスタの埋め込み機能、メニュー登録機能を持たせるためPHP組み込みによるWordPress実装を行いました。

メニュー登録プラグイン

Restaurant Menu and Food Ordering

料理メニューの登録に特化したプラグインです。

セクションごとにメニューのカテゴリ分けができ、ショートコードをHTMLに埋め込むことで実装できます。

スイーツメニューでは春夏秋冬で子カテゴリ分けをしていたため、季節ごとにメニューを作成することになりました。

サイトに埋め込むと画像のようにデフォルトで横並びの配置になるため、CSSで見た目をデザインに合わせて調整しました。

制作を通して

ポートフォリオ以来のWordPressの組み込み作業でしたが、今回は以前の制作時の経験から情報やパーツの整理などを心がけテーマを使用した際の操作性を第一に考え構築しました。

• カスタムヘッダーからのビデオと画像の登録機能
• fuctions.phpで実装できるものは実装しプラグインの使用を減らす（メニュー登録とパンくずにプラグインを使用）
• グローバルメニューは複雑にせず、シンプルでWordPressのメニュー登録で簡単に内容を実装できる構造で制作（ポートフォリオの際はスマホ時にメニューが変わることで余計なメニュー登録が多くありました。）