# 株式会社ハーツ｜コーポレートのWebデザイン参考

> 写真の下に、信州の山並みがそのまま敷いてある。長野県中野市のきのこ生産・流通会社、株式会社ハーツのコーポレートサイトは、重なる緑の山のシルエットでセクションを区切り、現場写真とレシピで産地の空気を食卓まで運んでいる。

- URL: https://hearts.co.jp/
- 解説ページ: https://katapick.com/sites/hearts-inc
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: きのこ生産・流通
- テイスト: 写真主体、縦書き、角丸、固定ナビ、グリッド、イラスト
- 公開・リニューアル: 2025-11 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 26 時間）

## 編集部のひとこと（Bruno）
ヘッダーに「オンラインショップ」は常設しつつ、トップの流れは産地→あいさつ→商品→会社→レシピ。売り込む前に、誰がどこで作ってるかを先に置く。この順番がうまいんだよね。

## デザインの見どころ
- FVは現場写真を斜めの短冊で並べる。作業する人ときのこを交互に見せ、作り手の顔から伝える
- 見出しは縦書きに英字を添えて左に揃える。長い縦スクロールでも、章の区切りが目で追える
- レシピ一覧に「実はHPで一番人気のコンテンツです！」の吹き出し。企業サイトの奥に家庭の入口を置く

## 配色
- #316859 Forest Green（セクション背景 / 山並み）
- #233b2e Deep Pine（フッター / 山の影）
- #f2fbee Mint Cream（セクション背景）
- #45a472 Leaf Green（ボタン / アクセント）
- #ffffff White（背景 / ヘッダー）
- #333333 Charcoal（テキスト）

## フォント
- 見出し・ナビ: Zen Maru Gothic（代替: Zen Maru Gothic）
- 本文: Noto Sans JP（代替: Noto Sans JP）

## よくある質問
### ハーツのサイトで使われているフォントは？
見出しとナビに Zen Maru Gothic、本文に Noto Sans JP が使われています。どちらも Google Fonts で無料で利用できます。

### 山並みのシルエットでセクションを区切るにはどうする？
濃さの違う緑で山の形のSVGを数枚作り、position: absolute で少しずつずらして重ねます。セクションの上端に置けば、写真の下から山が立ち上がるような区切りになります。

### どんな業種の参考になる？
農産物の生産者、食品メーカー、地域の特産品を扱う企業など、産地の空気と作り手の顔を伝えたいコーポレートサイトの参考になります。

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