ASKUL (アスクル) DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。

1. Visual Theme & Atmosphere

• デザイン方針: 実用重視・高密度・効率的。B2B オフィス用品通販として、膨大な商品カタログを素早く閲覧・検索・発注できることを最優先する
• 密度: 情報密度が非常に高い業務EC。body の base font-size が 10px と極めて小さく、ヘッダー・サイドバー・メインカラムに情報を詰め込むレイアウト
• キーワード: 実用的、効率的、高密度、信頼感、業務向け

2. Color Palette & Roles

Primary（ブランドカラー）

• ASKUL Blue (#1b72e9): メインのブランドカラー。リンク色、アクセント要素に使用
• ASKUL Navy (#172397): ページタイトル（h1）に使用される濃紺。ブランドの信頼感を表現
• ASKUL Orange (#ff8d00): 主要CTA「カンタン新規会員登録」ボタン。最も目立つアクション色
• ASKUL Cyan (#33abee): 「もっと見る」リンクボタン。補助的なアクション色

Semantic（意味的な色）

• Danger (#d90916): エラー、重要なお知らせ（h2 の「重要なお知らせ」に使用）
• Price Red (#d80000): 価格表示専用の赤。セール価格・特価強調
• Info Light (#ebf3fc): お知らせ枠の背景（薄い青）
• Danger Light (#fadfe1): 重要お知らせ枠の背景（薄いピンク）

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Link Heading (#111184): リンク見出し（h2 のリンクタイトル）
• Link (#1b72e9): 標準リンク色
• Border (#cecece): 区切り線、ボタン・入力欄の枠
• Background (#ffffff): ページ背景
• Surface Gray (#f2f2f2): カテゴリーボタン、詳細設定の背景
• Footer / Guide (#efefef): フッター、ご利用ガイドセクションの背景
• Surface Light (#f5f5f5): モーダル・フォーム背景

Sustainability パステル（サステナビリティ特集のカテゴリ色）

• 時短・効率アップ (#d4dbec): 淡い藤色
• 気持ちがはれる (#f7e0c8): 淡いオレンジ
• ごみを減らす (#c4dad4): 淡いグリーン
• 心地よいデザイン (#eaccce): 淡いピンク
• 社会にやさしい (#bce0e4): 淡いシアン
• 資源を守る (#dfe8c7): 淡い黄緑

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Sans（macOS）、ヒラギノ角ゴシック、ヒラギノ角ゴ Pro W3（旧 macOS）、Noto Sans JP（Web/Android）、メイリオ / Meiryo（Windows）

3.2 欧文フォント

• サンセリフ: Arial（先頭指定。欧文優先のフォントスタック）

3.3 font-family 指定

css/* 全体共通 — 欧文優先型（Arial が先頭） */
font-family: Arial, "Hiragino Sans", "Noto Sans JP", ヒラギノ角ゴシック, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, sans-serif;

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

• Arial が先頭に来る欧文優先型。B2B EC として数字・英字の可読性を優先
• 和文は Hiragino Sans → Noto Sans JP → ヒラギノ角ゴシック → ヒラギノ角ゴ Pro W3 → メイリオの順
• 古い macOS の「ヒラギノ角ゴ Pro W3」（ProN ではなく Pro）も含む幅広い互換性

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

3.5 行間・字間

• 本文の行間 (line-height): 1.6（13px 本文テキスト）
• 見出しの行間: 1.0〜1.6（見出しの種類で異なる）
• 本文の字間 (letter-spacing): normal（明示的な字間設定なし）
• セクション見出しの字間: 0.02em（20px, 16px の見出しで使用）

ガイドライン:

• body の base が 10px と非常に小さい。これは ECサイト特有の高密度レイアウトのため
• 実際の本文テキストは 12〜14px で表示される
• line-height は見出しで 1.0（タイト）、本文で 1.6（標準）

3.6 禁則処理・改行ルール

css/* 実測に基づくデフォルト設定 */
word-break: normal;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt: 適用なし。全体で font-feature-settings: normal
• アスクルでは和文プロポーショナル字詰めを使用していない

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary CTA（新規会員登録）

• Background: #ff8d00
• Text: #ffffff
• Padding: 12px 0px（width は親要素で制御）
• Border Radius: 5px
• Font Size: 16px
• Font Weight: 400
• Letter Spacing: -0.05em（-0.8px / 16px）

Secondary（詳細設定）

• Background: #f2f2f2
• Text: #333333
• Border: 1px solid #cecece
• Padding: 3px 7px
• Border Radius: 4px
• Font Size: 11.5px
• Font Weight: 400

Outlined（バリエーションを見る）

• Background: #ffffff
• Text: #333333
• Border: 1px solid #cecece
• Padding: 0px 11px
• Border Radius: 2px
• Font Size: 12px
• Font Weight: 400
• Line Height: 26px

FAX ユーザー向け

• Background: #ffffff
• Text: #30201a
• Border: 1px solid #6e635f
• Padding: 6px 0px
• Border Radius: 5px
• Font Size: 11px
• Font Weight: 700
• Letter Spacing: -0.05em

Link Button（もっと見る）

• Background: transparent
• Text: #1b72e9
• Border Radius: 4px
• Font Size: 10px
• Font Weight: 400
• Padding: 0px 16px

Inputs

• Background: #ffffff
• Border: 1px solid varies（search: なし, select: #767676）
• Border Radius: 0px（テキスト入力）/ 0px 6px 6px 0px（検索ボタン）
• Padding: 0px 10px
• Font Size: 13px
• Font Family: 本体と同じフォントスタック
• Line Height: 27px（検索入力）

Cards

• Background: #ffffff
• Border: 1px solid #cecece
• Border Radius: 0px（商品カードはシャープな角）
• Padding: varies
• Shadow: none（フラットデザイン）

5. Layout Principles

Spacing Scale

Container

• Max Width: 1440px（推定。フルワイドではなく中央寄せ）
• Padding (horizontal): 10px〜30px（セクションにより異なる）

Grid

• Columns: サイドバー（左）+ メインカラム（右）の2カラム構成
• サイドバー幅: 約 200px
• メインカラム: 残り（約 1000px）
• 商品グリッド: 4〜5 列

6. Depth & Elevation

設計思想: アスクルはほぼ完全にフラットデザイン。ボーダー (#cecece) で要素を区切り、影はほとんど使用しない

7. Do's and Don'ts

Do（推奨）

• フォントスタックは必ず Arial を先頭にする（欧文優先型を維持）
• 価格表示は #d80000 + 700 weight で目立たせる
• CTA には #ff8d00（オレンジ）を使い、他の要素と明確に区別する
• ボーダー色は #cecece で統一する
• 本文は 13px / line-height: 1.6 を基本とする

Don't（禁止）

• font-feature-settings: "palt" を適用しない（アスクルでは不使用）
• ボタンに大きな border-radius を使わない（最大 5px。pill ボタンは存在しない）
• 影 (box-shadow) を多用しない（フラットデザインが原則）
• body の base font-size 10px をそのまま本文に使わない（本文は 12〜14px で表示する）
• #172397（Navy）をリンク色に使わない（ページタイトル専用。リンクは #1b72e9）
• letter-spacing を広めに取らない（アスクルは normal が基本で、見出しの一部のみ 0.02em）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px（--swiper-navigation-size: 44px が参考値）

フォントサイズの調整

• モバイルでは本文 12〜14px を維持
• ナビゲーションの 10px テキストはタッチ向けにパディングを拡大

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #1b72e9
CTA Color: #ff8d00
Title Color: #172397
Text Color: #333333
Background: #ffffff
Surface: #f2f2f2
Border: #cecece
Danger: #d90916
Price: #d80000
Font: Arial, "Hiragino Sans", "Noto Sans JP", ヒラギノ角ゴシック, "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, sans-serif
Body Size: 13px
Line Height: 1.6
palt: なし

プロンプト例

アスクルのデザインシステムに従って、商品一覧テーブルを作成してください。
- フォント: Arial, "Hiragino Sans", "Noto Sans JP", sans-serif
- 本文: 13px / weight 400 / line-height: 1.6 / color: #333333
- ページタイトル: 20px / weight 400 / color: #172397
- 価格: 20px / weight 700 / color: #d80000
- CTA ボタン: bg #ff8d00, color #fff, radius 5px
- ボーダー: #cecece
- 背景: #ffffff（メイン）、#f2f2f2（サーフェス）