Design System Preview

最高のコンテンツを
作る会社

「楽しさ」と「ワクワク」を、世界中の人々に届ける

Cygames のデザインシステムをカタログ化したプレビューです。コーポレートサイトの computed style 実測値(2026-05-09 取得)に基づき、カラー、タイポグラフィ、コンポーネント、レイアウトトークンを可視化しています。

01 / Colors
Color Palette

カラーパレット

Brand — Monochrome Core
Black
#000000
CTA 背景・本文テキスト・ヘッダー背景
White
#ffffff
ページ背景・ダーク面上のテキスト
Accent
Navy Blue
#27455c
セクション背景色・インフォグラフィック
Forest Green
#468254
カテゴリバッジ・アクセント色
Neutral
Dark Charcoal
#3f3e3e
フッター背景・セカンダリテキスト
Medium Gray
#cccccc
ボーダー・区切り線
Light Gray
#f5f5f5
セクション背景(ライト面)
Semantic(推奨補完値)
Danger
#dc2626
エラー・削除(推奨)
Success
#468254
成功・完了(ブランドグリーン転用)
Warning
#d97706
警告・注意(推奨)

02 / Typography
Typography

タイポグラフィ階層

「楽しさ」と「ワクワク」を
世界中の人々に届ける
60px / 900 / line-height 1.15 / Noto Sans JPpaltHero Display
最高のコンテンツを作る会社 — Hero Slider
30px / 700 / line-height 1.0 / Noto Sans JPSlider
News — Section H2 (EN)
26.7px / 700 / line-height 1.15 / Inter (Cygames Sans )EN
Cygamesの特徴を数字で紹介 — Section H2 (JP)
30.9px / 700 / line-height 1.33 / Noto Sans JPJP H2
Game Titles — Section Label
15px / 700 / Inter (Cygames Sans )Label
グランブルーファンタジー リリンク — H3 Item Title
20.6px / 700 / Noto Sans JPpaltH3
最新情報をお届けします — H3 Sub
16px / 700 / line-height 1.3 / Noto Sans JPSub
本文テキスト — Cygamesは「最高のコンテンツを作る会社」として、ゲーム・アニメ・漫画などのエンターテインメントコンテンツを提供しています。約物の前後には YakuHanJPs による半角化が適用され、「」や()の字間が引き締まります。
16px / 400 / line-height 1.75 / Noto Sans JPBody
採用情報 — Nav / Link
14px / 700 / Noto Sans JPNav
Copyright © Cygames, Inc. All Rights Reserved. — Small / Caption
12px / 400 / line-height 1.5 / color #3f3e3e

News

ニュース・ゲームタイトル

Cygamesが挑戦する、次世代のゲーム体験

技術とクリエイティビティの融合により、これまでにないゲーム体験を創り出す。Cygamesは設立以来、コンテンツの質にこだわり続けてきました。

コンテンツファーストの哲学

UIは黒子に徹し、ゲームアートそのものが主役。モノクロームの重厚なコーポレートデザインは、タイトルのビジュアルを最大限に引き立てます。エンターテインメントの本質は「楽しさ」にあるという信念のもと、すべてのデザイン判断が行われています。

YakuHanJPs + palt: 見出しの「」や()は半角幅に詰められ、さらに大きな見出しでは font-feature-settings: "palt" によるプロポーショナル字詰めが加わります。密度の高い文字組みがゲーム会社らしい力強さを生みます。

※ 本プレビューでは Cygames Sans(ブランド専用書体)の代替として Inter を使用しています。

Game Title Visual
Console
2026.05.09
グランブルーファンタジー リリンク 大型アップデート配信決定
Game Title Visual
Mobile
2026.04.28
ウマ娘 プリティーダービー 新シナリオ「天翔ける星」公開
Game Title Visual
Info
2026.04.15
Cygames 新卒・中途採用エントリー受付中

数字で見る Cygames
4,000+
従業員数
30+
リリースタイトル数
2011
設立年
6
拠点数

04 / Buttons
Buttons

ボタンバリエーション

On Dark Background
View All Titles
Primary CTA — White / radius 5px
Company Info
Ghost — transparent + white border
On Light Background
ニュース一覧
Primary CTA — Black #000 / radius 5px
エントリーする
Primary CTA — Black #000 / radius 5px
Utility
すべてのCookieを許可する
Cookie Accept — #000 / radius 4px
Category Badges
Console Mobile Info New

Cards

カードコンポーネント

News Image
Console
2026.05.01
新規コンソールタイトル開発中 ティザービジュアル公開
News Image
Mobile
2026.04.20
Hover 状態: elevation-2 + translateY(-2px)
News Image
New
2026.04.10
CygamesPictures オリジナルアニメ制作発表
Card: bg #ffffff / radius 10px / shadow 0 2px 8px rgba(0,0,0,0.08) / category badge #468254

06 / Forms
Forms

フォーム要素

Default — border #cccccc / radius 5px
Focus — border #000000 / shadow 3px
正しい電話番号を入力してください
Error — border #dc2626 / shadow 3px

07 / Elevation
Depth & Elevation

影の階層

Level 0: Flat
影なし — 基本(フラットデザイン基調)
Elevation 1
0 2px 8px rgba(0,0,0,0.08)
Elevation 2
0 8px 24px rgba(0,0,0,0.12)
Elevation 3
0 16px 40px rgba(0,0,0,0.15)

08 / Layout
Spacing & Radius

スペーシング & ラディウス

Spacing Scale (8px grid)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px — Cookie CTA
Medium
5px — CTA / Input
Large
10px — Card
Pill (9999px) not used — Cygames uses subtle 5px rounding