丸亀製麺
丸亀
製麺
ここのうどんは、生きている。
打ち立て茹でたて、
夏は冷たく。
01 / COLORS

生成りの地に、紅を点で置く

面はすべて生成り系(#fbf7ef / #f2eee6)で通し、ブランドの紅は角印・価格・小さなラベルにだけ乗せる。本文色は純黒ではなく茶みのある墨。

Primary / 紅
#c81432
CSS 164 回。可視 16 要素・面 14 要素。角印・価格・強調
Text Primary / 墨
#44413c
可視 88 要素で最多。本文・ナビ・フッターの面
Text Heading
#000000
h2 / h3 と大見出しのみ(可視 15 要素)
Text Muted
#666666
注記・日付(可視 9 要素)
Background / 生成り
#fbf7ef
ページ背景。根拠 body。CSS 16 回
Surface
#f2eee6
CSS 44 回。カード・セクションの面
Surface Gray
#f2f2f2
汎用の淡いグレー(5 要素)
Surface Blue Gray
#dee5ec
言語切替の面(2 要素)
Band Gradient
#e5d9c8 → #d3bfa3
セクション見出しの帯。inset 影で掘り込む

黄 #f1cd00 と紺 #27313b を設計色として使わないこと。可視要素には出るが CSS 全文に 1 回も現れない(外部ウィジェット由来)。

太字が存在しない。書体と級数で階層をつくる

可視テキストの font-weight は全要素 400。TypeSquare から4書体を配信し、見出しは秀英初号明朝、UI は游明朝 Pr6N M、注記だけ游ゴシック Pr6N M で受ける。ゴシックは 10px のコピーライトにしか出てこない。

Hero Copy(縦組み)秀英初号明朝 / 48px / 400
lh 1.67 (80px) / ls 0.042em
打ち立て茹でたて、
夏は冷たく。
Page Title秀英初号明朝 / 48px / 400
lh 1.33 (64px) / ls 0.027em
メニュー
Section Title秀英初号明朝 / 38px / 400
lh 1.47 (56px) / ls 0.05em
うどん
Statement秀英初号明朝 / 40px / 400
lh 1.50 / ls 0.15em(最大)
北海道産小麦100%
Tagline秀英初号明朝 / 30px / 400
lh normal / ls 0.08em
ここのうどんは、生きている。
Section Heading秀英初号明朝 / 24px / 400
lh 1.50 (36px) / ls 0.05em
おすすめ・限定メニュー
Lead Wide秀英初号明朝 / 20px / 400
lh 2.30 (46px) / ls 0.06em
すべての店で、粉からつくる。
打ち立て、できたてを、そのまま。
Body秀英初号明朝 / 16px / 400
lh 2.00 (32px) / ls 0.12em
丸亀製麺は信じています。おいしいうどんは「打ち立て・茹でたて」でしか作れないと。だから全国すべての店に製麺機を置き、粉から手づくりしています。
UI Default游明朝 Pr6N M / 16px / 400
lh 1.50 (24px) / ls normal
メニュー うどん うどん弁当 天ぷら 薬味・トッピング
Nav Item(縦組み)秀英初号明朝 / 14px / 400
ls 0.10em (1.4px)
お店を探す
Caption游明朝 Pr6N M / 12px / 400
lh 1.83 (22px) / ls normal
SNS等で気軽に贈れるデジタルギフト券
Micro(唯一のゴシック)游ゴシック Pr6N M / 10px / 400
lh 2.40 (24px)
© 2026 TORIDOLL Holdings Corporation.

字間は「級数が上がるほど広げる」

既定は normal(ベタ組み。実測 600 要素)。palt は実測 0 件で、字詰めは一切しない。秀英初号明朝も游明朝 Pr6N も仮想ボディいっぱいに字面を設計した書体で、ベタ組みでちょうど良く見える。

normal(既定)
打ち立て茹でたて
0.05em(見出し 24〜38px)
打ち立て茹でたて
0.12em(本文 16px)
打ち立て茹でたて
0.15em(惹句 40px)
打ち立て茹でたて
03 / ARTICLE

本文カラムは 880px、行間は 2.0

明朝のベタ組みを読ませるため、本文は line-height: 2.0 と letter-spacing: 0.12em の組で成立している。行間を詰めるなら字間も見直すこと。

釜揚げうどんができるまで

令和8年9月13日

使っているのは、北海道産小麦と塩と水だけ。今日も店の奥で、粉から麺を打っています。

丸亀製麺の店には、必ず製麺機があります。冷凍麺を運んでくるのではなく、その日の分をその日に打つ。気温と湿度で加水率を変え、寝かせる時間を変える。だから同じレシピでも、店ごと、日ごとに手当てが要ります。

茹でたてを、そのまま

打った麺は、太い釜で一気に茹で上げます。茹で時間はうどんの太さで決まりますが、最後に見るのは時計ではなく麺そのものです。芯の白がすっと消える瞬間を見極めて、湯から上げる。

釜揚げうどんは、その茹で上がりをそのまま釜の湯ごとお出しするもの。締めない分、小麦の甘みと香りが立ちます。釜揚げうどん(並)340円。

北海道産小麦100%

麺職人という仕事

店には「麺職人」と呼ばれる認定制度があります。粉の状態を見て水を決め、生地の弾力を手で確かめ、茹で上がりを見極める。この一連を任せられる人にだけ与えられる呼び名です。

角丸 6px、影は 1px。太字にはしない

ボタンのラベルも font-weight: 400。強調は級数と余白で作る。写真に重なる操作ボタンだけ rgba(0,0,0,0.2) の半透明・角丸 2px を使う。

写真上の操作ボタンだけ游ゴシック 13px。これはブラウザ既定に近い扱いで、設計の級数表には含めない。

05 / CARDS

写真の下端を白のスクリムで地に溶かす

カードは角丸 6px、影は 0 1px 2px rgba(0,0,0,0.16) の1段だけ。写真の下 10% に白のグラデーションを重ね、写真とテキストの境目を消す。

釜揚げうどん
茹でたてをそのまま、釜の湯ごと。小麦の甘みが立ちます。
340円
ぶっかけうどん
冷たく締めた麺に、濃いめのだしを回しかけて。
390円
丸亀お子さま
まんぷくセット
打ち立てうどんに、天ぷらとおむすび。
500円

本日ご紹介する麺職人

Forms

入力欄も角丸 6px、罫は生成り地に馴染むトーン。フォーカスは墨色の枠とごく淡いリング、エラーはブランドの紅で示す。

全角でご入力ください
確認メールをお送りします
電話番号の桁数が足りません
07 / ELEVATION

浅い影1段と、掘り込む inset

影は 0 1px 2px rgba(0,0,0,0.16) の1段のみ(実測 39 要素)。モーダル用の深い影は持たない。代わりに inset を「面を沈める」表現として使う。

Level 0
none — 地の面・帯
Level 1
0 1px 2px rgba(0,0,0,0.16) — カード・ボタン(39 要素)
Inset
inset 0 3px 6px rgba(0,0,0,0.16) — セクション帯(5 要素)

1200 / 960 / 880 の三段

1440px のビューポートに対し、本文は 880px まで絞る。明朝の長文を読ませるための幅。

Container 1200px(実測 29 要素で最多)
Content 960px(26 要素)
Column 880px(19 要素)— 本文カラム

Spacing は 8 / 12 / 16 / 24 / 40 / 80px。gap は 16px(14 要素)と 24px(8 要素)が最頻、padding-top は 24px(19 要素)が最頻。