CSSフレームワークを明示せずにデザインを依頼すると、AIはどのフレームワークを使うか自分で判断します。結果として期待と異なるコードが生成されることがあります。「Tailwind CSSで」「Bootstrap 5で」と最初に宣言することが、スタイリング指示の出発点です。
フレームワーク選択の指示方法
明示的にフレームワーク名を宣言する
「CSSフレームワークを使って」という曖昧な表現は避け、フレームワーク名とバージョンを含めます。
Bootstrap 5 を使って、フローティングラベルとフォームバリデーション付きの
お問い合わせフォームを作ってください。コンポーネントライブラリを指定する
デザインシステムは、画面全体で見た目と操作をそろえるための、共通ルールと再利用できる部品のまとまりです。[3]
スライドマスターに色、書体、余白、レイアウトのルールを設定する場面を考えると理解しやすくなります。スライドマスターの色や書体はデザインルール、共通レイアウトは再利用する画面部品に対応します。アプリのデザインシステムはさらに、ボタンを押したときの状態、表示条件、利用上の注意、部品の更新方法まで扱う仕組みと整理できます。
ただし、スライドマスターが資料作成者の判断を不要にしないように、デザインシステムも良い画面やアクセシビリティを自動的に保証するものではありません。利用場面に合う部品を選び、実際の利用者と検証する必要があります。[4]
Material UI や Shadcn UI など、既存のデザインシステムを使う場合は名前を明示します。
Material UI コンポーネントを使って、サイドバー・ヘッダー・メインコンテンツエリアを持つ
ダッシュボードレイアウトを作ってください。CSSアーキテクチャを伝える
大規模プロジェクトでは命名規則も指定すると一貫性が保てます。
BEM 命名規則でCSSクラスを整理し、コンポーネント単位でスタイルシートを分割してください。参考アプリのスタイルを参照する
既知のサービスのデザインシステムを参照すると、方向性が伝わりやすくなります。
Apple iOS のインターフェーススタイルを参考にした設定ページを作ってください。Tailwind CSSのデザインシステムを理解する
Tailwind を使う場合、そのデザインシステムの構造を知っておくと、より具体的な指示が書けます。
カラーシステム
Tailwindのカラーは 色-数値 の形式で、数値が大きいほど濃くなります（50が最も薄く、900が最も濃い）。
青（blue-600）背景、ホバーで blue-700 に変化、テキストは白のボタンを作ってください。| 数値 | 明度の目安 |
|---|---|
| 50 | 最も薄い（ほぼ白） |
| 100〜300 | 薄め |
| 400〜600 | 中間 |
| 700〜900 | 最も濃い |
スペーシングシステム
Tailwindのスペーシングは1単位 = 0.25rem（4px）が基準です。
p-4（パディング16px）・mt-6（マージントップ24px）・gap-2（フレックス間隔8px）で
カードコンポーネントを作ってください。| クラス | 実際のサイズ |
|---|---|
| p-1 | 4px |
| p-2 | 8px |
| p-4 | 16px |
| p-6 | 24px |
| p-8 | 32px |
タイポグラフィスケール
Tailwindのフォントサイズは text-xs（最小）から text-9xl（最大）まであります。
見出しに text-xl font-medium、説明文に text-sm text-gray-600 を使ってください。| クラス | サイズ |
|---|---|
| text-xs | 12px |
| text-sm | 14px |
| text-base | 16px |
| text-lg | 18px |
| text-xl | 20px |
| text-2xl | 24px |
| text-4xl | 36px |
レスポンシブブレークポイント
Tailwindのブレークポイントプレフィックスを使うと、モバイルファーストでレイアウトを指示できます。
grid-cols-1（モバイル）・md:grid-cols-2（タブレット）・lg:grid-cols-3（デスクトップ）の
レスポンシブグリッドを作ってください。| プレフィックス | 幅 |
|---|---|
| sm: | 640px以上 |
| md: | 768px以上 |
| lg: | 1024px以上 |
| xl: | 1280px以上 |
| 2xl: | 1536px以上 |
よく使うスタイリング指示パターン
ダークモード対応
Tailwind の dark: プレフィックスを使って、ライト／ダークモード切り替えに対応した
カードコンポーネントを作ってください。カスタムカラーパレット
以下のカスタムカラーでコンポーネントを作ってください：
- プライマリ：#6366F1（インディゴ）
- アクセント：#F59E0B（アンバー）
- 背景：#F8FAFC
- テキスト：#1E293Bグラデーション
from-purple-600 to-blue-600 の水平グラデーションを背景に持つヒーローセクションを作ってください。このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]
参考文献
- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development
- Government Digital Service, GOV.UK Design System
- Government Digital Service, Accessibility strategy