# 那須 扇屋｜ECのWebデザイン参考

> 菓子の写真を、屋号どおり扇の形に切り抜いてる。那須の献上菓舗・扇屋の公式通販サイトは、扇形のフレームと縦組みの明朝ナビ、グレーの余白で、ECを贈答品の売り場らしく静かに仕立てている。

- URL: https://www.nasu-ougiya.com/
- 解説ページ: https://katapick.com/sites/nasu-ougiya
- カテゴリ: EC / 地域: 国内（JP）/ 業種: 和洋菓子（献上菓舗）
- テイスト: 縦書き、セリフ体、写真主体、余白、ミニマル
- 公開・リニューアル: 2026-06 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Luna）
コピーライトまで縦に寝かせて左下に置く徹底ぶり。日付だけ Oswald の細い数字にして、明朝の中で“情報の顔”を分けてるのも抜け目ない。……いいね！！

## デザインの見どころ
- 写真を扇形に切り抜く。屋号の「扇」がそのまま額縁になり、ロゴを探さなくても店がわかる
- 縦組みのナビは、商品の棚と店の読み物を縦線1本で分ける。売り場と店の話が混ざらない
- カートや検索は左端の細い線アイコンに寄せる。買う機能を控えめにし、贈り物を選ぶ気分を守る

## 配色
- #eeeeee Mist Gray（背景）
- #ffffff Paper White（カード / セクション背景）
- #000000 Sumi Black（テキスト / アイコン）
- #d6d6d6 Silver Gray（罫線 / サブ背景）
- #e8dccb Wasanbon Cream（写真の主調（菓子の色））

## フォント
- 見出し・ナビ・本文: Zen Old Mincho（代替: Zen Old Mincho）
- 補足テキスト: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 日付などの数字: Oswald（代替: Oswald）

## よくある質問
### 扇屋の通販サイトで使われているフォントは？
見出し・ナビ・本文に Zen Old Mincho、補足テキストに Zen Kaku Gothic New、日付の数字に Oswald が使われています。いずれも Google Fonts で無料で利用できます。

### 写真を扇形に切り抜くにはどうする？
扇形のパスを SVG の clipPath として定義し、clipPathUnits="objectBoundingBox" で画像サイズに追従させるのが手軽です。CSS の clip-path: path() や mask-image に SVG を指定する方法もあります。

### どんな業種の参考になる？
和菓子店や老舗の食品ブランド、贈答品を扱うオンラインストアなど、格式や落ち着きを保ちながらECとして売りたいサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/nasu-ougiya からダウンロードできます。
出典: Katapick（https://katapick.com）