A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
13tokens
7type steps
2radius steps
3.5pxspacing base
SEGA, in one page
- デザイン方針: クリーンで信頼感のあるコーポレートサイト。ニュース配信とIR情報が中心。SEGA ブルーを軸とした強い色彩アイデンティティ
- 密度: ゆったりとした余白。本文 line-height: 2.0 で可読性重視
- キーワード: コーポレート、クリーン、ブルーアイデンティティ、ニュースメディア、信頼
- 特徴: 複数のブルーシェードを使い分け、用途ごとに明確な色の役割を持たせている。欧文ディスプレイに Oswald、和文に Noto Sans JP という二軸フォント構成
Do's and don'ts
Do
- 欧文ディスプレイ（NEWS、SEGA CORPORATION 等）には Oswald 700 を使う
- 和文テキストは全て Noto Sans JP で統一する
- ブルーの使い分けを守る: ディープブルー
#1627ccはフッター/背景面、ブライトブルー#0086ffは CTA、スカイブルー#019fffはセクション見出し - カテゴリバッジは背景色で種類を区別し、文字は白 700
- 検索入力はピル型（40px radius）で太いブルーボーダー（4px solid
#0060ff） - 本文は 14px / line-height: 2.0 のゆったりした行間を維持する
- テキスト色は
#333333。純粋な#000000は使わない
Don't
- Oswald を和文テキストに使わない（欧文ディスプレイ専用）
- 複数のブルーを混同しない（各ブルーには明確な役割がある）
- 検索入力のボーダーを 1px に薄くしない（4px の太さがデザインの特徴）
- カテゴリバッジの角丸を丸くしすぎない（5px であって pill ではない）
#333333以外の色を本文テキストに使わない- フッター背景に
#0086ff等の明るいブルーを使わない（#1627ccの深いブルーを使う）
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
This prompt ships with the source DESIGN.md.
SEGA コーポレートサイトのデザインに従って、ニュース一覧ページを作成してください。
- 和文フォント: "Noto Sans JP", sans-serif
- 欧文見出しフォント: "Oswald", sans-serif（700、NEWS 等のセクション名に使用）
- テキスト色: #333333
- セクション見出し: 30px, 700, color: #019fff
- カテゴリバッジ: 12px, 700, white, radius 5px, bg は #49acde（製品）/ #4a68de（企業）
- CTA ボタン: bg #019fff, white, radius 5px
- 検索入力: border 4px solid #0060ff, radius 40px
- フッター: bg #1627cc, 白文字, 12px
- 本文: 14px, line-height: 2.0, letter-spacing: normal
- palt / kern は使わないThe specification
Colour paletteRead the full spec
Primary（ブランドカラー）
- SEGA Blue (
#1627cc): メインブランドカラー。フッター背景、ナビセクション見出しに使用。深い青 - SEGA Bright Blue (
#0086ff): ヘッダーロゴテキスト、EN ボタン背景、リンク CTA - SEGA Sky Blue (
#019fff): 「お知らせ一覧へ」CTA 背景、セクション見出し色、サブアクセント
Secondary（カテゴリ・バッジ）
- Category Blue (
#49acde): 「製品・サービス」カテゴリバッジ背景 - Corporate Blue (
#4a68de): 「企業」カテゴリバッジ背景 - Link Blue (
#397ee5): ニュースリンクテキスト
Neutral（ニュートラル）
- Text Primary (
#333333): 本文テキスト - Text Nav (
#595757): ナビゲーションテキスト - Text Date (
#adadad): 日付テキスト - Background (
#ffffff): ページ背景 - Surface (
#f9f8f4): セクション背景（暖色系オフホワイト） - Surface Button (
#eeeeee): ページトップボタン背景 - Search Border (
#0060ff): 検索入力ボーダー
Type scaleRead the full spec
3.1 和文フォント
ゴシック体（デフォルト）:
- Noto Sans JP（Google Fonts）
3.2 欧文フォント
- ディスプレイ: Oswald（Google Fonts、見出し・ナビゲーション用）
- サンセリフ: sans-serif（フォールバック）
3.3 font-family 指定
/* 本文（和文） */
font-family: "Noto Sans JP", sans-serif;
/* 欧文ディスプレイ（見出し・ナビ） */
font-family: "Oswald", sans-serif;フォールバックの考え方:
- 和文は Noto Sans JP 単独指定。Google Fonts で Web フォントとして読み込み
- 欧文ディスプレイは Oswald。NEWS セクション見出しやコーポレートロゴテキストに使用
- Oswald は 700（Bold）のみ使用
3.4 文字サイズ・ウェイト階層
以下は computed style による実測値
| Role | Font | Size | Weight | Line Height | Letter Spacing | 備考 |
|---|---|---|---|---|---|---|
| Section Title (h3) | Noto Sans JP | 30px | 700 | — | normal | セクション見出し、色 #019fff |
| Page Title (h2) | Noto Sans JP | 26px | 700 | — | normal | ページタイトル、白文字 |
| Body (p) | Noto Sans JP | 14px | 400 | 28px (x2.0) | normal | 本文テキスト、色 #333333 |
| EN Display | Oswald | — | 700 | — | normal | NEWS 等の英語セクション見出し |
| Date | Noto Sans JP | 13px | 400 | — | normal | 日付テキスト、色 #adadad |
| Footer | Noto Sans JP | 12px | 400 | 21.6px (x1.8) | normal | フッター、白文字 on #1627cc |
| Category Badge | Noto Sans JP | 12px | 700 | — | normal | カテゴリバッジ、白文字 |
| EN Button | Noto Sans JP | 14px | — | — | normal | EN ボタン |
3.5 行間・字間
行間 (line-height) — 実測値:
- 本文 (p):
28px(14px x 2.0) — 非常にゆったりした行間 - フッター:
21.6px(12px x 1.8) - 見出し: ブラウザデフォルト
字間 (letter-spacing) — 実測値:
- 全要素:
normal（letter-spacing の明示的な指定なし）
ガイドライン:
- 本文の line-height: 2.0 はニュース記事の可読性を重視した設定
- letter-spacing はサイト全体で normal。字詰めは行わない
3.6 禁則処理・改行ルール
/* 標準的な設定 */
word-wrap: break-word;
overflow-wrap: break-word;3.7 OpenType 機能
/* サイト全体で palt / kern は適用されていない */
font-feature-settings: normal;- palt: 未使用。本文・見出し共に normal
- kern: 未使用
3.8 縦書き
- 該当なし。横書きのみ
Components and layoutRead the full spec
Buttons
EN Button
- Background:
#0086ff - Text:
#ffffff - Padding: 5px 8px
- Border Radius: 5px
- Font Size: 14px
CTA Link（お知らせ一覧へ）
- Background:
#019fff - Text:
#ffffff - Border Radius: 5px
- Font Size: 14px
Inputs
Search Input（検索）
- Background:
#ffffff - Border: 4px solid
#0060ff - Border Radius: 40px（ピル型）
- Padding: 10px 20px
- Font Size: 14px
Cards
- Background:
#ffffff - Border: なし（リストベースのニュースレイアウト）
- 区切り: ボーダーラインで分離
Category Badge
- Background: カテゴリ別（
#49acde製品・サービス /#4a68de企業） - Text:
#ffffff - Font Size: 12px
- Font Weight: 700
- Border Radius: 5px
- Padding: 3.5px 5px
Spacing Scale
| Token | Value |
|---|---|
| XS | 4px |
| S | 8px |
| M | 16px |
| L | 24px |
| XL | 40px |
| XXL | 64px |
Container
- Max Width: 960px（推定）
- Padding (horizontal): 20px
Grid
- Columns: 1（ニュース一覧は単一カラム）
- Gutter: 16px
| Level | Shadow | 用途 |
|---|---|---|
| 0 | none | フラットな要素（基本がフラットデザイン） |
| 1 | 0 2px 4px rgba(0,0,0,0.1) | カードホバー時 |
| 2 | 0 4px 8px rgba(0,0,0,0.12) | ドロップダウンメニュー |
- サイト全体がフラットデザイン寄り。シャドウの使用は控えめ
- フッターは
#1627ccのベタ塗りで奥行きを表現
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | 説明 |
|---|---|---|
| Mobile | <= 767px | モバイルレイアウト |
| Tablet | <= 1024px | タブレットレイアウト |
| Desktop | > 1024px | デスクトップレイアウト |
タッチターゲット
- 最小サイズ: 44px x 44px（WCAG 基準）
フォントサイズの調整
- モバイルでは本文 14px を維持、見出しはデスクトップの 70-80% に縮小
- ナビゲーションはハンバーガーメニューに切り替え
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-sega {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #333333;
--heading-color: #333333;
--link-color: #0070d7;
--link-hover-color: #0055a4;
--border-color: #dadada;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(51,51,51,0.06);
--card-hover-shadow: 0 6px 18px rgba(51,51,51,0.12);
--header-bg: #333333;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #707070;
--button-bg: #0086ff;
--button-text-color: #000000;
--button-hover-bg: #006bcc;
--button-border: none;
--button-border-radius: 40px;
--button-secondary-bg: #f3f3f3;
--button-secondary-text-color: #333333;
--button-secondary-hover-bg: #e7e7e7;
--button-secondary-border: 1px solid #dadada;
--prompt-bg: #f5f5f5;
--prompt-text-color: #333333;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 40px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- fancl 76.5%
- kashiyama 75.0%
- gmail 73.9%
- spotify 73.4%
- hasami porcelain 72.4%
Where this came from
- Source document
jp/design-md/sega/DESIGN.md· 6.2 KB- Repository
- kzhrknt/awesome-design-md-jp
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.