SQUARE ENIX

DESIGN SYSTEM PREVIEW
Square Enix

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。
トピックス一覧へ DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Square Enix Red
#c80000
CTA・価格・リンクホバー
Black
#000000
メインコンテンツ背景
Navigation / Structure
Nav Dark
#333333
ナビゲーション背景
Footer Grey
#e5e5e5
フッター・カード面・セカンダリボタン
Dark Grey
#444444
フッター下部
Text
Text Primary
#000000
白背景上テキスト
Text White
#ffffff
黒背景上テキスト
Text Subtle
#60676f
セクション見出し
Surface
Header BG
#ffffff
ヘッダー領域
Hero Overlay
rgba(0,0,0,0.8)
ヒーローキャプション背景
Search BG
#ededed
検索フィールド背景
02 / Typography

タイポグラフィ階層

新作RPGタイトル発表
40.32px / 700 / line-height: 1.2 / white on rgba(0,0,0,0.8)ヒーロー
ページタイトル (h1)
24.08px / 700 / line-height: 1.0h1
セクション見出し (h3)
22.12px / 700 / line-height: 1.3 / color: #60676fセクション
サブセクション見出し (h2)
18.06px / 700 / line-height: 1.0 / white on #333333h2
トピックスタイトル — 最新のゲーム情報をお届けします。新作タイトルの発売日やイベント情報を随時更新中。
16.1px / 700 / line-height: 1.4トピックス
本文テキスト — line-height: 1.125 の非常にタイトな行間。ゲーム情報ポータルとしての情報密度を優先した設計。letter-spacing は normal、palt も使用しない。OS フォント（Helvetica / メイリオ / ヒラギノ）に依存。ABCabc 123
14px / 400 / line-height: 1.125 / letter-spacing: normal / palt: なしbody
5,478円(税込)
16.1px / 700 / line-height: 1.75 / color: #c80000価格
フッターリンクテキスト
12px / 700 / line-height: 1.75 / color: #60676fフッター

Web フォント方針: 実サイトは Helvetica / メイリオ / ヒラギノ角ゴ等の OS フォントのみ使用。
preview.html では Noto Sans JP（Google Fonts）を代替として読み込み。
CSS Custom Properties は未使用（レガシー構成）。

03 / Article & Product

記事と商品の組版サンプル

最新RPGの開発秘話 -- クリエイターが語る世界観の構築

2026.06.15 / GAME / Reading time: 5 min

物語の核心にあるのは、人と人のつながりです。広大なフィールドを冒険しながら出会う仲間たちとの絆が、やがて世界の運命を変える大きな力になります。開発チームは、プレイヤー一人ひとりが自分だけの物語を紡げるよう、膨大な選択肢と分岐を用意しました。

戦闘システムの進化

リアルタイムアクションとコマンド選択を融合した新しい戦闘システムにより、戦略的な判断とアクションの爽快感を両立しています。パーティメンバーそれぞれに固有のスキルツリーがあり、育成の自由度も大幅に向上しました。

RPG
PS5 / PC
新作ロールプレイングゲーム
9,878円 (税込)
ACTION
PS5 / Xbox / PC
アクションアドベンチャー最新作
8,778円 (税込)
ONLINE
PS5 / PC / Mac
オンラインRPG 最新拡張パック
5,478円 (税込)
e-STOREへ
03b / Topics

トピックス

トピックス一覧へ
04 / Buttons

ボタンバリエーション

全ボタン border-radius: 0px を徹底。シャープな矩形がゲーミングブランドの硬質な印象を形成。大型 CTA は line-height: 50px の固定高さ。

トピックス一覧へ
Primary CTA (#c80000)
22.12px / 400 / lh: 50px
カレンダーへ
Primary Small (#c80000)
14px / 400 / lh: 36px
記事を読む
Secondary (#e5e5e5)
14px / 400 / lh: 36px
ストア
Nav Button (#333333)
14px / 400 / lh: 44px
05 / Cards

カードコンポーネント

ゲーム

最新RPGタイトル情報

壮大な世界を舞台にした新作RPGの開発状況と、発売スケジュールに関する最新のお知らせです。

詳細を見る
出版

コミック最新刊発売

月刊誌の最新号と、注目の新連載作品をまとめてご紹介。書店・電子版ともに好評配信中です。

詳細を見る
イベント

オーケストラコンサート

ゲーム音楽をフルオーケストラで体験。全国ツアーのチケットと公演情報はこちらから。

詳細を見る
06 / Forms

フォーム要素（3 状態）

入力欄も角丸なし（border-radius: 0px）。検索フィールドのみ 2px。 背景は #ededed で統一。

デフォルト -- border: 1px solid #dedede / radius: 0px / bg: #ededed / height: 44px
フォーカス -- border: 1px solid #333333 / box-shadow: 0 0 0 2px rgba(51,51,51,0.15)
エラー -- border: 1px solid #c80000 / box-shadow: 0 0 0 2px rgba(200,0,0,0.15)
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none（全要素）
Black Surface
bg #000000 -- メインコンテンツ
Nav Surface
bg #333333 -- ナビゲーション
Card Surface
bg #e5e5e5 -- フッター・カード

実測値はすべて box-shadow: none。Square Enix は完全なフラットデザイン。
奥行きは色の明暗のみで表現: 白ヘッダー → 黒メイン → グレーフッター。

08 / Layout

レイアウト

Main Content 960px
Article 680px
Card Grid 960px (3-col)
Breakpoints

Mobile: <= 767px / Tablet: <= 1024px / Desktop: > 1024px
CTA ボタンの line-height: 50px でタッチターゲット 44px 基準をクリア。