00 / Logo Assets
ロゴアセット
Wide (横長)
ヘッダー、メール署名など横幅が取れる場所
Short (縦型)
正方形に近いスペース、OGP、名刺など
Symbol (シンボルマーク)
favicon、アイコン、小スペース
使用ルール
- シンボルとロゴタイプの比率・配置はオリジナルを維持
- 最小サイズ: Symbol 24px / Short 48px / Wide 120px (幅)
- 暗い背景には PNG 透過版を使用
- 色やテクスチャを改変しない
フォーマット: PNG (透過) / JPG (白背景) / AI (ベクター)
01 / Color Palette
カラーパレット
Primary
#6E87B6
CTA·リンク·アクセント
Primary Dark
#5A74A3
ホバー·プレス
Primary Light
#9BB0D0
背景アクセント·ハイライト
Accent
#C4A55A
CTA·バッジ·ハイライト
Accent Dark
#B0923E
ホバー·プレス
Accent Light
#E0D5A8
背景アクセント·バッジ背景
Success
#5CB85C
成功·完了
Warning
#F0AD4E
警告·注意
Danger
#D9534F
エラー·削除
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足·ラベル
Text Disabled
#AAAAAA
無効状態
Border
#E0E0E0
区切り線·枠線
Background
#F7F7F7
ページ背景
Surface
#FFFFFF
カード·モーダル
Chart Colors (PPTX / データ可視化用)
#6E87B6
#5A74A3
#9BB0D0
#333
#999
#D9534F
#5CB85C
#E8EDF5
#666
#D0DAE8
#AAA
#F7F7F7
02 / Typography
タイポグラフィ
size / weight / line-height / letter-spacing
コモレビの光
デザインシステム Design System
セクション見出し Section Heading
本文テキストです。Plus Jakarta Sans と Noto Sans JP の組み合わせで、日本語と英語のバランスを取ります。Body text with Plus Jakarta Sans font for Latin characters.
補足テキスト·注釈。Caption and small text for secondary information.
font-family:
"Plus Jakarta Sans", "Noto Sans JP", sans-serif
monospace:
"SFMono-Regular", "Consolas", "Menlo", monospace
letter-spacing:
全体: 0.05em (見出し·本文共通)
line-height:
本文: 1.6 / 見出し: 1.3~1.4 / 長文: 1.7 まで可
"Plus Jakarta Sans", "Noto Sans JP", sans-serif
monospace:
"SFMono-Regular", "Consolas", "Menlo", monospace
letter-spacing:
全体: 0.05em (見出し·本文共通)
line-height:
本文: 1.6 / 見出し: 1.3~1.4 / 長文: 1.7 まで可
03 / Components
コンポーネント
Buttons
border-radius: 6px · padding: 12px 24px · font-weight: 700
Button States
Default
Hover
Disabled
Loading
Inputs
height: 44px · border-radius: 6px · focus: #6E87B6
Cards
カードタイトル
カードコンポーネントの例です。白背景に軽い影とボーダーで浮き上がります。
border-radius: 8px · shadow: 0 1px 3px rgba(0,0,0,0.08)
Table
| 項目 | 値 |
|---|---|
| Primary | #6E87B6 |
| Font | Plus Jakarta Sans |
| Radius | 6px |
04 / Iconography
Material Icons
アイコンは Google Material Icons を使用。絵文字は使用禁止。
よく使うアイコン
home
search
settings
delete
edit
add
close
check
info
warning
error
help
visibility
visibility_off
file_download
file_upload
content_copy
open_in_new
chevron_right
expand_more
menu
person
mail
notifications
サイズ規定
16px
20px
24px (標準)
32px
48px
使い方:
<span class="material-icons">icon_name</span>
CDN:
fonts.googleapis.com/icon?family=Material+Icons
<span class="material-icons">icon_name</span>
CDN:
fonts.googleapis.com/icon?family=Material+Icons
05 / Motion & Transition
アニメーション
ホバーで各トランジションを確認できます。
Fast
150ms ease-out
ツールチップ、トグル、マイクロ操作
Normal
300ms cubic-bezier(0.4,0.4,0,1)
ボタン、カード、ホバー、フォーカス
Fade
200ms ease-in-out
表示/非表示、トースト、オーバーレイ
Expressive
500ms cubic-bezier(0.34,1.56,0.64,1)
成功フィードバック、強調演出
Do
- UI フィードバックは 300ms 以下で完了させる
- ease-out を基本に、操作の「結果」を素早く見せる
- prefers-reduced-motion に対応する
Don't
- 500ms を超えるトランジションを日常操作に使わない
- linear イージングをUIに使わない (機械的に見える)
- 同時に複数のアニメーションを重ねない
06 / Spacing
スペーシング
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
07 / Depth & Elevation
シャドウ
Level 0
none
Level 1
0 1px 3px
rgba(0,0,0,0.08)
rgba(0,0,0,0.08)
Level 2
0 4px 12px
rgba(0,0,0,0.1)
rgba(0,0,0,0.1)
Level 3
0 8px 24px
rgba(0,0,0,0.12)
rgba(0,0,0,0.12)
08 / Responsive
レスポンシブ
Mobile
Tablet
Desktop
| 区分 | 幅 | カラム | 余白 |
|---|---|---|---|
| Mobile | ≤ 480px | 1カラム | 16px |
| Tablet | 481 - 768px | 1 - 2カラム | 24px |
| Desktop | > 768px | 2カラム | 24px |
max-width: 1280px
タッチターゲット最小サイズ: 44px × 44px (WCAG基準)
タッチターゲット最小サイズ: 44px × 44px (WCAG基準)
09 / Dark Mode
ダークモード
カラートークン
#7B94C0
#D4BA6E
#E05550
#65C465
コンポーネント例
Primary
#7B94C0
Primary Light
#9AAFD5
Accent
#D4BA6E
Text
#E8E8F0
Text Secondary
#A0A0C0
Text Disabled
#606080
Background
#1A1A2E
Surface
#25253E
Border
#3A3A5C
Danger
#E05550
Warning
#F5BD5A
Success
#65C465
10 / Guidelines
Do's & Don'ts
Do
- フォントは "Plus Jakarta Sans", "Noto Sans JP", sans-serif のフォールバックチェーンを指定
- 本文の line-height / letter-spacing は Typography 規定に従う
- 色のコントラスト比は WCAG AA 以上
- 角丸は 6~8px で統一
- ブランドカラーは水彩ブルー #6E87B6 を基調に
- アイコンは Material Icons を使用する
Don't
- font-family に和文フォント1つだけ指定しない
- 日本語本文に line-height: 1.5 以下を使わない
- テキストに純粋な #000000 を使わない (#333333 を使う)
- Primary カラーをエラーの意味で使わない
- border-radius: 50% のような極端な値にしない
- 絵文字をUIに使わない (Material Icons を使う)
11 / JP Formatting
日本語テキスト整形ルール
全てのテキスト出力 (会話·ドキュメント·メール·レポート·スライド等) に適用する約物ルール。
| 対象 | Before | After |
|---|---|---|
| 中黒 | 新機能・改善点 | 新機能·改善点 |
| スラッシュ | A／B | A / B |
| 括弧 | 報告（2026年） | 報告 (2026年) |
| コロン | ステータス：完了 | ステータス : 完了 |
| ダブルクォート | 結果は"良好"です | 結果は "良好" です |
| 句点 | 完了です。次に進みます。 | 完了です。 次に進みます。 |
変換例:
新機能・改善点／バグ修正についての報告（2026年4月）ステータス：完了。結果は"良好"です。
新機能·改善点 / バグ修正についての報告 (2026年4月) ステータス : 完了。
結果は "良好" です。
新機能・改善点／バグ修正についての報告（2026年4月）ステータス：完了。結果は"良好"です。
新機能·改善点 / バグ修正についての報告 (2026年4月) ステータス : 完了。
結果は "良好" です。