# Tanica（株式会社タニカ）｜コーポレートのWebデザイン参考

> 家電を見せる前に、まず台所の写真から。発酵器メーカー・株式会社タニカのコーポレートサイト「Tanica」は、暮らしの写真を大きな角丸で切り抜き、縦書きのコピーを添えて、製品を生活の風景から語り始める。

- URL: https://tanica.jp/
- 解説ページ: https://katapick.com/sites/tanica
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 調理家電メーカー（発酵器・低温調理器）
- テイスト: 写真主体、ライト、角丸、縦書き、余白、固定ナビ
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 20 時間）

## 編集部のひとこと（Bruno）
FVの丸ボタン、実は「購入製品ユーザー登録」なんだよね。新しいお客さん向けの物語と、もう買った人の手続きを最初の画面に同居させてる。製品の章も家庭向けとプロ向けで分けてて、これはうまい。

## デザインの見どころ
- FVの写真は上辺だけを大きく丸める。窓越しに覗くような柔らかさが、台所の温度を運んでくる
- 2画面目は角丸写真3枚と縦書きのコピー3本を段違いに。雑誌をめくるような間合いで読ませる
- お知らせはピンク・グレー・ブルーのラベルで種類を分ける。並んだ一覧からでも、読むべき1件を拾える

## 配色
- #ffffff White（背景）
- #f2f2f2 Light Gray（製品カード背景（ドット柄の地））
- #f1ebe8 Oat Beige（お知らせセクションの角丸パネル）
- #000000 Black（テキスト / ロゴ / 矢印ボタン）
- #887f7b Warm Taupe（サブテキスト / お知らせラベル）
- #ff7b80 Coral Pink（アクセント / 製品情報ラベル）

## フォント
- 欧文・日付・ラベル（Adobe Fonts）: Neue Haas Grotesk Text（代替: Inter）
- 和文見出し・本文: ヒラギノ角ゴシック（OS標準の和文ゴシックと思われる）（代替: Noto Sans JP）

## よくある質問
### Tanicaのサイトのフォントは？
抽出データでは欧文に Adobe Fonts の Neue Haas Grotesk Text が使われています。和文はWebフォント指定が見当たらず、OS標準のゴシック体で表示されていると思われます。無料で近づけるなら Inter と Noto Sans JP の組み合わせが扱いやすいです。

### Tanicaのような角丸写真のレイアウトはどう作る？
img または親要素に大きめの border-radius と overflow: hidden を指定し、写真の大きさをばらして CSS Grid の異なるセルに配置します。縦書きのコピーは writing-mode: vertical-rl で写真の間に置きます。

### Tanicaのデザインはどんなサイトの参考になる？
調理家電や食品など、暮らしのシーンで製品を見せたいメーカーのコーポレートサイトや、家庭向けと業務向けの導線を1ページで分けたいサイトの参考になります。

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