HowAI 駆動開発

AIDD デザイン

「全画面分のデザイン作成」を原則廃止し、DESIGN.md（Markdown ベースのデザインシステム定義）を中核に AI が参照可能なデザインシステムを構築します。UI コード自動生成におけるデザイン統一性と開発効率を極限まで高めます

へ（原則ゼロ化）

全画面分のデザイン作成を原則廃止

AI を活用した UI 自動生成プロセスへ転換し
開発工数を大幅削減

お問い合わせ

こんな課題、ありませんか？

AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう

AI 駆動開発において、AI に UI の自動生成を任せきりにすると、ページごとにボタンの色が異なるなど、意図しないデザインになってしまう課題があります。

AI による高速化メリットが、Figma 依存のデザイン作成工程で相殺されてしまう

全画面分の Figma デザインを作成する従来プロセスはツール依存が強く、AI エージェントを跨いだ再利用も難しいのが実情です。AI による UI コード生成の高速化メリットを十分に享受できていません。

AI が参照できる、信頼性の高いデザインシステムが存在しない

AI によるコード生成のメリットを享受しつつ品質を担保するためには、AI が解釈・参照可能なデザインシステムと、新しい開発プロセスを確立することが不可欠です。

AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現

UI/UX デザイナーと開発者に対し、AI が参照可能なデザインシステムと、
それを活用した開発プロセス（スキーム）を確立・提供します

DESIGN.md を中核とした AI 参照可能なデザインシステム

ブランドガイドライン・デザイントークン・コンポーネント仕様を、DESIGN.md（Markdown + YAML front matter / Google Stitch 仕様）として一元定義します。DESIGN.md が AI 参照のメインソースとなり、Claude Code / GitHub Copilot / Cursor / Gemini CLI など主要な AI コーディングエージェントから直接参照できます。

YAML front matter にデザイントークン（色・フォント・余白・半径・影など）を機械可読に定義
Markdown 本文にコンポーネント仕様・利用ガイドライン・アクセシビリティ要件を記述
Shadcn/UI をベース実装とし、DESIGN.md のトークンを CSS 変数 / Tailwind theme へ反映
特定の Figma ファイルや MCP 実装に依存せず、Git でバージョン管理・差分レビューが可能

DESIGN.md

Markdown + YAMLShadcn/UIStorybookChromatic

User Story

→

UI Code

全画面分のデザイン作成を原則廃止

原則デザイン不要の UI 自動生成プロセスへの転換

全画面分の Figma デザイン作成を原則廃止し、前提情報・ユーザーストーリー・受け入れ基準とともに @DESIGN.md を明示参照させたうえで、AI コーディングエージェント（Claude Code / GitHub Copilot / Cursor 等）に入力することで、DESIGN.md に準拠した UI コードを直接生成するプロセスを目指します。

ユーザーストーリーから直接 UI コードを生成
DESIGN.md に準拠した一貫性のある UI を自動生成
ベストケース：個別画面のデザイン作成が不要に

デザインと実装の整合性を担保するレビューフロー

DESIGN.md と Storybook（Shadcn/UI ベースの実装カタログ）を突き合わせることで、デザイン定義と実装 UI コンポーネントの一貫性を確保します。

DESIGN.md と Storybook カタログの整合性確認
Chromatic（GitHub 連携）によるビジュアルリグレッションテストと承認フロー
デザイナー側でデフォルトでレビューを設定する運用

Visual Review

Chromatic + GitHub

Markdown + YAML によるツール・エージェント非依存性

デザインシステムが Markdown + YAML（DESIGN.md）であるため、特定の Figma ファイルや MCP 実装に依存しません。Claude Code / GitHub Copilot / Cursor など AI エージェントを跨いで同じデザイン基盤を再利用でき、Git でのバージョン管理・差分レビューも容易です。

AIDD デザインを活用した開発プロセス

UI/UX 設計プロセスの再定義と確立を目指します

デザイントークンの
定義

デザインの基礎（色・フォント・余白・半径など）を DESIGN.md の YAML front matter にデザイントークンとして定義します。

コンポーネント仕様の
記述と実装反映

DESIGN.md 本文にコンポーネント仕様・利用ガイドライン・アクセシビリティ要件を記述し、Shadcn/UI ベースの実装に CSS 変数 / Tailwind theme として反映します。

AI エージェントによる
UI 生成

開発者が @DESIGN.md を参照ファイルに指定し、AI コーディングエージェント（Claude Code / GitHub Copilot / Cursor 等）に画面・コンポーネントの実装コード（React / Next.js）を生成させます。

AI 生成 UI の
レビュー・調整

開発者・デザイナーが生成された UI をレビューします。修正が必要な場合はまず DESIGN.md の不足・曖昧さを補正し、DESIGN.md だけで表現しきれない複雑な意匠のみ Figma 等の補助ツールで調整・再実装します。

コードがそのままデザインシステム

左に DESIGN.md の全文、右にスクロールと連動して切り替わる実 UI プレビューを表示します。読んでいる箇所のトークンが、そのまま右で形になります。

使い方

セクション一覧からタブを選択する、または左の DESIGN.md をスクロールします。

右に、その箇所のトークンを適用した実際の UI が表示されます。

セクションを選ぶ

定義（コード）DESIGN.md

Brand Name: gaipack (Generative AI Pack / Japanese: ジーエーアイパック)

Tagline: Generative AI Solutions

Catchphrase (日本語): AIで、ビジネスを加速させる。

URL: https://www.gaipack.ai/

Brand Owner: KDDI iret Inc. (KDDIアイレット株式会社)

Last Updated: 2026-08-03

---

Mood: Dual-theme (dark & light), with dark as the signature look — immersive and luminous. A deep near-black-to-navy canvas serves as the stage, with gradient lines in three symbol colors laid across it — sometimes as sharp straight rays, sometimes as sweeping concentric arcs. The light theme re-casts the same structure into a flat, white-based enterprise surface (iret / cloudpack aligned): glows, shadows, and grid textures are suppressed, and content is separated by borders and tonal shifts instead.

Theming: Both themes are supported. Dark is the default for new visitors (defaultTheme="dark"); a toggle in the header lets users switch manually, and the choice is persisted (next-themes, class-based, localStorage). Users who explicitly select "system" follow their OS setting. See §2.6 for the semantic-token palette that drives both themes.

Density: Spacious between sections, denser within service grids. Generous vertical breathing room separates major content blocks, while card grids pack information tightly.

Key Atmospheric Qualities:

- Deep, immersive dark backgrounds that push content forward into the light

- Tri-color gradient lines (straight and concentric) woven through the visual language

- Heading text that bleeds from white into accent color gradients

- Subtle grid textures and diffused glows as ambient underlays

- A floating translucent navigation bar (theme-aware) capped with a 4px tri-color gradient line

The three symbol colors are treated as equal peers — no single color dominates. They always appear together when expressing the Trinity concept.

---

### 2.1 Symbol Colors — The Trinity Palette

Three equal symbol colors, each mapped to a DNA strand and value (see §11.1 for the brand DNA definitions). Every color spans a three-shade band from deep to light.

#### Blue = Technology (System Development)

An homage to iret's corporate color, "iret Blue."

| Shade | Hex | RGB |

|-------|-----|-----|

| Deep Sapphire | #0E3F99 | rgb(14, 63, 153) |

| Vivid Azure | #518CF9 | rgb(81, 140, 249) |

| Soft Sky | #A8C6FF | rgb(168, 198, 255) |

#### Green = Trust (Cloud Integration)

An homage to cloudpack's "Emerald Green."

| Shade | Hex | RGB |

|-------|-----|-----|

| Ocean Teal | #00555C | rgb(0, 85, 92) |

| Vivid Cyan | #009FAC | rgb(0, 159, 172) |

| Electric Aqua | #56E1ED | rgb(86, 225, 237) |

#### Purple = Innovation (AI Intelligence)

Evokes the mystery and promise of an AI-driven future.

| Shade | Hex | RGB |

|-------|-----|-----|

| Deep Magenta | #770884 | rgb(119, 8, 132) |

| Vivid Orchid | #C64AD4 | rgb(198, 74, 212) |

| Soft Fuchsia | #F59FFF | rgb(245, 159, 255) |

**Semantic mapping:** Blue = Technology, Green = Trust, Purple = Innovation. When expressing Trinity, all three colors appear together. Individual UI element color assignment is flexible within these roles.

### 2.2 Background Canvas

The background palette is a tightly controlled range of near-black and deep navy tones, creating a cosmic depth field. (Dark theme — for the light-theme equivalents, see §2.6.)

| Name | Hex | Role |

|------|-----|------|

| Deep Space | #0B1218 | Page base (--surface), hero background origin |

| Midnight Navy | #0F1B25 | Raised sections and cards (--surface-raised) |

| Gunmetal Navy | #0F161D | Service-page panels and cards |

| Steel Navy | #0E1720 / #101720 | Service page section background |

| Dark Charcoal | #111111 / #121212 | Alternating section background, card surfaces (#121212 = --surface-card) |

| Abyssal Black | #0B0B0B | Midpoint of listing-page background gradients (news / FAQ) |

| Pure Black | #000000 | Gradient anchor, deepest shadow |

The footer sits on plain `--surface` (flat, no dedicated black) — see §5 Footer.

### 2.3 Text Colors

| Name | Value | Role |

|------|-------|------|

| Pure White | #FFFFFF | Primary headings, high-emphasis body text, logo/wordmark |

| Frosted White | rgba(255,255,255,0.95) | Standard body text on dark backgrounds |

| Cool Gray | #9CA3AF | Secondary text (--content-muted) |

| Silver Mist | #B9C2CC | Body / secondary text on service and case-study pages |

| Blue Gray | #8FA1B5 | Muted labels on service pages (--svc-muted) |

| Steel Gray | #6B7885 | Tertiary text, separators (--content-subtle) |

| Ink Black | #000000 | Text on light-colored CTA buttons |

Legacy grays (`#B8C4CC`, `#888888`, `#AAAAAA`) linger in a few older sections; use the values above for new work.

### 2.4 Border Colors

| Name | Value | Role |

|------|-------|------|

| Steel Edge | #22313D | Primary card and section boundaries (--border-subtle) |

| Bright Steel | #2E3C49 | Elevated / emphasized borders on service pages |

| Dark Slate | #2C2C2C / #2E2E2E | Subtle dividers in legacy sections (recruit, case studies) |

| Navy Whisper | #1B365D at 30% | Very faint structural boundaries (rare) |

Interactive element borders and hover states use symbol colors at low-to-medium opacity.

### 2.5 Functional Opacity Scale

Symbol color opacity tiers that create depth layering:

- 5% — Faintest background tint (card hover fill)

- 10% — Subtle background fill, soft glow

- 12% — Slightly lifted background tint

- 20% — Medium background fill, border emphasis

- 30% — Prominent border, medium glow

- 40–45% — Strong border, emphasis glow

- 50% — Strong glow, spotlight

- 80% — Near-solid glow (focal points only)

### 2.6 Semantic Tokens & Light Theme

Both themes are driven by a single set of semantic CSS variables (defined in app/globals.css; :root holds the light values and .dark overrides them, switched via next-themes with attribute="class"). Dark is the canonical (reference) theme in design terms: every token is designed against its dark value, and the light theme is derived from it. Both dark: and light: Tailwind variants are available (@custom-variant).

|-------|------|------|-------|

| --surface-deep | Gradient endpoint / sunken area | #081D2E | #E3E9F0 |

| --content-subtle | Tertiary text / separators | #6B7885 | #6B7885 |

| --border-subtle | Borders / dividers | #22313D | #D9D9E0 |

| --accent-cyan | Cyan accent | #00E0FF | #009FAC |

| --accent-green | Green accent | #00FFB2 | #00857A |

| --accent-blue | Blue accent | #518CF9 | #0E3F99 |

| --accent-amber | Amber accent — no Tailwind utility; reference via var(--accent-amber) | #FF9900 | #B26A00 |

Supplementary tokens (same dark-as-reference principle):

|-------|------|------|-------|

Scoped token families follow the same pattern: --lp-* (LP diagrams / charts — panels, borders, grid lines, muted text, faint fills), --gov-* (governance LP), and --svc-* (service pages, e.g. --svc-panel: #121A22, --svc-muted: #8FA1B5).

Governing rules:

- Light mode is not optional. Every new page and component ships with light-theme support from its first implementation — build dark-first, then add the light: overrides before the change is merged. A dark-only page is an incomplete page.

- Dark is authoritative. Each token's dark value is the reference; light-mode values are layered on with the light: variant, leaving the dark definition intact.

- Accents deepen in light. On white, neon accents are too bright, so the light theme uses deeper, more saturated tones (Vivid Cyan / Deep Teal / Vivid Orchid / Deep Sapphire).

- Light is flat. Glows, drop-shadows, and grid textures are suppressed in light; separation comes from borders (--border-subtle) and tonal steps (surface → surface-raised). This is enforced globally: .light strips box-shadow and drop-shadow via CSS, so light-mode shadows never need manual removal.

- Theme-dependent colors go through tokens. New work references semantic tokens (or ships explicit light: overrides for any raw hex). Hard-coded dark-theme hex values remain in older sections and are normalized opportunistically — don't add new ones.

The §2.2–2.4 palettes describe the **dark** theme (the signature look). Light-theme values are defined by the tokens above.

---

### 3.1 Symbol Color Bands

Each symbol color spans a three-shade gradient band from deep to light (hex values in §2.1):

| Color | Band (Deep → Light) |

|-------|---------------------|

| Blue | Deep Sapphire → Vivid Azure → Soft Sky |

| Green | Ocean Teal → Vivid Cyan → Electric Aqua |

| Purple | Deep Magenta → Vivid Orchid → Soft Fuchsia |

Brand imagery composes gradient lines from all three bands — see §10 Imagery Direction.

### 3.2 Heading Gradient Pattern

Headings use background-clip: text to create a gradient text effect that bleeds from white into a symbol color. Applied to H1 and major H2 elements.

### 3.3 Tri-Color Brand Line

A signature 4px gradient line runs through all three bands. Used as the header's bottom edge:

```

linear-gradient(90deg, #0E3F99 0%, #518CF9 20%, #009FAC 40%, #56E1ED 60%, #C64AD4 80%, #770884 100%)

```

### 3.4 Surface Gradients

Neutral dark-surface gradients that provide subtle depth without accent colors:

| Name | Definition | Usage |

|------|-----------|-------|

| Deep Space Field | linear-gradient(to right bottom, #0B1218 0%, #121A22 50%, #0B1218 100%) | Full-page background |

| Void Corridor | linear-gradient(#000000, #081D2E, #000000) | Vertical transition between sections |

| Dark Surface | linear-gradient(to right bottom, #1A1A1A 0%, #0F0F0F 100%) | Card background, elevated surfaces |

### 3.5 Atmospheric Effects

| Name | Definition | Usage |

|------|-----------|-------|

| Grid Overlay | linear-gradient(<symbol-color> 1px, transparent 1px), linear-gradient(90deg, <symbol-color> 1px, transparent 1px) at low opacity | Hero background grid texture, footer underlay |

| Translucent Bar | bg-surface/80 + backdrop-blur(8px) (at top) → bg-surface/95 + backdrop-blur(12px) (scrolled) | Navigation bar |

| Radial Glow | bg-gradient-radial with symbol color at low opacity | Ambient background light blobs |

---

### Font Stack

- Primary (Sans-serif): ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

- Monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

Native system font stack — no custom web fonts loaded.

### Type Scale

|-------|------|--------|-------------|-------|

### Special Text Effects

- Gradient Text: bg-clip-text + text-transparent over a gradient background. Used on H1 and major H2.

- Letter Spacing: Large headings use tight tracking (-0.025em). English labels and badges use wider tracking (0.05em to 0.1em). English section labels ("VALUE PROPOSITION", "PROCESS", etc.) are set in all-caps with wide tracking, while UI copy and navigation labels are Japanese.

---

### Buttons

Primary CTA

- Background: Symbol color gradient

- Text: Ink Black (#000000) or White, weight 500–600

- Shape: Generously rounded corners (border-radius: 12px)

- Padding: 0px 64px (hero) / 0px 24px (standard)

- Shadow: Soft outward glow — symbol color at 16% opacity, 0px 4px 16px

- Hover: Glow intensifies, subtle scale-up

Secondary CTA — "Outline Pill"

- Background: Transparent

- Text / Border: Symbol color (border at ~30% opacity)

- Shape: Pill-shaped (border-radius: 9999px)

- Padding: 8px 16px

- Hover: Border brightens, faint fill appears

White CTA — "Frost Button"

- Background: Pure White (#FFFFFF)

- Text: Ink Black (#000000)

- Border: 1px solid White

- Shape: Generously rounded corners (border-radius: 12px)

- Padding: 0px 24px

- Usage: Alternative CTA for partner inquiries, etc.

### Cards & Containers

Service Card — "Dark Glass Panel"

- Background: Transparent or Steel Navy (#0E1720), optionally with backdrop-filter

- Border: 1px solid Steel Edge (#22313D) — sometimes at 50–70% opacity

- Corner Radius: Generously rounded (12px)

- Shadow: --shadow-card at rest; on hover, a faint outward glow — symbol color at 10%, 0px 0px 20px

- Padding: 24px to 32px

- Hover: Border shifts to a brighter symbol color, glow intensifies

News / Case Study Card

- Background: Transparent

- Border: 1px solid #22313D at 70% opacity

- Image: Full-width thumbnail, 16:9 aspect ratio, object-cover

- Title: 16px / weight 500 / Frosted White

- Date: Caption size, muted gray

- Hover: Subtle scale, border color shift

Metric Highlight Card

- Background: Symbol color at 5–10% opacity

- Border: 1px solid symbol color at 20–30% opacity

- Featured Number: Display size (60–96px) / Bold / White

- Label: Gradient text (white → symbol color)

- Shadow: Symbol color glow

### Navigation

- Position: Fixed at top (z-50), shared by every page including LPs

- Background: Theme-aware translucent surface — bg-surface/80 + backdrop-blur(8px) at the top of the page, tightening to bg-surface/95 + backdrop-blur(12px) once scrolled (dark: near-black navy; light: white)

- Brand Line: 4px tri-color gradient line along the bottom edge (§3.3)

- Height: Variable — ≈80px at the top of the page, ≈72px when scrolled (padding compresses; both include the 4px line)

- Logo: Left-aligned gaipack wordmark; theme-aware (white SVG on dark, black SVG on light), 144px wide (168px on md+)

- Brand Lockup: On md+ the wordmark is followed by a two-line reading/provider block — 「ジーエーアイパック」 (12px, text-content-muted) over 「by KDDIアイレット」 (10px, text-content-subtle), 12px gap from the logo. Hidden below md so the logo, CTA, and hamburger keep their space

- Links (Japanese labels): サービス一覧 /services / 事例紹介 /column / お知らせ /news / 採用情報 /recruit / ギャラリー /gallery / ブログ /blog / FAQ /faq — 300ms color transitions, hover in accent purple

- Theme Toggle: Sun/Moon button (desktop: right side; mobile: inside the hamburger panel)

- CTA: Compact gradient button「お問い合わせ」→ /contact

- Mobile: Hamburger menu; the panel adds a Home link and a「表示テーマ」toggle row

### Footer

- Background: Plain --surface (flat) with a barely-visible cyan grid underlay (2% opacity, 48px cells); top border in accent cyan at 10%

- Layout: 5-column grid (2 → 3 → 5 columns responsive). Four service columns grouped by category with How / Base / What badges, plus an「その他」column: サービス一覧 / ブログ / 事例紹介 / お知らせ / 採用情報 / ギャラリー / FAQ / メディアキット

- Header Area: Logo (160px) + one-line description (20 services, AI-era development support)

- Text: Links in --content-muted, hover in accent cyan; dividers in --border-subtle

- Note: Social icons live in the Follow Us section (below), not in the footer.

### Social Media Section — "Follow Us"

A standalone section (FOLLOW US / SNS 公式アカウント) placed at the end of the homepage and content pages, above the footer.

- Layout: Card grid, 2 columns (3 on md+), max-w-6xl

- Accounts: X @gaipack_ai / YouTube @gaipack / Facebook gaipackai / LinkedIn gaipack / Instagram @gaipack_ai / TikTok @gaipack_ai

- Icons: Line-style, monochrome --content; hover shifts card accents to cyan

### Tags & Badges

- Background: Transparent or symbol color at 5%

- Text: Symbol color, 12px

- Border: 1px solid symbol color at low opacity

- Shape: Pill-shaped

- Padding: 4px 12px

### Accordion (FAQ)

- Container: Full-width, dark background

- Question Row: Semibold, clickable with expand/collapse icon

- Dividers: Faint Steel Edge (#22313D) horizontal lines

- Answer: Standard body text, generous line spacing

---

Instead of traditional box shadows, depth is conveyed through outward-radiating glows using symbol colors, plus the neutral --shadow-card token (§2.6) for resting cards. In light mode all of these are stripped automatically (§2.6 "Light is flat").

|-------|------|----------------|-------|

### Atmospheric Blur

- blur-sm (8px) — Translucent bars, fine-grained effects

- blur-2xl (40px) — Medium-sized light orbs

- blur-3xl (64px) — Large ambient light blobs

- blur-[120px] — Massive background glow pools

---

### Spacing System (Tailwind 4px base)

| Token | Value | Usage |

|-------|-------|-------|

| gap-1.5 | 6px | Icon + label pairs |

| gap-2 | 8px | Compact lists, tag groups |

| gap-3 | 12px | Related content clusters |

| gap-4 | 16px | Grid gaps, card internal padding |

| gap-6 | 24px | Between components, card padding |

| gap-8 | 32px | Intra-section spacing, card grids |

| gap-12 | 48px | Major section padding, hero grids |

| gap-16 | 64px | Between major page sections |

### Grid Systems

|---------------|---------------|-----|-------|

| 2-column Hero | ~616px × 2 | 48px | Hero, case study highlights |

| 2-column Content | ~560px × 2 | 32px | Feature comparison, problem/solution |

| 3-column Service | ~195px × 3 | 16px | Service category groups |

| 3-column Cards | ~405px × 3 | 32px | News, blog cards |

| 4-column Grid | ~142px × 4 | 16px | Icon grids, certification badges |

| 4-column Wide | ~308px × 4 | 16px | Service cards, feature lists |

### Container Strategy

- Max Width: 80rem (1280px, max-w-7xl) for page shells, header, and footer. Narrower containers (max-w-6xl / 5xl / 4xl / 3xl) step content down for sub-sections and prose.

- Page Padding: Responsive horizontal padding scaled to viewport

- Centering: Auto margins

### Whitespace Philosophy

Generous vertical spacing (64px+) between major sections; denser packing within sections.

---

### Transition Defaults

- Timing: cubic-bezier(0.4, 0, 0.2, 1) (ease-out curve)

- Default Duration: 150ms

### Duration Scale

| Duration | Usage |

|----------|-------|

| 200ms | Quick color and border changes |

| 300ms | Hover states (incl. navigation links), background color, opacity, glow |

| 500ms | Section fade-ins |

| 700ms | Transforms, scroll-triggered reveals |

### Named Animations (global)

| Animation | Definition | Usage |

|-----------|-----------|-------|

| Pulse | pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite | Breathing glow on luminous elements |

| Bounce | bounce 1s infinite | Scroll indicator |

| Shimmer | shimmer 1.6s infinite (translateX sweep) | Skeleton loading (contact form) |

| Flow Dash | flow-dash 1.4s linear infinite (stroke-dashoffset) | Animated SVG connector lines in diagrams |

| Marquee | scroll-left / scroll-right, 25s linear infinite | Hero service grid on mobile (two counter-flowing rows) |

Entrance/exit utilities (animate-in / animate-out), accordion, and caret-blink come from tw-animate-css. LP pages additionally define their own scoped keyframe families (pf* for platform-engineering, gp* for governance, camp* for AIDD Camp) — reveals, floats, shimmers, and spins local to each LP.

Reduced motion: Decorative loops (e.g. Flow Dash) are disabled under prefers-reduced-motion: reduce.

### Transition Properties

Interactive elements transition these properties together:

color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to

---

### Navigation

- Desktop: Horizontal menu (logo + links + theme toggle + CTA) on the translucent bar

- Mobile: Hamburger menu with collapsible panel (adds Home link and theme toggle row)

### Grid Collapse

- 4-column → 2-column → 1-column, collapsing progressively as the viewport shrinks

- Service cards maintain readability at every breakpoint

- Hero metrics stack vertically on mobile

- The hero's 20-service grid is static on desktop (5 × 4) and becomes two counter-flowing marquee rows on mobile

### Typography Scaling

Display and H1 sizes scale down proportionally on smaller screens.

---

### Icons

- Minimal line-style icons. Accents use symbol colors.

- Social icons (Follow Us section, §5) are rendered in muted monochrome, following each platform's official mark.

### Imagery Direction

- Motif: Gradient lines in three symbol colors abstractly express "carving open the future." The gaipack DNA unites as a Trinity — sometimes sharp, sometimes harmonious — painting the path forward.

- Variation: Visual diversity is a core principle. Multiple compositions and variations are encouraged rather than locked to a single form.

- Background: Lines glow against a dark canvas.

- Applications: The same visual language extends to banners, apparel, stationery, and event materials.

- Photography: Real-world tech and business scenes, composited onto dark surfaces. Thumbnails use 16:9 aspect ratio, object-cover, within rounded cards.

- Decoration: Abstract gradient blobs, grid textures, and glows. No illustrative or explanatory graphics.

### Logo Assets

All official logo/icon files, their asset paths, and usage rules are consolidated in §11 Logo Usage Rules. That section is the single source of truth — never place a logo or brand icon anywhere without following §11.

---

This section is the single source of truth for every brand mark (gaipack logo, gaibot icon). All asset paths and usage rules live here — do not rely on partial information elsewhere in this document.

### ⚠️ CRITICAL — NO RECREATION. USE THE ASSET FILES.

**This rule applies to every logo and icon in this section, and it binds AI agents reading this file.**

- **NEVER** redraw, reinterpret, approximate, trace, or recreate any gaipack / gaibot mark — not from text descriptions in this document, not from memory, not from a thumbnail you have seen.

- **NEVER** generate substitute artwork: no hand-written SVG paths, no CSS/HTML art, no emoji compositions, no AI-image-generation of the marks.

- The **only** correct way to display a mark is to reference or download one of the official asset files listed below — via the local path (this repository: `public/images/…`, served as `/images/…`) or the public URL (`https://www.gaipack.ai/images/…`).

- If an asset file cannot be fetched or embedded, render the brand name as **plain text** (e.g., "gaipack", "gaibot") in the standard font stack — never a lookalike graphic.

- Verbal descriptions of the marks below (e.g., "Trinity Loop", "hexagonal speech bubble") exist **only so you can recognize the correct asset**. They are not drawing instructions.

### 11.1 gaipack Logo

Design Intent — Trinity Loop *(brand context for recognition only — NOT drawing instructions; see the NO RECREATION rule above)*

Concept: "An evolution loop driven by iret's DNA." The logo mark consists of three interlocking elements forming a continuous loop, each representing one of iret's core DNA strands:

| DNA | Origin | Value |

|-----|--------|-------|

| System Development | iret's founding strength in software engineering | Technology |

| Cloud Integration | Infrastructure expertise cultivated through cloudpack | Trust |

| AI Intelligence | Generative AI innovation pioneered by gaipack | Innovation |

These three DNA strands unite as a Trinity, cycling in a perpetual Loop to generate unstoppable momentum for business transformation. gaipack is the symbol of AI-driven development — built on deep expertise in systems and cloud, pushing forward with AI innovation.

Usage rules:

- Standard Form: Trinity Loop mark + "gaipack" wordmark (™).

- Tagline: "Generative AI Solutions" placed above the logo as the default composition.

- Color: Monochrome by default — white logo on dark backgrounds, black logo on light backgrounds. Never recolor. (Note: the "black" asset's actual fill is dark gray #595959.)

- Placement: Consistently top-left in navigation and footer.

Official assets:

| Asset | Local Path | Public URL |

|-------|-----------|------------|

| Logo White — for dark backgrounds (default), PNG (827×219) | /images/gaipack-logo-white.png | https://www.gaipack.ai/images/gaipack-logo-white.png |

| Logo White — for dark backgrounds (default), SVG | /images/gaipack-logo-white.svg | https://www.gaipack.ai/images/gaipack-logo-white.svg |

| Logo Black — for light backgrounds, PNG (827×219) | /images/gaipack-logo-black.png | https://www.gaipack.ai/images/gaipack-logo-black.png |

| Logo Black — for light backgrounds, SVG | /images/gaipack-logo-black.svg | https://www.gaipack.ai/images/gaipack-logo-black.svg |

| Symbol mark only (Trinity Loop, black), SVG | /images/gaipack_logo_symbolmark_black.svg | https://www.gaipack.ai/images/gaipack_logo_symbolmark_black.svg |

Asset notes:

- All wordmark SVG/PNG files above have transparent backgrounds. Exception: the symbol-mark SVG contains an opaque white 360×360 background rectangle — it is *not* transparent; don't place it directly on dark surfaces.

- Byte-identical copies of both wordmark SVGs also exist at the site root (/gaipack-logo-white.svg, /gaipack-logo-black.svg); they are referenced by OG-image generation and Media Kit downloads. Treat /images/… as the canonical paths for new work.

### 11.2 gaibot Icon

gaibot is gaipack's AI Products brand (§12) — a multi-channel AI agent platform (Slack / Web / MCP). Its icon is a standalone badge mark: a hexagonal speech-bubble silhouette in a blue-to-green gradient with a white loop swirl at the center. *(Recognition aid only — see the NO RECREATION rule above.)*

Official assets (transparent background):

| Asset | Local Path | Public URL |

|-------|-----------|------------|

| gaibot icon, SVG | /images/gaibot-icon.svg | https://www.gaipack.ai/images/gaibot-icon.svg |

| gaibot icon, PNG (1180×1307) | /images/gaibot-icon.png | https://www.gaipack.ai/images/gaibot-icon.png |

Intended applications:

- Slack app icon / bot avatar — use the PNG. Slack crops avatars to a square; the icon's transparent margin handles this safely.

- Slack custom emoji (reactions) — downscale the PNG (e.g., to 128px; Slack requires ≤ 128KB) before registering. Do not simplify or redraw the mark for small sizes.

- Architecture diagrams (構成図) — embed the SVG/PNG asset to represent the gaibot service/agent node. In diagram tools where embedding external images is not allowed (e.g., DrawIO with built-in shapes only), represent gaibot as a labeled generic node ("gaibot") instead of imitating the icon.

Rules:

- Use the icon standalone (no wordmark lock-up is defined for gaibot).

- Keep the original aspect ratio; never stretch, recolor, add effects, or place on clashing backgrounds.

- When gaipack and gaibot appear together (e.g., service overview diagrams), the gaipack logo represents the company/brand and the gaibot icon represents the product — do not swap them.

---

### Service Architecture (How / Base / What)

20 services across three categories. Category names are displayed in Japanese with How / Base / What badges:

| Category | Badge | Services |

|----------|-------|----------|

| AI 駆動開発 (AI-Driven Development) | *How* | AIDD モダナイズ / AIDD MVP (featured) — AIDD 要件定義 / AIDD デザイン / AIDD CMS / AIDD PMO / AIDD インハウス / AIDD キャンプ (8) |

| AI 活用基盤 (AI Platform) | *Base* | (コンサル・導入) gaipack コンサルティング / スターター / ペイ / BPO — (セキュリティ) ガバナンス / セキュア — (教育・人材) タレント — (運用・データ) オプス / BI / コネクト (10) |

| AI 活用プロダクト (AI Products) | *What* | gaibot / gaibot Pro (2) |

### Route Map

| Area | Routes |

|------|--------|

| Home | / |

| Services | /services (hub) → /services/aidd (AIDD hub) → /services/[service] (20 detail pages, SSG) |

| Case Studies | /column (list) + 8 static case-study pages (/column/case-study-*) |

| News | /news + pagination + /news/[slug] + /news/category/[slug] (+ pagination) + RSS feeds |

| Blog | /blog + pagination + /blog/[slug] + category / author pages (+ pagination) + RSS + client-side search + view-count ranking |

| Landing Pages | /lp/aidd-camp (canonical → /services/aidd-camp) / /lp/governance / /lp/platform-engineering |

| Other | /gallery (+ /gallery/[id]) / /faq / /recruit / /contact (HubSpot form) / /media-kit |

### Homepage Flow

1. Navigation — Fixed translucent bar (§5): 7 links + theme toggle + Contact CTA

2. Hero — Headline「AIで、ビジネスを加速させる。」+ sub-copy + 2 CTAs (お問い合わせ / サービス一覧) + 20-service icon grid (5 × 4 desktop; dual marquee on mobile) + scroll indicator, over an animated canvas background

3. Value Proposition — Three key metrics (30% dev cost reduction / 60% ops cost reduction / 99% data leak risk reduction)

4. Process — AIDD development process overview + video + 4 steps (要件定義 → 設計 → 実装 → 運用)

5. AIDD Showcase — Banner linking to the external demo gallery (https://showcase.gaipack.ai/)

6. Services — How / Base / What card grid (table above)

7. Related LP Carousel — Cross-links to the three landing pages

8. Trust & Credentials — AWS TSE-VPP / ISO 42001 (AIMS) / SOC 2 Type II / Google Cloud Award / Premier Partner / 2,500+ cloud deployments

9. Case Studies — 2-column highlight cards + link to /column

10. News, Blog & Partner / Recruit — Latest news, weekly blog ranking, then partner program (販売 / 開発 / ソリューション / テクノロジー) alongside recruit

11. Closing CTA — Full-width call to action

12. Follow Us — Social account card grid (§5)

13. Footer — 5-column service + other-page links (§5)

### Service Page Flow

1. Breadcrumb (AIDD services nest under /services/aidd)

2. Hero — H1 gradient title + key-metric cards + CTA; about half the pages embed a YouTube video in the hero

3. Problem Statement（こんな課題、ありませんか？）

4. Solution Overview（feature highlights）

5. Service-specific sections (comparison tables, pricing, phases, interactive demos)

6. Process Steps（導入の流れ）

7. FAQ (some pages)

8. Case Studies (some pages)

9. Related Services (cross-links; most pages)

10. CTA（まずはお気軽にご相談ください）+ Footer

**Note:** The AIDD デザイン service page (`/services/aidd-design`) renders this very document live — it fetches `https://www.gaipack.ai/DESIGN.md` (revalidated hourly) and displays it as its content. Edits to this file are user-visible on that page.

Live Preview適用後の UI§ gaipack

Markdown ベースのデザインシステム定義「DESIGN.md」が AI コーディングエージェントのデザイン参照ソースです。

事例紹介

gaipack の AIDD デザインサービス導入による成功事例をご紹介します

事例紹介

2025/12/19

AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。

商業施設内の DX 推進プロジェクトにおいて、gaipack の AIDD デザインを導入。AI 技術を活用して従来の全画面デザイン作成プロセスを原則廃止し、開発工数全体を約 50% 短縮しました。

詳しく見る

事例紹介

2026/2/27

税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。

税制改正対応のマスタ管理システム刷新プロジェクトにおいて、gaipack の AIDD デザインを導入。UI の標準化と再利用性を高め、更新工数の削減とミス防止の仕組みを構築しました。

詳しく見る

まずはお気軽にご相談ください

AIDD デザインに関するご質問・お悩みなど、
専門スタッフが丁寧にサポートいたします

お問い合わせ

SNS 公式アカウント

gaipack の最新情報を SNS で発信しています

X

@gaipack_ai

フォローする

YouTube

@gaipack

チャンネル登録

Facebook

gaipackai

フォローする

gaipack

フォローする

Instagram

@gaipack_ai

フォローする

TikTok

@gaipack_ai

フォローする

AIDD デザイン

へ（原則ゼロ化）

全画面分のデザイン作成を原則廃止

AI を活用した UI 自動生成プロセスへ転換し
開発工数を大幅削減

お問い合わせ

AIDD デザイン

こんな課題、ありませんか？

AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう

AI による高速化メリットが、Figma 依存のデザイン作成工程で相殺されてしまう

AI が参照できる、信頼性の高いデザインシステムが存在しない

AI 参照可能なデザインシステムを確立し、新しい AI 駆動開発プロセスを実現

DESIGN.md を中核とした AI 参照可能なデザインシステム

原則デザイン不要の UI 自動生成プロセスへの転換

デザインと実装の整合性を担保するレビューフロー

Markdown + YAML によるツール・エージェント非依存性

AIDD デザインを活用した開発プロセス

デザイントークンの定義

コンポーネント仕様の記述と実装反映

AI エージェントによるUI 生成

AI 生成 UI のレビュー・調整

コードがそのままデザインシステム

事例紹介

AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。

税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。

関連するサービス

AIDD モダナイズ

AIDD MVP

まずはお気軽にご相談ください

SNS 公式アカウント

X

YouTube

Facebook

LinkedIn

Instagram

TikTok

AIDD デザイン

こんな課題、ありませんか？

AI が自動生成した UI に、統一感がなく意図しないデザインになってしまう

AI による高速化メリットが、Figma 依存のデザイン作成工程で相殺されてしまう

AI が参照できる、信頼性の高いデザインシステムが存在しない

AI 参照可能なデザインシステムを確立し、新しい AI 駆動開発プロセスを実現

DESIGN.md を中核とした AI 参照可能なデザインシステム

原則デザイン不要の UI 自動生成プロセスへの転換

デザインと実装の整合性を担保するレビューフロー

Markdown + YAML によるツール・エージェント非依存性

AIDD デザインを活用した開発プロセス

デザイントークンの定義

コンポーネント仕様の記述と実装反映

AI エージェントによるUI 生成

AI 生成 UI のレビュー・調整

コードがそのままデザインシステム

事例紹介

AIDD デザインで開発工数を約50%短縮。全画面 Figma デザイン作成プロセスを原則廃止し、モダンな UX を実現。

税制改正対応の「マスタ管理システム」開発に gaipack を導入。AIDD デザインで更新工数 50% 削減を目指す。

関連するサービス

AIDD モダナイズ

AIDD MVP

まずはお気軽にご相談ください

SNS 公式アカウント

X

YouTube

Facebook

LinkedIn

Instagram

TikTok

AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現

デザイントークンの
定義

コンポーネント仕様の
記述と実装反映

AI エージェントによる
UI 生成

AI 生成 UI の
レビュー・調整

AI 参照可能なデザインシステムを確立し、
新しい AI 駆動開発プロセスを実現

デザイントークンの
定義

コンポーネント仕様の
記述と実装反映

AI エージェントによる
UI 生成

AI 生成 UI の
レビュー・調整