# つまりちゃまめ｜ECのWebデザイン参考

> ロゴも挿絵も、ぜんぶ墨の手描き。新潟・妻有の茶豆専門農家がつくる枝豆「つまりちゃまめ」のECサイトは、筆で描いた山並みと枝豆のキャラクター、縦書きの文字組で、農家の手ざわりをそのまま商品の顔にしている。

- URL: https://tsumari-chamame.com/
- 解説ページ: https://katapick.com/sites/tsumari-chamame
- カテゴリ: EC / 地域: 国内（JP）/ 業種: 農業・枝豆（産直EC）
- テイスト: 手書き文字、縦書き、イラスト、余白、ライト
- 公開・リニューアル: 2025-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

## 編集部のひとこと（Luna）
本文をオールドスタイルのゴシックにしたの、賢い。明朝だと墨の挿絵とケンカするし、普通のゴシックじゃ冷たすぎる。筆の線に寄り添う書体選び……いいね！！

## デザインの見どころ
- ロゴは手描きの枝豆キャラと筆文字。整った書体を捨てたぶん、つくり手の顔が先に届く
- おいしい食べ方は「洗う・茹でる・冷ます」を線画と縦書きで。説明書を絵巻のように読ませる
- キャラは章ごとに姿勢を変えて再登場し、写真の上には白抜きで現れる。長いページの道案内になる

## 配色
- #f1f0eb Snow Paper（背景）
- #000000 Sumi Black（ロゴ / テキスト / 墨の挿絵）
- #357944 Edamame Green（見出しアクセント / 食べ方の線画）
- #94c2d1 Glacier Blue（写真の背景 / フッター）
- #c0401b Persimmon（手描きの擬音（差し色））
- #ffffff Snow White（写真上の白抜きキャラ / テキスト）

## フォント
- 本文・ナビ: I-OTFゴシックオールドPro M（代替: Zen Kaku Gothic Antique）
- 縦書きの補足・キャプション: I-OTFゴシックオールドPro L（代替: Zen Kaku Gothic Antique）
- 見出し（越後妻有・洗う／茹でる／冷ます）: 凸版文久見出し明朝 StdN EB（代替: Shippori Mincho B1）

## よくある質問
### つまりちゃまめのサイトで使われているフォントは？
本文とナビに I-OTFゴシックオールドPro、見出しに凸版文久見出し明朝が使われています。無料なら Zen Kaku Gothic Antique と Shippori Mincho B1 の組み合わせが近い雰囲気です。ロゴの筆文字は手描きの画像と思われます。

### つまりちゃまめのサイトは何で作られている？
Shopify で構築されたオンラインストアで、アニメーションに GSAP、スライダーに Swiper が使われています。

### つまりちゃまめのデザインはどんな業種の参考になる？
農家の産直EC、地域の特産品や和菓子のオンラインストアなど、つくり手の人柄や土地の空気を手描きの表現で伝えたいサイトの参考になります。

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