クラシル（kurashiru） DESIGN.md

クラシル（https://www.kurashiru.com/）のデザイン仕様書。 dely株式会社が運営する日本最大級のレシピ動画プラットフォーム。「料理レシピ動画サービス」として月間利用者数は国内トップクラス。 実サイトの computed style 実測（2026-05-24 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: システムフォントスタックとニュートラルグレーを基調にした高速表示・実用重視の UI。装飾を排し、レシピ動画サムネイルと写真がコンテンツの主役
• 密度: カード型グリッドでレシピを高密度に配置。テキストはコンパクト（11–17px）で情報密度は高め
• キーワード: システムフォント、ニュートラルグレー、コーラルアクセント、動画サムネイル主体、実用的 UI
• 特徴:
  • ブランドカラーはコーラル #f3765e。検索ボタンやアプリアイコンで使用されるが、Web では控えめ
  • テキストカラーは純黒 #000000（多くの日本語サービスが避ける純黒を採用）
  • システムフォントスタックを採用: -apple-system, system-ui, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif。Web フォントを読み込まないことでパフォーマンスを最優先
  • タグボタン（「時短」「簡単」等）は border-radius: 3px の角丸タグスタイル
  • ログインボタンは border-radius: 30px のピル型、黒背景
  • ダークモード非対応
  • CSS Custom Properties なし（静的にスタイル定義）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Coral (#f3765e): ブランドカラー。検索ボタン、アプリアイコン、一部のアクセント要素。Web では控えめに使用

CTA / Buttons

• Login Button: 背景 #000000 / テキスト #000000（推定 #ffffff）/ radius 30px（pill）
• Tag Button: 背景 #ededed / テキスト #000000 / radius 3px / padding 8px
• Recipe Card: 背景 transparent / radius 8px / 画像サムネイル主体

Neutral

Semantic（実測未確認・推奨値）

• Danger: #dc2626
• Success: #16a34a
• Warning: #d97706

3. Typography Rules

3.1 和文フォント

• ゴシック体: システムフォントを使用。ヒラギノ角ゴ ProN / Hiragino Sans を優先
• 明朝体: 使用なし

3.2 欧文フォント

• サンセリフ: システムフォント（-apple-system, system-ui, Segoe UI）を最優先
• 専用の欧文 Web フォントは不使用

3.3 font-family 指定

css/* 全要素共通 */
font-family: -apple-system, "system-ui", "Segoe UI",
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

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

• 欧文システムフォントを先頭に配置: Apple / Windows のシステム UI フォントで欧文部分を描画し、和文はヒラギノ / メイリオにフォールバックする設計
• Web フォントを一切読み込まないことで、初回描画を高速化
• パフォーマンス重視の設計思想がフォント選定にも表れている

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5（16px ベース）
• 見出しの行間: 1.3（H2: 31.2px / 24px）
• 本文の字間 (letter-spacing): normal
• 見出しの字間: 0.15px（約 0.006–0.009em）— ほぼ normal と同等

3.6 禁則処理・改行ルール

cssword-break: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt・kern ともに不使用
• システムフォントの既定レンダリングに任せる方針

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Login Button（ピル型）

• Background: #000000
• Text: #ffffff（推定）
• Padding: 1px 6px
• Border Radius: 30px
• Font Size: 14px
• Font Weight: 600

Tag Button（タグ型）

• Background: #ededed
• Text: #000000
• Padding: 8px
• Border Radius: 3px
• Font Size: 14px
• Font Weight: 400

Recipe Cards

• Background: transparent
• Border Radius: 8px（サムネイル画像）
• Shadow: なし
• サムネイル画像 + タイトル + 調理時間の構成

Inputs

• 実測データなし（トップページの検索はヘッダー埋め込み）

5. Layout Principles

Spacing Scale

Container

• Max Width: 1200px（推定）
• Padding (horizontal): 16px

Grid

• レシピカード: 3〜4 カラムグリッド
• サイドバー: 右寄せ固定幅

6. Depth & Elevation

クラシルはシャドウをほぼ使用せず、グレーの濃度差とボーダーで階層を表現する。

7. Do's and Don'ts

Do（推奨）

• システムフォントスタックを使い、Web フォントの読み込みを避ける
• テキストカラーは #000000（純黒）を基本とする
• レシピカードのサムネイル画像を角丸（8px）にする
• タグボタンは #ededed 背景 + 3px 角丸で統一する
• コンテンツ密度を高く保ち、ユーザーが素早くレシピを探せるようにする

Don't（禁止）

• Web フォントを追加で読み込まない（パフォーマンス最優先の設計）
• コーラル #f3765e を広い面の背景に使わない（アクセントポイントのみ）
• 装飾的なシャドウやグラデーションを多用しない
• テキストに中間色のグレーを使いすぎない（コントラスト確保）
• 見出しに letter-spacing を広く取らない（ほぼ normal が基本）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px
• タグボタンの padding 8px で十分なタップ領域

フォントサイズの調整

• モバイルでは H2 を 18–20px に縮小
• 本文 14px を維持

9. Agent Prompt Guide

クイックリファレンス

Brand Color: #f3765e
Text Color: #000000
Background: #ffffff
Font: -apple-system, "system-ui", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
Body Size: 14px
Line Height: 1.5
Heading Weight: 700

プロンプト例

クラシルのデザインシステムに従って、レシピ検索結果ページを作成してください。
- テキスト色: #000000
- 背景: #ffffff
- フォント: -apple-system, "system-ui", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
- 見出し: 24px / weight 700 / line-height 1.3
- 本文: 14px / weight 400 / line-height 1.5
- レシピカードサムネイル: border-radius 8px
- タグボタン: 背景 #ededed / テキスト #000000 / border-radius 3px