# Web site

Cafe Harmonie

架空のナチュラルカフェ Café Harmonie 様の公式サイトを制作しました。

“香りと調和が生まれる場所。心安らぐひとときを。” というコンセプトをウェブ上でも体感いただけるよう、
ハンドドリップの温かみと落ち着いた店内空間を感じられるデザインと導線を設計しています。

サイトを見る

ターゲット

20〜40代の働く女性・カフェ好きな男女
—— 仕事帰りや週末に “ほっと一息” を求めて来店。

オフィス街のランチ・テイクアウト需要
—— 近隣ビルに勤めるビジネスパーソン。

コーヒーや焼き菓子が好きなSNS発信層
—— Instagram でのシェアを想定し、写真映えを重視。

課題

メニュー・スタッフ紹介・お客様の声など情報が分散し、お店の魅力が伝わりにくい。

電話や DM による 予約／問い合わせ対応が営業時間を圧迫。

スマホ流入 8 割超にもかかわらず、既存 LP は PC 向けで閲覧性が低い。

目的

トップページから 「About・Menu・Staff・Voices・Blog・Contact」 の 6 主要ページへワンクリックで誘導し、知りたい情報へ即アクセス可能にする。

Menu／Contact ページに FAQ とオンライン予約フォーム を設置し、電話問い合わせを削減。

モバイルファースト設計で 回遊率と平均滞在時間を向上。

情報設計

ページ主な要素UX ポイント
Topキャッチコピー／サービス6ブロック最短2タップで目的到達
Menu写真付きメニューカード + 価格スクロール時にカテゴリー固定バー
Staffオーナー＆バリスタ紹介ストーリー性でブランド親近感
Voices★4.5 以上レビューをカード化信頼・口コミ強化
Blog季節限定メニューや焙煎コラムSEO & リピーター施策
Contact予約フォーム + FAQ問い合わせ削減

デザインプロセス

Color & Tone

ウッド × アイボリーのナチュラルカラーに、アクセントとしてローストコーヒーのブラウンを使用。

Typography

親しみやすいやや太めのサンセリフ体＋手書き風見出しで温かみを演出。

Responsive

SP→タブレット→PC の順に最適化。カード幅・余白・フォントサイズをブレークポイントごとに調整。

CMS

WordPress でメニュー＆ブログ投稿をオーナー様自身が更新できるようにカスタム投稿を実装。

使用技術・ツール

Adobe Photoshop / Canva / WordPress / Visual Studio Code

上部へスクロール