AIでデザインを作る

「AIに何をどう伝えるか」を知るだけで、デザインセンスがなくてもプロ品質のUIが作れます。 このセクションは、AIへのデザイン指示を言語化するスキルを体系的に学ぶ場所です。

「かっこいいウェブサイトを作って」と伝えるだけでは、AIは曖昧なデザインしか生成しません。フォント・レイアウト・色・アニメーションを具体的に言葉で伝える技術を身につけることで、AIは強力なデザインパートナーになります。

まずはここから

あなたは…	おすすめのページ
AIデザインが初めての方	UIプロンプトの基本
レイアウトを整えたい方	レイアウトとレスポンシブデザイン
一覧・グリッド・ベントー構成を作りたい方	レイアウトプロンプト実例集
色・影・テーマを整えたい方	スタイリングの基礎
タイポグラフィを整えたい方	タイポグラフィを指示する
アニメーションを加えたい方	アニメーションと動的エフェクト

このセクションで学べること

デザインプロンプト基礎

AIツールに対してデザインを的確に指示するための具体的な技法を学びます。

• UIプロンプトの基本 — AIへのUI指示の書き方と、ヒーロー・価格表・ナビゲーションなどのコンポーネント雛形
• タイポグラフィを指示する — フォント分類・ペアリング・サイズスケール・レスポンシブタイポグラフィ
• アニメーションと動的エフェクト — 基本的な動き・背景表現・インタラクションの指示
• デバイスフレームの活用 — ブラウザ・スマートフォン・タブレット枠でモックアップをリアルに見せる方法
• 上級テクニック — チェーンプロンプト・アクセシビリティ対応など、より精度を上げる戦略

レイアウトプロンプト

画面構成、並び、レスポンシブ対応を記事内容に沿って学びます。

• レイアウトとレスポンシブデザイン — グリッド・フレックス・ブレークポイントの指示方法
• リストレイアウトのプロンプト — プロフィール一覧、連絡先、設定、通知、商品一覧
• グリッドレイアウトのプロンプト — カードグリッド、Masonry、機能グリッド、ダッシュボード
• ベントレイアウトのプロンプト — 混在サイズのセルを使うポートフォリオやダッシュボード
• UIコンポーネントレイアウトのプロンプト — モーダル、ナビゲーション、サイドバー、フッター
• レイアウトプロンプト実例集 — 代表的なUIパターンの完成プロンプト

スタイリングプロンプト

色、テーマ、影、アクセシビリティ、CSSフレームワークを具体的に指示する方法を学びます。

• スタイリングとフレームワーク — CSSフレームワーク・カラーシステムの指定方法
• スタイリングの基礎 — 視覚階層・スタイル種別・色が行動に与える影響
• UIスタイリングのカラー理論 — 色彩心理学・調和ルール・hexカラーパレット
• テーマとシャドウの深度 — ライト/ダークテーマ・シャドウレベル・エレベーション
• レスポンシブデザインとアクセシビリティ — ブレークポイント・WCAGコントラスト・アクセシビリティ
• 高度なスタイリングテクニック — グラデーション・マイクロインタラクション・CSS変数

このセクションを読む前に

デザインの専門知識は不要です。AIツールを使ったことがあれば、すぐに始められます。

CSSやHTMLの基礎知識があると理解がより深まりますが、概念の把握だけであれば読み進めることができます。