目次
読了時間: 約17分
最近、もっぱらバイブコーディングでWebサービスやらテーマやらプラグインやら、そんなものを作っています。
4月頃から本格的にAntigravityとClaude Codeを利用するようになり、作業自体がAIとのおしゃべりばかりになっているわけですが、Googleディスカバーで見つけた記事について「あーーー！なるほど。」と、思ったので一筆記事にしてみようという回です。
記事の内容はDESIGN.mdについてのお話だったのですが、はてさて、DESIGN.mdとはなんぞや？はたまたその効果はいかに⁉と、言ったお話です。
DESIGN.mdとは
お作法です。
GoogleのUI作成ツールStitchのチームで提唱している、デザインの一貫性を保つために作るマークダウンファイルです。
https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/
AIでコーディングさせて、Webページを作ったことがある方はなんとなく思い当たるところがあると思うのですが、AIに「こんなサイト作ってよ」を伝えても、ページごとにデザインがちぐはぐになり、一貫性が保てなくなることがあります。特にコンテキストが長くなると、当初していた話がわからなくなって、とんでもないことをしでかすのがAIです。そこで、そんな事になるのを防ぐため「デザインルールを記載したマークダウンファイルを作りましょうよ」が、DESIGN.mdです。
AIが読みやすく、人にも理解できるマークダウン記法を利用することで、人に伝えるのにも便利で、且つ、AIが読み込むのにも困らない書き方でデザイン定義を決める事が推奨されています。
この定義書があることで、AIはプロジェクトの進行中トンマナを崩すことなくひとつひとつのページを仕上げてくれるというわけで、SNS等でも少々話題になったというお話。
DESIGN.mdの記述例
さっそくDESIGN.mdのサンプルを貼っておきます。下記の内容を日本語で読みたい方は、生成AIにまるっとコピーして翻訳をおねがいしてください。
name: DevFocus Dark
colors:
primary: "#2665fd"
secondary: "#475569"
surface: "#0b1326"
on-surface: "#dae2fd"
error: "#ffb4ab"
typography:
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
rounded:
md: 8px
---
# Design System
## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.
## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions
## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers
## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast
## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text※参照：https://stitch.withgoogle.com/docs/design-md/overview
IT media Deep Insiderの記事で、DESIGN.mdの原文サンプルを翻訳したコードが掲載されています。
著者の一色編集長もなにやら色々なマークダウンファイルを作成してアプリケーションを作っていらっしゃるようです。
国内でも関心が高まっているとの内容でしたが、会員限定記事だったので詳細は引用無し。
無料で会員登録できるので、会員登録して全文読んでみてもらいたい。
https://atmarkit.itmedia.co.jp/ait/articles/2604/09/news014.html
DESIGN.mdファイルだけでは足りない？
さすが俺！の、鼻につく話で恐縮です（笑）私自身はこのDESIGN.mdの記事を目にする前から、私なりに制作を進めるメソッドを確立しており、その手順を書いておきます。
結論から言うと、正直「DESIGN.mdだけじゃクリエイティブには全然足りない」という話。先に紹介した一色氏の記事同様、私もいくつものファイルを事前に作成してからコーディングに移します。たぶん、DESIGN.mdだけでプロジェクトを進めるよりも、合理的なクリエイティブの進行ができると思いますので、参考にしていただければ幸いです。
ただ、先に申し上げておくと、「何も読まずにAIの言うことにEnterキーを連打する人」「ホントに丸投げで何もしたくない人」には、ちょっと向かないかもしれない。おそらく制作よりも営業の方が向いていると思うので、そっとページを閉じていただくのがよろしいかと存じます。
バイブコーディング制作の進行手順
まぁ、手順とは言いながらめんどくさい話は思いっきり省きます。とりあえずどんなかたちで進行しているのか見ていただきたい。
例は、コーポレートサイトのリニューアル案件の進行です。
※作業を始めるにあたってはターミナルでclaudeを立ち上げたりしますので、そのあたりの作業についてはどなたかの別記事を参考にしてください。
利用AI
私の最初の手順では、Claude Codeを利用することになり、Agent Teamsをアクティブにして利用します。
ターミナルで
cd C:\Users\————————-\Documents\project(任意） を、入力。プロジェクトに利用するフォルダを指定。
続けて
$env:CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS = “1” を、入力。Agent Teamsを利用できる状態にする。
これで、Agent Teamsがアクティブになります。
さらに続けて
claude を、入力。Claudeを起動。
これで、Claude CodeでAgent Teamsがアクティブになり、AIの準備は完了。
プロンプト
さて、プロンプトですが、AIに役割を与えて進行します。
昨今「そんなの意味ねーぜ！」と、言われているロールプロンプティングですが、Claude CodeでAgent Teamsを動かすうえで、役割は必要な要素です。
そもそもロールプロンプティングとは考え方が違うので、これをロールプロンプティングと呼ぶのか判断つきませんが・・・
いずれにせよ、AIに役割を与えるとは言え「あなたはプロの〇〇です」と言った恥ずかしいプロンプトではないので、とりあえず次のプロンプトを見てください。
※ちなみに、開発系のちょっとややこしいようなプロジェクトの場合、最初にmd形式でプロンプトを渡したりもします。今回は、割と単純な内容なのでべた書きのtxt形式です。
実際に指示した内容
コーポレートサイトのリニューアルプロジェクトを進めます。
以下のロールに従い、それぞれに仕様書及びドキュメントの作成を進めてください。
プロデュース：私
ディレクター：ブランドイメージ構築のコンセプト設計、要件定義・全体仕様の策定、サイトマップ・仕様書・進行管理表・タスク
リストの作成
デザイナー：デザインコンセプト定義・カラーパレット作成、デザイン仕様書の作成
コピーライター：ブランドイメージに則ったインパクトのあるコピーを作成、コピーコンセプトの説明ドキュメント作成
ライター：ページ内コンテンツ作成、各ページ用のコンテンツドキュメントを作成
エンジニア：各ページコーディング・機能実装
要望等、まとめたデータは以下です。
"C:\Users\-------------------------\Documents\project\-------------------------\コーポレートサイトリニュアル.md"
現行サイトのバックアップファイルは以下です。
"C:\Users\-------------------------\Documents\project\-------------------------\web-site"
基本的にコンテンツや画像についての指示は一切いたしません。
画像を配する必要のある箇所には、プレースホルダー（または要望するイメージの説明書き）を配置し、コンテンツはライターとコピーライターで仕上げてください。
必要なテキスト素材は、現行サイトに格納してあるものを利用して制作を進めること。
問い合わせフォームまわりの情報整理をしてドキュメント化しておく。
ロゴマークについては、以下、ポジティブとネガティブの画像を置いておきます。
"C:\Users\-------------------------\Documents\project\-------------------------\logo\logo-p.PNG"
"C:\Users\-------------------------\Documents\project\-------------------------\logo\logo-n.PNG"
以上、チームの構成が理解できたらそれぞれ作業を開始してください。ClaudeのAgent Teamsでは、役割をあたえることでそれぞれが独立したトークンの中で各々の作業を進めます。
したがって、無茶苦茶トークンの消費は激しいのですが、それぞれの作業の中で制作進行上必要な調整等もAI同士で話し合って進めてくれます。
制作の現場でよくありますが、デザイナーから上がってきたモックに対してエンジニアが「ここの実装どうするの？」といった質問が出てきます。
AI：1×人間：1で制作を進める場合、それと同じことが往々にして起こるのですが、Agent Teamsを利用すると、予めAI同士が調整を行ってアウトプットしてくれるので、余計な手間も時間もかかりません。
結果についてはディレクターから「どこどこにドキュメントができたよ！見てチェックしてね！」といった報告が上がってきます。
ドキュメントチェック
先ほどのプロンプトを投げるとで、複数のファイルを生成してくれます。
後は、生成されたファイル類を確認し、中身に問題なければ、一旦ターミナルを閉じ、セッション終了。
問題がある場合は、ディレクターに向けて「〇〇と△△を直してください」といった指示をだします。
いずれにしても、この時点でのファイルチェックと間違え探しがプロジェクトの成否に関わりますので、しっかりと閲覧するようにした方が良いです。
ちなみに気の利いたディレクターだと「プロデューサー承認欄」みたいなものを作り、サインする枠を設けてくれていたりしますｗ
その辺は担当のディレクターによって違いますｗｗｗ
進行指示
ここまでできてしまえば、後はClaude CodeでもAntigravityでもいいので、以下のプロンプトを投げてしまえば終わりです。
Webサイト（コーポレートサイト）のリニューアルを行いたい。以下のフォルダに入っている資料は、制作進行するにあたっての要件です。
progress-management.md（指示・要件のmdファイル）を確認し、制作を進行してください。総括
と、まぁまぁ、非常に簡単に、ざっくりざっくりの説明ではありましたが、基本的に普通のクリエイティブ進行の手順を踏んでいるだけです。
AIに対してはなんとなく「〇〇を作って！」と、いきなり要望を出したくなってしまうところなのですが、そこをあえて我慢して、普通の制作進行と同じ手順を踏むことで、一貫性が保てた質の高いクリエイティブが担保される事になります。逆に、いきなり「作って」だけの指示の場合は後で苦労（そんな状況も一応体験済み）します。
プロジェクトによっては必要なファイル数も多くなり、目を通さなきゃいけないドキュメントも増えますが、コーディングが進んでから「あーでもない。こーでもない」を言い出すと、コンテキストが冗長になって、余計に一貫性が保てなくなっていきます。
結局のところ、普通に制作の手順を踏んだ方が、コンテキストが伸びず、トークンを無駄にしない進行ができると言うお話です。
ちなみに、デバッグ等でやり取りが多くなり、コンテキストが冗長になった場合の「引き継ぎ書を作って」と言ったプロンプトも非常に有効です。
コンテキストが冗長になると、AIも平気で手を抜き始めるので「手抜きを始めたな？」と、思ったら作業を引き継げがせる体制をとるのが一番です。
引き継ぎ書については、よくhandover_YYYYMMDD.mdと言ったファイル（AIによって違う）を作ってくれます。内容は、途中段階の作業内容やドキュメントの置き場の説明だったり。そのあたりもAI次第。
引き継ぎ書と当初のドキュメントを「資料一式」として次のセッションに渡せば、フレッシュな状態のAIに渡すにしろ、別のAIに渡すにしろ、トンマナの一貫性を守った制作が実施されます。
以上、是非お試しいただきたい。
