つまりちゃまめ

1. 01

   ヘッダー

   右上に「ログイン」「カート(0)」と、手描きの丸で囲んだメニューボタン。左端には縦書きで今季の出荷開始日のお知らせを置く。

2. 02

   ヒーロー

   中央に明朝の「越後妻有」と、枝豆キャラクター＋筆文字「つまりちゃまめ」のロゴ、縦書きの「茶豆専門農家 柳より」。下部に墨で描いた山並みのイラストを画面幅で敷く。

3. 03

   日本一の紹介

   緑の縦書き「おかげさまで、日本一。」と「最高金賞」の表記、水色の背景で撮った枝豆の写真、雪と太陽を描いた水彩の挿絵、縦書きの手書き風コピーと「詳しくみる」リンク。

4. 04

   産地写真

   山並みと枝豆畑を写した全幅の写真。上部に淡い緑のオーバーレイを重ね、山の稜線へ溶け込ませる。

5. 05

   商品

   「摘みたてちゃまめ速達」と「つまりちゃまめ お味噌」を、水色とベージュの背景の大きな商品写真で2カラムに並べ、タイトルとボタンを添える。

6. 06

   おいしい食べ方

   縦書きの見出しの下に「洗う」「茹でる」「冷ます」の手順を、緑の線画と縦書きの説明で段違いに配置し、朱色の手描きの擬音と枝豆キャラで締める。

7. 07

   枝豆の株の写真

   水色の背景に根付きの枝豆の株を全幅で置き、白抜きの枝豆キャラクターを何度も重ねる。

8. 08

   フッター

   写真の上に営業日カレンダー、オンラインストア店舗案内、会社情報を並べる。

• ヘッダーは固定表示。手描きの丸で囲んだアイコンでメニューを開く
• GSAP が読み込まれており、枝豆キャラクターがスクロールに合わせて姿勢を変えながら現れる演出と思われる。複数ポーズの画像を ScrollTrigger で切り替えると再現可能
• Swiper が読み込まれており、商品画像などのスライド表示に使われていると思われる
• 縦書きは writing-mode: vertical-rl で組み、日付の数字も1字ずつ縦に積んでいる

スクロールのコマ撮り500–1000ms

検出された技術:GSAPSwiperShopify

• 01ロゴ・挿絵・擬音は筆や墨で実際に描いたものをスキャンして使う。デジタルの線では同じ温度が出ない
• 02背景は #f1f0eb の生成りにし、色は墨の黒と枝豆の緑が主役。差し色は擬音の朱と写真の水色だけにする
• 03縦書きを多用し、見出しは太い明朝、本文はオールドスタイルのゴシックで組む
• 04余白を大きく取り、挿絵とテキストを段違いに散らして絵本のような間を作る

1---
2title: "つまりちゃまめ 再現用デザイン仕様書"
3source: https://tsumari-chamame.com/
4katapick: https://katapick.com/sites/tsumari-chamame
5category: EC
6region: 国内 (JP)
7tags: [手書き文字, 縦書き, イラスト, 余白, ライト]
8launched: 2025-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# つまりちゃまめ — 再現用デザイン仕様書
17 
18> ロゴも挿絵も、ぜんぶ墨の手描き。新潟・妻有の茶豆専門農家がつくる枝豆「つまりちゃまめ」のECサイトは、筆で描いた山並みと枝豆のキャラクター、縦書きの文字組で、農家の手ざわりをそのまま商品の顔にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22