那須 扇屋

1. 01

   ヘッダー / ファーストビュー

   左端にメニュー・カート・アカウント・検索の線アイコンを縦に並べ、中央に明朝の縦組みナビ（御用菓子・和菓子・羊羹・洋菓子・ギフト｜扇屋について・お買い物ガイド・お知らせ）、右上に扇のマークと縦書きの「那須 扇屋」。最新のお知らせを1行置き、下半分に扇形に切り抜いた菓子の接写写真を敷く。SPでは写真が上に来る。

2. 02

   贈りものや御祝いに

   h1「贈りものや御祝いに」を掲げたギフト向けの導入セクション。SPでは包みの写真を大きく見せる。

3. 03

   お薦め

   おすすめ商品を並べるセクション。

4. 04

   定番商品

   定番の菓子を縦に長く並べる、ページで最も長い商品一覧。

5. 05

   お菓子の種類から選ぶ

   和菓子・羊羹などの種類別に商品を探す入口。

6. 06

   お知らせ

   日付とタイトルのお知らせ一覧。

7. 07

   店舗のご案内 / 扇屋について

   実店舗の案内と、店の成り立ちを紹介する読み物への導線。

8. 08

   フッター

   ナビゲーションとSNSへのリンクで締める。左下には縦書きのコピーライトが常に表示される。

• 扇形の写真は SVG の clipPath（clipPathUnits="objectBoundingBox"）か CSS の clip-path: path() で切り抜くと再現できる
• ナビとロゴは writing-mode: vertical-rl で縦に組む。商品カテゴリと読み物の間に border-left の縦線を1本挟む
• スタックに Swiper と GSAP があり、お薦め商品の横スライドや写真の切り替え・フェードに使われていると思われる
• 左端のアイコン列、右下のSNSアイコン、左下の縦書きコピーライトは固定表示で、スクロール中も画面の四隅に残る

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

検出された技術:GSAPSwiperWordPressGoogle Fonts

• 01背景は純白ではなく #eeeeee のグレーにし、白いカードとの差で面を分ける
• 02ナビとコピーは Zen Old Mincho を縦組みにし、主要カテゴリは太く大きく、読み物は小さく組んで優先度をつける
• 03写真は扇形のマスクで切り抜き、屋号のモチーフをフレームとして繰り返す
• 04アイコンは細い線画に統一し、カート・検索などEC機能を画面の端に寄せる

1---
2title: "那須 扇屋 再現用デザイン仕様書"
3source: https://www.nasu-ougiya.com/
4katapick: https://katapick.com/sites/nasu-ougiya
5category: EC
6region: 国内 (JP)
7tags: [縦書き, セリフ体, 写真主体, 余白, ミニマル]
8launched: 2026-06
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# 那須 扇屋 — 再現用デザイン仕様書
17 
18> 菓子の写真を、屋号どおり扇の形に切り抜いてる。那須の献上菓舗・扇屋の公式通販サイトは、扇形のフレームと縦組みの明朝ナビ、グレーの余白で、ECを贈答品の売り場らしく静かに仕立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22