MARUYAMA
COFFEE
オンライン
ストア
一杯のコーヒーから始まる美味しさの世界
MARUYAMA COFFEE — SINCE 1991
PICK UP 天空の農園が届ける、世界最高峰の1杯「アグロタケシ」を2026年7月1日(水)より発売
Color Palette

地は純白 #ffffff、テキストとCTAはインクの黒 #231815。純黒 #000000 は使わない。#231815 は日本のDTPでスミベタに使われる標準値そのもので、焙煎豆の色でもある。有彩色はクリーム #fcf6e9 だけ。

Ink Black
#231815
ブランド色。テキスト・CTA 面・CTA 枠
Cream
#fcf6e9
フレーバータグの面。唯一の暖色面
Surface Warm
#f7f6f4
導線ブロックの面(わずかに暖かい白)
Roast Badge
#4e4e4e
焙煎度バッジ(ストア側)
Gray
#808080
補足・非活性
Surface Gray
#eeeeee
お知らせ一覧の行の面
Surface Gray 2
#f1f1f1
カテゴリ一覧セクションの面
Dark Panel
#262626
「ABOUT 丸山珈琲の想い」のパネル
Error
#a83b32
低彩度の赤(推奨値)
Typography
文字

和文は Noto Sans JP、欧文ラベルは Roboto。字間は letter-spacing で開かず palt で詰めて作り、欧文だけ 0.1〜0.12em に開く。行間は見出し 1.4〜1.5 → 本文 2.0 → リード文 2.5。サイズと太さが反比例するのがこのサイトの階層設計。

私たちの取り組み
Section Title · Noto Sans JP · 40px · weight 400 · lh 1.5 · ls normal
丸山珈琲のスペシャルブランド
Sub Section · Noto Sans JP · 24px · weight 400 · lh 1.5 · ls normal
丸山珈琲は美味しさで癒しと幸せを創る会社です
Lead / Tagline · Noto Sans JP · 20px · weight 400 · lh 2.5 (50px) · ls 0.05em
ABOUT US
Heading 3 (EN) · Noto Sans JP · 20px · weight 400 · lh 1.4
丸山珈琲のブレンド 深煎り
Product Title · Noto Sans JP · 15px · weight 500 · lh 2.0
本文(既定)— バイヤーが産地に足を運び、生産者と直接向き合って買い付けます。カップ・オブ・エクセレンスの審査を通じて出会った農園も少なくありません。
Body · Noto Sans JP · 14px · weight 400 · lh 2.0 (28px) · ls normal(palt で詰める)
【新商品】定番ブレンドをリキッドコーヒーのカフェオレベースに
News Title · Noto Sans JP · 14px · weight 500 · lh 2.0
Our challenge
Label (EN) · Roboto · 14px · weight 600 · ls 0.12em (1.68px)
採用情報/お問い合わせ
Utility Link · Noto Sans JP · 13px · weight 700 · lh 1.67
ホーム 商品一覧 店舗一覧 企業情報
Footer Link · Noto Sans JP · 13px · weight 500 · ls -0.025em(唯一の負の字間)
プレスリリース
Meta · Noto Sans JP · 12px · weight 400 · lh 2.0 · #808080
オンラインストア
Header Utility · Noto Sans JP · 11px · weight 600 · lh 1.3
PICK UP
Badge (EN) · Roboto · 11px · weight 700 · ls 0.1em · 白文字/#231815 面
Article
組版

産地へ、行く。

丸山珈琲は美味しさで癒しと幸せを創る会社です

1991 年、長野県軽井沢に小さな喫茶店として始まりました。いま私たちがしていることは、当時とほとんど変わりません。美味しいコーヒーを探し、焙煎し、淹れる。それだけです。

ダイレクトトレードという方法

バイヤーは年間を通じて産地を回ります。エチオピア、ケニア、コロンビア、ボリビア、パナマ。農園主と直接話し、その年のロットを自分たちの舌で選んで買い付ける。品評会を通さない取引だからこそ、生産者に正当な対価を返せます。

本文の行間は 2.0、リード文だけ 2.5 まで開きます。字間は letter-spacing ではなく palt で詰めて揃えます。私たちの取り組みを見る

Products
商品カード

画像 → 焙煎度バッジ(#4e4e4e / radius 4px)→ 商品名 15px/500 → フレーバータグ(クリーム面 / radius 0)→ 価格。カードは枠線も影も持たない。

深煎り
丸山珈琲のブレンド 深煎り
卓越した味わい
1,302円(税込 1,406円)
中煎り
アグロタケシ ゲイシャ 80g
花のような香り
5,940円(税込 6,415円)
中深煎り
エチオピア イルガチェフェ
柑橘系のフルーツの爽やかさ
1,836円(税込 1,982円)
中煎り
カフェインレス ブレンド
やわらかな口あたり
1,458円(税込 1,574円)
News
お知らせ
2026.07.31
新発売コーヒー豆のお知らせ【8/1】
2026.07.29
熊本県熊本地方を震源とする地震の影響について
2026.06.30
天空の農園が届ける、世界最高峰の1杯「アグロタケシ」を2026年7月1日(水)より発売
お知らせ一覧をみる
Buttons
ボタン

主要 CTA は border-radius 16000px の完全ピル + 3px solid #231815。面と枠が同色なので、hover で面を白に抜くと枠だけが残る。暗い面の上では矩形アウトラインに切り替える。中間の角丸(8px 等)は使わない。

オンラインストアをみる お知らせ一覧をみる 中煎り 卓越した味わい PICK UP
ABOUT
丸山珈琲の想い
お問い合わせ メールマガジンのご登録 FAXご注文用紙・豆価格表(PDF) アレルギー表示
Forms
入力

デフォルト / フォーカス / エラーの3状態。radius 4px(バッジに揃える)、罫は #dddddd、フォーカスは #231815。入力中も palt を掛けて字面を揃える。

正しい電話番号を入力してください。
送信する
Elevation
奥行き

box-shadow の実測は 0 件。前後関係は面色の 3 段(純白 → 暖白 #f7f6f4 → 黒 #262626)で作り、唯一の「厚み」は CTA の 3px の枠だけ。

Level 0
#ffffff(既定)
Surface
#f7f6f4(導線ブロック)
Panel
#262626(暗いパネル)
Ring
3px solid #231815(影の代わり)
Layout
余白

4 / 8 / 12 / 20 / 40 / 80 / 120px。コンテナは最大 1200px、読み物カラムは 720px。1セクション1メッセージで、セクション間は 80〜120px 空ける。

XS 4
S 8
M 12
L 20
XL 40
XXL 80
XXXL 120