デザインプロンプト基礎

「AIへの伝え方」がデザインの完成度を決めます。 構造・色・フォント・余白・アニメーションを言葉で正確に伝えることで、AIは本当に使えるデザインを生成します。

AIに「かっこいいランディングページを作って」と伝えるだけでは、期待する結果は得られません。このセクションでは、デザインの各要素をどのように言語化するか——その具体的な技法を一つひとつ学びます。

ページ一覧

ページ	学べること
UIプロンプトの基本	基本的な指示の書き方、よく使うコンポーネントの雛形
タイポグラフィを指示する	フォント選択・サイズスケール・ペアリング・テキストアニメーション
アニメーションと動的エフェクト	基本的な動き・背景表現・インタラクション
デバイスフレームの活用	ブラウザ・iPhone・iPad のモックアップ
上級テクニック	チェーンプロンプト・アクセシビリティ対応

効果的なプロンプトの共通原則

どのデザイン要素を指示する場合でも、以下の4点を意識すると精度が上がります。

具体的な数値を使う — 「大きめのフォント」ではなく「48px」と指定する

前提を明示する — 「いい感じに」ではなく、使うCSS方針や制約を指定する

レスポンシブ要件を含める — 画面サイズごとの挙動を明示する

参考デザインを示す — 「Airbnb のヒーローセクションに近いスタイルで」のように既知のデザインを参照する

レイアウト専用の指示は レイアウトプロンプト に、色・影・テーマの指示は スタイリングプロンプト に整理しています。