# K2pb Lab｜フェイズ06向け Figma AIデザイン指示書

> 本書はフェイズ05で確定した**デザイン要件を、次のFigma制作工程へ引き渡す指示用文書**。現時点では制作を開始しない。

## 1. 目的・対象

株式会社ケイツー・インタラクティブ公式サイトの実験用トップページについて、フェイズ04の最新版HTMLワイヤーフレームを基本に、PC・モバイルのビジュアルデザインをFigmaで制作する。

**コンセプト：**「知性・品位・先進性。静かだが、意思が強い。」

想起させたい会社像は、企業やプロジェクトの構想・設計を担う専門会社。強引な営業訴求ではなく、情報構造・文字・余白・造形によって専門性を表現する。

## 2. 必須入力

- `K2pbLab_05_ビジュアルデザイン要件定義書.md`（本指示の上位資料）
- フェイズ01の承認済み要件／フェイズ03の確定情報設計資料
- フェイズ04の**最新版HTMLワイヤーフレームおよび使用素材**（人間修正後の版を特定すること）
- K2pb DSM： https://www.k2-interactive.co.jp/dsm/https/dsm/
- タイポグラフィ： https://www.k2-interactive.co.jp/dsm/https/dsm/style_text.html
- 現行サイトのロゴ・ブランドカラー・メインビジュアル・事業案内図版

**入力不足の扱い：** 実物未提供のHTMLやカラーコード、実寸値、アイコン一覧を推測で補わない。受領できたものと未受領を明示する。

## 3. ビジュアル指示

- 白を基調に黒〜ダークグレーの文字、現行ブランドのアクセント色、必要な淡いグレーを使用。色の種類を増やさない。
- 日本語はNoto Sans JPを基本にDSMタイポグラフィ仕様に従う。参考値：ページタイトル48px、大見出し36px、中見出し30px、本文16px／行間1.75。メインビジュアルは別途デザイン提案可。
- 大胆な主メッセージ、ゆとりある余白、情報の優先順位が自然に伝わる視覚階層。
- 企業ロゴ、メインビジュアルの基本造形、事業案内図版を継承する。
- アイコンはDSM既存資産から選ぶ。適切な候補がなければDSMの線幅・形・色・サイズ感に合わせて新規案を制作してよい。4カテゴリへの具体的な配当はデザイン案として提示する。
- 4カテゴリは同じ比重と規則で扱う。装飾的な写真・図版を新規追加することは必須ではない。
- Web改善ラボはフェイズ04 HTMLで確認した画像構成を尊重し、お知らせは日付・タイトルを中心にする。

## 4. ページ構造・情報の扱い

以下のセクション順を基本とする。

1. メインビジュアル
2. 事業案内
3. できること（主力4カテゴリ）
4. Web改善ラボ（3記事）
5. お知らせ（5件）

ナビ：コンセプト／事業案内／できること／会社情報／Web改善ラボ（右端）。共通問い合わせ導線は維持する。**トップ本文に問い合わせ・申込CTAを新設しない。**

承認済みの原稿・見出し・導線・掲載件数は保持する。原稿に未承認の修正候補が含まれる場合は、入力版の承認状態を引き継ぐ。架空の実績・価格・サービス内容を追加しない。

## 5. HTMLとの関係・変更提案ルール

フェイズ04のHTMLワイヤーフレームは**基本的な構造基準**とする。ビジュアルデザインの完成度を高める合理的な理由がある場合、構造・配置・表現の変更を提案してよい。

ただし変更は自動的に採用しない。各提案について「変更箇所／元の状態／変更案／理由／情報・導線への影響」を記録し、人間の採否を待つ。情報構造・原稿・導線の承認済み決定を、デザインの都合で独断変更しない。

## 6. PC・モバイル・アクセシビリティ

- PCとモバイルの両方をデザインする。
- DSMのレスポンシブ規則を基本にし、モバイルでは4カテゴリを1列で表示。
- 掲載順・主要ナビ項目順を維持する。
- 文字拡大時の読みやすさ、横方向の欠落防止、見分けやすいリンク・フォーカス、タップ領域を考慮する。
- WCAG 2.2 AA相当のコントラストを基準に配色案を評価する。
- 意味のある画像・アイコンはテキストによる情報伝達も確保する。
- Figma上の確認と、実装後の動作・アクセシビリティ適合検証を混同しない。

## 7. 制作成果と記録

制作物に併せて以下を記録する。

- PCデザインとモバイルデザイン。
- 使用した既存ブランド／DSM資産と新規提案アイコンの区別。
- フェイズ04 HTMLからの変更提案一覧と採否。
- Figmaで編集可能になった要素、手作業を要した箇所、再現できなかった箇所。
- デザイン制作に伴うAI作業・人間修正の区別と、分かる範囲の費用・修正回数。

**注：** HTML→Figma移植の具体的方法や、実装への反映検証は次フェイズの作業として別途指示する。完全自動同期や相互変換を前提にしない。

## 8. 実行前チェック

- [ ] 最新版HTMLおよび使用素材を受領・版特定した
- [ ] フェイズ01・03・05の承認事項を確認した
- [ ] DSMの色、アイコン、文字、レイアウトを確認した
- [ ] PC・モバイルの成果物範囲が明確になっている
- [ ] 構造変更はユーザー承認前の「提案」として扱う
- [ ] 初期案と人間修正の記録方法がある

本書はフェイズ05成果物であり、フェイズ06への移行はユーザーが決定する。