スタイリングの基礎

読了 5分＋実践 20分

AIツール向けのスタイリングプロンプトを書き始めるデザイナー・開発者

ビジュアル階層

ビジュアル階層とは、最も重要な要素から最も重要でない要素へとユーザーの視線を誘導するために要素を整理する方法だ。UIのプロンプトを書く際は、この階層を明示的に記述する必要がある。

サイズ・色・余白を使って重要度を伝える。

明確なビジュアル階層を持つカードコンポーネントを作成してください:
- 大きなタイトル (24px, font-weight 700)
- 中程度のサブタイトル (16px, font-weight 500, gray-500)
- 小さなボディテキスト (14px, font-weight 400, gray-600)
- 目立つCTAボタン (全幅, プライマリカラー背景, 白テキスト)
各レベルは余白で区切る: タイトルとサブタイトルの間 8px、ボディの前 12px、ボタンの前 24px。

階層プロンプトで指定すべき主要要素

要素	指定すべき内容
タイポグラフィ	各レベルのフォントサイズ・ウェイト・色
余白	セクション間の正確なパディング/マージン値
カラーコントラスト	プライマリは濃く太く、セカンダリは薄く
ボタンの目立ち度	サイズ・塗りつぶし vs アウトライン・配置

スタイルタイプの選択

スタイルタイプを選ぶことで、コンポーネント全体のビジュアルトーンが決まる。明示的に指定すること。AIはスタイルの種類によってシャドウ・ボーダー・透明度・角丸の処理を変える。

フラット

クリーンでソリッドな色。シャドウやグラデーションなし。素早く・気が散らない。

フラットデザインで設定パネルをデザインしてください:
白の単色背景、シャドウなし、1px #E5E7EB ボーダー、
8px border-radius、アクティブ状態は blue-600。

最適な用途: 生産性ツール・コンテンツ量が多いインターフェース・高速読み込みが必要なページ。

アウトライン

透明な背景と見えるボーダー。コンポーネントが軽量に見える。

アウトラインスタイルのボタンセットを作成してください:
透明な背景、現在のアクセントカラーで 1.5px solid ボーダー、
テキストはアクセントカラー、ホバー時は背景を塗りつぶす。

最適な用途: セカンダリアクション・フィルターチップ・タグコンポーネント。

ミニマリスト

シンプルでクリーン、さりげない視覚的手がかり。装飾要素なし。

ミニマリストなログインフォームをデザインしてください:
白背景、装飾要素なし、
入力フィールドは下部のみ 1px ボーダー（ボックス全体のボーダーではなく）、
送信ボタンにのみ1色のアクセントカラーを使用。

最適な用途: 読書重視のアプリ・エディトリアルサイト・コンテンツプラットフォーム。

ガラス（グラスモーフィズム）

バックドロップブラーと半透明サーフェス。奥行きとプレミアム感を演出する。

グラスモーフィズムカードを作成してください:
background: rgba(255, 255, 255, 0.15),
backdrop-filter: blur(12px),
border: 1px solid rgba(255, 255, 255, 0.2),
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1).

最適な用途: 画像背景上のダッシュボード・モダンなSaaS・ランディングページ。

iOS

丸みのある角、控えめな奥行き、レイヤー状のサーフェス。Apple端末でネイティブに感じる。

iOSスタイルのアクションシートをデザインしてください:
白のカード背景、14px border-radius、
オプション間に細いセパレーター線、
プライマリアクションは青のシステムカラー (#007AFF)、
破壊的アクションは赤 (#FF3B30)。

最適な用途: モバイルウェブアプリ・PWA・Appleユーザー向けアプリ。

マテリアル

一貫したシャドウを使ったエレベーションベースの奥行き。レイヤリングで明確な階層を表現。

マテリアルデザインカードを作成してください:
白サーフェス (#FFFFFF)、elevation-2 シャドウ (0 2px 4px rgba(0,0,0,0.12))、
4px border-radius、16px 内側パディング、
ホバー時は elevation-4 シャドウに引き上げる。

最適な用途: Androidアプリ・Google関連ツール・エンタープライズインターフェース。

スタイリングにおける色彩心理学

色には意味がある。プロンプトで色を指定する際は、AIが適切な文脈で使えるよう、意図した感情的な目的も合わせて記述する。

色	心理的効果	プロンプトでの用途例
赤 `#EF4444`	エネルギー・緊迫感・警告	エラー状態・削除アクション・CTA
青 `#3B82F6`	信頼・安定・プロフェッショナル	プライマリアクション・金融・企業向け
緑 `#10B981`	成長・成功・安全	成功状態・エコブランド・確認
黄 `#F59E0B`	楽観・注意・警戒	警告・ハイライト・クリエイティブツール
紫 `#8B5CF6`	高級感・創造性・神秘	プレミアムプラン・クリエイティブアプリ
グレー `#6B7280`	中立性・洗練	テキスト・ボーダー・背景

例: 色彩心理学の適用

信頼と安定感を伝えるために、ブルー (#3B82F6) をプライマリカラーとして
金融ダッシュボードを作成してください。
正の値・利益にはグリーン (#10B981)、
負の値・損失にはレッド (#EF4444) を使用。
セカンダリラベルと区切り線にはグレー (#6B7280) を使用。

3つの要素を組み合わせる

強力なスタイリングプロンプトは、階層・スタイルタイプ・色の意図をまとめて指定する。

マテリアルデザインスタイルの料金カードをデザインしてください:
- ビジュアル階層: プラン名 (20px bold)、価格 (48px bold プライマリカラー)、
  機能リスト (14px gray-600)、CTAボタン (全幅)
- スタイル: elevation-2 シャドウ、8px border-radius、白サーフェス
- 色: おすすめプランのハイライトにブルー (#3B82F6)、
  スタンダードプラン背景にグレー (#F9FAFB)、
  含まれる機能のチェックマークにグリーン (#10B981)、
  含まれない機能にレッド (#EF4444)

UIスタイリングのカラー理論

スタイリングプロンプト