コース概要

フロントエンドのジェネレーティブAI入門

  • ソフトウェア開発におけるジェネレーティブAIとは?
  • ツールの概要:ChatGPT、GitHub Copilot、Codeiumなど
  • UI開発におけるAIの利点と制限

プロンプトベースのUI生成

  • HTML構造とコンポーネント用のプロンプト作成
  • AIを使用したCSSスタイルの生成と変更
  • JavaScriptでインタラクティブ要素をスキャフォールドする

ジェネレーティブツールを使用したレイアウトプロトタイピング

  • ランディングページとマルチセクションレイアウトの構築
  • レスポンシブデザインのプロンプト(Flexbox、Grid)
  • CodePenや同様のツールでプレビューとテストを行う

コンポーネント化と再利用性

  • 再利用可能なUIコンポーネント(ボタン、カード、フォーム)の生成
  • AIの支援でコンポーネントライブラリとデザインシステムを作成する
  • 人気フレームワークでのAI使用(React、Vue、Tailwind)

AIアシストのコードレビューとデバッグ

  • LLMを使用したレイアウトバグやアクセシビリティ問題の修正
  • HTML/CSS/JSコード性能の最適化
  • エラーの説明とAIプロンプトによる修正提案

協調設計とコンテンツ生成

  • AIを使用したダミーコンテンツ、コピー、プレースホルダーの生成
  • デザイナーとの協力でワイヤーフレームとスタイルを共作する
  • AI生成アイデアを実用的なHTMLテンプレートにエクスポートする

プロジェクト:AIでスキャフォールドされたウェブアプリの構築

  • 業務プロンプトに基づいたUI設計
  • AIを使用してコンポーネントとインタラクションを構築する
  • プロトタイプの完成、テスト、プレゼンテーションを行う

まとめと次ステップ

要求

  • HTML、CSS、JavaScriptの基本的な理解
  • フロントエンドフレームワークやデザインシステムに関する知識
  • AIを使用してUI/UXワークフローを加速することへの興味

対象者

  • フロントエンド開発者
  • UXエンジニア
  • ウェブデザイナーやクリエイティブテクノロジスト
 14 時間

参加者の人数


参加者1人あたりの価格

お客様の声 (1)

今後のコース

関連カテゴリー