【AIの質問に答えるだけ】「なんか違う」をなくす！DESIGN.mdで推しデザインを言語化
生成AIにスライドを作ってもらう時、「あ、なんか違う」ってなる時がありませんか？
NotebookLMでスライドを生成させても、Geminiに別の資料を作らせても、
「色合いがバラバラ」
「フォントの雰囲気が統一されない」
「余白の取り方が毎回違う」
—こんな微妙なストレスを感じていました。
トーン・マナーを指定するプロンプトを公開されている方もたくさんいらっしゃいますが、使ってみると、今一つピンとこない。
「何か違う」
生成AIを使うと、自分にはなかったバリエーションが出てくるという気付き。その反面、プロンプトで縛りすぎると単調になってしまう。
そのバランスが言葉で表せないので、調整しづらい日々が続いていました。
同じことを感じる方もいらっしゃるのでは？
最近、その問題を解決する方法を見つけました。それが、noteで急上昇ワードに上がった
「DESIGN.md」
です。これは Google が提唱した「AIコーディングエージェント向けのデザインシステム」なのですが、スライドやnote記事の制作にも応用できる強力なツールなんです。今回、私はGrokで作成してみましたのでご紹介します。
1️⃣DESIGN.mdとは——AIへのデザイン指示書
「DESIGN.md」は、Markdown形式で
カラーパレット
タイポグラフィ
スペーシング
コンポーネントのルール
をテキストで明確に記述したファイルです。
💡何がすごいか
これを NotebookLM や Gemini の別添資料として使うと、AIが「このプロジェクトのデザインはこうだ」と理解する
毎回「そんな色使いじゃない」という齟齬がなくなる
自分の「推し設計」が明確に言語化される
でも、問題がひとつありました。
「自分のデザイン好みって、実は自分でもよくわかっていない」
ということです。
私も最初、「う～ん、色は…明るくて、テックっぽくて…」くらいの曖昧さでした。そこから、どうやってDESIGN.mdを「自分のもの」にしたのか？
—その過程をお話しします。
2️⃣AIとの対話が、あなたの「好み」を言語化する
私は Grok に、こう依頼しました。
「DESIGN.mdを作りたいけど、自分でも好みが分からないので、選択肢で質問しながら作ってください」
するとGrokは、以下のような質問を矢継ぎ早に投げてきました。
Grokからの質問例：
「このDESIGN.mdはどんなプロジェクト用ですか？（ポートフォリオ、SaaS、ブログ、AIツールUIなど）」
「ターゲットユーザーや全体の雰囲気は？（モダン、ミニマリスト、未来的、親しみやすい、プロフェッショナル等）」
「色の好みは？（明るいライト/ダーク/ビビッドなアクセント/落ち着いたニュートラル等）」
「フォントの印象は？（サンセリフでモダン/セリフ混ぜてクラシック/読みやすさ最優先等）」
「参考にしたいブランドやサイトはありますか？（Notion、Linear、Vercel、Stripeなど）」
「特に重視したいポイントは？（アクセシビリティ、レスポンシブ、再利用性、シンプルさ等）」
私の回答：
プロジェクト：note記事サイト
雰囲気：知的なイメージ + AIをイメージするサイバーニュアンス
色：明るいライトテーマ中心、ブルー系・グリーン系
フォント：読みやすさ最優先、Meiryo UIよく使う
参考：特になし
重視点：伝わりやすさ
この対話がすごいのは、単に「好み」を聞くだけじゃなく、選択肢を提示することで、私自身も
「あ、そっか、これが好きなんだ」
と気づけることです。
3️⃣自分の「推し設計」が、具体的な数字と色になる
対話を重ねると、Grokが提案してくれた内容はこんな感じでした。
## Project Overview
このプロジェクトは、**しげちーSS**のnote記事スタイルを基調としたWeb/UIプロジェクトです。
- **コンセプト**: 「知的で実践的なAI活用の外部脳・司令塔」
- **雰囲気**: Intelligent Cyber Tech（知的なクリーンさ + 軽やかなサイバーニュアンス）
- **トーン**: 論理的・実用的・読みやすく・伝わりやすい。AIツールのTipsやまとめを、数字やリストで整理して提供するスタイル。
- **ターゲット**: AIを日常的に活用したい実務者。速く・正確に情報を吸収したい人。
- **主なテーマ**: 明るいライトテーマ中心。ブルー（知性・AI）とグリーン（成長・テック）のアクセントで、未来感と親しみやすさを両立。
・・・（中略）・・・
## Color Palette
### Core Colors
- **Primary (メイン・AIアクセント・リンク・ボタン)**: `#0066FF`（鮮やかな知的なブルー）
- **Primary Hover**: `#0055DD`
- **Secondary (成長・成功・アクセント)**: `#00CC99`（明るいティールグリーン）
- **Secondary Hover**: `#00B388`
・・・（以下略）・・・つまり、「あ、明るくて」「テックっぽくて」という曖昧さが、#0066FF と #00CC99 という具体的な指示に変わったわけです。
4️⃣DESIGN.md を実務に
完成したDESIGN.mdは、以下のように使えます。
🔖パターン1：NotebookLMのプロンプトの別添資料として
手順１．DESIGN.mdをファイルとして保存。
手順２．NotebookLMのソースとして登録。
手順３．スライド作成時、元情報/プロンプト/DESIGN.mdのソースにレ点を入れる。
※プロンプトには、「デザイン：別添の「DESIGN.md」に基づく。」と記載。
手順４．チャットからプロンプトを実行
※NotebookLMでソースからプロンプトを実行する手順は以下の記事をご覧ください。⬇️
🔖パターン2：Geminiのプロンプトに直接貼り込み
プロンプトの最後に以下を追記。
【デザインシステム】
以下のDESIGN.mdを厳密に遵守してください。
特にTypography、Spacing、Components Guidelinesを優先。
[ここにDESIGN.mdの内容を貼る]⭐実際の効果
私がNotebookLMでスライドを生成させたら、これまでより圧倒的に「自分好みのデザイン」になりました。カラーバランスに統一感があり、図もバランスよく入っていました。
※過去、プロンプトで縛りすぎると、図がほぼなくなったり、色がなくなったりしていました。
コミックビューア機能でDESIGN.mdあり/なしの両スライドを載せて見ました。比較してみてください。
え？新機能を使ってみたいだけ？
そ、そんなことないんだからね！
5️⃣あなたも「推し設計」を言語化してみませんか？
どうでしょう？あなたもやってみようと思いませんか？
大切なのは、「自分の好みなんてわからない」から始まっても、AIとの対話を通じて、それが具体的な指示に変わるということです。
💡試してみるステップ
１．Grok（または Gemini、Claude）に相談
・「DESIGN.mdを作りたいけど、好みがわからないので、選択肢で質問しながら作ってください」
２．AIの質問に答える
・プロジェクトの目的、雰囲気、色、フォント、重視点など
３．提案を受け取る
・具体的な色コード、フォントスタック、スペーシング数値が並ぶ
４．実務で使う
・NotebookLM や Gemini のプロンプトの別添資料として活用
・スライドや記事のデザインが統一される
💡なぜ、私はGrokを使用したのか？
なぜなら、私が実際の「DESIGN.md」を知らず、説明もできなかったからです。
流行しつつあるので、Xとの連携に強いGrokなら、Xから情報を拾い、無駄な調整や行き違いを減らせるのではないかと考えました。
「DESIGN.md」を知らない私では、スライドを作成してみるまでどうなるか分からなかったので、調整の無駄をできるだけ減らしたかったのです。
📌まとめ：デザインを形に
「デザインは難しい」「センスが必要」—そう思っていました。
でも、 AIとの対話があれば、自分の「推し設計」を「DESIGN.md」という形で言語化して、それを一貫して運用することができるんです。
それは、単なる「AIへの指示」ではなく、自分自身のデザイン思想を見える化するプロセスでもあります。
note 記事を書く時も、スライドを作る時も、これからは DESIGN.md を相棒にして、「あ、なんか違う」から解放される道を選んでみませんか？
