ICHIRAN (一蘭) DESIGN.md

一蘭（https://ichiran.com/）のデザイン仕様書。 福岡発の天然とんこつラーメン専門店。「味集中カウンター」で知られる日本を代表するラーメンブランド。 Puppeteer による computed style 実測値（2026-06-10 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 和の伝統と温かみを感じさせる飲食ブランドサイト。暗色背景と写真を大胆に使い、没入感のあるビジュアルで「味集中」の世界観を表現
• 密度: フルスクリーンの写真・暗色セクションを多用するイマーシブ型。情報量は控えめでビジュアル訴求
• キーワード: 和風、温かみ、没入感、赤と茶、伝統的
• 特徴: テキスト色に #503211（焦げ茶）を使い、黒ではなく温かみのある色調で統一。CTA は pill 型（border-radius: 96px）に茶色ボーダーを組み合わせた独自スタイル。CSS Custom Properties は未使用の旧来型 CSS 設計。フルスクリーン背景画像に半透明オーバーレイを重ねるレイアウトが特徴的

2. Color Palette & Roles

Primary（ブランドカラー）

• Brand Red (#bf1a1a): メインのブランドカラー。一蘭の赤。CTA ボタン背景、ブランド訴求に使用
• Brand Green (#628141): セカンダリカラー。店舗案内・アクション系の CTA に使用
• Brand Brown (#503211): テキスト色・ボーダー色。一蘭のロゴや暖簾の茶色に由来する基調色

Accent（アクセント）

• Gold (#e1d7a5): 言語セレクターバー、装飾要素。和の金色をモチーフにした温かみのあるアクセント
• Gold Text (#ccaa22): テキストアクセント。翻訳サジェスト等の強調テキスト
• Rose (#eecccc): サイドバー CTA（おみやげ一蘭 公式通販）の背景。赤の淡い派生色

Neutral（ニュートラル）

• Text Primary (#503211): 本文テキスト。純黒ではなく焦げ茶
• Text Secondary (#666666): 補足テキスト、モーダル見出し
• Text Muted (#999999): 無効状態、フッター内テキスト
• Copyright (#999977): コピーライト専用の緑がかったグレー
• Border (#503211): ボタンボーダー。テキスト色と同じ茶色
• Background White (rgba(255,255,255,0.96)): コンテンツエリア背景。わずかに透過
• Surface Dark (#222222): セクション背景（イチオシ、SNS、海外展開）
• Overlay Dark (rgba(0,0,0,0.8)): フッター背景、言語バッジ
• Overlay Hero (rgba(0,0,0,0.4)): ヒーロー写真の上に重なるオーバーレイ

3. Typography Rules

3.1 和文フォント

• ゴシック体: ヒラギノ角ゴ Pro W3（macOS）、メイリオ（Windows）、Osaka（レガシー macOS）、ＭＳ Ｐゴシック（レガシー Windows）
• 特徴: ProN ではなく Pro を使用。旧来の日本語ウェブサイトに典型的なフォントスタック

3.2 欧文フォント

• サンセリフ: システムデフォルト（generic sans-serif）
• コピーライト専用: Oxygen（Google Fonts）— フッターの著作権表示のみに使用

3.3 font-family 指定

css/* 本文・見出し */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* コピーライト */
font-family: Oxygen, sans-serif;

フォールバックの考え方:

• 和文ゴシックを最優先。欧文専用フォントは含まず、和文フォント内蔵の欧文グリフをそのまま使用
• ヒラギノ角ゴ Pro（ProN ではない）を指定。JIS X 0213:2004 の字形変更が反映されないレガシー指定
• Osaka はクラシック macOS 向けのフォールバック。現在の macOS では実質不要だが互換性のために残されている

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間 (line-height): 1.6（16px テキストで 25.6px の行間）
• 見出しの行間: 1.4（Display・h1・h2 共通）
• 小テキストの行間: 2.0（12.8px テキストで 25.6px。小さい文字を読みやすくするための広い行間）
• 本文の字間 (letter-spacing): normal（カスタム指定なし）
• 見出しの字間: normal（カスタム指定なし）

ガイドライン:

• 一蘭サイトは letter-spacing を一切カスタマイズしていない。日本語の標準字間をそのまま使用
• 本文 1.6、見出し 1.4 は日本語サイトとしてはオーソドックスな設定
• 小テキスト（12.8px）の line-height: 2.0 は、可読性確保のための配慮

3.6 禁則処理・改行ルール

css/* サイトでの観測値 — 特別な設定なし */
word-break: normal;
overflow-wrap: normal;

備考: 禁則処理はブラウザデフォルトに依存。明示的な CSS 指定なし

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt: 未使用。プロポーショナル字詰めは適用されていない
• kern: 未使用
• 旧来型の日本語 Web サイトに典型的な設定。OpenType 機能を活用しないシンプルなタイポグラフィ

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（赤）

• Background: #bf1a1a
• Text: #ffffff
• Border: 1px solid #503211
• Padding: 9.6px 16px
• Border Radius: 96px（pill 型）
• Font Size: 16px
• Font Weight: 600

Secondary（緑）

• Background: #628141
• Text: #ffffff
• Border: 1px solid #503211
• Padding: 9.6px 16px
• Border Radius: 96px（pill 型）
• Font Size: 16px
• Font Weight: 600

Outline（白抜き）

• Background: transparent
• Text: #503211
• Border: 1px solid #503211
• Padding: 9.6px 16px
• Border Radius: 96px（pill 型）
• Font Size: 16px
• Font Weight: 600

Sidebar CTA

• Background: #eecccc
• Text: #333333
• Border: none
• Padding: 3%
• Border Radius: 0px（角丸なし）

Back to Top

• Background: rgba(0,0,0,0.8)
• Text: #ffffff
• Border Radius: 50px（円形）

ボタンの共通特徴:

• すべての主要 CTA が pill 型（border-radius: 96px）で統一されている
• ボーダーは Brand Brown #503211 で統一。背景色に関わらずボーダーの茶色が一蘭らしさを演出
• 角張ったボタンはサイドバー CTA のみ。階層の低い位置づけ

Inputs

• Background: #ffffff
• Border: 1px solid #503211
• Border Radius: 4px
• Padding: 8px 12px
• Font Size: 16px

Cards

• Background: #ffffff または rgba(255,255,255,0.96)
• Border: none
• Border Radius: 8px
• Padding: 16px
• Shadow: 0 2px 8px rgba(0,0,0,0.15)

5. Layout Principles

Spacing Scale

Container

• Max Width: 960px
• Padding (horizontal): 3%（パーセント指定）

Grid

• Columns: 単一カラム（メインコンテンツ）+ サイドバー
• Gutter: 16px

6. Depth & Elevation

特記事項: 一蘭サイトは shadow よりも background-color の暗転（rgba(0,0,0,0.4) 等のオーバーレイ）で奥行きを表現する傾向が強い

7. Do's and Don'ts

Do（推奨）

• テキスト色に #503211（焦げ茶）を使う。一蘭の暖簾・ロゴの茶色を基調とした温かみのあるデザインにする
• CTA は pill 型（border-radius: 96px）にし、ボーダーに #503211 を使う
• 暗い背景（#222 や rgba(0,0,0,0.8)）と明るいコンテンツエリアのコントラストで奥行きをつくる
• 写真の上には半透明オーバーレイ（rgba(0,0,0,0.4) 程度）を重ねてテキスト可読性を確保する
• ブランドレッド #bf1a1a は主要 CTA にのみ使い、使いすぎない

Don't（禁止）

• テキストに純黒 #000000 を使わない（一蘭のトーンは焦げ茶 #503211）
• CTA を角丸（border-radius: 8px 等）にしない（一蘭は pill 型が基本）
• モダンな SaaS 風のフラットデザインにしない（温かみと伝統感を維持する）
• letter-spacing や palt を独自に追加しない（元サイトが意図的にデフォルトを採用している）
• Brand Red と Brand Green を同じ画面内で同格のボタンとして並べない（赤がプライマリ、緑がセカンダリの階層を守る）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

• モバイルでは本文 14-16px、見出しはデスクトップの 70-80% 程度に縮小
• pill CTA のパディングは維持し、タッチしやすいサイズを確保

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #bf1a1a (一蘭レッド)
Secondary Color: #628141 (グリーン)
Text Color: #503211 (焦げ茶)
Background: rgba(255,255,255,0.96)
Dark Section: #222222
Font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
Body Size: 16px
Line Height: 1.6
CTA Style: pill (border-radius: 96px) + border 1px solid #503211

プロンプト例

一蘭のデザインシステムに従って、店舗検索ページを作成してください。
- テキスト色: #503211（焦げ茶。黒は使わない）
- プライマリ CTA: bg #bf1a1a、text #fff、border-radius: 96px、border: 1px solid #503211
- セカンダリ CTA: bg #628141、同じ pill スタイル
- フォント: "ヒラギノ角ゴ Pro W3" を先頭にしたフォールバックチェーン
- 行間: 本文は line-height: 1.6
- ダークセクション: 背景 #222 に白テキスト
- letter-spacing / palt: 使用しない（デフォルトのまま）