デザインの打ち合わせのとき、洋菓子店のオーナーから見せてもらった写真がある。
クリーム色の断面が美しいロールケーキが、白い皿の上に置かれていた。余白が多く、落ち着いていた。飾り気がなく、でも上品だった。
「この写真と同じ印象のUIを作ろう」と思った。
ブランドの色を決める
洋菓子店のカラーパレットは、商品から直接取った。
米粉ロールケーキの断面の色がクリームホワイト（#FDFAF5）。焦げた生地の縁の色がキャラメル（#C4956A）。ケーキの帯に巻くリボンを想像してゴールド（#B8960C）。テキストはダークブラウン（#3A2B1A）。
プリント系の食品ブランドがよく使う「白と黒とゴールド」の組み合わせは、高級感と読みやすさのバランスが取れている。洋菓子店の素材へのこだわり（地元産ヒノヒカリの米粉・平飼い鶏の卵）には、このパレットが合う。
これらはCSSカスタムプロパティで一元管理した。変更が生じたとき、1か所を直せば全体に反映する。
Cormorant Garamondを選んだ理由
フォントはGoogle FontsのCormorant Garamondを使った。
セリフ体（文字にひげのある書体）は、高品質な食品ブランドや芸術系のWebサイトで多く使われる。「丁寧に作られたもの」という印象を文字から伝えられる。
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&display=swap" rel="stylesheet">ページタイトルや商品名にCormorant Garamondを使い、本文・フォームUIには読みやすさを優先してシステムフォントを使い分けた。読む場面と操作する場面でフォントを切り替えることで、それぞれの目的に最適化される。
フォントは必要なウェイトだけを指定する。300・400・600の3種類で足りた。余分なウェイトは読み込み時間を増やすだけだ。
ボタンの設計
実行系の操作（注文する・確定する）は塗りつぶしのボタンを使う。その他の操作はゴーストボタン（枠線のみ）だ。
.btn-primary {
background-color: var(--color-gold);
color: #FDFAF5;
border: none;
padding: 14px 32px;
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.08em;
}
.btn-secondary {
background-color: transparent;
color: var(--color-gold);
border: 1.5px solid var(--color-gold);
}letter-spacing: 0.08emを入れた。文字間隔を少し広げることで、詰まった印象がなくなり、上品な余白感が出る。食品ブランドのUIで詰まった文字間隔は、ブランドイメージと合わないことが多い。
焼き菓子店のデザインと比べる
焼き菓子店は白地にダークブラウン、フォント指定なしのサンセリフ体で、機能的でシンプルだった。
洋菓子店はクリーム背景にゴールドアクセント、Cormorant Garamondで別の印象を作った。使ったコンポーネント（商品カード・スロット選択・フォーム）の構造は同じだ。CSS変数とフォントを変えただけで、別のブランドになった。
これはコードの設計の話でもある。カラー・フォント・スペーシングをカスタムプロパティで管理しておけば、「同じ構造・異なるブランド」の展開が素早くできる。次のクライアントのためのテンプレートが、洋菓子店を作ることで育った。
スマートフォンだけを想定する
洋菓子店のお客さんはLINEから注文フォームを開く。デスクトップからのアクセスは考えない。
max-width: 480pxを基準にして設計した。商品カードは縦一列。横スクロールは起こさない。フォームの入力要素は44px以上のタップターゲットを確保する。
「ロールケーキを注文する」という体験が、スマートフォンの小さな画面の中で完結する。そのためのデザインだ。
*シンプルシステム株式会社 代表 伊藤勝彦*