スタイリングとフレームワーク

読了 5分＋実践 20分

特定のフレームワークでUIを管理しているエンジニア・デザイナー

CSSの基礎知識があると理解しやすいです

CSSフレームワークを明示せずにデザインを依頼すると、AIはどのフレームワークを使うか自分で判断します。結果として期待と異なるコードが生成されることがあります。「Tailwind CSSで」「Bootstrap 5で」と最初に宣言することが、スタイリング指示の出発点です。

フレームワーク選択の指示方法

「CSSフレームワークを使って」という曖昧な表現は避け、フレームワーク名とバージョンを含めます。

Bootstrap 5 を使って、フローティングラベルとフォームバリデーション付きの
お問い合わせフォームを作ってください。

Material UI や Shadcn UI など、デザインシステムを使う場合は明示します。

Material UI コンポーネントを使って、サイドバー・ヘッダー・メインコンテンツエリアを持つ
ダッシュボードレイアウトを作ってください。

大規模プロジェクトでは命名規則も指定すると一貫性が保てます。

BEM 命名規則でCSSクラスを整理し、コンポーネント単位でスタイルシートを分割してください。

既知のサービスのデザインシステムを参照すると、方向性が伝わりやすくなります。

Apple iOS のインターフェーススタイルを参考にした設定ページを作ってください。

Tailwind を使う場合、そのデザインシステムの構造を知っておくと、より具体的な指示が書けます。

Tailwindのカラーは 色-数値 の形式で、数値が大きいほど濃くなります（50が最も薄く、900が最も濃い）。

青（blue-600）背景、ホバーで blue-700 に変化、テキストは白のボタンを作ってください。

Tailwindのスペーシングは1単位 = 0.25rem（4px）が基準です。

p-4（パディング16px）・mt-6（マージントップ24px）・gap-2（フレックス間隔8px）で
カードコンポーネントを作ってください。

Tailwindのフォントサイズは text-xs（最小）から text-9xl（最大）まであります。

見出しに text-xl font-medium、説明文に text-sm text-gray-600 を使ってください。

Tailwindのブレークポイントプレフィックスを使うと、モバイルファーストでレイアウトを指示できます。

grid-cols-1（モバイル）・md:grid-cols-2（タブレット）・lg:grid-cols-3（デスクトップ）の
レスポンシブグリッドを作ってください。

Tailwind の dark: プレフィックスを使って、ライト／ダークモード切り替えに対応した
カードコンポーネントを作ってください。

以下のカスタムカラーでコンポーネントを作ってください：
- プライマリ：#6366F1（インディゴ）
- アクセント：#F59E0B（アンバー）
- 背景：#F8FAFC
- テキスト：#1E293B

from-purple-600 to-blue-600 の水平グラデーションを背景に持つヒーローセクションを作ってください。

このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]

クイズ