Tanica（株式会社タニカ）

1. 01

   ヘッダー

   左にロゴ「Tanica」、中央に8項目のテキストナビ、右端に黒い角丸の「…」メニューボタン。現在地は項目下の小さな丸で示す。

2. 02

   ヒーロー

   キッチンの写真を上辺に大きな角丸をつけて全幅で配置。左下に大きな白文字のコピーとサブコピー、「タニカについてへ」の矢印リンク、右下に白線の円形ボタン「購入製品ユーザー登録」を置く。

3. 03

   コンセプト

   角丸で切り抜いた写真3枚（調理風景・料理・容器）をずらして配置し、間に縦書きの短いコピー3本を散らす。

4. 04

   お知らせ

   ベージュの角丸パネル内に、日付・色付きカテゴリラベル・タイトルの一覧を左に、読み物「Tanica Press」のカードを右に縦に並べ、ドットのページャーを添える。

5. 05

   ご家庭向け製品

   英字の小ラベル「PRODUCTS」と和文見出し、右端に説明文の2段組見出し。ドット柄の角丸カード2枚（発酵器・低温調理器／食品・食材）を並べる。

6. 06

   お客様サポート

   左に見出し、右によくある質問・取扱説明書などのリンクを罫線区切りのリストで並べ、各行末に黒い矢印アイコン。

7. 07

   プロ向け製品

   業務用の製品写真をドット柄カード2枚（ラインナップ／OEMのご相談）で見せる。

8. 08

   企業情報・採用情報

   ショールームと思われる内観写真を大きな角丸で全幅に置き、企業情報のリンクリストを続ける。採用情報は人物写真の角丸カードと短いリード文で構成。

9. 09

   フッター

   Tanica PRESS と ONLINE SHOP の2大バナー、ドット柄の地に白いパネルでサイトマップ、右下に大きなロゴを置く。

• 抽出データに Lenis と GSAP があり、慣性スクロールと要素のフェードイン等に使われていると思われる
• フルページキャプチャでヒーローのコピーと円形ボタンが二重に写っており、ヒーロー内で position: sticky により追従している可能性がある
• お知らせ右側の読み物カードは縦方向のカルーセルで、ドットのページャーで切り替わると思われる（Swiper の direction: 'vertical' で再現可能）
• 写真の角丸は border-radius を大きめ（PCで80px前後）にとり、上辺だけ丸めたヒーローとの対比をつけている

スクロールのコマ撮りLenis · 500–4000ms

検出された技術:GSAPLenisWordPressAdobe Fonts

• 01写真はすべて大きな角丸で切り抜き、四角い写真を使わないことでやわらかい印象を統一する
• 02背景は白・#f2f2f2・#f1ebe8 の3段階だけで面を分け、色はカテゴリラベルにだけ使う
• 03縦書きコピーは writing-mode: vertical-rl で短く区切り、写真の間の余白に置く
• 04見出しは「英字小ラベル＋和文見出し＋右端の説明文」の型を全セクションで繰り返す

1---
2title: "Tanica（株式会社タニカ） 再現用デザイン仕様書"
3source: https://tanica.jp/
4katapick: https://katapick.com/sites/tanica
5category: コーポレート
6region: 国内 (JP)
7tags: [写真主体, ライト, 角丸, 縦書き, 余白, 固定ナビ]
8launched: 2026-09
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# Tanica（株式会社タニカ） — 再現用デザイン仕様書
17 
18> 家電を見せる前に、まず台所の写真から。発酵器メーカー・株式会社タニカのコーポレートサイト「Tanica」は、暮らしの写真を大きな角丸で切り抜き、縦書きのコピーを添えて、製品を生活の風景から語り始める。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22