KIGI（キギ） DESIGN.md

KIGI｜キギ（https://ki-gi.com/）のデザイン仕様書。 アートディレクター 植原亮輔とデザイナー 渡邉良重が 2012 年に設立した東京のデザインスタジオ。DRAFT 在籍時に D-BROS を手がけた二人による、アートディレクション／グラフィック／プロダクト・アートを横断する制作を軸に据える。 最大の特徴は 極小で端正な和文ゴシック（FOT-筑紫ゴシック Pr5 L・10px） と、特大の欧文 Helvetica ディスプレイ（作品タイトル 65px / weight 700） の落差、そして アシッドなミント／ティール系のアクセント（#00c69e / #00ffcc） を 柔らかいライトグレー #e6e6e6 の地 と 作品面の黒 #000000 に効かせる設計。文字色は純黒ではなく 温かみのある暗褐色 #221815。全面に font-feature-settings: "palt" が効く。 実サイトの computed style 実測（2026-07-26 取得。CMS は WordPress）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 詩的でクラフト志向、遊びと精度の同居。ナビゲーションや説明文は極小の和文ゴシックで囁くように置き、作品タイトルには特大の Helvetica を大胆にぶつける。この「小さい和文 × 大きい欧文」の落差そのものがスタジオの佇まいを作る
• KIGI について: アートディレクション・グラフィック・プロダクト／アートを横断するデザインスタジオ。Web はギャラリー然として作品写真を主役に置き、UI 要素は最小限。装飾より余白と組版で語る
• 密度: 低密度・ギャラリー型。ライトグレーの地に作品サムネイルを並べ、ホバーで黒面へ沈める。テキストは極小・少量で、視線を写真に集める
• キーワード: ライトグレー #e6e6e6、暗褐色 #221815、極小筑紫ゴシック 10px、特大 Helvetica 65px、アシッドティール #00c69e、ミント #00ffcc、palt グローバル
• 特徴:
  • 地色は 柔らかなライトグレー #e6e6e6。純白でも純黒でもない中間色をキャンバスに使い、作品と余白を上品に沈める
  • 文字色は 温かみのある暗褐色 #221815（茶を含んだ黒）。純黒 #000000 は作品サムネイル面・ホバー面にのみ使い、テキストには使わない
  • 和文は FOT-筑紫ゴシック Pr5 L（FONTWORKS）を 10px という極小で用いる。ヒューマニストで空気感のあるゴシックを小さく組むのが KIGI の署名
  • 欧文は Helvetica（Bold / Light）。作品タイトルは 65px / weight 700 の白抜き、ナビ "WORKS / WE ARE… / NEWS" は 28px / weight 700 のティール #00c69e、フッターの "INSTAGRAM" / "info@ki-gi.com" は Helvetica Light 30px / weight 200
  • アクセントは アシッドなミント／ティール。ナビのティール #00c69e、メニューパネルの鮮烈なミント #00ffcc、落ち着いたティール #78c2be の三段。グレー／黒の地に対して効かせる
  • font-feature-settings: "palt" がグローバルに効く。極小の和文でも字詰めを整える
  • WordPress サイトのため --wp--preset--*（汎用パレット・グラデーション・影・font-size）が定義されるが、これらは利用可能なトークンであってブランド色ではない。ブランドの実体は暗褐色・ライトグレー・黒・アシッドティール

2. Color Palette & Roles

実測値。body の地は ライトグレー #e6e6e6、テキストは 暗褐色 #221815、作品／ホバー面が 黒 #000000。アクセントはアシッドなミント／ティール三段。WordPress の --wp--preset--color--* は汎用プリセットで、ブランド色とは区別する。

Brand（ブランド）

• Warm Near-Black (#221815, rgb 34,24,21): 本文・ナビ・見出しのテキスト色。茶を含んだ暗褐色で、純黒より柔らかく温かい。KIGI がテキストに使う基本色
• Light Gray Canvas (#e6e6e6, rgb 230,230,230): body の地色。純白を避けた柔らかいライトグレーで、作品と余白を上品に沈めるキャンバス
• Black (#000000, --wp--preset--color--black): 作品サムネイル面・ホバー面。作品写真の背景や、ホバー時に沈む面にのみ使う。テキストには使わない

Accent（アシッドティール／ミント）

• Accent Teal (#00c69e, rgb 0,198,158): ナビゲーション "WORKS / WE ARE… / NEWS" の欧文色。緑寄りのアシッドなティール。リンク・インタラクションの基準色
• Vivid Mint (#00ffcc, rgb 0,255,204): メニューパネル（menu__left-col）の面色。最も鮮烈なミント。オーバーレイ・強アクセントの面に使う
• Muted Teal (#78c2be, rgb 120,194,190): 落ち着いたティール。淡い面・補助アクセント。ミントを鎮めたトーン

Neutral（面・罫）

• White (#ffffff, --wp--preset--color--white): カード面・反転文字。ライトグレー地の上に置く白面
• Gray Border (#d9d9d9 目安): 区切り線・入力欄の枠。ライトグレー地より一段濃いグレー
• Sub Text (#6b6b6b 目安): 補助テキスト。暗褐色 #221815 を薄めたグレー

Semantic（意味的な色）

• KIGI はスタジオ・ポートフォリオのため意味色は前面に希薄
• Danger／Error: 必要なら暖色の赤（#cf2e2e, --wp--preset--color--vivid-red）を流用
• Success: アクセントのティール #00c69e を成功・完了に流用してよい

3. Typography Rules

和文 FOT-筑紫ゴシック Pr5 L（FONTWORKS）を 10px の極小で、欧文 Helvetica（Bold / Light）を 28〜65px の特大で使う、極端な大小のコントラストが核心。全体に font-feature-settings: "palt" がグローバルに効く。テキスト色は暗褐色 #221815。

3.1 和文フォント

• ゴシック体: FOT-筑紫ゴシック Pr5 L（TsukuGoPr5-L。FONTWORKS のヒューマニスト・ゴシック Light）。本文・ナビ・キャプションの和文はこれ一系統
• 明朝体は使わない
• 極小運用が特徴: 10px / weight 400 / line-height 15px（=1.5）という小ささで、空気感のある字面を作る

3.2 欧文フォント

• サンセリフ（グロテスク）: Helvetica。ディスプレイ・タイトルは HelveticaLTWXX-Bold、軽い表示は HelveticaLTWXX-Light。作品タイトル・ナビ・フッターの欧文に使う
• Helvetica はシステムフォントのため、実装・プレビューとも "Helvetica Neue", Helvetica, Arial, sans-serif のスタックで再現できる
• preview.html での注記: 和文の FOT-筑紫ゴシック Pr5 L は FONTWORKS（Web フォント／ライセンス） のため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の "Zen Kaku Gothic New"（weight 300/400/500） を字形の近いヒューマニスト・ゴシック代替に用い、小サイズ＋字間調整＋ palt で雰囲気を寄せる。実装時は必ず FOT-筑紫ゴシック Pr5 L を読み込むこと

3.3 font-family 指定

css/* 和文（本文・ナビ・キャプション） */
font-family: "FOT-筑紫ゴシック Pr5 L", TsukuGoPr5-L, sans-serif;

/* 欧文ディスプレイ・タイトル（Bold） */
font-family: HelveticaLTWXX-Bold, HelveticaLTWXX-Light, Helvetica, sans-serif;

/* 欧文の軽い表示（フッター等・Light） */
font-family: HelveticaLTWXX-Light, Helvetica, sans-serif;

/* 全体に適用 */
font-feature-settings: "palt";

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

• 和文は筑紫ゴシック Light を先頭に置き、無ければ sans-serif へ落とす
• 欧文ディスプレイは Bold → Light → Helvetica → sans-serif
• 末尾は必ず sans-serif
• palt はサイト全体に効かせる（極小の和文でも字詰めを整える）

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

• 欧文は weight 700（Bold）と 200（Light）の二極。中間ウェイトは使わない
• 和文は weight 400 の 10px 一択に近い。サイズで階層を作らず、大小は欧文側で担う
• フッターのメールアドレスのみ letter-spacing 1.75px（30px 基準で 0.058em） と広げる

3.5 行間・字間

• 和文本文の行間 (line-height): 1.5（10px→15px）。極小サイズを詰めすぎず、空気を残す
• 欧文ディスプレイの行間: 作品タイトルは 1.1（65px→71.5px）、ナビ・フッターは 1.0（詰める）
• 字間 (letter-spacing): 基本は normal。フッターのメールアドレスのみ 0.058em（1.75px） と広げてリズムを作る
• palt: サイト全体に適用。極小和文の字詰めを整える署名的設定

ガイドライン:

• 和文は 10px という極小でも line-height 1.5 を確保し、詰めすぎない
• 欧文ディスプレイ（65px）は line-height を 1.0〜1.1 に締めて塊として見せる
• 大小のコントラスト（10px の和文 ↔ 65px の欧文）を恐れず作る。これが KIGI のリズム

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;
word-break: normal;

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: "palt";   /* サイト全体にグローバル適用 */

• palt: KIGI は サイト全体に palt を効かせる。極小の和文ナビ・本文でも字詰めを整え、端正な字面を保つ
• 欧文 Helvetica にも同じ宣言が乗るが、主眼は和文の字詰め

3.8 縦書き

• 該当なし。主要導線はすべて横組み
• 用いる場合は writing-mode: vertical-rl; text-orientation: mixed;

4. Component Stylings

実サイトは塗りつぶし CTA を持たない「タイポグラフィがナビゲーションを兼ねる」設計（極小の和文リンク＋特大の Helvetica）。以下のボタンは、その識別性を保ったまま実務用途に拡張した推定・オンブランドの提案。作品面の黒 #000000 とアシッドティール #00c69e を基調にする。

Buttons

Primary（暗褐色・ソリッド）

• Background: #221815（暗褐色。純黒 #000000 を作品面に温存するため、UI ボタンは暗褐色を使う）
• Text: #ffffff
• Padding: 14px 22px
• Border Radius: 0（角丸を持たないシャープな矩形が KIGI のトーンに合う。柔らかくするなら 2px まで）
• Font: Helvetica Bold / 14px / weight 700、または筑紫ゴシック 10px
• Feature: font-feature-settings: "palt"

Accent（ティール・アウトライン）

• Background: transparent
• Text: #00c69e
• Border: 1px solid #00c69e
• Padding: 13px 21px
• Border Radius: 0
• 用途: リンク的アクション・二次導線。ホバーで面を #00c69e、文字を白へ反転

Text Link（欧文ナビ流用）

• ティール #00c69e の Helvetica Bold（ナビと同じ）。下線なし。作品タイトルは白抜き 65px

Inputs

• Background: #ffffff
• Border: 1px solid #d9d9d9
• Border (focus): 1px solid #00c69e（アシッドティール）
• Border Radius: 0
• Padding: 12px 14px
• Font: 筑紫ゴシック Pr5 L / 13〜14px（フォーム内は 10px より大きめに確保）
• Text Color: #221815 / Placeholder: #9a9a9a

Cards

• Background: #000000（作品サムネイル面）または #ffffff（情報カード）
• Border: なし
• Border Radius: 0
• Padding: 写真は余白ゼロで全面、テキストは 14px 16px
• Shadow: 基本フラット（Depth & Elevation 参照）
• 作品写真を全面に置き、ホバーで黒面 #000000 に沈めて白抜きの作品タイトル（Helvetica 65px 相当）を出す。品名・キャプションは極小の筑紫ゴシック

5. Layout Principles

Spacing Scale

WordPress の --wp--preset--spacing--*（rem 基準）を px 換算した実トークン：

余白は広めに取り、作品グリッドの間はライトグレーの地を効かせる。

Container

• Max Width: 1280px 目安（作品グリッド・ヒーローは全幅ブリード）
• Padding (horizontal): 24〜40px

Grid

• Columns: 作品一覧は 2〜3 カラムの写真グリッド
• Gutter: 16〜24px
• 作品サムネイルは正方（--wp--preset--aspect-ratio--square = 1）や 4:3 を基準に、ホバーで黒面へ反転

6. Depth & Elevation

WordPress プリセットの影トークンが実在する。KIGI のトーンでは、ぼかしの少ない sharp / crisp（オフセット影・ぼかしゼロ） がグラフィカルで相性が良い。

• 奥行きは基本的に ライトグレー地と黒面のコントラスト で表現し、影を使う場合は sharp / crisp のオフセット影でグラフィックの手触りを出す

7. Do's and Don'ts

Do（推奨）

• 和文は FOT-筑紫ゴシック Pr5 L を 極小（10px 前後） で、欧文 Helvetica を 特大（28〜65px） で使い、大小のコントラストを作る
• テキスト色は暗褐色 #221815 を使う（純黒ではなく温かみのある黒）
• 地色は柔らかいライトグレー #e6e6e6。作品面・ホバー面にのみ黒 #000000 を使う
• アクセントはアシッドなティール／ミント（#00c69e / #00ffcc / #78c2be）をグレー・黒の地に効かせる
• font-feature-settings: "palt" をサイト全体に効かせる
• 欧文ウェイトは 700（Bold）と 200（Light）の二極で使い分ける
• 影を使うなら sharp / crisp のオフセット影でグラフィカルに

Don't（禁止）

• テキストに純黒 #000000 を使わない（KIGI のテキストは暗褐色 #221815。純黒は作品面専用）
• 地色に純白を使わない（ライトグレー #e6e6e6 が KIGI のキャンバス）
• 和文を大きくして欧文と同格に扱わない（10px の和文 × 特大 Helvetica の落差が署名）
• 欧文に中途半端な中間ウェイトを使わない（Bold 700 / Light 200 の二極）
• アクセントのミント／ティールを多用して面を埋めない（グレー・黒の地に点で効かせる）
• palt を切らない（極小和文の字詰めが崩れる）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。極小の和文リンクはタップ領域を padding で確保する

フォントサイズの調整

• 和文本文は 10px を基準に、モバイルでは可読性のため 11〜12px まで上げてよい
• 欧文の作品タイトル 65px → モバイルでは 36〜44px 程度に縮小。ナビ 28px → 20px 程度。行間は締めたまま保つ

9. Agent Prompt Guide

クイックリファレンス

Text Color:     #221815   （暗褐色。純黒ではなく温かみのある黒）
Canvas/BG:      #e6e6e6   （柔らかいライトグレー）
Work/Hover:     #000000   （作品面・ホバー面のみ）
Accent:         #00c69e（ティール・ナビ/リンク） / #00ffcc（ミント・面） / #78c2be（淡ティール）
JP Font:        "FOT-筑紫ゴシック Pr5 L", TsukuGoPr5-L, sans-serif
EN Font:        HelveticaLTWXX-Bold, HelveticaLTWXX-Light, Helvetica, sans-serif
JP Body Size:   10px（極小） / weight 400 / lh 1.5
EN Display:     28〜65px / weight 700（Bold）・フッターは 200（Light）
Feature:        font-feature-settings: "palt"（全体）
Radius:         0（シャープな矩形）

プロンプト例

KIGI（キギ）のデザインシステムに従って、デザインスタジオの作品紹介ページを作成してください。
- 地色は柔らかいライトグレー #e6e6e6。テキストは暗褐色 #221815（純黒は使わない）
- 和文は "FOT-筑紫ゴシック Pr5 L"（無ければ sans-serif）を 10px・weight 400・行間 1.5 の極小で組む
- 作品タイトルは Helvetica Bold の特大（65px 相当・weight 700・白抜き）で大胆に置く
- ナビゲーション "WORKS / WE ARE… / NEWS" は Helvetica Bold 28px・weight 700・ティール #00c69e
- 作品サムネイルは黒面 #000000 の上に写真を全面配置し、ホバーで黒に沈めて白抜きタイトルを出す
- アクセントのミント／ティール（#00c69e / #00ffcc / #78c2be）はグレー・黒の地に点で効かせる
- font-feature-settings: "palt" をサイト全体に適用。角丸は 0 のシャープな矩形
- 影を使う場合は crisp なオフセット影 6px 6px 0px rgba(0,0,0,1) でグラフィカルに