Givery / 1 day hands-on

AI 駆動 UI/UX 研修

本日のハンズオンテーマは Insight Quarterly（業界トレンド四半期レポート公開ページ）のシングルウェブページです。
このテーマに対し、バイブデザイン → DESIGN.md → 修正指示 → Figma 連携など、最新の AI 駆動 UI/UX の手法を Claude Code を用いて体験する研修です。

開催: 2026 年 5 月 25 日
2026 年 6 月 8 日
形式: オンサイト・ハンズオン中心
1 日 / 実働 7 時間
規模: 15 名
講師: 安田光喜（株式会社ギブリー）

ハンズオンテーマを見る → 配布資料ダウンロード

SECTION 01

ハンズオンデータの構成

ハンズオンデータには以下の内容を含みます（フォルダ構成図）。

handson/
├── docs/                        当日参照ドキュメント
│   ├── 01_オリエンテーション.md
│   ├── 02_ハンズオンガイド.md
│   ├── 03_事前セットアップガイド.md
│   └── 04_運営マニュアル_講師向け.md
├── starter/                     完成版テンプレート（Insight Quarterly）
│   ├── index.html
│   ├── style.css
│   └── assets/
├── samples/                     ハンズオン素材
│   ├── content.md               レポート要約・数値・著者情報
│   └── stages/                  完成品サンプル 3 段階（01〜03）
├── bonus/                       早く終わった方向けの追加テーマ（OpsBoard）
│   ├── content.md               ダッシュボード題材データ
│   ├── starter/                 完成版テンプレート
│   └── README.md                追加テーマの進め方
├── exercises/                   演習詳細（7 本）
│   ├── exercise01-zeroshot.md
│   ├── exercise02-vibe-design.md
│   ├── exercise03-design-md.md
│   ├── exercise04-design-md-skills.md
│   ├── exercise05-iterate.md
│   ├── exercise06-figma.md
│   └── exercise07-share.md
├── output/                      5 段階の生成結果置き場
├── .claude/                     Claude Code 設定 + Skills 配置先
├── design-skills.zip            5 種のデザイン Skill バンドル
├── CLAUDE.md / AGENTS.md / DESIGN.md
└── README.md

SECTION 02

研修終了時の到達点

素の Claude Code の出力を体感し、なぜ指示の言語化が必要かを身体で理解した

形容詞 5〜7 語のバイブデザインで同じテーマを作り直し、自分の言葉が見た目に直結する感覚を持っている

DESIGN.md を 8 セクションで書き、カスタム項目を 1〜2 個追加できる

デザイン系 Skills（ui-ux-pro-max / frontend-design 等）を導入し、適用前後の差分を観察した

修正指示の 5 つの型（差分／否定／Figma スクショ／参考サイトスクショ／手書きスクショ）を全部試し、トークン消費の違いを把握した

「違和感を感じても手で直さない」原則を守って 4〜5 ターン回せる

Figma 連携の 3 経路（MCP デモ観察 / Figma → Code / Code → Figma）を体験し、業務適用判断ができる

画像生成機能の注意点と AI 時代のデザイン手法の変化を持ち帰った

SECTION 03

1 日のタイムテーブル

時間	セッション	内容
[30min]	オープニング	テーマ「Insight Quarterly」提示、完成形デモ先出し、社内環境制約
[30min]	講義① Claude Code とバイブデザイン	素の Claude Code の挙動、形容詞 5〜7 語、配色／タイポ／余白の最小セット
[70min]	ハンズオン① バイブデザイン体感	素の Claude Code で生成 → 好みの指示で修正 → 画像挿入で MCP の必要性デモ
[30min]	講義② DESIGN.md の構造と書き方	8 セクション、カスタム追記、書き方の注意点
[20min]	演習 DESIGN.md ドラフト	自分の DESIGN.md を書く（昼休憩前に下書き）
[60min]	昼休憩	—
[50min]	ハンズオン② DESIGN.md と Skills	DESIGN.md で同テーマを再生成 → バイブ版と比較 → Skills 紹介・適用・効果検証
[30min]	講義③ 修正指示の方法	差分指示／否定指示／スクショ 3 パターン／トークン消費／「手で直さない」原則
[50min]	ハンズオン③ 修正指示で磨き上げ	5 つの型を全部試し、自分のクセを発見
[10min]	休憩	—
[60min]	ハンズオン④ Figma 連携	MAX デモ（MCP 観察） → Figma → Code（design.to.html / PAT / スクショ） → Code → Figma（html.to.figma） → 相互往復で仕上げ
[30min]	成果共有・見せ合い	5 段階の生成物を並べて比較、全員の最終仕上がりを発表
[10min]	Tips & クロージング	画像生成機能の注意点、AI 時代のデザイン手法の変化

研修開始前 / [5min]

当日の環境チェック

配布資料『事前セットアップガイド』の Definition of Ready を、当日朝に 5 分で確認する画面です。詰まったら早めに講師へ挙手してください。代替経路はその場で案内します。

SECTION 01

環境確認 6 項目

研修開始前 [5min] で、下記 6 項目をご自身の手元で確認してください。1 項目でも「動かないとき」に該当する場合は、その時点で挙手してください。6 項目すべて緑なら、ハンズオン① の準備完了です。

#	確認項目	確認操作	動かないとき
1	VSCode + Claude Code 拡張が有効	拡張機能ビューで「有効」、サイドバーにアイコン	VSCode 再起動／拡張を一度無効→有効に切替
2	Claude Code パネルが応答する	「自己紹介してください」でテキスト応答	社内 LLM 中継基盤の稼働を社内ポータルで確認 → 講師にエスカレーション
3	Figma にブラウザでサインインできる	Chrome / Edge で https://www.figma.com/ にアクセスし Starter プラン所属アカウント名が右上に表示	後述「Figma が動かない場合」の代替経路へ
4	ローカル HTMLが Chrome / Edge で開ける	starter/index.html を開いて完成版テンプレートが表示される	VSCode の Live Server 拡張を導入し HTTP 経由で開く
5	スターターリポジトリを VSCode で開いている	README.md が VSCode に表示	ZIP の解凍場所を Documents/Givery/UIUX/ 配下に配置し直す
6	design-skills.zip がリポジトリ直下にある	VSCode のエクスプローラで `design-skills.zip` を確認	当日朝の解凍は不要、ハンズオン② 冒頭で講師の合図に従って解凍・配置

確認項目 1・2・5：VSCode + Claude Code パネル

VSCode で handson フォルダを開き、DESIGN.md を表示し、右ペインの Claude Code パネルが起動している状態のスクリーンショット

VSCode 左にエクスプローラ（handson/ 配下に .claude/、docs/、exercises/、output/、samples/、starter/、DESIGN.md 等が並ぶ）／中央に編集中ファイル／右に Claude Code パネルがこのように見えていれば、項目 1・2・5 はクリアです。Claude Code パネル下部の入力欄に「自己紹介してください」と打つと項目 2 が確認できます。

確認項目 3：Figma ブラウザ版サインイン

ブラウザで Figma の Recents 画面が表示され、左サイドバーにチーム名、右上にプラン表示があるスクリーンショット

https://www.figma.com/ にサインインした直後の画面。Recents タブが選択され、過去のファイル一覧が並びます。左サイドバーに自分のチーム名（または個人名）と Free / Starter のバッジが見えていれば、項目 3 はクリアです。Recents が空でも問題ありません。

SECTION 02

Figma が動かない場合の代替経路

本研修の Figma はブラウザ版 Starter プランのみ使用します。デスクトップアプリ・追加プラグインは導入不要です。社内ネットワーク制約でブラウザ版に支障が出た場合、下記の優先順位で代替を選びます。

別ブラウザで再サインイン

Chrome で入れない場合は Edge / Firefox で再試行。社内のセッション Cookie 設定や拡張機能が干渉している可能性があります。

www.figma.com への通信許可を再確認

社内プロキシ・ファイアウォールで遮断されている可能性。情シスへ通信許可申請（環境設定要件書 v3.0 第 7 章参照）。当日の応急対応は講師の Figma 画面を投影して全員で観察モードに切替。

Figma 自体が開かないときは講師デモへ

ハンズオン④ 全体を講師の画面共有によるデモに切替。受講者はその間に DESIGN.md の追記やバイブデザイン磨き上げに時間を使う。

事前確認ポイント

当日朝に Figma の挙動が読めない場合、開始前の環境確認で申告いただければ、その場で代替経路へ全員一括で切り替えます。受講者個別にトラブル対応を発生させない運用です。

SECTION 03

Claude Code が応答しない場合

VSCode のステータスバー右下、Claude Code インジケータの状態を確認
コマンドパレット → Claude: Sign Out → 再 Claude: Sign In でセッション再構築
VSCode を再起動（5 秒で復旧することが多い）
社内ポータルから LLM 中継基盤の稼働ステータスを確認
復旧しない場合は受入窓口経由で IT 部門にエスカレーション、講師は受講者を講師デモ + ペア観察に再編成

ハンズオンテーマ / 全員共通

Insight Quarterly

コンサルティングファームのデザイン部門が普段扱う「業界トレンド四半期レポート公開ページ」を題材にしたシングル LP（縦長 1 ページ）です。架空のレポート公開ページを 1 日で 5 段階に作り直し、結果を見比べることで「素の Claude Code」「バイブデザイン」「DESIGN.md」「Skills」「修正指示」がそれぞれどう効くかを身体で学びます。

SECTION 01

完成品サンプル 3 段階

ハンズオンテーマ「Insight Quarterly」の完成品を、研修の進行に対応した 3 段階で配布しています。各ボタンをクリックすると、新しいタブで実物のサイトが開きます。受講者は自分の生成結果（output/01-zeroshot.html 〜 output/05-final.html）と各段階のサンプルを見比べることで、各手法の効きどころを身体で学びます。配布 ZIP の handson/samples/stages/ に同梱済み。

段階 1

バイブコーディング

形容詞 5〜7 語のバイブデザインだけで作った状態。AI のデフォルト寄り（中央寄せヒーロー、3 カラム均等カード、Inter フォント、絵文字 UI）が残ります。ハンズオン① 終了時の到達点。

段階 1 を開く →

段階 2

DESIGN.md + Skills

DESIGN.md 8 セクション + Skills 適用後。配色トークン整備、コンポーネント命名統一、状態網羅、A11y 配慮。完成形に近づくが細部はまだ磨ける。ハンズオン② 終了時の到達点。

段階 2 を開く →

段階 3

最終版

修正指示の 5 つの型（差分／否定／スクショ 3 種）と Figma 連携で仕上げた最終版。ハンズオン③〜④ 終了時の到達点。handson/starter/index.html と同内容。

段階 3 を開く →

完成形イメージ①（最終版のプレビュー）

Insight Quarterly 2026 Q2 完成形イメージ①：ヒーロー、主要数値 4 個（68%／3.4倍／42%／+18%）、本号の主要トピック

段階 3「最終版」のスクリーンショット／ウォームベージュ（#faf7f2）× ダークネイビー（#1f2a44）× ボルドーアクセント（#8b1d2c）の 3 色構成。本文 Noto Sans JP、見出し Noto Serif JP の太字で「読み物としての権威感」を作っています。

研修中の使い方

3 段階のサンプルは「ゴールの形」を見せるための参考です。研修では サンプルを丸写しせず、自分のバイブデザインで作り直す 運用です。同じ題材から、5 段階を経て、受講者ごとに違う見た目が並ぶことを最後の見せ合いで確認します。「素の Claude Code はどこまで近づくか」「自分の DESIGN.md でどう変わるか」を、サンプル 3 段階と自分の output/ 配下を並べて観察します。

SECTION 02

題材の設定

設定 1

想定読者

経営層・事業責任者・新規事業担当。スマホで開いて 60 秒で要点を掴み、興味を持ったら PDF をダウンロードする想定。本文は読み流し、KPI と著者で信頼を判断する読み手モデル。

設定 2

レポート概要

2026 年第 2 四半期の業界トレンド（架空題材）。AI 駆動の業務変化、規制環境の急進、人材流動性の構造変化、デザイン領域の変化の 4 トピックをカバー。レポート本体は PDF 全 42 ページ／ 4.2 MB の想定。

設定 3

配信形態

シングル LP（縦長 1 ページ）+ レポート本体 PDF。LP は要約 + 数値 + 著者の 3 点でレポートの価値を 1 分で伝える役割。LP 自体には本文を載せず、PDF への導線に集中します。

設定 4

読了 60 秒のスキャン経路

ヒーロータイトル → 主要数値 4 個 → トピック 4 件の見出し → 著者の役職 → ダウンロード。本文は読まれない前提で、見出しと数値だけで「読む価値があるか」が判断される。

SECTION 03

ページ構成（縦長 7 ブロック）

縦に 7 つのブロックを積み上げます。各ブロックの役割と中身は次の通り。handson/samples/content.md から素材を Claude Code に渡し、handson/DESIGN.md で全体ルールを統制します。

① Header — Sticky ナビ（ブランド + アンカー + ダウンロード CTA）

② Hero — タイトル / リード / 発行日 / レポート本体メタ / プライマリ CTA

③ KPI — 主要数値 4 個（68% / 3.4 倍 / 42% / +18%）

④ Topics — 主要トピック 4 件のサマリーカード

⑤ Author — 主筆プロフィール（写真 + 氏名 + 役職 + 略歴）

⑥ Related — 関連レポート 3 件のカード

⑦ CTA + Footer — レポート全文 PDF ダウンロード + 著作権

① Header

Sticky ナビ + ダウンロード CTA

ブランド名「Insight Quarterly」を左、トピック / 著者 / 関連 / ダウンロードへのアンカーリンクを右。スクロールしても上に追従。CTA だけボルドー系で塗り、他はテキストリンク。

DESIGN.md → クラス命名「Header」 / Sticky / アンカーは smooth scroll

② Hero

タイトル + リード + メタ + CTA

タイトルは Noto Serif JP の 2.6rem、2 行で読み下せる長さ。リードは 120-160 字で要約。発行日 / レポート本体ページ数 / 調査対象を 3 列メタとして罫線で区切る。

DESIGN.md → クラス命名「Hero」 / 中央寄せ禁止、左寄せ

③ KPI

主要数値 4 個（横並び罫線区切り）

数値（Serif 2.8rem）+ 単位（Serif 1.4rem アクセント色）+ ラベル（Sans 0.84rem）+ 出典（Sans 0.7rem ミュート色）。3 カラム均等カードを避け、罫線で区切った横並びにすることで「データ集」感を出す。

DESIGN.md → クラス命名「KpiCard」 / 数値は tabular-nums

④ Topics

主要トピック 4 件のサマリーカード

2 × 2 カードで縦横に並べる（3 カラム均等を避ける）。各カードは Topic 番号 + 見出し（Serif）+ 本文 3 行。本文は要約のみで詳細は PDF へ。

DESIGN.md → クラス命名「TopicCard」 / 各カード本文は 80 字以内

⑤ Author

主筆プロフィール（写真 + 役職 + 略歴）

顔写真 120px 円形（グレースケール 0.2）+ 氏名 + 役職 + 略歴 4 行。読み手は「誰がこのレポートを書いたか」で信頼性を判断するため、ヒーローと同じくらい重要。

DESIGN.md → クラス命名「AuthorCard」 / 写真は丸型、彩度を落とす

⑥ Related

ダウンロード CTA + 著作権

ダークネイビーの全幅セクションに白抜きでヘッドライン + ボディ + ダウンロードボタン。研修用題材であることの注釈を小さく入れる。フッターはブランド + コピーライトのみ。

DESIGN.md → クラス命名「DownloadCta」 / 全幅、白抜き、CTA はアクセント色

SECTION 04

主要数値（KPI）の意図

本ページの心臓部。「読み手は本文を読まず、数値だけで読む価値を判断する」という前提で、4 つの数値が選ばれています。handson/samples/content.md から素材として Claude Code に渡します。

68 %

経営層が AI 導入を 2026 年内の最重要課題と回答

「主流化したか」を伝える数値。読み手の経営層が「自分も対応すべき」と即判断できる

3.4 倍

AI 駆動開発を導入済み企業の生産性指数（業界平均比）

「効果の大きさ」を伝える数値。倍率で表記して印象を強める

42 %

国内大企業で AI 関連の規制対応専任部署を設置済み

「組織対応の進度」を伝える数値。読み手が自社のフェーズを確認する基準値

+18 %

AI 人材の前年同期比給与水準上昇率

「人材市場の動き」を伝える数値。経営層の人事判断に直結する

数値表示の作法（DESIGN.md カスタム項目に追加するルール例）

KPI 数値は Noto Serif JP / weight 700 / font-feature-settings: "tnum"。単位は数字より 2 段小さく、var(--color-accent)（ボルドー）で着色。桁区切りはカンマ、小数点は半角ピリオド。これらをハンズオン② の DESIGN.md カスタム項目セクションに追加します。

SECTION 05

配布されている素材

受講者用 ZIP に同梱されているファイル一覧。当日の Claude Code への渡し方も合わせて。

handson/ ├── docs/ 配布ガイド 4 本（オリエン / ハンズオン / 事前 / 運営） ├── starter/ │ ├── index.html 完成形イメージ①の HTML 実装（縦長 1 ページ） │ ├── style.css 配色・タイポ・余白の参考実装 │ └── assets/ 著者写真等の置き場 ├── samples/ │ └── content.md レポート要約・KPI 4 個・トピック 4 件・著者・関連 3 件の素材 ├── exercises/ 演習詳細 7 本（exercise01-07） ├── DESIGN.md ひな型（受講者が育てる） ├── CLAUDE.md / AGENTS.md プロジェクト規約 ├── design-skills.zip 5 種の Skill バンドル（ハンズオン② 冒頭で解凍） └── output/ 5 段階の生成結果置き場（作業中に作成）

素材 1

handson/samples/content.md

レポートの素材データが Markdown で揃っています。Claude Code に @samples/content.md で渡すと、タイトル / リード / KPI / トピック / 著者 / 関連 / CTA / フッターの全データを参照して HTML を生成します。

渡し方: @samples/content.md を使って業界トレンドレポートの公開ページを HTML/CSS で作ってください。

素材 2

handson/starter/index.html

完成形イメージ①の HTML 実装そのもの。「ゴールの形」として参照しますが、Claude Code に直接渡さない。自分のバイブデザインと DESIGN.md で同等のものを再生成するのが目標です。

参照のみ。プロンプトに @starter/index.html は付けない

素材 3

handson/DESIGN.md

研修開始時はほぼ空欄のひな型。ハンズオン② で受講者が 8 セクション + カスタム項目を書いて育てます。プロンプト先頭に @DESIGN.md で常時参照。

渡し方: 全プロンプトの先頭に @DESIGN.md を付与

素材 4

handson/design-skills.zip

5 種のデザイン Skill バンドル（frontend-design / interface-design / ui-ux-pro-max / pixel-icon / brand-icons）。ハンズオン② 冒頭で解凍し、5 フォルダを .claude/skills/ 直下にドラッグして配置します。

研修中は frontend-design と ui-ux-pro-max を中心に

SECTION 06

5 段階の生成サイクル（具体例つき）

同じ題材を 5 回作り直します。各段階で「Claude Code に何を渡すか」「何が変わるか」を具体的に。各段階の HTML は別ファイル（output/01-zeroshot.html 〜 output/05-final.html）として残します。

段階 1
ハンズオン①

素の Claude Code渡すもの: @samples/content.md のみ出力: output/01-zeroshot.html

期待される変化: AI のデフォルト出力（中央寄せヒーロー、3 カラム均等カード、Inter フォント、信号機カラー）。違和感を 5 個メモして次の段階で対義語に変換する。

段階 2
ハンズオン①

バイブデザイン渡すもの: @my-vibe.md + @samples/content.md出力: output/02-vibe.html

期待される変化: 形容詞 5〜7 語（例: 装飾を削ぎ落とした／読み物として静かな／業界レポートらしく権威感のある／数字が読みやすい／業務寄りで親しみがある）が見た目に直結し、配色とタイポが大きく変わる。

段階 3
ハンズオン②

DESIGN.md 駆動渡すもの: @DESIGN.md + @samples/content.md出力: output/03-design-md.html

期待される変化: 配色トークン（--color-*）が一貫、コンポーネント命名（Hero / KpiCard / TopicCard 等）が整い、状態網羅と禁止事項が守られる。カスタム項目「数値表示の作法」「画像の扱い方」も反映される。

段階 4
ハンズオン②

Skills 適用指示: ui-ux-pro-max を使って〜出力: output/04-skills.html

期待される変化: 配色の彩度がさらに落ち上品に、ヒーローのタイポが distinctive な特徴を持つ。frontend-design Skill で「BOLD なデザイン方向」を入れると、Topics の見出しがより力強くなる。

段階 5
ハンズオン③〜④

修正指示で仕上げ5 つの型: 差分 / 否定 / スクショ 3 種出力: output/05-final.html + Figma 持ち帰り

期待される変化: 違和感を 4〜5 ターン磨き上げて完成形イメージ①に近づく。Figma 連携で持ち帰りまで完了し、業務適用の作法が身につく。

前段階の結果を消さない

各段階の HTML を別ファイル（01-zeroshot.html 〜 05-final.html）として保存。上書きせずに 5 ファイル並べて残すのが重要です。最後の見せ合いで 5 段階を並べて、何が効いたかを全員で観察します。同じ題材から始めて受講者ごとに違う完成品が並ぶ現象が、本研修の最大のメッセージです。

SECTION 07

避けたい AI らしさ（具体例）

素の Claude Code が出してくる「AI らしさ」の具体例。完成形イメージ①と見比べて、どこが違うかを意識します。

素の Claude Code が出しがちなもの

ヒーローが中央寄せで、リードが画面横幅いっぱい
KPI が 3 カラム均等カードでテンプレ感
本文 Inter / 見出し Inter Bold で抑揚なし
配色がブルー＋グレー＋紫グラデで AI 出力丸わかり
Topics に絵文字アイコン（💡 / 📊 / ⚡）
「Seamless integration」「Unleash your potential」の英語キャッチコピー
著者プロフィールが小さく、ヒーローと階層が同じ

完成形イメージ①が選んだもの

ヒーローは左寄せで、リードは行長 640px で抑制
KPI は罫線区切りの横並び（業界レポートらしいデータ集の見た目）
本文 Noto Sans JP / 見出し Noto Serif JP の太字でリズム
配色はウォームベージュ × ダークネイビー × ボルドーアクセントの 3 色
Topics に絵文字なし、Topic 番号タグ（TOPIC 01）で代替
本文は日本語のみ、具体的な動詞と数字で書く
著者プロフィール用に独立セクションを設け、ヒーローに次ぐ重要度

DESIGN.md SECTION 8 の禁止事項に書き戻す

素の Claude Code から出てきた「AI らしさ」は、見つけ次第 DESIGN.md の SECTION 8（状態網羅 + アクセシビリティ + 禁止事項）に書き戻します。3 回以上同じパターンが出るなら必ず追記。次の段階以降で再現しなくなり、DESIGN.md が育っていきます。

SECTION 08

早く終わった方向け：ボーナステーマ「OpsBoard」

メインテーマ Insight Quarterly を最終版（output/05-final.html）まで仕上げて時間が余った方は、題材を 公開 LP から 社内ダッシュボード に切り替えて、interface-design Skill が frontend-design とどう違って効くかを観察します。配布フォルダの handson/bonus/ 配下に題材データと完成版テンプレートが同梱されています。

ボーナス題材

OpsBoard — 業務ダッシュボード

中規模 SaaS チームが日々のサポートチケット・デプロイ・課金イベントを横断で監視するための社内ダッシュボード。サイドバー + KPI タイル 4 個 + Queue テーブル + 応答時間ミニチャート + デプロイ履歴の単一ページ。情報密度・読み取り速度・状態の視認性が要点です。

完成版テンプレートを開く →

ねらい

frontend-design と interface-design の使い分け

同じ DESIGN.md でもテーマが変わると効かない部分が出てくる。ランディング寄り題材では frontend-design が効き、ダッシュボード題材では interface-design が効く。題材ごとに DESIGN.md を多少書き換える必要があることを体感する追加課題です。

進め方（[20〜40min] 想定）

handson/bonus/content.md と handson/bonus/README.md を読み、題材の差分を把握する
ダッシュボード用に my-vibe-bonus.md を新規作成（5〜7 語）。LP 用の my-vibe.md をそのまま使うとはまらない
プロンプト：@DESIGN.md @my-vibe-bonus.md @bonus/content.md を使って、OpsBoard ダッシュボードの単一 HTML を作ってください。interface-design Skill を主役に、ui-ux-pro-max を脇役にしてください。出力は output/06-bonus.html として保存できる単一 HTML にしてください。
生成された output/06-bonus.html を handson/bonus/starter/index.html と並べて開き、差分を観察
余裕があれば修正指示を 2〜3 ターン回し、output/06-bonus-final.html まで磨く

DESIGN.md は題材ごとに微調整が必要

Insight Quarterly 用に書いた DESIGN.md の SECTION 6（レイアウト）と SECTION 7（コンポーネント命名）は、ダッシュボード題材ではそのまま使えません。配色トークンや禁止事項などの「題材横断」の規約はそのまま、レイアウト・コンポーネント定義だけを書き換える運用を体験してください。業務で扱う画面はランディング寄りと業務画面寄りに大別できるため、両者の使い分け感覚は社内運用に直結します。

講義① / ハンズオン① / [70min]

バイブデザイン記述

「落ち着いた」「業務寄り」「権威感のある」など、空気感を構造化して言語化する作法です。形容詞 5〜7 語で記述します。素の Claude Code が出してくる「平均的なデフォルト」を、自分の言葉で上書きする最初のレイヤー。本タブを開きながらハンズオン① の Exercise 01・02 を進めます。

Exercise 01

Zeroshot：素の Claude Code を体感する

指示なしで「業界トレンドレポートの公開ページを作って」とだけ投げ、AI のデフォルト出力を体感します。違和感を 5 個、iterations.md にメモするまでが Exercise の範囲です。

使うデータ@samples/content.md

出力先output/01-zeroshot.html

詳細手順exercises/exercise01-zeroshot.md

Exercise 02

バイブデザイン記述で再生成する

Exercise 01 でメモした違和感を対義語に変換し、形容詞 5〜7 語の my-vibe.md を書きます。同じ素材で再生成し、Zeroshot 版との差を観察します。

使うデータ@my-vibe.md + @samples/content.md

出力先output/02-vibe.html

詳細手順exercises/exercise02-vibe-design.md

SECTION 01

バイブデザインで何が変わるか（実物比較）

同じ素材（handson/samples/content.md）を使っても、バイブデザイン記述があるかないかで雰囲気が大きく変わります。素の Claude Code が出した「段階 1」と、形容詞 5〜7 語＋ DESIGN.md ＋ Skills ＋修正指示で仕上げた「段階 3：最終版」を見比べてください。

Before

段階 1：素の Claude Code

形容詞なしで「業界トレンドレポートの公開ページを作って」と投げた状態。AI のデフォルト（中央寄せヒーロー、紫グラデ、絵文字、3 カラム均等カード、Inter フォント）が出ます。

段階 1 を開く →

After

段階 3：最終版

同じ素材から、形容詞 5〜7 語＋ DESIGN.md ＋ Skills ＋修正指示で仕上げた最終版。同じテーマでも、業界レポートらしい権威感と読みやすさが両立します。

最終版を開く →

最終版で使われたバイブデザイン記述（参考）

装飾を削ぎ落とした／読み物として静かな／業界レポートらしく権威感のある／数字が読みやすい／業務寄りで親しみがある／中央寄せを避けた／絵文字を UI に使わない（7 語）。これを handson/my-vibe.md に書いて Claude Code に渡すと、段階 1 のデフォルト出力が段階 3 の方向に大きく動きます。

SECTION 02

なぜ 5〜7 語か

少なすぎると見た目が決まらず AI のデフォルトが出ます。多すぎると入力が散らかり、語と語が矛盾します。経験的に 5〜7 語が、揃いと多様性のバランスが取れます。

避けるべき書き方

抽象語：「シンプル」「美しい」「使いやすい」「カッコいい」「モダン」
配色名の単独使用：「青系」「赤系」
7 語を超える形容詞列挙
「いい感じに」「それっぽく」など意味の決まらない依頼

採用すべき書き方

見た目の具体：「装飾を削ぎ落とした」「線を細くした」「アイコンを使わない」
読後印象の具体：「読み物として静かな」「業界メディアらしく権威感のある」
用途と空気感の組合せ：「業務寄りで親しみがある」「データドリブンで冷静」
5〜7 語で停止

SECTION 03

形容詞の選び方（5 ステップ）

Exercise 02 の中核プロセス。Exercise 01 で生成した output/01-zeroshot.html を見て、違和感を 5 個メモするところから始めます。

Zeroshot 出力の違和感を 5 個メモする

例：「ヒーローのフォントが Inter で重みが足りない」「KPI が 4 カラム均等でテンプレ感」「配色がブルー＋紫グラデで業界レポートらしくない」「中央寄せでリズムが平坦」「著者プロフィールが小さく権威感が出ない」

違和感を対義語に変換する

「Inter で重みが足りない」→「見出しに Serif の太字／重みのある Display フォント」、「テンプレ感」→「装飾を削ぎ落とした／罫線で区切った」、「中央寄せ」→「左寄せで読み物のリズムを作る」のように、否定ではなく肯定形で書く。

5〜7 語に絞る

類似する語は統合（「権威感のある」と「業界らしく」→「業界レポートらしく権威感のある」）。配色名は別セクションへ。優先度の高い 5〜7 語だけ残す。

my-vibe.md に書き出す

handson/my-vibe.md を新規作成し、5〜7 語を Markdown で記述。配色とフォントの方向性を補足の段落で添えてもよい（実例は SECTION 04）。

Claude Code に渡して再生成

Claude Code パネルで @my-vibe.md と @samples/content.md を使って業界トレンドレポートの公開ページを HTML/CSS で作ってください。my-vibe.md の形容詞 5〜7 語を必ず守ってください。 と投げる。結果を output/02-vibe.html として保存。

SECTION 04

my-vibe.md の実例（最終版で使ったもの）

Insight Quarterly（業界レポート LP）向けに書いた my-vibe.md の中身。これをそのまま流用してもよいですが、研修中は 自分の言葉で書き直す のが目標です。

# my-vibe.md — Insight Quarterly 用バイブデザイン

## バイブデザイン（形容詞 5〜7 語）

1. 装飾を削ぎ落とした
2. 読み物として静かな
3. 業界レポートらしく権威感のある
4. 数字が読みやすい
5. 業務寄りで親しみがある
6. 中央寄せを避けた
7. 絵文字を UI に使わない

## 補足（配色とフォントの方向）

- 配色は 3 色に絞る：ウォームベージュ系（背景）+ ダークネイビー（見出し / CTA）+ ボルドー（アクセント 1 色のみ）
- 本文は読みやすい sans（Noto Sans JP）、見出しと数字に Serif（Noto Serif JP）の太字
- 信号機カラー（赤緑黄）と紫グラデは禁止

## 参考にしたい雰囲気

- Bloomberg Businessweek の特集記事ページ
- The Atlantic の長文記事
- HBR Japan の業界レポート

Claude Code への投げ方（実プロンプト）

@my-vibe.md と @samples/content.md を使って業界トレンドレポートの公開ページを HTML/CSS で作ってください。my-vibe.md の形容詞 5〜7 語を必ず守り、補足の配色・フォント・禁止事項にも従ってください。出力は output/02-vibe.html として保存できる単一 HTML ファイルにしてください。

SECTION 05

画像挿入と MCP の必要性

ハンズオン①の最後、生成した HTML にヒーロー画像や著者写真を挿入する場面で「画像をどこから持ってくるか」の問題に直面します。ローカル素材は配布されていますが、業務では「Figma にあるアセット」「画像生成 AI で作ったもの」「ストック画像」を使い分けます。Claude Code がそれらを自動で取りに行くには MCP サーバ経由が必要です。当日のデモでは公式 Figma Remote MCP と画像生成 MCP を講師の手元で動かして見せます。

研修内では設定しません

MCP の動作は講師デモのみ。受講者の手元では社内 LLM 中継経由でない通信が発生するため、研修内では Claude Code の標準ツールに留めます。MCP の本格利用は研修後の持ち帰り検証として位置づけます。

SECTION 06

禁止 UI パターン（DESIGN.md SECTION 8 に書き戻すもの）

バイブデザインで方向を決めても、Claude Code は世の中の平均的な UI に引き戻されがちです。生成物に下記が混じったら差分指示で抜きます（参考：Taste Skill、frontend-design Skill）。

配色

信号機カラーと AI パープル

赤緑黄の警告色トリオ、紫グラデの濫用。同系色の濃淡で差を出し、比較は「ウォームグレー × ブランド色」に。

タイポ

Inter / Roboto / Arial 一辺倒

無難なサンセリフ単独は印象が消えます。本文 sans + 見出しに 1 段違うフォントを当てる。

レイアウト

3 カラム均等カード／中央寄せヒーロー

テンプレ感を生む典型。情報密度や非対称配置で意図を出すか、潔く 1 カラム。

コピー

Seamless / Unleash / Next-Gen

意味の薄いマーケ語は AI が高頻度で混ぜます。具体動詞・固有名詞・数字に置換。

アイコン

絵文字を UI 要素にしない

Phosphor / Radix / Lucide など線アイコン群を採用。絵文字は装飾に限る。

状態

loading / empty / error の欠落

初稿で抜けがちな 3 状態は DESIGN.md の禁止事項セクションで明示。

SECTION 07

バイブデザイン 30 例（カテゴリ別チートシート）

業務文脈別に 6 カテゴリ × 5 例＝ 30 例を提示します。完全に流用するのではなく、自分の業務に合うものを 1 つ選んで微調整するのが目安。配布資料の docs/reference/vibe-design-cheatsheet.md の元になっています。

A. 業界レポート / 編集（権威系・読み物）

用途	形容詞 5〜7 語
業界トレンド四半期レポート	装飾を削ぎ落とした／読み物として静かな／業界レポートらしく権威感のある／数字が読みやすい／中央寄せを避けた
編集者目線の長文記事	本文の余白が広い／著者の存在を感じさせる／カラム幅を細くした／見出しに weight を効かせた／写真を多用しない
白書・研究レポート	権威感のある／引用が多い／文献参照を厳格に／罫線で区切った／彩度を落とした
CEO レター・年次報告	静かな信頼感／長文の読み物／顔写真を大きく／引用ブロックで強調／余白を取った
業界メディアの特集ページ	記事のリズムが立った／見出しに表情がある／数値とグラフを混在／読み終わりの余韻を残した／装飾を控えた

B. データ駆動 / ダッシュボード（業務 SaaS 系）

用途	形容詞 5〜7 語
SaaS の管理ダッシュボード	アクションに迷わない／状態違いが分かる／密度を高めた／彩度を抑えた／フォーカスが追える
BI ツールの分析画面	余白を詰めた／数字が読みやすい／装飾を排した／業務寄りで親しみがある／グラフを最小限に
監視・アラート画面	異常がすぐ目に入る／重要度の階層が明確／色を 2 系統に絞った／時系列が把握しやすい／視認性を最優先
業務オペレーション画面	1 画面で完結する／繰り返し操作が速い／キーボード優先／状態網羅が完璧／装飾は完全排除
金融トレーディング画面	密度が極めて高い／反応速度が速そう／ダークモード基調／タイポグラフィで階層／マウス操作が最小

C. 提案資料 / プレゼン（コンサル LP 系）

用途	形容詞 5〜7 語
コンサル提案ページ	装飾を削ぎ落とした／線を細くした／余白を取った／カラーは 2 系統で揃えた／グラフを派手にしない
事業計画ピッチ LP	1 メッセージで貫く／数値で語る／無駄な飾りなし／フォントで強弱／読了 30 秒
調査結果レポート LP	調査手法を明示／N 数を主張／グラフより表／引用を厳格に／結論を冒頭に
パートナーシップ案内	対等な印象／2 ロゴが並ぶ／読み物として静かな／写真を控えめに／信頼感を語る
業務改革プロジェクト紹介	before / after で構成／数値で証拠／余白で「読み」を作る／中央寄せを避けた／本文長めでも読みやすい

D. 採用 / ブランディング（コーポレート系）

用途	形容詞 5〜7 語
採用 LP（中途）	働く人の顔が見える／写真を大きく／数値で文化を語る／余白で呼吸を作る／温度感がある
採用 LP（新卒）	等身大の語り口／読み物として親しみがある／専門用語を控えた／カラフルすぎない／余白で読みやすく
会社紹介 / コーポレートサイト	歴史を感じさせる／落ち着いた色温度／タイポグラフィで威厳／写真を控えめに／和洋折衷
サステナビリティレポート	誠実な語り口／写真は引いた構図／数値で誠意／緑系の濫用を避けた／調査手法を明示
ブランドステートメント	1 メッセージで貫く／余白で意思を伝える／写真より文字／フォントに人格／中央寄せを避けた

E. 業務 SaaS / プロダクト LP（モダン控えめ系）

用途	形容詞 5〜7 語
B2B SaaS の LP	用途別に構造化／スクショで魅せる／価格をフェアに／導入企業を並列／読み物として親しみがある
API ドキュメント	密度が高い／コードがすぐ目に入る／検索が速い／3 カラム均等を避けた／黒に近い背景
開発者向けツール LP	コードがファーストビュー／デモを動かせる／用語を絞った／彩度を抑えた／タイポで階層
業務効率化ツール LP	before / after を 1 画面で／数値で時短を語る／写真は最小／3 ステップで簡潔／余白で読みやすく
セキュリティ製品 LP	信頼感を最優先／淡い暖色は避けた／罫線で構造／数値で根拠／余白で誠実さ

F. ヘルスケア / 公共（社会的信頼系）

用途	形容詞 5〜7 語
ヘルスケア企業の LP	清潔感を最優先／医療らしく抑制された／写真は人より道具／数値で誠意／信頼感を醸成
自治体・行政ページ	万人に読みやすい／装飾を完全排除／コントラストを最大／用語を平易に／フォントは標準的
教育機関の発信ページ	知性を感じる／装飾を削ぎ落とした／写真は学生の表情／引用を多用／読み終わりに余韻
NPO・公益団体	誠実な語り口／写真を大きく／装飾を控えた／カラーは 1 系統＋アクセント 1 色／読み物として静か
医療情報ポータル	視認性を最優先／コントラストを高く／装飾を完全排除／用語を平易に／検索が速い

使い方

30 例から 1 つ選んで my-vibe.md に転記し、自分の業務に合わせて 1〜2 語入れ替える。最初は完璧を目指さず、5〜7 語の枠組みで「自分の言葉になっているか」を確認するのが研修中の目安です。

SECTION 08

ハンズオン①の進め方（早見表）

[70min]。Exercise 01（Zeroshot）と Exercise 02（バイブデザイン）を連続で実施します。

時刻	内容	受講者の動き	出力ファイル
[10min]	Exercise 01：Zeroshot 生成	Claude Code に `@samples/content.md を使ってレポート LP を作って` とだけ投げる	`output/01-zeroshot.html`
[10min]	違和感を 5 個メモ	ブラウザで `01-zeroshot.html` を開いて違和感を `iterations.md` に列挙	`iterations.md`
[15min]	違和感を対義語に変換し 5〜7 語に絞る	SECTION 03 のフロー通りに `my-vibe.md` を書く	`my-vibe.md`
[20min]	Exercise 02：バイブデザインで再生成	`@my-vibe.md と @samples/content.md で再生成` を投げる	`output/02-vibe.html`
[10min]	Zeroshot vs バイブの比較	2 ファイルをブラウザで並べて開き、何が変わったかを `iterations.md` に追記	`iterations.md` 追記
[5min]	講師による画像挿入と MCP 必要性のデモ	観察のみ	—

講義② / 演習 / ハンズオン②

DESIGN.md と Skills

バイブデザイン記述を「ファイルに昇格」させて Claude Code に常時参照させる仕組みが DESIGN.md です。CLAUDE.md と同じ位置付けでリポジトリのルートに置き、プロンプトに @DESIGN.md で明示参照します。さらにデザイン系 Skills（ui-ux-pro-max / frontend-design ほか）を組み合わせて品質基準を底上げします。本タブを開きながら Exercise 03 と Exercise 04 を進めます。

Exercise 03

DESIGN.md ドラフトを書く

空欄の handson/DESIGN.md ひな型に、自分のバイブデザイン記述を 8 セクション + カスタム項目 1〜2 個で書き起こします。配色・コンポーネント命名・禁止事項の 3 つは必ず埋めてください。

編集ファイルhandson/DESIGN.md

参照my-vibe.md / 本タブ SECTION 02〜04

詳細手順exercises/exercise03-design-md.md

Exercise 04

DESIGN.md で再生成 + Skills 適用

前半は @DESIGN.md を渡して再生成、バイブ版と比較。後半は design-skills.zip を解凍して 5 フォルダを .claude/skills/ に配置し、frontend-design と ui-ux-pro-max を適用して効果を観察します。

使うデータ@DESIGN.md + @samples/content.md

出力先output/03-design-md.html → output/04-skills.html

詳細手順exercises/exercise04-design-md-skills.md

SECTION 01

DESIGN.md と Skills で何が変わるか（実物比較）

バイブデザイン記述だけだと、毎回「装飾を削ぐ」「Inter を避ける」を口頭で伝える必要があります。DESIGN.md にすると、その指示が「常時参照」され、Skills が品質基準（配色・タイポ・コンポーネント）を底上げします。

Before

段階 2：DESIGN.md + Skills 適用済み（中間版）

DESIGN.md 8 セクション＋ Skills（ui-ux-pro-max / frontend-design）適用後の状態。配色トークン整備、コンポーネント命名統一、状態網羅、A11y 配慮。完成形に近づきましたが、細部はまだ修正指示で詰める余地があります。

段階 2 を開く →

After

段階 3：最終版

段階 2 から修正指示の 5 つの型と Figma 連携で仕上げた最終版。DESIGN.md と Skills の効果が、修正指示の精度に直結することがわかります。

段階 3（最終版）を開く →

段階 1（バイブデザインのみ）と段階 2（DESIGN.md + Skills）の差

段階 1 は形容詞 5〜7 語で「方向」が決まったが、配色やコンポーネント命名がブレる。段階 2 は DESIGN.md で「ルール」が固まり、Skills で「品質基準」が底上げされる。同じテーマで作っても、構造の安定性が大きく変わります。段階 1（バイブのみ）を開く。

SECTION 02

DESIGN.md の最低限 8 セクション

講義② で構造を学び、演習で自分の DESIGN.md を書き、ハンズオン② で再生成と比較を行います。3 ページ以内、各セクション 5 行以内が目安。

SECTION 1

バイブデザイン形容詞 5〜7 語

午前で書いた my-vibe.md の内容を冒頭に転記。

SECTION 2

サービス概要3〜5 行

何のサービスか、誰のためか、現在のフェーズか。

SECTION 3

配色CSS カスタムプロパティ / 6〜8 個

brand-primary、brand-accent、bg、surface、text-primary、text-secondary、border、danger 等。

SECTION 4

タイポグラフィ本文 / 数字 / 見出しの font-family とスケール

本文 16px、見出し 20/24/32/40、数字に tnum を効かせる等。

SECTION 5

余白スケール4 / 8 / 16 / 24 / 32 / 48 / 64

8px グリッド前提。スペーシングは命名トークンで。

SECTION 6

レイアウト横幅、グリッド、サイドナビ

最大幅、ブレークポイント、コンテンツカラム、CTA の位置。

SECTION 7

コンポーネント命名Hero / KpiCard / TopicCard / AuthorCard / DownloadCta 等

クラス命名と役割を表で。命名揺れ防止に効く。

SECTION 8

状態網羅 + アクセシビリティ + 禁止事項loading / empty / error / focus / contrast / 禁則

タブ 04 のアンチスロップ列をここに展開。

SECTION 03

完全な DESIGN.md 全文サンプル（最終版で使ったもの）

最終版（handson/samples/stages/03-final/）の生成に実際に使った DESIGN.md の全文。配布 ZIP の handson/DESIGN.md と同内容です。受講者は研修中、これを参考にしつつ 自分の言葉で書き直す ことが目標。

# DESIGN.md — Insight Quarterly 2026 Q2

## 1. バイブデザイン（形容詞 5〜7 語）

1. 装飾を削ぎ落とした
2. 読み物として静かな
3. 業界レポートらしく権威感のある
4. 数字が読みやすい
5. 業務寄りで親しみがある
6. 中央寄せを避けた
7. 絵文字を UI に使わない

## 2. サービス概要

Insight Quarterly はコンサルティングファーム発の業界トレンド四半期レポート公開ページ。
読み手は経営層・事業責任者・新規事業担当。スマホで開いて 60 秒で要点を掴み、
興味を持ったら本体 PDF をダウンロードする想定。

## 3. 配色（CSS カスタムプロパティ）

```css
:root {
  --c-bg:        #f5efe3;  /* ウォームベージュ */
  --c-bg-soft:   #ece4d2;  /* 1 段濃い背景 */
  --c-surface:   #fffcf6;  /* カード紙感 */
  --c-ink:       #141821;  /* 本文 */
  --c-ink-3:     #525866;  /* キャプション */
  --c-line:      #d8cdb6;  /* 罫線 */
  --c-navy:      #0e1a35;  /* 見出し / CTA */
  --c-accent:    #8b1d2c;  /* アクセント（ボルドー） */
}
```

## 4. タイポグラフィ

- 本文: Noto Sans JP / 16px / line-height 1.85
- 見出し・数字: Noto Serif JP / 太字 700 / 字間 -0.012em
- モノスペース: JetBrains Mono / 12px / 出典・ラベル
- スケール: 12 / 14 / 16 / 18 / 22 / 28 / 36 / 60 (px)

## 5. 余白スケール

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 (px) 8px グリッド前提。

## 6. レイアウト

- 最大幅 1100px、本文行長 36rem
- ブレークポイント: 720px / 880px / 1024px
- セクション縦余白 96-128px、ヒーローは縦方向にゆとり

## 7. コンポーネント命名

| クラス | 役割 |
|---|---|
| Hero | ヒーロー（号数 + タイトル + リード + メタ + CTA + visual） |
| KpiCard | 主要数値カード（数値 + 単位 + ラベル + 出典） |
| TopicCard | トピックサマリー（番号 + タグ + 見出し + 本文） |
| AuthorCard | 著者プロフィール（写真 + 役職 + 略歴） |
| RelatedItem | 関連レポート（号数 + 見出し + 本文） |
| DownloadCta | ダウンロード CTA（タイトル + 詳細 + メタ + ボタン） |

## 8. 状態網羅 + A11y + 禁止事項

### 状態
通常 / hover / focus / 訪問済みリンク / disabled

### A11y
- コントラスト比 4.5:1 以上（本文）／ 3:1 以上（大文字）
- フォーカスリング `outline: 2px solid var(--c-accent); offset 3px`
- 見出し階層 h1 → h2 → h3 厳守、img には alt

### 禁止事項
- 信号機カラー（赤緑黄の警告色トリオ）
- 紫グラデの濫用（AI パープル）
- Inter / Roboto / Arial 一辺倒
- 3 カラム均等カード／中央寄せヒーロー
- 絵文字の本文埋め込み・UI 要素化
- Seamless / Unleash / Next-Gen のマーケ語
- KPI セクションでの彩度の高い緑

## 9. カスタム：数値表示の作法

- KPI 数値は Noto Serif JP / weight 700 / `font-feature-settings: "tnum"`
- 単位は数字の 0.38 倍、`var(--c-accent)` で着色
- 桁区切りはカンマ、小数点は半角ピリオド

## 10. カスタム：画像の扱い方

- ヒーロービジュアルは抽象的なグラフィック（人物・建物の写真は使わない）
- 著者写真は 120px 円型 + グレースケール 0.2
- アイコンは線画 1.5px stroke のみ、塗りなし

プロンプト例（DESIGN.md で再生成）

@DESIGN.md と @samples/content.md を使って、業界トレンドレポートの公開ページを HTML/CSS で作ってください。@DESIGN.md の規約を必ず守ってください。出力は output/03-design-md.html として保存できる単一 HTML ファイルにしてください。

SECTION 04

カスタム項目を 1〜2 個追加する

8 セクションは最低限。プロジェクト固有の判断軸があれば SECTION 9 以降に追記します。書き方の注意点を押さえれば AI が破りにくくなります。

カスタム例 1

「数値表示の作法」

レポート LP では数字が中心。「KPI は tabular-nums + 重み 700 + 色 brand-primary」「単位は数字より 2 段小さく」のような数値表示の専用ルールを足す。

カスタム例 2

「画像の扱い方」

「ヒーロー画像はオブジェクト写真ではなく、抽象的なグラフィック」「著者写真は丸型で 96px、グレースケール」のように画像方針を明示。

注意点 1

抽象語で書かない

「シンプルに」「読みやすく」は AI が拾えない。「行間 1.7」「カラム最大 680px」のように具体値で書く。

注意点 2

守らない時は禁止事項に書き戻す

生成物にデフォルトの挙動が混じっていたら、SECTION 8 の禁止事項に「やらないこと」として書き戻す。次回から再現しなくなる。

SECTION 05

デザイン Skills バンドルの解凍と配置

ハンズオン② の最初に handson/design-skills.zip を解凍し、5 つの Skill フォルダをまとめて .claude/skills/ 直下に配置します。バイブデザインだけで生成した状態（output/02-vibe.html）と、Skills を加えた状態（output/04-skills.html）を見比べることで、Skills の効きどころを身体で学びます。

ZIP を解凍

配布 ZIP 内の handson/design-skills.zip をダブルクリックで解凍。Windows なら右クリック →「すべて展開」、macOS ならダブルクリック。解凍された design-skills/ フォルダの中に 5 つの Skill フォルダ（frontend-design / interface-design / ui-ux-pro-max / pixel-icon / brand-icons）と README.txt が入っています。

5 つの Skill フォルダを全選択

解凍した design-skills/ を開き、Windows なら Ctrl + A、macOS なら Cmd + A で 5 フォルダ + README.txt を全選択。README.txt は含めても害はないので、Shift クリックで 5 フォルダだけ選んでも、全選択でも構いません。

リポジトリの .claude/skills/ 直下に移動

選択した 5 フォルダを、ハンズオン用リポジトリの .claude/skills/ 直下にドラッグ＆ドロップ。VSCode のエクスプローラに直接ドロップしても OK。.claude/skills/frontend-design/SKILL.md のように 1 階層深い場所に SKILL.md が来る配置になっていれば成功です。

認識確認

VSCode で Claude Code パネルを開き「使えるスキルを教えて」と入力。frontend-design / interface-design / ui-ux-pro-max / pixel-icon / brand-icons の 5 つが認識されていれば成功。SECTION 06 のプロンプトで実際に使い始めます。

Skill	役割	研修中の適用	業務適用例
`frontend-design`	ランディング・マーケティング系の画面デザイン。distinctive なタイポと 3 カラム均等を避ける思想。Anthropic 公式。	ハンズオン② 後半でヒーローと見出しの磨き上げ。`output/03-design-md.html` → `output/04-skills.html`	採用 LP、プロダクトコーポレートサイト、ブランドステートメント
`interface-design`	ダッシュボード・管理画面系の画面デザイン。データ密度の高い UI、設定画面の craft。	研修内では紹介のみ。業務適用の選択肢として提示	業務 SaaS、社内ダッシュボード、管理画面、データ参照ツール
`ui-ux-pro-max`	配色・タイポ・余白の品質基準と禁止 UI パターン。Taste Skill 系のアンチスロップ思想。	ハンズオン② で `frontend-design` と併用。配色とタイポの品質を底上げ	業務 LP / ダッシュボード全般、社内 SaaS のリブランディング
`pixel-icon`	ピクセルアート風アイコン生成（SVG / PNG）。グリッド指定で小サイズアイコンを量産。	研修内では紹介のみ	ファビコン、プロダクトアイコン、社内ツール装飾
`brand-icons`	ブランドアイコン参照（GitHub / Slack / Figma など主要サービスの公式 SVG）。	研修内では紹介のみ	連携サービス紹介セクション、フッターのソーシャルリンク

解凍は「バイブデザインの結果を残してから」

必ず output/02-vibe.html（バイブデザイン結果）を生成・保存してから Skills を配置してください。配置前にバイブの結果がないと、Skills の効きどころを比較できません。

SECTION 06

Skills 適用の実プロンプトと期待される効果

ハンズオン② 後半で全員が試すプロンプト。1 ターンごとに output/04-skills.html を保存して、適用前（03-design-md.html）と見比べます。

プロンプト 1

ui-ux-pro-max で配色とタイポを磨き上げ

ui-ux-pro-max を使って、@output/03-design-md.html の配色とタイポを業界レポートらしく磨き上げてください。@DESIGN.md の規約は守ってください。出力は output/04-skills.html として保存できる単一 HTML ファイルにしてください。

期待される変化：配色のコントラスト調整、彩度がさらに 1 段落ち、本文と見出しのリズムがクリアに。Taste Skill の「アンチスロップ」思想で、Inter 一辺倒や 3 カラム均等が確実に排除される。

プロンプト 2

frontend-design で distinctive なタイポを入れる

frontend-design Skill で、@output/04-skills.html のヒーローセクションのタイポグラフィに distinctive な特徴を入れてください。@DESIGN.md の禁止事項（Inter 一辺倒、3 カラム均等カード、紫グラデ）は守ってください。

期待される変化：ヒーロータイトルが Display Serif の太字 + 字間調整 + アクセント色の italic で「読み物としての権威感」を獲得。Topics の番号タイポが大型化し、視線誘導が強化される。

プロンプト 3（応用）

2 つの Skill を併用

ui-ux-pro-max と frontend-design を併用して、@output/03-design-md.html を業界レポートとしての品質に引き上げてください。@DESIGN.md の規約と禁止事項を全て守り、結果を output/04-skills.html として保存してください。

期待される変化：1 ターンで両方の効果が乗る。時間が押している時にこのパターン。ただし「効果が混ざって何が効いたか分かりにくい」ので、研修中は 2 ターンに分けて 1 つずつ適用するのが学習効率上は推奨。

プロンプト 4（修正）

Skills 適用後の違和感を差分で修正

@output/04-skills.html を確認したところ、ヒーロータイトルの italic 強調が強すぎます。strong な強調ではなく、subtle なアクセントとして 1 単語のみに留めてください。@DESIGN.md の規約は維持してください。

期待される変化：Skills 適用は強い味方だが、効きすぎると過剰になることがある。修正指示の「やらないことの指示」（次タブ参照）と組み合わせて、品質をコントロールする。

Skills は「品質基準」、DESIGN.md は「プロジェクト固有ルール」

役割の違い：DESIGN.md は プロジェクト固有のルール（配色トークン、コンポーネント命名、禁止事項）。Skills は 業界横断の品質基準（タイポのコントラスト、距離感、アンチスロップ）。両者を併用することで、業界レポートというプロジェクト個性と、フロントエンドの品質基準を同時に確保できます。

SECTION 07

ハンズオン②の進め方（早見表）

[50min]。Exercise 04（DESIGN.md と Skills）を実施します。output/02-vibe.html（午前バイブ版）から始まり、03-design-md.html と 04-skills.html を世代別で残します。

時刻	内容	受講者の動き	出力ファイル
[5min]	準備：午前の振り返り	`output/02-vibe.html` を開いて午前の到達点を確認、`my-vibe.md` と `DESIGN.md` を VSCode で開く	—
[20min]	DESIGN.md で再生成	`@DESIGN.md と @samples/content.md で再生成` を投げる。応答中に `@DESIGN.md` の語が引用されているか確認	`output/03-design-md.html`
[5min]	バイブ vs DESIGN.md の比較	2 ファイルをブラウザで並べて開き、`iterations.md` に違いを記録	`iterations.md` 追記
[2min]	Skills の確認	`/skills` または「使えるスキルを教えて」で 5 種が認識されているか確認	—
[13min]	Skills 適用	SECTION 06 のプロンプト 1（ui-ux-pro-max）→ プロンプト 2（frontend-design）の順で 1 ターンずつ適用	`output/04-skills.html`
[5min]	Skills 適用前後の比較	`output/03-design-md.html` と `04-skills.html` を並べて、`iterations.md` に「Skills の効果」を追記	`iterations.md` 追記

SECTION 08

DESIGN.md の育て方（4 原則）

育て方 1

3 ページ以内に収める

長すぎると Claude Code が守らない。各セクション 5 行以内、配色 / 余白 / タイポは CSS ブロック 1 つに圧縮。

育て方 2

違反を見つけたら追記

生成物に AI のデフォルトが混じっていたら、その挙動を「禁止事項」に書き戻す。

育て方 3

プロンプト先頭に `@DESIGN.md`

毎回必ず付与。応答中に DESIGN.md の語が引用されるかで、読まれた／読まれていないが分かる。

育て方 4

テンプレ化してチームで使う

1 名で書ききらず、チーム共通テンプレに昇格。こぎそ氏のサンプルなどが参考になる。

講義③ / ハンズオン③ / [80min]

修正指示の方法

「全文書き直し」ではなく「変更点だけを伝える」指示パターンを 5 つの型で習得します。違和感を感じても手で直さず、AI に直させる原則を貫くことで AI が育ち、トークン消費も最小化します。本タブを開きながら Exercise 05 を進めます。

Exercise 05

5 つの型を全部試して磨き上げる

差分指示 / 否定指示 / Figma スクショ参照 / 参考サイトスクショ参照 / 手書きスクショ参照の 5 つの型を 1 ターンずつ適用し、output/04-skills.html から output/05-final.html まで磨き上げます。各ターンの「型」「違和感」「結果」を iterations.md に記録します。

使うデータ@output/04-skills.html + 各種スクショ

出力先output/05-final.html + iterations.md

詳細手順exercises/exercise05-iterate.md

SECTION 01

なぜ修正指示が研修の核か

DESIGN.md と Skills で 方向と品質基準 は固まりますが、最後の磨き上げは修正指示でしかできません。段階 2（DESIGN.md + Skills）から段階 3（最終版）に持っていく差は、4〜5 ターンの修正指示の精度に直結します。

Before

段階 2：DESIGN.md + Skills 適用後

構造は整っているが、細部に違和感が残る状態。「ヒーロータイトルの italic 強調が強すぎる」「KPI 単位のサイズが大きすぎる」「著者カードの写真が小さい」など。

段階 2 を開く →

After

段階 3：修正指示で仕上げた最終版

5 つの型を組み合わせて 4〜5 ターンの磨き上げを行い、Figma 連携で持ち帰り。プロ品質のエディトリアル LP として完成した状態。

段階 3（最終版）を開く →

「手で直したくなる気持ち」が学びの核

段階 2 を見ると「これくらい自分で直せる」と思う瞬間が必ず来ます。そこで手を止めて Claude Code に伝えるのが研修の最重要ポイント。手で直すと AI が育たず、次の生成で同じ違和感が再現します。

SECTION 02

5 つの修正指示型

型 1

差分指示

「著者アバターを 56px 円形に変更してください。他は変更しないでください。」のように、1 ターン 1 論点で書く。

100〜500 トークン

型 2

否定指示（やらないことの指示）

「KPI セクションに彩度の高い緑は使わないでください。」のように、明示的に避けるべきパターンを伝える。

100〜300 トークン

型 3a

スクショ参照：Figma フレーム

Figma で参考デザインのスクショを撮って Claude に貼り、「この通りに作って」「この配色を真似て」と指示。

1,000〜2,000 トークン

型 3b

スクショ参照：参考サイト

NewsPicks、HBR、Stripe など外部サイトのスクショを Claude に貼り、雰囲気を伝える。

1,000〜2,000 トークン

型 3c

スクショ参照：手書き

紙にレイアウトをラフ描き → 写真撮影 → Claude に貼り「このレイアウトで」と指示。言語化しづらい配置を直接渡す。

800〜1,500 トークン

型 4

図参照ベース（Figma エクスポート）

Figma フレームを PNG エクスポートして Claude に貼り、「@DESIGN.md の規約でこの通りに」と指示。型 3a の精度を上げた版。

500〜1,500 トークン

SECTION 03

各型の実プロンプト × 期待される結果

5 つの型をハンズオン③ で全部試します。各プロンプトは 段階 2 → 段階 3 の磨き上げ で実際に使えるテンプレ。

型 1：差分指示

1 ターン 1 論点で具体的に

@output/04-skills.html の著者カードについて、写真サイズを 120px の円形に固定し、グレースケール 0.2 で軽く彩度を落としてください。@DESIGN.md の「画像の扱い方」（SECTION 10）に従ってください。他の要素は変更しないでください。

結果：著者カードだけが意図通りに変わり、他のセクションは無傷。トークン消費は 200〜400 程度。1 ターン 1 論点を守れば、修正の積み重ねで完成形に近づく。

型 2：否定指示

「やらないこと」を先に告知

@output/04-skills.html の KPI セクションを次回の更新時、彩度の高い緑（#00c853 系）や赤（#ff1744 系）は使わないでください。アクセントは @DESIGN.md の --c-accent（ボルドー）に統一してください。

結果：禁止事項を事前告知することで、次のターンの差分指示で AI のデフォルト出力に揺り戻されるリスクを下げる。トークン消費は 100〜200 程度。DESIGN.md の禁止事項と組み合わせると効果倍増。

型 3a：スクショ参照（Figma）

Figma フレームをスクショで渡す

添付した Figma フレームのスクリーンショットを参考に、@output/04-skills.html のヒーローセクションの構成を磨き上げてください。配色は @DESIGN.md の規約を守りつつ、レイアウトのリズムは添付の通りに。

結果：言葉で説明しづらい「リズム」「余白の取り方」が一発で伝わる。Figma で参考デザインのスクショを撮るには、フレーム選択 → Cmd+Shift+4（Mac）／Snipping Tool（Win）。トークン消費 1,000〜2,000。

型 3b：スクショ参照（参考サイト）

外部サイトの雰囲気を伝える

添付したスクリーンショットは Harvard Business Review の記事ページです。本文の行長と余白の感覚、見出しの weight を参考に、@output/04-skills.html のトピックセクションを調整してください。配色は変えず、タイポと余白のみ。

結果：抽象的な「権威感のある読み物」を、具体的な参考サイトのスクショで一発で伝えられる。ただし「真似しすぎ」のリスクがあるので、変えたい部位を限定するのが鍵。

型 3c：スクショ参照（手書き）

紙にラフを描いて撮影

添付した手書きラフは、関連レポートセクションの理想的なレイアウトです。3 カラム均等を避け、左に号数タグ、中央に見出しと本文、右に矢印を配置してください。@DESIGN.md の規約は守ってください。

結果：言語化が難しいレイアウトを、紙の素描で直接渡せる。スマホで撮影 → Claude Code パネルにドラッグするだけ。トークン消費 800〜1,500。

型 4：図参照（Figma エクスポート）

PNG エクスポートで精度を上げる

添付した Figma の Insight Quarterly フレームの PNG エクスポートを参考に、@output/04-skills.html のヒーローを画像と同じレイアウトで再構成してください。@DESIGN.md の規約と禁止事項を全て守ること。

結果：型 3a より精度が高い（Figma 内のスクショより、Export PNG の方が解像度が高く、色味も正確）。トークン消費 500〜1,500。Figma 連携タブの主経路と一致。

SECTION 04

トークン消費の比較

操作	概算トークン	用途
全文書き直し依頼	5,000-10,000	方向転換時のみ。常用しない
差分指示	200-500	標準。1 ターン 1 論点
否定指示	100-300	禁止事項の事前告知
スクショ + 1 行指摘	1,000-2,000	言語化しづらい違和感
図参照 + 「この通りに」	500-1,500	フォーマット指定の代替

コスト試算

30 名 × 50 ターン × 平均 3,000 トークン = 月 450 万トークン。差分指示徹底で月 100 万トークン以下に圧縮できます。社内 LLM 中継基盤の管理画面で月次集計を確認可能。

SECTION 05

「違和感を感じても手で直さない」原則

研修中に最も繰り返すメッセージです。CSS の数値を直接書き換えれば 1 分で直りますが、それでは AI が育たず、次回も同じ違和感が再現します。違和感を感じたら必ず Claude Code に言語化して伝え、AI に直させます。

NG：手で直す

style.css を VSCode で開いて値を直接書き換える
「あとで Claude に伝えればいいや」で放置
3 回直したら DESIGN.md に書き戻すのを忘れる
結果：AI のデフォルトが変わらない、次の生成でも同じ違和感

OK：AI に直させる

違和感を 1 行で言語化（「KPI の色が彩度高すぎる」）
差分指示で Claude Code に渡す
3 回繰り返す違和感は DESIGN.md の禁止事項へ書き戻す
結果：DESIGN.md が育ち、次の生成から自動で守られる

SECTION 06

4〜5 ターンの磨き上げサイクル

違和感
言語化

→

差分
指示

→

ブラウザ
確認

→

記録

ハンズオン①〜④ の中核サイクル。1 ターンで完成は稀、10 ターン超えは指示が不明瞭な兆候です。iterations.md の表に「ターン番号 / 違和感 / 差分指示 / 結果スクショ」を残すと、自分のクセが見えます。

SECTION 07

違和感を言語化する 10 パターン

「ダサい」「微妙」では Claude Code に伝わりません。違和感を 原因と結果 で言語化する型を 10 個。手で直したくなった瞬間にこの表を見て、近い型でプロンプトを書きます。

違和感	避けるべき言い方	採用すべき言い方
配色がうるさい	「色を落ち着かせて」	「`--c-accent` を使うのは CTA とアクセント線のみに限定し、本文では使わないでください」
ヒーローが弱い	「もっとインパクトを」	「ヒーロータイトルのフォントサイズを 1.3 倍に、weight を 900 に、字間を −0.012em に詰めてください」
レイアウトが平坦	「リズムを作って」	「セクション間の縦余白を 96px から 128px に、各セクションの最初に 2px の罫線を追加してください」
カードがテンプレ感	「もっと洗練させて」	「3 カラム均等を避け、2 × 2 の非対称グリッドに変更。各カードの番号タグを Display Serif の 3rem に拡大してください」
フォントが弱い	「フォントを変えて」	「見出しを Noto Serif JP の太字 700 に、本文を Noto Sans JP の 500 に。数字は Noto Serif JP に `tabular-nums` を効かせてください」
余白が窮屈	「もっと余白を」	「本文の行長を 36rem に制限、行間を 1.85 に、段落間余白を 1.5em に。中央寄せは禁止、左寄せで」
CTA が埋もれる	「CTA を目立たせて」	「CTA セクションを全幅ダークネイビー背景に、ボタンを `--c-accent` 単色塗りに。ボタンの hover で背景が #fff に反転」
著者の存在感が薄い	「著者を強調して」	「著者カードに独立セクションを設け、写真を 220px 円型 + Display Serif の頭文字に置き換え。役職を eyebrow ラベルとして配置」
関連レポートが弱い	「関連を見やすく」	「3 カラム均等を廃止、縦並びの目次風リストに変更。号数タグ・見出し・本文・矢印の 4 列グリッドで」
全体的に AI っぽい	「AI 感を消して」	「Inter / Roboto を排除、紫グラデを排除、絵文字 UI を排除、3 カラム均等を排除、中央寄せヒーローを排除。@DESIGN.md SECTION 8 を全て守ってください」

違和感言語化のテンプレ

「どこの何がどうで、原因としてこうなる。こう変えてほしい」 の 6 要素で書く。例：「KPI セクションの 3 番目のカードの数字色（彩度高い緑）が、業界レポートの権威感と矛盾している。var(--c-accent)（ボルドー）に統一してほしい」

SECTION 08

ハンズオン③の進め方（早見表）

[50min]。Exercise 05（修正指示の 5 つの型を全て試す）を実施します。output/04-skills.html から始まり、5 ターンの修正で output/05-final.html を作ります。

時刻	ターン	使う型	受講者の動き
[10min]	1	型 1：差分指示	`output/04-skills.html` をブラウザで開き、違和感を 1 つ選んで 1 ターン 1 論点で差分指示
[6min]	2	型 2：否定指示	「やらないこと」を明示するプロンプトを書く。`iterations.md` に追記
[10min]	3	型 3a：Figma スクショ	Figma で参考デザイン（または starter のスクショ）を撮って Claude Code に貼る
[10min]	4	型 3b：参考サイトスクショ	HBR / NewsPicks / Bloomberg などの記事ページをスクショして貼る
[9min]	5	型 3c：手書きスクショ	紙にラフを描いて撮影、Claude Code に貼る。レイアウト系の指示
[5min]	—	仕上げ	5 ターンの結果を `output/05-final.html` として保存。`iterations.md` に「効いた型 / 効かなかった型」を記録

ハンズオン④ / [60min]

Figma 連携

Figma と Claude Code の往復を 3 段階で体験します。MAX デモ（Claude Code が Figma を直接操作）→ Figma → Code（design.to.html / PAT / スクショ）→ Code → Figma（html.to.figma）。MAX は受講者の手元では動かさず観察のみ、現実的な経路を全員でやり切ります。本タブを開きながら Exercise 06 を進めます。

Exercise 06

Figma 連携の 3 段階を体験

段階 A：MAX デモを観察。段階 B：html.to.design / PAT + REST API / PNG・SVG エクスポートを試行。段階 C：自分の HTML スクショと SVG を Figma 自分用フレームに配置して持ち帰り。各経路の所感は handover-notes.md に記録します。

使うデータoutput/05-final.html + Figma サンプルファイル

出力先Figma 持ち帰りファイル + handover-notes.md

詳細手順exercises/exercise06-figma.md

SECTION 01

なぜ Figma 連携が必要か

Claude Code で HTML を仕上げても、業務では Figma 側のデザイン資産と切り離せないのが現実。デザイナーは Figma で考え、エンジニアは Code で動かす。両者の往復を最小手間で行えるかが、業務適用の分かれ目になります。

業務シーン 1

Figma → Code

デザイナーが Figma で組んだ画面を、エンジニアが Claude Code で実装する場面。今までは「目視で写経」だったが、AI と Figma 連携で工数が 1/3〜1/5 に。

業務シーン 2

Code → Figma

Claude Code で先に試作した画面を、Figma に持ち帰ってデザイナーがレビュー・調整する場面。「AI で 5〜10 案を並列生成 → Figma で議論」の運用が広がっている。

業務シーン 3

双方向往復

Figma → Code → ブラウザで動作確認 → Figma に持ち帰って調整 → 再度 Code、というループを高速で回す。本研修の主目的は このループを身体で覚える こと。

SECTION 02

3 段階の連携経路

段階 A（観察）

MAX：MCP デモ

Claude Code が公式 Figma MCP 経由で Figma 上のフレームを直接読み取る／書き込む様子を講師の手元でデモ。受講者は観察のみ、社内環境では動かしません。

段階 B（実践）

Figma → Code

3 経路を試行：(1) design.to.html / html.to.design プラグイン、(2) Figma Personal Access Token + REST API、(3) フレームを PNG / SVG エクスポートしてスクショ参照。

段階 C（実践）

Code → Figma

仕上がった HTML を Figma に取り込む経路：(1) html.to.figma 系プラグイン、(2) ブラウザでスクショして Figma に画像配置、(3) アイコン・図形は SVG エクスポートして Figma にドラッグ。

社内環境制約

Figma はブラウザ版 Starter プランのみ使用、デスクトップアプリ・追加 MCP は導入しません。MAX デモ（段階 A）は講師環境の参考デモです。受講者は段階 B・C を中心に体験します。

SECTION 03

MAX デモ（段階 A）— 講師の画面で観察するもの

[15min]。講師が公式 Figma Remote MCP 経由で Claude Code から Figma を直接操作する様子を投影します。受講者の社内環境では同じ操作はできないため、観察のみ。

講師が Claude Code パネルで @figma の Insight Quarterly フレームを読み取って、配色とコンポーネント構造を JSON で返して と指示
Claude Code が Remote MCP 経由で Figma にアクセスし、フレームのレイヤー構造・カラー・タイポ・Variables を JSON で取得
講師が「このフレームを見ながら、@DESIGN.md の規約で HTML/CSS を書き直して」と続ける
Claude Code が Figma 側の配色トークンを参照しつつ、HTML/CSS を再生成
逆方向：講師が「この HTML をベースに、Figma に新しいフレームを作成」と指示。Claude Code が MCP の Write 系 API でフレーム書き込み

受講者環境では動きません

本研修では Anthropic への直接接続が許可されていないため、Claude Code 経由でも MCP サーバへの接続は社内ゲートウェイで遮断される想定。MAX デモは「将来こうなる」を理解するためのもの。手元で試したい方は、研修後に社内情シスへ mcp.figma.com への通信許可を申請してから検証してください。

SECTION 04

Figma → Code（段階 B）— 3 経路の実プロンプト

html.to.design / design.to.html プラグイン

Figma マーケットプレイスのコミュニティプラグイン（提供元 ‹div›RIOTS）。Free プランで公開 URL からの取り込みやローカル HTML 取り込みが可能。Pro は月 1,000 imports と高度な Auto Layout 変換。当日はブラウザで起動し、Insight Quarterly のヘッダー部分で挙動を観察。

Personal Access Token + Figma REST API

Figma Settings → Security から PAT を発行し、Claude Code に「https://api.figma.com/v1/files/{file_key} を curl で叩いて JSON を取ってきて、構造を解析して」と指示。プラグイン経由より自由度が高く、社内環境でも動かしやすい。当日は講師環境でデモ後、希望者は手元で試行。

PNG / SVG エクスポート + スクショ参照

Figma フレームを 1x PNG または SVG で書き出し、Claude Code に画像参照させて再構成。プラグイン不要、Starter で確実に動く。本研修の主経路。

SECTION 05

Code → Figma（段階 C）— 持ち帰りの手順

HTML をブラウザでスクショ

Chrome / Edge で output/05-final.html を 1280px 幅で開き、フルページスクショを撮影。macOS は Cmd+Shift+4、Windows は Win+Shift+S。

Figma 自分用フレームに画像配置

講師が事前に共有した Figma 持ち帰りファイルを開き、自分用フレーム（例: (あなたの名前)_insight_quarterly_v1）にスクショをドラッグ＆ドロップ。

独自図形・アイコンを SVG エクスポートして取り込み

HTML 内のロゴ・アイコン・KPI のトレンド矢印などを SVG で抜き出し（ブラウザの DevTools から、または Claude Code に「@output/05-final.html から SVG を抽出して」と指示）、Figma にドラッグ。Figma 側でレイヤーとして展開され、Fill 変更や Component 化が後から効く。

html.to.figma 系プラグインで自動取り込み（任意）

Figma Community で「html to figma」を検索すると複数のサードパーティプラグインがあります。希望者は時間内に試行、得られたレイヤー構造とスクショ手動配置の差を観察します。

SECTION 06

相互往復ループ — 業務適用の本丸

段階 B → 段階 C → 必要なら段階 B で再調整、と往復しながら最終形を作ります。Figma 側で「ここの色を変えたい」と気づいたら DESIGN.md の配色トークンに反映 → Claude Code で再生成 → ブラウザでスクショ → Figma に配置、というループを 1〜2 周回せれば、研修後の業務でも同じ作法で運用できます。

Figma で
参照

→

Claude Code
で実装

→

ブラウザ
確認

→

Figma に
持ち帰り

ループを高速回転させるコツ

(1) Figma 側のフレームに「アンカー」を設置：DESIGN.md の各コンポーネント（Hero / KpiCard / TopicCard 等）をフレームとして一覧化、(2) Claude Code 側のプロンプトを iterations.md にテンプレ化：「@DESIGN.md と添付の Figma フレームスクショで〜を再生成」のような形を持っておく、(3) ブラウザ確認は Live Server 拡張で自動リロード。

SECTION 07

ハンズオン④の進め方（早見表）

[60min]。Exercise 06（Figma 連携の 3 段階）を実施します。最後の 5 分で Figma 自分用フレームに HTML スクショ + SVG が配置された状態を作って完了。

時刻	段階	内容	受講者の動き
[15min]	段階 A（観察）	MAX：MCP デモ	講師の画面共有を見る、メモを `handover-notes.md` に取る
[8min]	段階 B-1	html.to.design Free 試行	ブラウザ Figma で Insight Quarterly を開き、Plugins → html.to.design でヘッダーを取り込む
[10min]	段階 B-2	PAT + REST API	Figma Settings → Security から PAT 発行、curl で `/v1/files/{key}` を叩いて JSON 取得、Claude Code に解析させる
[7min]	段階 B-3	PNG / SVG エクスポート	フレームを 1x PNG で書き出し、Claude Code に画像参照させて再構成（本研修の主経路）
[5min]	段階 C-1	HTML スクショ取得	Chrome で `output/05-final.html` を 1280px 幅で開き、フルページスクショを撮影
[5min]	段階 C-2	Figma 自分用フレームに配置	事前共有された Figma 持ち帰りファイルを開き、自分用フレームにスクショをドラッグ＆ドロップ
[8min]	段階 C-3	SVG エクスポート + 取り込み	HTML 内の SVG 要素を Claude Code に抽出させ、`.svg` ファイルとして保存 → Figma にドラッグして取り込み
[2min]	仕上げ	持ち帰り完了	`handover-notes.md` に「経路ごとの所感」を記録

Tips & クロージング / [10min] / 配布物

Tips とダウンロード

クロージング前に Exercise 07 で 5 段階の生成物を見せ合い、業務適用アクションを言語化します。本タブはクロージングで触れる Tips（画像生成機能の注意点、AI 時代のデザイン手法の変化、デザインハーネス論）と、注目したい最新 UI/UX リソース、配布資料・公式情報源・トラブルシュートを 1 ページにまとめています。

Exercise 07

5 段階の見せ合い + 業務適用アクション言語化

受講者全員が画面を映し、output/01-zeroshot.html から 05-final.html までの 5 ファイルをブラウザのタブに並べて発表。1 名 2 分。「素の Claude Code はこうだった → バイブで → DESIGN.md で → Skills で → 修正指示で」の差分と、業務に持ち帰る 1 アクションを語ります。

使うデータoutput/01〜05.html + iterations.md

出力先final-presentation.md（業務適用 1 アクション）

詳細手順exercises/exercise07-share.md

SECTION 01

研修終了時の到達点と次のアクション

本研修を経て、受講者は次の状態に到達しているはずです。これらを 明日からの業務に持ち帰る のが本研修の本旨。

素の Claude Code の挙動を体感し、なぜ指示の言語化が必要かを身体で理解した

形容詞 5〜7 語のバイブデザインを書く作法を獲得し、自分の業務題材で再現できる

DESIGN.md 8 セクション + カスタム項目でプロジェクト固有のルールを構造化できる

Skills（ui-ux-pro-max / frontend-design）を呼び出し、品質基準を底上げできる

修正指示の 5 つの型を使い分け、4〜5 ターンで完成形に近づけられる

「違和感を感じても手で直さない」原則を貫き、AI を育てながら業務を進められる

Figma 連携の 3 段階（MCP 観察 / Figma → Code / Code → Figma）を体験し、業務適用判断ができる

次のアクション（業務適用ロードマップ）

+1 週

研修後 1 週間以内

自分の業務プロジェクト 1 つに DESIGN.md を 1 枚書く。普段触る画面 1 枚を Claude Code で再生成して差分を眺める。

+1 月

研修後 1 ヶ月以内

html.to.design Free / Pro 評価、公式 Figma MCP の認証フローを試す。Claude Design を Anthropic Labs で試す。

+3 月

研修後 3 ヶ月以内

チーム共通の DESIGN.md テンプレを作る。次プロジェクトで「最初に DESIGN.md を書く」を試す。

+6 月

研修後 6 ヶ月以内

Storybook / トークン管理 / Lighthouse CI など検証層を 1 段足す。デザインハーネスとして運用。

+12 月

研修後 1 年以内

部門・組織レベルで DESIGN.md / Skills / Figma 連携を共通言語化。新メンバー研修にも組み込み。

SECTION 02

Tips 1：画像生成機能の注意点

注意 1

商用利用権と学習データ

各画像生成サービスで商用利用可否・学習データ由来の権利問題が異なります。業務利用前に契約条項とライセンスを確認。社内利用なら法務とすり合わせ必須。

注意 2

顔・実在企業ロゴ・建物

実在の人物の顔、ブランドロゴ、認知度の高い建物が出力に混じることがある。レポート LP の著者写真や背景写真は実写素材かオリジナル撮影、抽象グラフィックの組み合わせが安全。

注意 3

AI らしさの匂い

「6 本指」「不自然な対称性」「中央寄せ被写体」「AI パープル背景」が混じると、読み手に AI 生成と即座に伝わる。読み物としての権威感を損なうため、業務文書では避けるか後加工で消す。

注意 4

差し替え可能な前提で組む

AI 生成画像は「仮置き」として扱い、HTML / CSS 側で img の差し替えが容易な構造にしておく。最終的にプロカメラマンの素材や Adobe Stock に置き換える前提。

SECTION 03

Tips 2：AI 時代のデザイン手法の変化

これまで

Figma で 1 案を時間をかけて作り込む
「正解の見た目」を最初に固める
デザイナー → エンジニアの一方向の引き渡し
レビューで 2〜3 案が出れば多い方
修正は手作業で 1 箇所ずつ

これから

5〜10 案を Claude Code で並列生成して比較
「正解」より「方向性」を言語化（バイブデザイン / DESIGN.md）
デザイナーとエンジニアが同じ DESIGN.md を共有して双方向
レビューで 10 案を見比べる前提に
修正は AI に伝えて再生成、手で直さず DESIGN.md を育てる

デザインハーネスへ

AI に画面を作らせたあと、プロダクトとして使えるかを担保する仕組み全体を「デザインハーネス」と呼ぶ整理が広まっています（Anthropic Harness ブログ、r_kaga、こぎそ氏ほか）。本研修で扱った DESIGN.md と修正指示はハーネスを構成する最小単位です。研修後の継続学習で Storybook / トークン管理 / Lighthouse CI と組み合わせると、業務適用が一段進みます。

SECTION 04

Tips 3：デザインハーネスという考え方

AI に画面を作らせたあと、プロダクトとして使えるかを担保する仕組み全体を「デザインハーネス」と呼ぶ整理が広まっています。研修で扱った DESIGN.md と修正指示は、ハーネスを構成する最小単位です。研修後の業務適用は、これを 4 層構造 で広げるのが目安。

層 1：制約

ルールで AI の挙動を絞る

DESIGN.md（バイブ・配色・タイポ・命名・禁止事項）／ CLAUDE.md（プロジェクト規約）／ Skills（ui-ux-pro-max・frontend-design）。本研修ではここを習得した。

層 2：コンテキスト

参照資料を AI に引かせる

Storybook ／ Figma MCP（Remote / Dev Mode）／ Playwright MCP（DOM 観察）／コンポーネント実装の参照リンク。研修後の継続学習で順に追加。

層 3：検証

機械的に正しさを確かめる

Lighthouse CI（A11y / パフォーマンス）／ axe-core（A11y 自動検査）／ visual regression（Chromatic / Percy）／ Playwright スクリプト／ AI レビュー Skill。

層 4：フィードバック

失敗を次に活かす

PR コメント自動生成／ CI 失敗の構造化ログ／ Self-Refinement loop ／過去の失敗をメモリ（CLAUDE.md / DESIGN.md）に追記。

Anthropic Engineering

"Harness design for long-running application development" — Planner / Generator / Evaluator の 3 エージェント構成。Evaluator は Playwright MCP で実画面を操作してスコアリングする。

公式ブログ：anthropic.com/engineering/harness-design-long-running-apps

r.kagaya @ry0_kaga

エージェントハーネス（loop + tools + memory）と、ユーザーハーネス（CLAUDE.md / Skills / Hooks / MCP）を同心円で分離。Claude Agent SDK の開発パイプラインに Design System Quality Gate を差し込む実装パターン。

記事：Zenn / 登壇：Speaker Deck

SECTION 05

注目したい最新 UI/UX リソース（2026 年版）

研修で扱った内容の延長線上にある、最新のリソース。研修後の継続学習で 1 つずつ自分の業務に取り込んでください。AI 駆動 UI/UX の領域は四半期単位で動くため、リスト自体も定期的に更新が必要です。

A. Skills / ルールセット系（DESIGN.md の延長）

A-1

Taste Skill（Leon Lin & blueemi / MIT）

「Less slop, designs pop.」を掲げる anti-slop フロントエンド Skill。3 ダイヤル（DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY）で AI らしさを抑制。Codex / Claude Code / Cursor / v0 / Lovable で使い回せる。

公式 / リポジトリ / parascope 紹介

A-2

frontend-design（Anthropic 公式）

BOLD なデザイン方向を先に決め、distinctive なタイポと motion 設計を徹底するための Skill。本研修の禁止 UI パターンの出典の 1 つ。

SKILL.md

A-3

parascope.design

Taste Skill を含む、デザイン × AI 領域のリソースキュレーション。「凡庸な AI 出力」を脱するための具体的な処方箋を多数掲載。

parascope.design

A-4

Anthropic Skills 公式リポジトリ

frontend-design 以外にも slides / artifacts / pdf 系の Skills が公開。Skill 作成の参考実装としても優秀。

github.com/anthropics/skills

B. UI 生成プロダクト（v0 / Lovable / Stitch / Bolt）

B-1

v0 by Vercel

Vercel が提供する UI 生成サービス。React + shadcn/ui の高品質コンポーネントを自然言語で生成、Next.js プロジェクトへ即統合可能。本研修の Claude Code との比較対象として有用。

v0.app

B-2

Lovable

フルスタック Web アプリの自然言語生成。フロントだけでなくバックエンド・DB も含めて 1 プロンプトで動くプロトタイプを作る。Web ベース、git 連携対応。

lovable.dev

B-3

Bolt by StackBlitz

ブラウザ内で動くフルスタック生成環境。WebContainers で Node.js が動き、生成 → 即実行 → 編集が同一画面で完結する。

bolt.new

B-4

Google Stitch

Google の UI 生成プロダクト（Labs）。プロンプトから Figma 互換の UI 案を複数案生成、Figma にエクスポート可能。こぎそ氏の解説も参考に。

stitch.withgoogle.com

C. デザイン → コード変換 / Figma 連携

C-1

html.to.design（‹div›RIOTS）

Web ページや HTML を Figma にインポートする Figma 公式コミュニティプラグイン。ブラウザ拡張版もあり、認証付きページの取り込みに対応。

html.to.design

C-2

Figma Remote MCP Server

Figma 公式 MCP サーバ。デスクトップ不要、ブラウザ Figma の任意ファイルを Claude Code から直接読み取り・編集可能（OAuth 認証）。

Figma Developer Docs

C-3

Figma Make

Figma 公式の AI コード生成機能。Figma 内でフレーム選択 → コード生成。プラグイン不要、Figma Pro 以上で利用可能。

figma.com/make

C-4

Codia AI

Figma → コード、画像 → コード、デザイン要素 → AI コンポーネントの 3 経路を提供。codia.ai

codia.ai

D. デザインハーネス / プロセス論

D-1

Anthropic Harness Blog

Planner / Generator / Evaluator の 3 エージェント構成で、長時間の自律開発を支える設計論。Evaluator が Playwright MCP で実画面を採点する仕組みが特に参考。

anthropic.com/engineering

D-2

r_kaga のハーネス論

エージェントハーネスとユーザーハーネスを同心円で分離。Claude Agent SDK の開発パイプラインに Design System Quality Gate を差し込む実装パターン。

Zenn / Speaker Deck

D-3

Neethan Wu — Design Without Designing

Skills × Canvas × Inspiration の 3 層で、デザイナーがデザインせずにデザインを完成させる発想。デザインハーネス論の原典。

原典 X 投稿

D-4

こぎそ — DESIGN.md / Stitch 解説

日本語圏で DESIGN.md と Stitch を最も詳しく整理しているリソース。本研修の DESIGN.md 8 セクション構造の参考。

note.com/kgsi

E. デザイン × アクセシビリティ・検証

E-1

Lighthouse CI

Chrome DevTools の Lighthouse を CI に組み込み、A11y・パフォーマンス・SEO・ベストプラクティスを自動検査。デザインハーネスの「層 3：検証」の柱。

github.com/GoogleChrome/lighthouse-ci

E-2

axe-core / axe DevTools

A11y 自動検査の業界標準ライブラリ。Lighthouse の A11y 検査も axe-core が中身。Storybook / Playwright と組み合わせて CI 化。

github.com/dequelabs/axe-core

E-3

WebAIM Contrast Checker

配色のコントラスト比をブラウザ上で確認。WCAG 2.2 AA / AAA の判定が出る。DESIGN.md の配色トークンを書く時の必携ツール。

webaim.org

E-4

Stark / Atomic A11y

Figma / VS Code 統合の A11y 検査ツール。デザイン段階で A11y を確認できるため、コードに移る前に問題を潰せる。

getstark.co

リストの賞味期限

AI 駆動 UI/UX の領域は 四半期単位で新ツール・新概念が登場します。本リストは 2026 Q2 時点のスナップショット。半年ごとに自分でアップデートする習慣を作るのが、研修後の継続学習の最重要ポイントです。Twitter/X の @kgsi、@ry0_kaga、@neethanwu、@AnthropicAI、@figma を継続観察するのが効率的。

SECTION 06

配布資料（PDF）

研修サイト全 8 タブの内容をそのまま 1 冊に綴じた PDF です。研修中のオフライン参照、社内回覧、研修後の自走ガイドとしてご利用ください。受講者には本 PDF とハンズオンフォルダ（ZIP）を当日配布します。

AI 駆動 UI/UX 研修テキスト

研修サイト全 8 タブ（ようこそ／環境チェック／テーマ／バイブデザイン／DESIGN.md & Skills／修正指示／Figma 連携／Tips & ダウンロード）を 1 冊に綴じたフルテキスト。A4 縦 / 75 ページ前後。

AI駆動UIUX研修テキスト.pdf

ダウンロード

SECTION 07

公式情報源（ブックマーク推奨）

Anthropic

Figma

アクセシビリティ・検証

参考記事

SECTION 08

研修中によくある詰まり

状況	対処
形容詞 5〜7 語が思いつかない	タブ 04 のチートシートから 30 例を見る、または好きなレポート（HBR / NewsPicks 等）を 1 つ選んで雰囲気を 5〜7 語に
1 ターン 1 論点が守れない	混ぜたターンを iterations.md にメモし、次のターンで 1 論点に絞り直す
DESIGN.md が長すぎて Claude が守らない	3 ページ以内に圧縮、各セクション 5 行以内、配色 / 余白 / タイポは CSS ブロック 1 つに統合
Claude Code が DESIGN.md を読まない	プロンプト先頭に `@DESIGN.md` を必ず明示、応答中に DESIGN.md の語が引用されるか確認
違和感を手で直したくなる	必ず一度は Claude に伝えて直させる。3 回以上同じ違和感が出たら DESIGN.md の禁止事項に書き戻す
Figma エクスポートが思うように出ない	フレーム単位で書き出し直す、要素分解して複数枚同時参照に切替（タブ 07 参照）
Lighthouse Accessibility が 70 台	コントラスト不足が多い。`--color-text-primary` を `#1a1a1a` に統一する差分指示で一括解消