Takram（タクラム） DESIGN.md

Takram（https://ja.takram.com/）コーポレートサイトのデザイン仕様書。 「We're a design innovation firm.」を掲げる、デザインエンジニアリング・ブランディング・サービスデザインを横断する東京・ロンドン・ニューヨーク拠点のデザインファーム。 実サイトの computed style 実測（2026-05-07 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 純白 #ffffff の余白上に、カスタム欧文 theinhardt と森澤 MFW-KoburinaGoStdN-W3（小琳ゴ Std N W3） の混植で構築する、極限までストイックなスイス・タイポグラフィ系デザイン。色面はほぼ存在せず、文字組と写真の間隔だけで構造を作る
• 密度: ヒーローの h1 が 64px / weight 400 / line-height 1.0 / letter-spacing -0.04em（行間ゼロ＝サイズ一致）、本文も 16px / line-height 1.0 という、極端にタイトな縦組。そのぶん上下の余白を大きく取って呼吸を作る
• キーワード: theinhardt、Koburina Go、白基調、letter-spacing マイナス、line-height 1.0、weight 300/400 軽量、写真直置き、ヘッダー固定パネル
• 特徴:
  • CSS Custom Properties が --color-black / graphite / gray-1〜5 / white / red の極小パレットで、UI には white/black/graphite/gray と、わずかな赤しか出てこない
  • ヘッダーのオーバーレイパネルが #343434（graphite）の暗色面で、ナビ展開時のみ画面に登場する。それ以外は無色
  • 全タイポグラフィに font-feature-settings: "palt" を適用 — Koburina の和文プロポーショナル詰めを最大限活かす
  • 見出しは letter-spacing をマイナスで攻める（h1: -0.04em、h2: -0.02em、span: -0.015em）。欧文 theinhardt のオプティカルサイズに合わせた詰め
  • 本文段落の line-height は 1.6（記事領域）、UI の単発テキストは 1.0（タイト）と二極化
  • 補助文字色は #686868（mid-gray）。区切り線・ボーダーは Custom Property の --color-gray-1〜5 でグレースケール 5 段
  • 角丸ゼロ。ボタンらしいボタンが存在せず、リンクテキストとアンダーラインで導線を作る
  • ダークモード非対応

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。 CSS Custom Properties は --color-* のみが定義されており、UI に出てくる色はほぼ無彩色。

Brand

• Takram Red (#c40b0b 推定): --color-red として定義。実 UI ではアクセントとして稀に使用（プロジェクト記事内の小さな囲み等）
• 実質的なブランドカラーは 無彩色 + 赤一点。色は写真とプロジェクト内の作品の中だけに存在

Neutral（実測値）

• Black (#1a1a1a): h1・本文の基本テキスト色（--color-black）
• Graphite (#343434): ヘッダーのオーバーレイパネル背景色（--color-graphite）
• Mid Gray (#686868): 補足テキスト・キャプション・カテゴリラベル（--color-gray-3 相当）
• Header Black (#000000): 最小ロゴ・ナビ要素の純黒
• White (#ffffff): ページ背景（--color-white）

Custom Properties で定義されているグレースケール

--color-black       /* #1a1a1a */
--color-graphite    /* #343434 */
--color-gray-1      /* 推奨: #2a2a2a */
--color-gray-2      /* 推奨: #525252 */
--color-gray-3      /* 推奨: #686868 */
--color-gray-4      /* 推奨: #a8a8a8 */
--color-gray-5      /* 推奨: #d8d8d8 */
--color-white       /* #ffffff */
--color-red         /* #c40b0b 推定 */
--color-selection-dark   /* テキスト選択時 */
--color-selection-light  /* テキスト選択時 */

Semantic（補完）

• 実サイトに表面化したエラー・成功色は確認できない。ステータス色を追加する場合は 赤（#c40b0b）／ 緑（#2f8f5f 推奨）／ 黄（#c89a3c 推奨） を控えめなトーンで。Takram のミニマリズムを壊さないこと

3. Typography Rules

3.1 和文フォント

• メイン（軽量ゴシック）: MFW-KoburinaGoStdN-W3（小琳ゴ Std N W3 / Morisawa） — 細身で柔らかい humanist gothic。Takram の知性とニュートラルさの源
• フォールバック: YuGothic / Yu Gothic / 游ゴシック / 游ゴシック体 / Hiragino Kaku Gothic ProN / Hiragino Sans

3.2 欧文フォント

• メイン: theinhardt（カスタム / Optimo） — Helvetica や Akzidenz Grotesk 系の中性サンセリフ。ニュートラルで構築的、weight 300〜700 を使い分ける
• フォールバック: theinhardt Fallback（カスタム fallback metrics font）→ システム sans-serif

3.3 font-family 指定

実サイトの実測値（和欧混植は1系統に統一）:

cssfont-family: theinhardt, "theinhardt Fallback",
  MFW-KoburinaGoStdN-W3, YuGothic, "Yu Gothic", 游ゴシック, 游ゴシック体,
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

フォールバックの考え方:

• 欧文の theinhardt を先頭に置く — ASCII 文字は theinhardt で組まれる
• 和文は Morisawa MFW-KoburinaGoStdN-W3 が最優先。Web フォントが読めない環境では游ゴシック → ヒラギノへフォールバック
• AI で再現する場合、theinhardt は商用ライセンスのため Inter / Helvetica Neue / Akzidenz-Grotesk で代替し、Koburina は Noto Sans JP（Google Fonts）の Light / Regular で雰囲気を近づける（ただし Koburina の humanist な柔らかさは別物）
• font-feature-settings は全要素で "palt" を有効化

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

実測値（トップページ・projects ページ、2026-05-07 取得）

3.5 行間・字間

• 本文（記事）の行間: 1.6（26.112px / 16.32px）— 唯一 line-height: 1.6 を使う領域
• その他すべての UI テキスト: line-height: 1.0 または 1.15 前後（ヒーロー・見出し・ナビ・キャプション）
• 見出しの字間: マイナス方向（-0.01〜-0.04em）— 欧文 theinhardt のオプティカル詰めに合わせる
• キャプション・サブ要素の字間: プラス方向（+0.005〜+0.03em）— 小さい文字の可読性確保

ガイドライン:

• 大型の見出しほど letter-spacing をマイナスに強く（h1: -0.04em）— Takram の「文字組で密度を作る」言語
• 12px 以下の小文字にはプラス方向の字間（0.5〜1px）を付けて潰れを防ぐ
• 本文段落以外は line-height: 1.0〜1.15 で攻めるが、可読性が落ちる場合は 1.4〜1.6 へ緩める

3.6 禁則処理・改行ルール

cssword-break: normal;
overflow-wrap: break-word;
line-break: strict;

• Takram の和文は短文・キャプション中心で長文段落は記事ページのみ
• 英語と日本語が混在する箇所では theinhardt 側のカーニングが効くため、palt 適用済みでも自然に詰まる

3.7 OpenType 機能

cssfont-feature-settings: "palt";

• 全要素で "palt" を有効化（実測で確認）— 和文プロポーショナル詰めをサイト全体に適用
• 欧文 theinhardt 側の kerning は Web フォント側の kern がデフォルト ON

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Takram のサイトには従来的なボタンは登場しない。リンクテキスト or アンダーライン or 言語切替の文字スイッチのみ。

Lang Switch (ja / en / zh)

• Background: transparent
• Text (active): #1a1a1a weight 400
• Text (inactive): #686868 weight 300
• Padding: 0（文字そのもの）
• Font: theinhardt 16px / letter-spacing 0.48px

Filter Tabs (Projects ページ)

• Background: transparent
• Text (active): #1a1a1a weight 400
• Text (inactive): #686868 weight 400
• Border: 1px solid #d8d8d8（推奨）
• Padding: 8px 16px
• Font: 14.5px / letter-spacing -0.145px
• Border Radius: 0px（角丸なし）

Text Link

• Color: #1a1a1a
• Hover: underline + opacity 0.7（推奨）
• Font: 16px / weight 300〜400 / letter-spacing 0
• 矢印記号 → を末尾に付けるパターンが多い（"Learn more →"）

Inputs

実 UI に検索欄等は表面化していないが、Takram トーンに合わせる場合:

• Background: #ffffff
• Border: 0px または 1px solid #1a1a1a（罫線型・下線型）
• Border Radius: 0px
• Padding: 8px 0（下線型）
• Font: 16px / theinhardt + Koburina

Cards / Project Tiles

• Background: #ffffff
• Border: なし
• Border Radius: 0px（写真の四角を尊重）
• Padding: 写真直下にキャプション領域 16〜24px
• Shadow: フラット（影なし）

Header / Nav

通常時（白背景）

• Background: #ffffff
• Color: #000000 / #1a1a1a
• Padding: 16px 32px
• Logo "Takram" 左、ナビ右

メニュー展開時（オーバーレイ）

• Background: #343434（graphite）
• Color: #ffffff
• Sub Nav (LayoutMenuLink): color #686868、font 14px / weight 400 / letter-spacing -0.07px

Footer

• Background: #ffffff
• Color: #1a1a1a（メイン）/ #686868（補足）
• Padding: 64px 32px 32px
• "Feel free to connect." 14.28px weight 300 / letter-spacing 0.14px

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: --width-max（推奨: 1280〜1440px）
• Margin Side: --margin-side（推奨: mobile 16px / desktop 32〜64px）
• Grid Margin: --margin-grid（推奨: 16〜24px）

Border Radius Scale

• Takram は 全要素で角丸ゼロ。写真・パネル・テキストブロックすべて直角

Z-Index Scale（CSS Custom Properties）

css--z-index-1, --z-index-2, --z-index-3, --z-index-4
--z-index-negative-1, --z-index-negative-2, --z-index-negative-3, --z-index-negative-4

• 4 段の正値・4 段の負値で構成。レイヤリングを明示的にコントロール

6. Depth & Elevation

• Takram は影をほぼ使わない。立体表現は #343434 のオーバーレイパネルだけが面として登場
• カード・モーダルも基本フラット

7. Do's and Don'ts

Do（推奨）

• theinhardt + MFW-KoburinaGoStdN-W3 の混植で組む。和文先頭ではなく欧文 theinhardt を先頭にして ASCII グリフを優先
• 全要素で font-feature-settings: "palt" を有効化
• 大型見出しの letter-spacing は マイナス方向（-0.02 〜 -0.04em） に
• 12px 以下の小文字には プラス方向の字間（0.5〜1px） を付ける
• 本文段落以外は line-height 1.0 〜 1.15 で攻める
• 角丸はすべて 0px に統一
• 影は使わず、ボーダーも最小限（#d8d8d8 の 1px が上限）
• 色は 無彩色 + 写真の中の色だけに留める
• ヘッダーオーバーレイは #343434（graphite） の固有色を使う

Don't（禁止）

• 角丸（border-radius > 0）を使わない
• 大きめの本文に line-height: 1.5 以上を適用しない（記事本文 1.6 だけが例外）
• 純黒 #000000 を本文に多用しない（#1a1a1a を基本に）
• カラフルなアクセント・シャドウ・グラデーションを入れない
• 大型見出しに letter-spacing: normal を使わない（締まりが消える）
• 背景に --color-graphite 以外の濃色を使わない
• ボタンに background-color 付きの矩形を作らない（リンクテキストか、線ベースで構成）

8. Responsive Behavior

Breakpoints

• CSS Custom Properties で --bp-sp が定義されている — モバイルブレークポイントは 1 段のみ

モバイル時の調整

• Hero h1: 64px → 40〜48px
• Page Title h1: 56px → 32〜40px
• Lead: 24px → 18〜20px
• ナビは drawer ハンバーガーへ切り替え
• グリッド 4 → 2 → 1 カラム

タッチターゲット

• 最小 44×44px。テキストリンクは padding 12px 0 以上

ダークモード

• 該当なし。常時ライトモード

9. Agent Prompt Guide

クイックリファレンス

Background: #ffffff
Text Primary: #1a1a1a
Text Muted: #686868
Surface Dark (overlay): #343434
Brand Red (rare accent): #c40b0b

Font: theinhardt, "theinhardt Fallback", MFW-KoburinaGoStdN-W3, YuGothic, "Yu Gothic", 游ゴシック, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
Web Fallback (代替): Inter, "Helvetica Neue", "Noto Sans JP", sans-serif

Hero h1: 64px / weight 400 / line-height 1.0 / letter-spacing -0.04em / palt
Page h1: 56px / weight 400 / line-height 1.0 / letter-spacing -0.02em / palt
Body Article: 16.32px / weight 300 / line-height 1.6 / letter-spacing +0.01em / palt
Body UI: 16px / weight 300 / line-height 1.0 / letter-spacing normal / palt
Caption: 11-14px / weight 300 / line-height 1.0 / letter-spacing +0.005-0.01em / color #686868

Border Radius: 0px（全要素）
Shadow: none（基本フラット）
font-feature-settings: "palt" (全要素)

プロンプト例

Takram のデザインに従って、プロジェクト一覧ページを作成してください。
- 背景: #ffffff（純白）
- フォント: theinhardt, MFW-KoburinaGoStdN-W3, YuGothic, "Hiragino Kaku Gothic ProN", sans-serif
  （Web 代替: Inter, "Helvetica Neue", "Noto Sans JP", sans-serif）
- 全要素で font-feature-settings: "palt" を有効化
- ページタイトル h1: 56px / weight 400 / line-height 1.0 / letter-spacing -0.02em / color #1a1a1a
- プロジェクトカード見出し: 16px / weight 400 / line-height 1.25 / letter-spacing -0.01em / color #1a1a1a
- カードキャプション: 11-12px / weight 300 / line-height 1.0 / letter-spacing +0.01em / color #686868
- フィルタタブ: 14.5px / weight 400 / letter-spacing -0.01em / active #1a1a1a / inactive #686868
- 本文段落（記事内のみ）: 16.32px / weight 300 / line-height 1.6 / letter-spacing +0.01em
- 角丸はすべて 0px、影は使わない
- カードの区切りは余白だけで作る（ボーダーなし）
- 色はモノクロ（#1a1a1a / #686868 / #ffffff）と写真の中の色だけに
- ヘッダーオーバーレイのみ #343434（graphite）の暗色面を使ってよい
- ボタンは作らず、テキストリンク + 矢印（→）で導線を構成