自主制作

白井珈琲店

街に根ざした自家焙煎コーヒー店の「店主のこだわりと人柄」を伝え、ECで豆を買いたくなるサイト。静的HTMLで作ったあと、WordPressのオリジナルテーマとして作り直し、WooCommerceでショップ機能を足しました。

ターゲット近郊の街に住む30代後半〜60代。落ち着いた雰囲気を好み、街の雰囲気そのものを味わいたい人

サイトの目的雰囲気とこだわりを知ってファンになってもらい、オンラインの豆販売につなげる

担当企画・設計・デザイン・コーディング・WordPress化（すべて1人）

技術HTML / CSS / JavaScript、WordPress（自作テーマ・カスタム投稿）、WooCommerce

注記職業訓練中に制作し、現在も公開しています

デザインの考え方

軸は「落ち着いた × アットホーム」。トーン・配色・余白はすべてここを基準に決めました
配色：深緑（背景）× ブラウン（内容）× クリーム（文字）のダークテーマ。緑と茶が補色関係になるよう意図して選択
フォント：ロゴ＝Yuji Syuku（筆文字）／コピー＝Shippori Mincho B1／見出し＝Noto Serif JP／本文＝Noto Sans JP
余白：8の倍数で統一（要素間16・24 ／まとまり32・40 ／セクション間64・80）
表記：ナビは英語、各セクションは「小さな英語ラベル＋大きな日本語見出し」。年齢層が高めなので文字は大きく、導線は一本道に

ナビは英語のまま。和の屋号 × 英語ナビのギャップで洗練を出す狙いです。代わりにセクションの日本語見出しを大きくして読みやすさを確保しています
静的版では豆を「SHOP」ではなく「BEANS」と呼びました。まだ買えない段階で買える期待を持たせないためです。WordPress版で実際に買えるSHOPを別に追加しました
「引き算の洗練」を基準に取捨選択：枠の角丸統一・画像を幅いっぱいは採用／あしらいの追加・枝やリボン素材は見送り
自分で作ったこのサイトを公開後に計測して、17MB から 2.4MBまで軽量化しました（画像の出し分けとWebP化）

直した過程と数値は事例の記録 case 03 に書いています。

HOME（ファーストビュー）／ CONCEPT（店主の3つのこだわり）／ BEANS（こだわりの豆7種）／ ACCESS ／ SHOP（オンラインショップ）