AXIS（アクシス） DESIGN.md

Japan

AXIS Web（https://www.axismag.jp/）のデザイン仕様書。「デザインの視点で、人間の可能性や創造性を伝えるメディア」を掲げる、デザイン誌 AXIS のオンライン版。建築・プロダクト・グラフィック・テクノロジー等を横断するデザインジャーナリズム。最大の特徴は純白（#ffffff）の地に黒〜濃グレー（#000 / #333 / #666）だけで組む徹底したモノクロームと、Type Project の独自書…

Raw DESIGN.md

At a glance

Group: Japan
Main color: #cf2e2eRed design systems
Fonts: AXIS ProN MArialAXIS ProN BDIN Next LT Pro

Colors in this file

#ffffff
キーワード
#f1f1f1
密度
#666666
Text Muted
#eeeeee
グレーの濃淡
#2b2b2b
グレーの濃淡
#f9f9f9
グレーの濃淡
#333333
Text Dark
#000000
Ink (Black)
#f5f5f5
グレーの濃淡
#01aeeb
WordPress（Gutenberg）の既定プリセット

AXIS Web（https://www.axismag.jp/）のデザイン仕様書。「デザインの視点で、人間の可能性や創造性を伝えるメディア」を掲げる、デザイン誌 AXIS のオンライン版。建築・プロダクト・グラフィック・テクノロジー等を横断するデザインジャーナリズム。最大の特徴は 純白（#ffffff）の地に黒〜濃グレー（#000 / #333 / #666）だけで組む徹底したモノクローム と、Type Project の独自書体「AXIS Font（AXIS ProN）」を和欧ともに全面採用 していること。英字ラベルには DIN Next LT Pro を併用。letter-spacing も palt も使わず、line-height を 1.0 前後まで詰めた、雑誌の版面のように緊密で硬質な組版。実サイトの computed style 実測（2026-06-29 取得）に基づく。

1. Visual Theme & Atmosphere

デザイン方針: 純白の地にモノクロームのテキストだけで構成する、ニュートラルで知的なデザインジャーナルの版面。色を主役にせず、写真（記事サムネイル）と端正なタイポグラフィに語らせる。装飾を排し、コンテンツそのものを際立たせる editorial（編集的）な硬質さ
AXIS について: 1981年創刊のデザイン誌 AXIS のWebメディア。建築 / プロダクト / インテリア / グラフィック / テクノロジー / アート / ファッション等、デザインに関わる領域を横断して記事化する。カテゴリ数が非常に多く、情報設計はカテゴリ・タグ駆動
密度: 中〜高密度。グレーの面（#f1f1f1）で区切ったカテゴリナビ、記事サムネイルのグリッド、line-height を詰めた緊密な見出しで、雑誌的に情報を敷き詰める
キーワード: 純白 #ffffff、モノクローム、AXIS Font、DIN、グレー面 #f1f1f1、line-height 1.0（緊密）、letter-spacing なし、palt オフ、editorial、ニュートラル
特徴:
- 地色は 純白 #ffffff（--wp--preset--color--white、html/body 実測）。クリーム等の温度は持たせず、ニュートラルな白
- 色相を持つブランドカラーを基本的に使わない。黒 #000 / 濃グレー #333 / グレー #666 の3段のモノクロームでテキスト階層を作る
- 面の色は グレーの濃淡のみ。カテゴリナビ・タグ面は #f1f1f1、画像プレースホルダは #eeeeee、薄い区画は #f9f9f9 / #f5f5f5、ニュースレター帯は濃いチャコール #2b2b2b
- フォントは Type Project の AXIS Font（AXIS ProN） を和欧ともに採用。M（Medium）と B（Bold）の2ウェイトを使い分ける。英字ラベル・カテゴリ名には DIN Next LT Pro を併用
- letter-spacing は基本 normal、font-feature-settings も normal（palt オフ）。字間をいじらず、AXIS Font 本来のメトリクスで組む。これは palt をグローバル適用する TYPICA とは対照的
- line-height を 1.0 前後まで詰める。見出しもナビも本文も font-size ≒ line-height で、版面が緊密。媒体名どおり「軸（axis）」の通った硬い組版
- ボタン・リンクの形状は 3系統。カテゴリナビは角丸ゼロの矩形（#f1f1f1 面）、タグは完全 pill（radius 46px・グレー枠線）、ニュースレターの購読ボタンは pill（radius 25px）

2. Color Palette & Roles

実サイトの computed style 実測値。色相を持つブランドカラーは持たず、白地＋モノクローム＋グレー面で構成する。すべて hex 表記。

Brand / Core

Background (White) (#ffffff): ページ背景・メインキャンバス（html/body 実測、--wp--preset--color--white）。ニュートラルな純白
Ink (Black) (#000000): ナビ・見出し・本文の最も濃いテキスト。AXIS のモノクローム基調の主役
Text Dark (#333333): 見出し・本文・リンクの標準テキスト色。純黒よりわずかに和らげた濃グレー
Text Muted (#666666): カテゴリラベル・メタ情報・補助テキスト・タグ枠線

Surface（面のグレー濃淡）

Role	hex	用途
Surface (Nav / Tag)	`#f1f1f1`	カテゴリナビ・タグ面（最頻出、count 29）
Image Placeholder	`#eeeeee`	記事サムネイルのプレースホルダ（count 24）
Surface Light	`#f9f9f9`	セクション区画の薄い面（count 7）
Surface Light 2	`#f5f5f5`	"FOLLOW US" 等の補助面
Dark Surface	`#2b2b2b`	ニュースレター登録帯（"Sign up for AXIS…"）のダーク地
Mid Gray	`#666666`	検索送信ボタン地・タグ枠線

Text

Text Primary (#000000): ナビ・h1・最重要テキスト
Text Standard (#333333): 見出し（h2/h3）・本文・リンクの基本色
Text Muted (#666666): メタ情報・カテゴリラベル・注記
On Dark (#ffffff): ダーク帯（#2b2b2b）上のテキスト

Semantic

AXIS は意味色（Danger / Warning / Success）を独自に持たない。エラー表示等が必要な場合は、汎用の赤 #cf2e2e（WordPress プリセット --wp--preset--color--vivid-red）を最小限で用いる
リンクの hover はカラーではなくモノクロームの濃度変化・下線で表現するのが AXIS の流儀

注: customProperties に並ぶ --wp--preset--color--*（vivid-red, vivid-cyan-blue 等）や多数の gradient は WordPress（Gutenberg）の既定プリセットであり、AXIS が意図的に使うブランドパレットではない。実際の版面はモノクロームで構成されている。--swiper-theme-color: #01aeeb（シアン）はスライダーUI部品のデフォルト色で、ブランド色ではない。

3. Typography Rules

実サイトは和欧ともに AXIS Font（AXIS ProN、Type Project） を採用。M（Medium）と B（Bold）の2ウェイト。英字ラベル・カテゴリ名に DIN Next LT Pro を併用。 AXIS Font / DIN Next LT Pro はいずれもライセンス書体のため preview.html では表示できない。代替は後述。

3.1 和文フォント

ゴシック体: AXIS Font（"AXIS ProN M" / 太字は "AXIS ProN B"、Type Project）。フォールバックは NoChattering（チラつき防止用の透明フォント）のみが指定されている
- AXIS Font は AXIS 誌のために Type Project が開発したコーポレート書体。直線的で視認性が高く、和欧の調和を重視した現代的ゴシック
明朝体: 使用しない（モノクローム・ゴシックで統一）

3.2 欧文フォント

サンセリフ（本文・和欧混植）: AXIS Font（AXIS ProN）が欧文グリフも内包し、和文と一体で組む
サンセリフ（ラベル・カテゴリ）: DIN Next LT Pro（"DIN Next LT Pro" → "Helvetica Neue" → Arial → sans-serif）。英字のカテゴリ見出し（"Product" 等）に使用。幾何学的で工業的な DIN 系
フォーム入力: Arial（input は実測で Arial 単独。OS依存のフォールバック）

3.3 font-family 指定

css/* 和文・英字本文（AXIS Font、実測） */
font-family: "AXIS ProN M", NoChattering;       /* 通常 */
font-family: "AXIS ProN B", NoChattering;       /* 太字相当（見出し） */

/* 英字ラベル・カテゴリ名（実測） */
font-family: "DIN Next LT Pro", "Helvetica Neue", Arial, sans-serif;

/* フォーム入力（実測） */
font-family: Arial;

フォールバックの考え方: 原典は AXIS Font に強く依存し、フォールバックは NoChattering（描画チラつき防止の透明フォント）のみ。AXIS Font が読み込めない環境を実質想定していない設計。再現する場合は必ず游ゴシック / ヒラギノ等の和文フォールバックを補うこと
DIN Next LT Pro はフォールバックチェーンが Helvetica Neue → Arial と整備されており、英字ラベルは欧文サンセリフで安定する

preview.html での代替フォント:

AXIS Font（"AXIS ProN M" / "AXIS ProN B"）→ IBM Plex Sans JP（直線基調で視認性が高く、AXIS Font の硬質でニュートラルな印象に近い和文ゴシック。weight 400/500/700）
DIN Next LT Pro（幾何学サンセリフ・ラベル）→ Archivo（DIN 系のグロテスク・サンセリフで字幅・骨格が近い。weight 400/500/600）

3.4 文字サイズ・ウェイト階層

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Heading (Feature)	AXIS ProN M	32px	500	1.4 (44.8px)	normal	大型記事見出し（#333）
Section Title	AXIS ProN M	24px	400	1.0	normal	セクション見出し（"World's Design Journal" 等、#000/#333）
Article Title	AXIS ProN B	18px	400(=Bold書体)	1.0	normal	記事カテゴリ見出し（B ウェイト書体、#333）
H1	AXIS ProN M	16px	400	1.0	normal	ページ最上位（サイズは控えめ）
Body / Nav	AXIS ProN M	16px	400	1.0	normal	本文・グローバルナビ（#333）
Sub Nav / Category	AXIS ProN M	14px	400	1.0	normal	カテゴリナビ・サブナビ（#333、#f1f1f1 面）
English Label	DIN Next LT Pro	16px	400	1.0	0.32px (≈0.02em)	英字カテゴリ名 "Product" 等（#000）
Caption / Meta	AXIS ProN M	12px	400	1.0–1.3	normal	メタ情報・カテゴリラベル（#666）
Caption (lead)	AXIS ProN M	12px	400	1.3 (15.6px)	normal	リード付き注記（#666）

ウェイトは 書体名で切り替えるのが AXIS の流儀。CSS の font-weight は概ね 400 のままで、太字は "AXIS ProN B" という別ファミリ指定で実現する（h3 のカテゴリ見出し等）。例外的にフィーチャー見出しは font-weight: 500
大半の要素が line-height ≒ font-size（比率 1.0）。フィーチャー見出しのみ 1.4、小さな注記が 1.3 まで。版面を緊密に詰める設計

3.5 行間・字間

本文の行間 (line-height): 実測は 約 1.0（16px → 16px）。AXIS は本文も行高を詰める硬い組版。ただし長文記事本文をエージェントに組ませる場合は、可読性のため 1.6〜1.8 に緩めることを推奨（実サイトのトップ要素の 1.0 は見出し・一覧・ナビ中心の値）
見出しの行間: セクション見出し 1.0、大型フィーチャー見出し 1.4（44.8px / 32px）
本文の字間 (letter-spacing): normal（字間は調整しない）
英字ラベルの字間: DIN ラベルのみ 0.32px（16px → ≈0.02em）とごく僅かに開く

ガイドライン:

AXIS の質感を出すなら letter-spacing は normal を基本にし、字間をいじらない
一覧・ナビ・見出しは line-height を詰める（1.0〜1.4）。一方で段落本文は line-height 1.6 以上を確保し可読性を担保する（実サイト一覧の 1.0 をそのまま長文に適用しない）

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;     /* または keep-all */

行頭禁止: ）」』】、。・：；？！
行末禁止: （「『【

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* AXIS は palt を使わない */

重要: AXIS は font-feature-settings: normal（実測で全要素が normal）。palt（プロポーショナル字詰め）を適用していない。AXIS Font 本来の字幅・メトリクスでベタ組みに近く組むのが流儀で、字間を詰める TYPICA とは対照的
再現時も palt はオフのままにし、字間の操作で雰囲気を作らない

3.8 縦書き

該当なし。横書きのみ。

4. Component Stylings

Buttons

AXIS のクリック要素は 3系統。カテゴリナビは角丸ゼロの矩形、タグは完全 pill（枠線）、購読ボタンは pill（塗り）。色はモノクロームが基本。

Category Nav（矩形・グレー面） — グローバル/サブナビのカテゴリリンク

Background: #f1f1f1
Text: #333333
Border: なし
Padding: 12px 9px
Border Radius: 0px（角丸なし・矩形）
Font: AXIS ProN M / 14px / 400

Tag（完全 pill・枠線） — "#TAKT PROJECT" 等のタグ

Background: #ffffff
Text: #666666
Border: 1px solid #666666
Padding: 0 15px（高さ 46px、行で pill 成立）
Border Radius: 46px（完全 pill）
Font: AXIS ProN M / 16px / 400 / line-height 46px

Newsletter Submit（pill・白塗り） — "購読する"

Background: #ffffff
Text: #2b2b2b（ダーク帯 #2b2b2b の上に置かれる白ボタン）
Border: なし
Padding: 7px 48px
Border Radius: 25px（pill）
Font: Noto Sans JP / 16px / 700（このボタンのみ Noto Sans JP・太字）

Search Submit（小・角丸） — 検索フォームの送信

Background: #666666
Text: #ffffff
Border: なし
Padding: 1px 6px
Border Radius: 3px
Font: Arial / 13.3px / 400

注: 矩形カテゴリナビと完全 pill タグが同居するのが AXIS の特徴。主たるナビは矩形（radius 0）、補助的なタグは pill（radius 46px） と役割で形を分ける。

Inputs

Background: #f1f1f1（検索）/ 透明（ニュースレターは下線型）
Border: なし（検索は枠線なしのグレー面）
Border Radius: 0px（矩形）
Padding: 0 18px（高さ 50px 前後、line-height 50px）
Font Size: 18px（検索）/ 14px（ニュースレター）
Font Family: Arial（実測。再現時は和文フォールバックを補う）
再現の推奨: 矩形・グレー面（#f1f1f1）・枠線なしを基本とし、フォーカス時のみ濃グレーの枠 or 下線を足す

Cards（記事サムネイル）

Background: #ffffff
画像プレースホルダ: #eeeeee
Border: なし（区切りは余白とグレー面で表現）
Border Radius: 0px（矩形。角を丸めない）
構成: 写真（4:3 等）を大きく置き、その下にカテゴリラベル（#666 / 12px）＋記事タイトル（#333）＋メタ情報の editorial レイアウト
カードは影を持たずフラット。グレーの区画（#f9f9f9）で領域をまとめる

5. Layout Principles

Spacing Scale

実サイトの WordPress スペーシングプリセット（rem基準）を px 換算した目安。

Token	Value	由来
XS	7px	`--wp--preset--spacing--20` (0.44rem)
S	11px	`--wp--preset--spacing--30` (0.67rem)
M	16px	`--wp--preset--spacing--40` (1rem)
L	24px	`--wp--preset--spacing--50` (1.5rem)
XL	36px	`--wp--preset--spacing--60` (2.25rem)
XXL	54px	`--wp--preset--spacing--70` (3.38rem)
XXXL	81px	`--wp--preset--spacing--80` (5.06rem)

Container

Max Width: 約 1200px（記事グリッドのコンテンツ幅）
Padding (horizontal): 20〜40px

Grid

Columns: 記事一覧は 2〜4 カラム
Gutter: 16〜24px
カテゴリ駆動の情報設計。グレー面でカテゴリ群を区切り、その下にサムネイルグリッドを敷く

6. Depth & Elevation

AXIS は影をほとんど使わず、グレーの面とテキスト濃度で階層を作るフラット設計。

Level	Shadow	用途
0	none	カード・カテゴリ面（基本フラット、グレー面で区切る）
1	`0 1px 3px rgba(0,0,0,0.08)`	ドロップダウン・浮かせる必要のある最小限の要素
2	`0 6px 18px rgba(0,0,0,0.12)`	モーダル・ドロワー（補助的に使用）

WordPress プリセット（--wp--preset--shadow--natural 等）は存在するが、AXIS の版面では基本的に未使用。影に頼らずフラットに保つ。

7. Do's and Don'ts

Do（推奨）

地は純白 #ffffff を使い、テキストは黒 #000 / 濃グレー #333 / グレー #666 の3段モノクロームで階層を作る
面の区切りはグレーの濃淡（#f1f1f1 / #eeeeee / #f9f9f9）と余白で行う
フォントは AXIS Font（代替 IBM Plex Sans JP）を和欧一体で使い、英字ラベルのみ DIN Next LT Pro（代替 Archivo）を併用する
太字は font-weight ではなく Bold 書体（AXIS ProN B） への切り替えで表現する意識を持つ
letter-spacing: normal / font-feature-settings: normal（palt オフ）を守り、字間で雰囲気を作らない
見出し・ナビ・一覧は line-height を詰める（1.0〜1.4）。一方で段落本文は 1.6 以上を確保する
ボタンは役割で形を分ける（主ナビ＝矩形 radius 0、タグ＝完全 pill radius 46px）

Don't（禁止）

色相を持つブランドカラー（青・赤・緑等）を主役に使わない。AXIS はモノクローム。WordPress プリセットの vivid 系・gradient・--swiper-theme-color #01aeeb をブランド色と誤用しない
クリームや色付き地を敷かない（純白 #ffffff が基調）
palt を適用して和文を詰めない（AXIS は palt オフ）
letter-spacing を大きく開けない（字間は normal が基本）
すべての要素を pill にしない（主ナビは矩形が AXIS の特徴）
AXIS Font 単独指定のまま放置しない（再現時は游ゴシック / ヒラギノ等の和文フォールバックを必ず補う）
カードに影や大きな角丸を付けない（フラット・矩形が基調）

8. Responsive Behavior

Breakpoints

Name	Width	説明
Mobile	≤ 749px	1 カラム、カテゴリナビはドロワー/アコーディオン
Tablet	750–989px	2 カラム
Desktop	≥ 990px	2〜4 カラムの記事グリッド

タッチターゲット

最小サイズ: 44px × 44px（タグの pill 高さ 46px はこれを満たす）

フォントサイズの調整

フィーチャー見出し（32px）はモバイルで 22〜26px 程度に縮小する
和文本文・ナビはモバイルでも 14〜16px を基準に保つ

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff (White)
Ink: #000000 / Text: #333333 / Muted: #666666
Surface: #f1f1f1 (nav/tag) / #eeeeee (image) / #f9f9f9 / #2b2b2b (dark band)
和文・英字 Font: "AXIS ProN M" / "AXIS ProN B"  /* 代替: "IBM Plex Sans JP" */
英字ラベル Font: "DIN Next LT Pro", "Helvetica Neue", Arial, sans-serif  /* 代替: "Archivo" */
Body Size: 16px / Line Height: 1.0（一覧）〜1.6+（段落本文）/ Letter Spacing: normal
OpenType: font-feature-settings: normal（palt オフ）
Button: 主ナビ=矩形 radius 0 / タグ=pill radius 46px / 購読=pill radius 25px
Card: フラット・矩形（影なし・角丸なし）

プロンプト例

AXIS のデザインシステムに従って、デザイン記事の一覧ページを作成してください。
- 地は純白 #ffffff。色相を持つブランドカラーは使わず、黒 #000 / 濃グレー #333 / グレー #666 のモノクロームで組む
- 面の区切りはグレーの濃淡（カテゴリナビ・タグ面 #f1f1f1、画像プレースホルダ #eeeeee）と余白で行う
- フォントは AXIS Font（代替 IBM Plex Sans JP）を和欧一体で使用。英字カテゴリ名のみ DIN Next LT Pro（代替 Archivo）
- letter-spacing は normal、font-feature-settings も normal（palt オフ）
- 見出し・ナビ・一覧は line-height を 1.0〜1.4 に詰める。段落本文だけは 1.6 以上にする
- カテゴリナビは角丸ゼロの矩形（#f1f1f1 面）、タグは完全 pill（radius 46px・グレー枠線 #666）で形を分ける
- カードは影なし・角丸なしのフラットな矩形。写真＋カテゴリラベル（#666）＋タイトル（#333）の editorial 構成
- 全体はニュートラルで硬質なデザインジャーナルの版面に仕上げる

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/axis.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "axis" })

BANDAI NAMCO Entertainment（バンダイナムコエンターテインメント）

Japan · Helvetica Neue

BANDAI NAMCO Entertainment（https://www.bandainamcoent.co.jp/）のデザイン仕様書。日本を代表するゲーム・エンターテインメント企業。ドラゴンボール、ワンピース、ガンダム、パックマン等の IP を展開。実サイトの computed style 実測（2026-05-22 取得）に基づく。

HYKE

Japan · Helvetica

HYKE（https://hyke.jp/）のデザイン仕様書。 Shopify ベースのオンラインストア。実サイトの CSS Custom Properties および computed style に基づく。 A-OTF Gothic BBB Pro N（Morisawa / Adobe Fonts）はドメインライセンスのため、preview.html では Google Fonts の Zen Kaku Gothic New で代…

Ishinomaki Laboratory（石巻工房）

Japan · General Grotesque Mono Regular

Ishinomaki Laboratory / 石巻工房（https://ishinomaki-lab.org/）のデザイン仕様書。 2011年の東日本大震災の復興から生まれた、世界的に評価される日本の DIY 家具ブランド。素の合板（plywood）と最小限の直線で構成される、質実剛健なものづくりの思想がそのまま Web デザインになっている。最大の特徴はモノスペース・グロテスク書体（General Grotesque Mono…

Kalita (カリタ)

Japan · Questrial

Kalita 公式サイト (https://www.kalita.co.jp/) のデザイン仕様書。 1958年創業、横浜発のコーヒー機器総合メーカー。三つ穴ドリッパーに代表される「カリタ式」で知られる。グレー #999999 のページ背景、シャープな直角コンポーネント、ゴーストボタンが特徴的な工業的デザイン。実サイトの computed style に基づいて記述。

PARCO（パルコ）

Japan · NotoSansCJKjp

株式会社パルココーポレートサイト（https://www.parco.co.jp/）のデザイン仕様書。 1969年創業、渋谷・池袋・名古屋などの都市型商業施設を運営する流通企業。実サイトの computed style 実測（2026-05-07 取得）に基づく。

カゴメ（Kagome）

Japan · Inter

カゴメ（https://www.kagome.co.jp/）のデザイン仕様書。日本を代表する食品・飲料メーカー。トマト製品・野菜ジュースを軸に「自然を、おいしく、楽しく。」を掲げる。実サイトの computed style 実測（2026-05-09 取得）に基づく。

All Design.md files Browse by font