CorporateJapanPicked 2026.09.26

株式会社ハーツ

コーポレートのWebデザイン参考 — きのこ生産・流通

出典: hearts.co.jp

Editor's note — 編集部の視点

写真の下に、信州の山並みがそのまま敷いてある。

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

BrunoStructure & IA

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

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

Color

株式会社ハーツの配色

Typography

使用フォントと無料の代替

見出し・ナビ

Aa あア

使用: Zen Maru Gothic
代替: Zen Maru Gothic

本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型30px · 1.5 · 500
小見出しKatapick 型120px · 1 · 400
本文The quick brown fox — 参考を型にする15px · 2.1 · 400
ボタンKatapick 型16px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
白いカプセル型の固定バーに、ロゴ、英字ラベル付きの5項目のナビ、オンラインショップ・お問い合わせ・Instagram。右上に丸いキャラクターのアイコン。
02
ヒーロー
斜めの短冊で区切った現場写真（作業する人、ぶなしめじ、工場）の下に、重なる緑の山並みのシルエットと「長野信州から『おいしい』を日本中の食卓へ」。
03
ハーツきのこ便り
緑の地に縦書きの見出しと、写真付きのお知らせ一覧、公式Instagramへの丸いボタン。
04
きのこの写真帯・ごあいさつ
白背景のきのこの写真を横一列に並べ、長野県の形のシルエットを添えたあいさつ文、朝日の写真、代表の写真。
05
商品紹介
ホワイティ・ほぐしめじ・お鍋用きのこセットのカードと、オリジナル調味料の新発売バナー。
06
ハーツを知る
大きな円の中に理念の文章を置き、周囲に現場写真ときのこを散らす。山並みを挟んで緑の地に「社名の由来」HEARTSの頭字語と、JGAP・ASIAGAP・長野県SDGs推進企業の紹介。
07
会社概要
社員の集合写真と「ハートで食をクリエイトする」のコピー、会社概要へのボタン。
08
きのこレシピ・フッター
淡いミントの地にレシピカードを4列のグリッドで並べ、深緑のフッターに縦書きのナビ、認証マーク、Back to topボタン。

Interaction

アニメーション・インタラクション

STUDIO 製。スクロールに合わせたフェードインで要素が現れる
スタックに Lottie があり、アイコンやイラストの小さな動きに使われていると思われる
FVの写真は clip-path の斜めの区切りで並び、横にスライドして切り替わると思われる
ヘッダーはカプセル型で固定表示

スクロールのコマ撮り300–3000ms

検出された技術:STUDIOWordPressNuxtGoogle FontsLottie

Reproduce

再現するときのポイント

01山並みは濃淡の違う緑のSVGシルエットを3〜4層重ね、写真とセクションの境目に敷く
02見出しは writing-mode: vertical-rl の縦書きに小さな英字を添え、左端に揃える
03緑は #316859 を主役に、明るい #45a472 はボタンだけに使う
04商品写真は白背景の切り抜きで統一し、並べたときのトーンをそろえる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

hearts-inc.katapick.md

1---
2title: "株式会社ハーツ 再現用デザイン仕様書"
3source: https://hearts.co.jp/
4katapick: https://katapick.com/sites/hearts-inc
5category: コーポレート
6region: 国内 (JP)
7tags: [写真主体, 縦書き, 角丸, 固定ナビ, グリッド, イラスト]
8launched: 2025-11
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# 株式会社ハーツ — 再現用デザイン仕様書
17 
18> 写真の下に、信州の山並みがそのまま敷いてある。長野県中野市のきのこ生産・流通会社、株式会社ハーツのコーポレートサイトは、重なる緑の山のシルエットでセクションを区切り、現場写真とレシピで産地の空気を食卓まで運んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22