サイト制作
制作サンプル
2026年2月
オーガニックカフェ コーポレートサイト
こだわりのオーガニック食材を使ったカフェのブランドサイト。温かみのあるデザインとメニュー管理機能を実装。
Astro Tailwind CSS MDX Cloudflare Pages
デモを見る
https://cleverlab.lol/demos/cafe-website/
オーガニック食材にこだわるカフェのブランドサイトの制作サンプルです。
「Farm to Table(農場から食卓へ)」というコンセプトを軸に、お店の世界観を伝えるビジュアル重視のサイトを制作しました。
デザインのポイント
モスグリーン・ベージュ・テラコッタを基調にした、自然の温もりを感じるカラーパレットです。
見出しには明朝体、本文にはゴシック体を使い分け、上品さと読みやすさを両立しました。
トップページでは「農園での収穫 → キッチンでの調理 → テーブルに届く料理」を写真で時系列に並べ、
訪れた方がお店のこだわりを自然に感じ取れる構成にしています。
工夫した点
01
写真が主役のレイアウト
料理や食材の写真を大きく見せることで「おいしそう」「行ってみたい」という気持ちを引き出します
02
タブ切り替えメニュー
ランチ・ドリンク・スイーツをタブで切り替え表示。アレルギー情報もアイコンで分かりやすく掲載
03
オーナー自身で更新できる仕組み
メニュー情報はテキストファイルで管理。季節の変更も専門知識なしで対応可能
04
生産者の顔が見える
食材を届けてくれる農園や養鶏場を紹介し、「安心して食べられる」という信頼感を演出
05
地域検索への対応
「地域名 + カフェ」でGoogle検索した際に店舗情報が表示されるよう、構造化データを設置