業務用サイト ミツカングループについて 製造所固有記号一覧

Design System Preview — ミツカン

白地 ＋ 緑の罫。ブランド色は #093（＝ #009933）の 1 色で、CSS 上の実出現は 487 回。影は 1 か所も使わず、階層は面色と余白だけで作る。以下はすべて computed style の実測値（2026-08-24 取得）。

デザイントークンを見る
01 / Colors

Color Palette

Brand — 緑 1 色に絞る
Mizkan Green
#009933
主色。CSS では #093 と 3 桁で書かれ 487 回出現
Green Alt
#009e41
メガメニューの小見出し文字。7 回
Green Deep
#149933
グラデーション・ホバー
Yellow Green
#8cc63e
図版・イラストの差し色
Accent — オレンジは「線」、赤は「注意」だけ
CTA Orange
#ec870e
誘導ボタンの 2px 罫。20 回。面には塗らない
Alert Red
#ec0e18
「お知らせ」見出しと注意喚起の枠。14 回
PDF Red
#ec0e0e
PDF バッジの面。6 回
Text & Line
Text
#333333
body の既定色・本文・見出し
Text Nav
#212121
ヘッダー／メガメニュー。15 回
Line
#d1d1d1
区切り線
Line Pale
#c7c7c7
補助罫
Surface — 階層はこの 4 色で作る
Background
#ffffff
ページ地色
Surface Warm
#f8f8f5
特集セクション。わずかに黄緑み。25 回
Surface Gray
#f5f5f5
ユーティリティ帯・汎用。63 回で最頻
Surface Pale
#f2f2f2
画像プレースホルダ。21 回
Tint — バナー・アイコンの淡色
Mint
#ccebd6
アイコンの円形背景。#093 を薄めた面
Cream
#fff6e3
キャンペーン告知の面
Cream Green
#f7f7e9
レシピ関連ブロック
Pale Yellow
#fbf8d9
バナー内の面
Pale Blue
#e2f5f8
バナー内の面
02 / Typography — 実測値

Lato 先頭の欧文優先スタック。見出しは line-height 1.0

おすすめ特集
24px / 700 / line-height: normal ／ Lato + 和文main.main — 左に緑の縦罫
ミツカン365
24px / 700 / line-height: 24px (1.0) / letter-spacing: 0.24px (0.01em)バナー内見出し
お知らせ
18px / 700 / line-height: 18px (1.0) / color: #ec0e18Alert Heading
いつもの味　ぽん！と変えよう
18.72px / 700 / line-height: normal特集カードの見出し
ゆずの果汁にこだわった濃厚で華やかな香り
15px / 700 / line-height: 24px (1.6)2 行想定のカード見出し
おうちレシピ
21px / 700 / line-height: 21px (1.0) ／ Lato を外した和文優先nav — メガメニューの親項目
商品情報
16px / 400 / line-height: 16px (1.0) / letter-spacing: 0.8px (0.05em)nav — グローバルナビ
業務用サイト
14px / 700 / line-height: 14px (1.0) / letter-spacing: 0.7px (0.05em)nav — ユーティリティ
酢は、料理の味をととのえるだけでなく、素材のうまみを引き出します。ミツカンは 1804 年の創業以来、酢づくりの技を受け継いできました。
16px / 400 / line-height: normal / color: #333333body の既定
また食べたいが見つかる。ミツカンからのお知らせ
14px / 400 / line-height: 21px (1.5) / letter-spacing: -1.5px (-0.107em) ← 負の字間nav — メガメニューの説明文
酢 ／ 調味酢 ／ 追いがつおつゆ ／ 納豆
12px / 400 / line-height: 18px (1.5) / letter-spacing: -0.4px (-0.033em)nav — 商品カテゴリの細目
font-family（実測 3 種）
対象指定
本文・見出し（main 配下）Lato, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Hiragino Sans", sans-serif
ヘッダー・ナビ・フッター"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Hiragino Sans", sans-serif
一部の見出し"Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "Hiragino Sans", sans-serif

※ このプレビューでは和文を Google Fonts の Noto Sans JP で代替している（実サイトはヒラギノ角ゴ ProN → 游ゴシック → Noto Sans CJK JP の順で OS フォントに任せる）。
※ Lato は実サイトと同一の書体で、Google Fonts から読み込んでいる。数字・アルファベットの表示は実サイトと一致する。
※ font-feature-settings は全要素 normal。palt を使わない（商品名の括弧・中黒が詰まりすぎるため）。

03 / Recipe — 組版サンプル

おすすめレシピ

白だしで作る かんたん茶碗蒸し

プロが使う味 白だし 地鶏昆布を使えば、だしを引かなくても料亭のような一杯に。卵液の割合さえ覚えれば失敗しません。

茶碗蒸しは「卵 1 に対してだし 3」が基本の比率です。白だしは 100ml あたり大さじ 1 弱を目安に加えると、塩気がちょうどよくまとまります。

  1. 卵 2 個をときほぐし、白だし 大さじ2 ＋ 水 300ml と合わせる。
  2. ざるでこして、器に静かに注ぐ。
  3. 蒸気の上がった蒸し器で、弱火で 12〜15 分。
  4. 竹串を刺して澄んだ汁が出たら火を止める。

仕上げに三つ葉とゆずの皮をのせると、香りが立ちます。すが入ってしまうときは、火が強すぎるサインです。

おすすめレシピはこちら
04 / Buttons

主 CTA は「塗り」ではなく「オレンジの 2px 罫」

おすすめレシピはこちら
Primary
白地 / 2px solid #ec870e / radius 3px
16px / 400
Search
#009933 塗り / 1px solid #009933
radius 3px / 16px
業務用サイト
Utility
#f5f5f5 / radius 0px
14px / 400 / ls 0.05em
キャンペーン一覧
Text Link
下線 ＋ 緑の矢印
Badges — 緑の塗りはバッジにだけ使う
商品 キャンペーン他 企業 PDF green: padding 5px 10px / radius 4px / 12px・700　｜　pdf: padding 0 4px / radius 4px
Notice — 赤の 1px 罫
お知らせ
PDF 【お知らせ】品質保証体制の強化について [227kb]
05 / Cards

おすすめ特集 — 4 カラム・影なし

image
いつもの味　ぽん！と変えよう
味ぽんを使ったレシピをたくさんご紹介します
image
ゆずの果汁にこだわった濃厚で華やかな香り
一つひとつ厳選し手摘みした高知県産ゆずを 100% 使用しています
image
プロが使う味　白だし　地鶏昆布
昆布と鰹のあわせだしに、鶏がらのコクと旨み広がる白だしです
image
お酢が引き出す果実のおいしさ
すっきり、だけどちゃんと甘い。わたしだけの新果実体験
Mega Menu — 負の字間で詰めるカラム

商品カテゴリ

また食べたいが見つかる。ミツカンからのお知らせ

ブランド・スペシャルサイト

企業情報

06 / Forms

Default / Focus / Error

Default — border: 1px solid #d1d1d1 / radius 3px / padding 10px 9px / 16px
Focus — border-color: #009933
必須項目です。内容をご入力ください。
Error — border-color: #ec0e18
07 / Elevation

box-shadow を 1 か所も使わない

ミツカンのサイトは 全要素 box-shadow: none（実測）。階層は面色の切り替えと余白だけで作る。
#ffffff
地
#f8f8f5
特集セクション
#f5f5f5
ユーティリティ帯
#f2f2f2
補助ブロック
Surface
Background
#ffffff
Surface Warm
#f8f8f5
Surface Gray
#f5f5f5
Surface Pale
#f2f2f2
Mint
#ccebd6
08 / Layout

Spacing ／ Radius ／ Container

Spacing Scale
XS 4
S 6
M 10
L 20
XL 40
XXL 50
Radius — ピルは 1 つもない
値用途
0pxユーティリティボタン、本文ブロック
3px主 CTA、検索ボタン、入力欄
4px緑バッジ、PDF バッジ
6px画像リンク
10pxメガメニューの項目
Container / Grid / Breakpoints
項目値
Max Width1200px 相当 / padding-x 20px
特集カード4 カラム（gutter 約 24px）
メガメニュー3〜4 カラム
Mobile≤ 767px — 1 カラム。メガメニューはドロワー
Tablet768–1024px — カード 2 カラム
Desktop> 1024px — カード 4 カラム