RAKSUL（ラクスル） DESIGN.md

RAKSUL（https://raksul.com/）のデザイン仕様書。 クラウド型の印刷・物流プラットフォーム。名刺・チラシ・ポスター等の印刷をネットで発注できる EC マーケットプレイス。 実サイトの computed style 実測（2026-06-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白背景に ブルー #0264bf のログインボタン と オレンジ #e7560d のサインアップ CTA を併置する、実用性重視の EC マーケットプレイス。ピンク #e4007e のおすすめバッジが商品カード上に多数配置され、購買導線を補強する
• 密度: フォントサイズ基準が 14px、line-height 1.5 とコンパクト。サイドバー＋メガメニューの密集ナビで多カテゴリの印刷商品を一覧させる EC 型の情報密度
• キーワード: 実用 EC、コンパクト密度、3色アクセント（ブルー／オレンジ／ピンク）、Roboto + ヒラギノの堅実スタック、角丸 4px のフラットボタン
• 特徴:
  • 3つのアクセント色を明確に役割分担: ブルー #0264bf（ログイン・既存ユーザー導線）、オレンジ #e7560d（新規会員登録 CTA）、ピンク #e4007e（おすすめバッジ）
  • 欧文フォントに Roboto を最優先指定。和文は Hiragino Sans → Hiragino Kaku Gothic ProN → Meiryo のシステムフォールバック。Web フォントは使わない堅実な構成
  • ボタンの角丸は 4px と控えめ。ピル型（9999px）は使わない
  • 見出しの weight は 600 が基本。700 はフッターの小見出しのみ
  • letter-spacing はほぼ normal（明示的なトラッキング調整なし）。font-feature-settings（palt/kern）も未使用
  • コンテナ幅 1156px は標準的な EC サイトよりやや広い
  • セクション背景に #fafafa を多用し、白との微差でカード領域を区切る
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

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

Brand / Action

Neutral

Semantic（推奨値）

実サイトのトップページには明確なエラー／成功状態の色は表面化していない。EC フォームで推奨する補完値:

• Danger: #dc2626 — エラーメッセージ、入力エラー枠
• Success: #16a34a — 完了通知、在庫あり表示
• Warning: #d97706 — 注意喚起、納期アラート

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Sans（Apple 環境）→ Hiragino Kaku Gothic ProN（旧 macOS）→ Meiryo（Windows）→ sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）
• Web フォントは使用していない。OS のシステムフォントに依存する構成

3.2 欧文フォント

• サンセリフ: Roboto を最優先。font-family の先頭に配置し、欧文部分を Roboto で描画
• フォールバック: Arial → sans-serif
• セリフ・等幅は使用しない

3.3 font-family 指定

css/* 本文・見出し共通 */
font-family: Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
  Meiryo, Arial, sans-serif;

/* 一部ナビ要素（Roboto なし） */
font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
  Meiryo, Arial, sans-serif;

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

• Roboto（Google Fonts 由来）を先頭に置き、欧文グリフの統一感を優先。和文は Roboto に含まれないため自動的に次の和文フォントへフォールバック
• 一部のナビ要素では Roboto を含まない和文優先スタックが使われている
• Arial は Windows 環境での最終フォールバック。Helvetica Neue は含まない

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

実測値（トップページ、2026-06-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (13〜14px): 1.5（21px / 14px）— EC として標準的な行間
• 見出し (12〜20px): 1.33（26.66px / 20px）— 全見出しで統一
• ナビリンク: 1.0（14px / 14px）— 一行分の高さ

字間 (letter-spacing) — 実測:

• 本文: normal（明示的なトラッキングなし）
• 見出し（大）: normal
• フッター見出し・関連サービス見出し: 0.05em（やや広め）
• カテゴリ見出し: 0.02em（微量の広がり）

ガイドライン:

• RAKSUL は letter-spacing をほぼ調整しない。フォントのデフォルトメトリクスに委ねるスタイル
• 見出しの line-height 1.33 と本文の 1.5 の2段階のみで構成。シンプルで再現しやすい
• フッターの小見出しだけ 0.05em と weight 700 で例外的に強調

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;
overflow-wrap: break-word;
line-break: strict;

• EC 商品名や印刷仕様の長い文字列が折り返される前提の設計
• ナビゲーション内のラベルは white-space: nowrap で折り返さない

3.7 OpenType 機能

cssfont-feature-settings: normal;

• palt / kern の明示的有効化は確認されなかった
• Roboto + Hiragino のデフォルトメトリクスをそのまま使用する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary Login（ブルー） — "ログイン"

• Background: #0264bf
• Text: #ffffff
• Padding: 4.8px 12px
• Border Radius: 4px
• Font: Roboto + Hiragino, 14px, weight 600
• Border: none

CTA Signup（オレンジ） — "新規会員登録"

• Background: #e7560d
• Text: #ffffff
• Padding: 4.8px 8px
• Border Radius: 4px
• Font: Roboto + Hiragino, 14px, weight 600
• Border: none

Search Filter — 検索バー内のフィルタ切替

• Background: #a6afba
• Text: #ffffff
• Padding: 12.8px
• Border Radius: 3px 0 0 3px（左端のみ角丸）
• Font: Roboto + Hiragino, 14px, weight 600

Icon Button — ナビ内のアイコンボタン

• Background: #efefef
• Text: #222222
• Padding: 8px
• Border Radius: 4px
• Font: Roboto + Hiragino, 14px, weight 400

Service Menu Link — サイドバーのサービスメニュー

• Background: #ffffff
• Text: #0264bf
• Padding: 12.8px 8px
• Font: Roboto + Hiragino, 16px, weight 400
• Border: none

Badges

おすすめバッジ（ピンク）

• Background: #e4007e
• Text: #ffffff
• Padding: 2px 6px
• Border Radius: 2px
• Font: 11〜12px, weight 600

NEW バッジ（オレンジ）

• Background: #ee4a0e
• Text: #ffffff
• Padding: 2px 6px
• Border Radius: 2px
• Font: 11〜12px, weight 600

Inputs

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #0264bf（推奨: プライマリブルー）
• Border Radius: 4px
• Padding: 8px 12px
• Font: Roboto + Hiragino, 14px, weight 400
• Height: 40px

Cards / Surfaces

• Background: #ffffff（メイン）/ #fafafa（セクション背景）
• Border: 1px solid #dddddd または border なし
• Border Radius: 4px
• Padding: 16px
• Shadow: 基本なし（フラット）

Header

• Background: #ffffff
• Border Bottom: 1px solid #dddddd（推奨）
• Position: fixed または sticky
• ドメインナビ（印刷・集客・物流…）がヘッダー上部に横並び

Footer

• Background: #ffffff
• 関連サービスセクション: #ecedef
• Border Top: 1px solid #dddddd
• Padding: 32px 24px

5. Layout Principles

Spacing Scale（8px グリッド推奨）

Container

• Max Width: 1156px（CSS Custom Property --width-container-outer で定義）
• Padding (horizontal): 16px（mobile）/ 24px（desktop）

Grid

• サイドバー + メインコンテンツの 2 カラムが基本（EC マーケットプレイス型）
• 商品カード: 4〜5 カラムのグリッド配置
• Gutter: 16px

Border Radius Scale

6. Depth & Elevation

• 実測では box-shadow の使用は控えめ。EC 商品カードも基本フラット
• 階層は 背景色の差 (#ffffff vs #fafafa) と ボーダー (#dddddd) で表現する
• メガメニューのドロップダウンには影が付く程度

7. Do's and Don'ts

Do（推奨）

• フォントは Roboto を先頭に置き、Hiragino Sans → Hiragino Kaku Gothic ProN → Meiryo の順でフォールバックする
• 本文は 14px / line-height 1.5 / weight 400 を基本にする（16px ではなく 14px が RAKSUL の基準）
• 見出しの weight は 600 を基本にする（700 はフッター小見出しのみ）
• ログイン系アクションは ブルー #0264bf、新規登録は オレンジ #e7560d で色分けする
• おすすめマーカーは ピンク #e4007e、新着マーカーは オレンジ #ee4a0e で使い分ける
• ボタンの角丸は 4px で統一する（ピル型にしない）
• セクション背景は #fafafa と白 #ffffff の微差で階層を作る
• 区切り線は #dddddd を使う

Don't（禁止）

• 本文サイズを 16px に拡大しない（RAKSUL は 14px ベースの密な EC レイアウト）
• ボタンに ピル型 border-radius: 9999px を使わない（4px の角丸が基本）
• ログインボタンにオレンジを使わない。オレンジは新規登録専用
• おすすめバッジにオレンジを使わない。ピンク #e4007e がおすすめ、オレンジ #ee4a0e は NEW 専用
• letter-spacing に負の値を使わない（RAKSUL は詰め組みをしない）
• テキスト色に純粋な #000000 を使わない（RAKSUL のテキストは #222222）
• 見出しに weight 700 を多用しない（600 が基本、700 はフッターの例外のみ）
• 過度な box-shadow でカードを浮かせない（フラットで背景色の差で階層を表現）

8. Responsive Behavior

Breakpoints（推奨）

モバイル時の調整

• セクション H2: 20px → 18px
• 本文サイズは 14px を維持（元から小さいため縮小しない）
• サイドバーナビはハンバーガーメニュー化
• 商品カードは 2 カラム → 1 カラム
• ドメインナビ（印刷・集客・物流…）は横スクロールまたは折りたたみ

タッチターゲット

• CTA ボタン: 高さ 40px 以上（padding + font size で確保）
• バッジ: タップ用ではなく装飾。タップ領域はカード全体

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Primary Blue (Login): #0264bf
CTA Orange (Signup): #e7560d
Badge Pink (おすすめ): #e4007e
Badge Orange (NEW): #ee4a0e
Link Blue (Domain Nav): #3fa2f3
Info Blue: #00a0e8
Text Primary: #222222
Text Secondary: #636363
Surface: #fafafa
Divider: #dddddd
Icon BG: #efefef
Search Filter BG: #a6afba
White: #ffffff

Font: Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif

Body Size: 14px / line-height 1.5 / weight 400 / letter-spacing normal
Heading Size: 20px / line-height 1.33 / weight 600 / letter-spacing normal
Caption: 13px / line-height 1.5 / weight 400
Small: 12px / line-height 1.33 / weight 600

Border Radius: 4px（ボタン・カード）/ 2px（バッジ）
Shadow: 基本 none。階層は #fafafa サーフェスと #dddddd ボーダーで表現

プロンプト例

RAKSUL のデザインに従って、印刷商品の一覧ページを作成してください。
- フォント: Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif
- セクション見出し: 20px / weight 600 / line-height 1.33 / color #222222
- 本文: 14px / weight 400 / line-height 1.5 / color #222222
- 補助テキスト: 13px / weight 400 / line-height 1.5 / color #636363
- ログインボタン: 背景 #0264bf / 白文字 / border-radius 4px / padding 4.8px 12px / 14px / weight 600
- 新規登録 CTA: 背景 #e7560d / 白文字 / border-radius 4px / padding 4.8px 8px / 14px / weight 600
- おすすめバッジ: 背景 #e4007e / 白文字 / border-radius 2px / padding 2px 6px
- NEW バッジ: 背景 #ee4a0e / 白文字 / border-radius 2px / padding 2px 6px
- カード背景: 白 #ffffff、セクション背景は #fafafa
- ボーダー: #dddddd の 1px solid
- box-shadow は基本 none。背景色の差で階層を表現
- テキスト色は #222222（純黒 #000000 は使わない）
- ボタンは角丸 4px（ピル型 9999px にしない）
- letter-spacing は normal（詰め・広げの調整をしない）
- コンテナ幅: 1156px