KIKUSUI蔵GARDEN かもすでみたす

1. 01

   ヘッダー

   左に円を集めたロゴ「KIKUSUI 蔵 GARDEN」、右上に「菊水」ロゴとログイン・アクセス・ご予約・黒い丸のカート、下段に蔵見学／カフェ／ショップ／体験・イベント／特別なお酒／お知らせ／発酵ってワクワクのナビ。

2. 02

   ヒーロー（敷地マップ）

   左に縦書きの「発酵って、ワクワク。」、右に角丸で切った水彩の敷地イラスト。虫眼鏡のピンと吹き出し、「蔵見学 要予約」のラベルで施設を示し、駐車場まで描き込む。

3. 03

   イベント・お知らせ

   日付バッジ付きの体験・イベントのカードを横に並べ、その下に日付・カテゴリラベル・タイトルのお知らせ一覧。

4. 04

   蔵見学

   雪の夜の蔵の写真と、縦書きの見出し「蔵見学 BREWERY TOUR」、「詳細はこちら」ボタン。

5. 05

   ステートメント

   縦書きの施設紹介文と、横組みのロゴ「KIKUSUI 蔵 GARDEN」を余白の中に置く。

6. 06

   CAFE・SHOP・LABO

   全幅の写真や角丸写真に、画面端で切れる大きな英字見出しと線画のイラスト、説明文と「詳細はこちら」を添える。LABO ではワークショップのカードをスライダーで紹介。

7. 07

   土蔵

   土蔵の内部写真と線画のイラスト、施設の説明文。

8. 08

   SPECIAL SAKE

   限定酒のボトル写真3本を横に並べた商品一覧。

9. 09

   フッター

   ロゴと営業時間・所在地、右に営業日カレンダー、最下部に「菊水」ロゴ。

• Next.js 製。イベントカードや LABO のワークショップは Swiper のスライダー
• 敷地マップは1枚の水彩イラストの上に、虫眼鏡のピンと吹き出しを絶対配置で重ねている。ピンから各施設の詳細を開く作りと思われる
• 縦書きは writing-mode: vertical-rl と Shippori Mincho の組み合わせで再現できる
• 英字見出しはコンテナの外へはみ出させ、画面端で切れるように配置している

スクロールのコマ撮り300–700ms

検出された技術:SwiperNext.js

• 01地図イラストは施設の数だけピンを置く前提で描き、ピンの座標を%で持たせて画面幅に追従させる
• 02英字の見出しは Roboto の太字を極端に大きく、和文は縦書きの明朝で静かに組む。ジャンプ率で賑やかさと落ち着きを分ける
• 03背景はほぼ白、UIは黒のボタンと角丸写真で統一し、色はイラストとイベントのオレンジに任せる
• 04ヘッダーに「ご予約」「アクセス」を常設し、見学・体験の予約へ最短で行けるようにする

1---
2title: "KIKUSUI蔵GARDEN かもすでみたす 再現用デザイン仕様書"
3source: https://kikusui-kamosudemitasu.com/
4katapick: https://katapick.com/sites/kikusui-garden
5category: ブランド
6region: 国内 (JP)
7tags: [イラスト, 縦書き, 大胆なタイポ, 写真主体, ライト]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# KIKUSUI蔵GARDEN かもすでみたす — 再現用デザイン仕様書
17 
18> トップを開くと、いきなり敷地の絵地図。酒蔵・菊水が発酵をテーマに開いた交流の場「KIKUSUI蔵GARDEN かもすでみたす」のサイトは、水彩の地図に施設の入口を埋め込み、酒蔵を“歩いて回れる庭”として見せている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22