Coffee Roastery

川音珈琲焙煎所

自家焙煎珈琲・カフェ　／　LP（1ページ）

自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）

本番サイトを開く
  1. 狙い

    外部ECに送客する主CVで、遠方客のオンライン豆注文の受け皿をつくる

  2. 打ち手

    「豆を買う理由」を静かに語りつつ、営業日・駐車場の可視化で来店不安も同時に解消

  3. 効果

    購入層と来店層のどちらも取りこぼさず、指名検索まで育てる設計

スクリーンショット

PC
川音珈琲焙煎所 のPC表示（ページ全体）

▼ 枠内スクロールで全体を確認できます

SP
川音珈琲焙煎所 のスマートフォン表示（ページ全体）
01Approach

工夫したポイント

  1. 01

    競合の「EC丸投げ」構造に空白を見つけて設計

    国内の小規模自家焙煎所がオンライン販売を外部EC（BASE等）に丸投げし、ブランドを語る自前サイトを持たない傾向を調査で特定。その空白に対し、LPで「豆を買う理由」を語ってからECへ送客する構成にしました

  2. 02

    営業日と駐車場を早い位置で見せて来店不安を解消

    営業日情報がSNSに閉じて新規客が来店をためらう痛点に対し、営業状況をFV直下に、駐車場は写真と台数つきでアクセス欄に明示。出発前の「今日開いてる？停められる？」に先回りして答える構成です

  3. 03

    FVの演出を入れてもLCP 2秒以内を維持

    暗幕リビール＋店名ロゴのstaggerというオープニング演出を加えつつ、暗幕だけを初回ペイント同時のCSSに分離し、GSAPは遅延ロード。Lighthouse Performance 99・LCP 1.96秒を達成しました

02Overview

制作概要

制作区分
自主制作（実案件を想定し、要件整理から公開まで実案件と同一フローで制作）
業種
自家焙煎珈琲・カフェ
サイト種別
LP（1ページ）
制作目的
外部EC（BASE等）への送客を主CVに、遠方客がオンラインで豆を注文するための受け皿をつくる。加えて営業日・駐車場の可視化で来店不安を解消し、店の世界観で指名検索・再来訪を育てる。
想定ターゲット
A：一度店やSNSで知り、自宅でも同じ豆を飲みたい／贈りたい遠方のリピーター・ギフト客（主CV層）。B：週末に朝倉方面へ出かける近隣・県内のドライブ来店客（副CV層）。「今日開いているか」「駐車できるか」を出発前に確認したい層。
訴求軸
福岡県朝倉市・川沿い・築60年の蔵という立地の固有性／店主中心の少量・自家焙煎の手仕事／営業状況を隠さず見せる誠実さ。安さで訴求せず、静謐・上質の世界観で「豆を買う理由」を伝える点が差別化軸。
納期目安
実案件想定で 1〜2週間
担当範囲
  • 競合リサーチ（自家焙煎所のEC運用・デザイン傾向）
  • 要件定義
  • 構成設計
  • コピーライティング
  • アートディレクション
  • AI画像生成（16点）
  • 実装
  • レスポンシブ対応
  • SEO基本設定
  • 計測設計（CVイベント設計）
  • 公開前検証
  • デプロイ
使用技術
  • Astro（静的）
  • GSAP 3.15 + ScrollTrigger
  • AI画像生成（16点）+ WebP最適化
  • Vercel