AI先生の講座
中学生でもわかる AIと作るWEBパーツ
AIを活用して様々なWebパーツを実践的に作成 - 対話型AI開発を体験しよう！
章数
11章
難易度
初級〜中級
公開済み
22記事
このコースについて
学習を始める前に、コースの内容と目標を確認しましょう
WebパーツはWebサイトを構成する再利用可能なUI要素です。このコースでは、AIとの対話を通じて、プロフェッショナルなWebパーツを作成する実践的なスキルを身につけます。
HTML/CSSの基本を知っている方なら、さらに効率的で高品質なWebパーツを作れるようになります。AI先生が、効果的なプロンプトの書き方から実装まで丁寧に解説します。
学習目標
- ▶ AIへの効果的なプロンプトの書き方を習得できる
- ▶ ボタン・フォーム・カードなど実用的なパーツを作成できる
- ▶ ホバー・クリック時のインタラクションを実装できる
- ▶ 再利用可能で保守性の高いコードを書けるようになる
- ▶ デザインシステムの基礎を理解し実践できる
こんな方におすすめ
- • HTML/CSSの基本を理解している方
- • AIを使った開発に興味がある方
- • 実践的なWebパーツを作りたい方
- • 効率的な開発手法を学びたい方
学習後にできること
- • AIで素早く高品質なパーツ作成
- • プロレベルのインタラクション実装
- • 再利用可能なコンポーネント設計
- • 効果的なプロンプトエンジニアリング
AI先生からのメッセージ
AIとの対話を通じて、効率的で高品質なWebパーツ作成を一緒に学んでいきましょう！
カリキュラム
段階的に学習できるよう、基礎から応用まで体系的に構成されています
01
第1章：ボタンとリンクの制作
AIと対話しながら様々なボタンとリンクを作成
8レッスン
02
第2章：テキスト要素の制作
見出し、吹き出し、引用など基本的なテキスト装飾を作成
3レッスン
2.3
引用とリボンデザイン
引用ブロック6種とコーナーリボン6種を作成
準備中
03
第3章：囲み枠とカードの制作
情報を整理する囲み枠、カード、吹き出しを作成
2レッスン
04
第4章:ナビゲーション要素の制作
パンくずリスト、ページネーション、メニューを作成
1レッスン
05
第5章：フォーム要素の制作
入力フィールド、チェックボックス、ドロップダウンを作成
2レッスン
5.1
10種類の入力フィールド
テキスト、パスワード、検索、バリデーション表示など
準備中
06
第6章：インタラクティブUIの制作
アコーディオン、タブ、ツールチップ、スライダーを作成
1レッスン
6.1
アコーディオン
シンプル、アイコン付き、ネスト対応など
準備中
07
第7章：データ表示要素の制作
リスト、テーブル、タイムラインなどデータを整理して表示
2レッスン
7.1
10種類のリストデザイン
番号付き、アイコン付き、チェックリスト、説明リストなど
準備中
08
第8章：通知とアラートの制作
アラート、トースト通知、モーダルを作成
1レッスン
8.1
8種類のアラートデザイン
成功、警告、エラー、情報、閉じるボタン付きなど
準備中
09
第9章：アニメーション
ローディング、テキストエフェクト
5レッスン
10
第10章：スクロールエフェクト
様々なスクロール連動エフェクトを作成
1レッスン
11
第11章：ヒーローセクション
印象的なファーストビューを作成するヒーローセクション
1レッスン
応援・サポート
このコースの内容が役に立ったら、ぜひ応援をお願いします！
質の高いコンテンツ作成を継続するために、ご支援をお願いします。