AIでデザイン指示を組み立てる
「AIに何をどう伝えるか」を整理すると、専門的なデザイン経験がなくてもプロ品質に近づけるための指示設計ができます。 このセクションは、AIへのデザイン指示を言語化するスキルを体系的に学ぶ場所です。
「かっこいいウェブサイトを作って」と伝えるだけでは、AIは曖昧なデザインを返しがちです。フォント・レイアウト・色・アニメーションを具体的に言葉で伝えることで、意図に近いUI案を検討しやすくなります。
まずはここから
| あなたは… | おすすめのページ |
|---|---|
| AIデザインが初めての方 | UIプロンプトの基本 |
| レイアウトを整えたい方 | レイアウトとレスポンシブデザイン |
| 一覧・グリッド・ベントー構成を作りたい方 | レイアウトプロンプト実例集 |
| 色・影・テーマを整えたい方 | スタイリングの基礎 |
| タイポグラフィを整えたい方 | タイポグラフィを指示する |
| アニメーションを加えたい方 | アニメーションと動的エフェクト |
| アクセシビリティも担保したい方 | アクセシビリティ概要 |
このセクションで学べること
デザインプロンプト基礎
AIツールに対してデザインを的確に指示するための具体的な技法を学びます。
- UIプロンプトの基本 — AIへのUI指示の書き方と、ヒーロー・価格表・ナビゲーションなどのコンポーネント雛形
- タイポグラフィを指示する — フォント分類・ペアリング・サイズスケール・レスポンシブタイポグラフィ
- アニメーションと動的エフェクト — 基本的な動き・背景表現・インタラクションの指示
- デバイスフレームの活用 — ブラウザ・スマートフォン・タブレット枠でモックアップをリアルに見せる方法
- 上級テクニック — チェーンプロンプト・アクセシビリティ対応など、より精度を上げる戦略
レイアウトプロンプト
画面構成、並び、レスポンシブ対応を記事内容に沿って学びます。
- レイアウトとレスポンシブデザイン — グリッド・フレックス・ブレークポイントの指示方法
- リストレイアウトのプロンプト — プロフィール一覧、連絡先、設定、通知、商品一覧
- グリッドレイアウトのプロンプト — カードグリッド、Masonry、機能グリッド、ダッシュボード
- ベントレイアウトのプロンプト — 混在サイズのセルを使うポートフォリオやダッシュボード
- UIコンポーネントレイアウトのプロンプト — モーダル、ナビゲーション、サイドバー、フッター
- レイアウトプロンプト実例集 — 代表的なUIパターンの完成プロンプト
スタイリングプロンプト
色、テーマ、影、アクセシビリティ、CSSフレームワークを具体的に指示する方法を学びます。
- スタイリングとフレームワーク — CSSフレームワーク・カラーシステムの指定方法
- スタイリングの基礎 — 視覚階層・スタイル種別・色が行動に与える影響
- UIスタイリングのカラー理論 — 色彩心理学・調和ルール・hexカラーパレット
- テーマとシャドウの深度 — ライト/ダークテーマ・シャドウレベル・エレベーション
- レスポンシブデザインとアクセシビリティ — ブレークポイント・WCAGコントラスト・アクセシビリティ
- 高度なスタイリングテクニック — グラデーション・マイクロインタラクション・CSS変数
アクセシビリティ設計
AI生成UIを、見た目だけでなく多様な入力方法・読み上げ環境・表示条件でも使いやすくするための設計と検証を学びます。
- アクセシビリティ概要 — WCAGの基本、UIで見るべき観点、AIへの指示に含める要件
このセクションを読む前に
デザインの専門知識は不要です。AIツールを使ったことがあれば、すぐに始められます。
CSSやHTMLの基礎知識があると理解がより深まりますが、概念の把握だけであれば読み進めることができます。