Design System Preview
WIRED.jp

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、レイアウトの全値を可視化。Puppeteer による computed style 実測値に基づく。

詳細はこちら DESIGN.md を読む

01 / Colors

カラーパレット

Primary
Black
#000
メインテキスト・ブランドカラー
White
#fff
背景・反転テキスト
Neutral
Near Black
#1a1a1a
記事本文テキスト
Dark Gray
#333
説明テキスト
Medium Gray
#757575
メタ情報・カテゴリラベル
Light Gray
#999
無効状態・補助テキスト
Very Light Gray
#e5e5e5
ナビ内テキスト
Surface & Background
Background
#fff
ページ背景
Header BG
#000
ナビゲーション背景
CTA BG
#000
ボタン・リンク背景
Consent Overlay (Fides)
Overlay Primary
#2b2e35
同意バナー プライマリ
Overlay BG
#f7fafc
同意バナー背景
Overlay Font
#4a5568
同意バナーテキスト

カラーパレット(黒背景)

WIRED のブランドの核心である黒背景でのカラー表現。ヘッダー、ヒーロー、特集セクションなどで使用。

On Dark
White on Dark
#fff
見出し・メニューテキスト
Very Light Gray
#e5e5e5
SEE MORE STORIES 等
Medium Gray
#757575
メタ情報

02 / Typography

タイポグラフィ階層

記事タイトル — Article Title (h1)
32px / 700 / line-height: 1.625 / letter-spacing: normal / palt: あり記事ページ
ヒーロー見出し — Hero Title (h3)
32px / 700 / line-height: 1.625 / letter-spacing: normal / palt: ありトップページ
カード見出し — Card Title (h3)
20px / 700 / line-height: 1.6 / letter-spacing: normal / palt: ありトップページ
セクション見出し — Section Heading (h2)
18px / 700 / line-height: 1.556 / letter-spacing: normal / palt: あり記事ページ
本文テキスト — body の line-height: 1.75 はメディアサイトとして読みやすさを重視した広い行間。palt はグローバル適用で、見出しから本文まですべてに効いています。ABCabc 123
16px / 400 / line-height: 1.75 / letter-spacing: normal / palt: あり(body グローバル)記事ページ
Trending Stories
WiredMono / 12px / 400 / line-height: 1.33 / letter-spacing: 0.047em / palt: なしトップページ セクションラベル
Most Recent
WiredMono / 18px / 400 / line-height: 1.556 / letter-spacing: 0.031em / palt: なしトップページ セクション見出し
Business / Culture / Mobility / Science
WiredMono / 11px / 400 / line-height: 1.18 / letter-spacing: 0.083em / palt: なしナビリンク・カテゴリラベル
SZ Membership
WiredMono / 11px / 400 / line-height: 1.18 / letter-spacing: 0.1em / palt: なし会員バッジ
CTA リンク — 詳細はこちら
12px / 700 / line-height: 1.333 / palt: ありトップページ CTA
フッターテキスト — © Conde Nast Japan
11px / 400 / line-height: 1.455 / palt: ありフッター

記事ページの組版サンプル

量子コンピューティングが切り拓く、次世代AIの可能性

量子ビットの重ね合わせとエンタングルメントを活用した新しい計算パラダイムが、従来の古典的コンピュータでは解けなかった問題に挑んでいる。特に機械学習の最適化問題において、量子アニーリングが注目を集めている。

ハードウェアの進化と誤り訂正

超伝導量子ビット、イオントラップ、光量子コンピューティングなど、複数のアプローチが並行して研究されている。誤り訂正符号の実装が実用化への鍵を握る。2026年現在、論理量子ビットの実現に向けた競争が加速している。ABCabc 123

産業界へのインパクト

製薬・材料科学・金融工学・暗号技術など、量子コンピューティングが最初にブレークスルーをもたらすとされる領域は多岐にわたる。クラウド経由の量子コンピューティングサービスも広がりを見せており、スタートアップが参入しやすい環境が整いつつある。


記事組版サンプル(黒背景)

Business

生成AIがもたらすクリエイティブ産業の構造転換

テキスト、画像、音声、動画。あらゆるメディアの生成が自動化される時代に、クリエイターの役割はどう変わるのか。WIREDが取材した最前線のケーススタディから、新しい創造性のかたちを考える。


04 / Buttons

ボタンバリエーション

詳細はこちら
Primary CTA
radius: 0
DESIGN.md を読む
Outline
radius: 0
SZ Membership
Rounded
radius: 8px
Accept All
Consent
Inter / radius: 6px
詳細はこちら
Inverted CTA
Menu Button
on dark
SEE MORE STORIES
WiredMono Link
on dark

05 / Cards

カードコンポーネント

WIRED のカードはボーダーレス。罫線や影ではなく余白とタイポグラフィで区切る。

16:9 Image
Science

量子コンピュータの実用化が加速する

超伝導量子ビットの誤り訂正技術に大きなブレークスルー。実用的な量子優位性の達成が近づいている。

16:9 Image
Culture

AIアートの倫理と著作権をめぐる最前線

生成AIが作り出す作品は、誰のものか。クリエイターとテクノロジーの新しい関係を考える。

16:9 Image
Mobility

自律走行車が都市インフラを変える日

レベル4自動運転の商用化が始まり、都市計画そのものが再定義されようとしている。


カード(黒背景)

16:9 Image
Business

Web3.0とDAO:分散型組織の実験

ブロックチェーン技術がもたらす新しい組織のあり方と、その課題。

16:9 Image
Environment

気候テクノロジーへの巨額投資が意味するもの

炭素回収、核融合、グリーン水素。次世代エネルギー技術の勝者は誰か。

16:9 Image
Health

mRNAワクチン技術の次なる応用先

がん治療、自己免疫疾患、希少疾病。mRNA技術が医療を一変させる可能性。


06 / Forms

フォーム要素

Default — border: #e5e5e5, radius: 0
Focus — border: #000
Error — border: #c00

07 / Elevation

Depth & Elevation

WIRED はフラットデザイン。影やグラデーションをほぼ使わない。奥行きは画像のオーバーレイ(暗い透過)で表現する。

Flat (Default)
影なし。ボーダーのみ、またはボーダーすら使わない
Image Overlay
rgba(0,0,0,0.4) overlay
影の代わりに使用
Border vs Borderless
余白で区切るのが基本

08 / Layout

レイアウト

Conde Nast グローバルプラットフォーム。マガジン型の大きな余白レイアウト。記事間の区切りは罫線ではなく余白で表現。

記事本文エリア 中央寄せ・最大幅制限
ヒーロー画像 全幅ブリード (100%)
Spacing Principles
大きな余白で区切り
ボーダーレスカードグリッド
WIRED
黒背景ヘッダー