中学生でもわかる AIと作るWEBパーツ
AIを活用して様々なWebパーツを実践的に作成 - 対話型AI開発を体験しよう！
このコースについて
学習を始める前に、コースの内容と目標を確認しましょう
WebパーツはWebサイトを構成する再利用可能なUI要素です。このコースでは、AIとの対話を通じて、プロフェッショナルなWebパーツを作成する実践的なスキルを身につけます。
HTML/CSSの基本を知っている方なら、さらに効率的で高品質なWebパーツを作れるようになります。AI先生が、効果的なプロンプトの書き方から実装まで丁寧に解説します。
学習目標
- ▶ AIへの効果的なプロンプトの書き方を習得できる
- ▶ ボタン・フォーム・カードなど実用的なパーツを作成できる
- ▶ ホバー・クリック時のインタラクションを実装できる
- ▶ 再利用可能で保守性の高いコードを書けるようになる
- ▶ デザインシステムの基礎を理解し実践できる
こんな方におすすめ
- • HTML/CSSの基本を理解している方
- • AIを使った開発に興味がある方
- • 実践的なWebパーツを作りたい方
- • 効率的な開発手法を学びたい方
学習後にできること
- • AIで素早く高品質なパーツ作成
- • プロレベルのインタラクション実装
- • 再利用可能なコンポーネント設計
- • 効果的なプロンプトエンジニアリング
カリキュラム
段階的に学習できるよう、基礎から応用まで体系的に構成されています
第1章：ボタンとリンクの制作
AIと対話しながら様々なボタンとリンクを作成
第2章：テキスト要素の制作
見出し、吹き出し、引用など基本的なテキスト装飾を作成
引用とリボンデザイン
引用ブロック6種とコーナーリボン6種を作成
第3章：囲み枠とカードの制作
情報を整理する囲み枠、カード、吹き出しを作成
10種類の囲み枠デザイン
点線枠、二重線、装飾枠、情報ボックスなど
10種類のカードデザイン
プロダクトカード、プロフィールカード、記事カードなど
8種類の吹き出しデザイン
チャット風、注釈、ツールチップ風など
第4章：ナビゲーション要素の制作
パンくずリスト、ページネーション、メニューを作成
8種類のパンくずリスト
矢印型、スラッシュ区切り、ドット区切りなど
8種類のページネーション
数字型、矢印型、無限スクロール風など
ハンバーガーメニュー
アニメーション付きハンバーガーメニュー6種
8種類のメニューデザイン
ドロップダウン、メガメニュー、サイドメニューなど
第5章：フォーム要素の制作
入力フィールド、チェックボックス、ドロップダウンを作成
10種類の入力フィールド
テキスト、パスワード、検索、バリデーション表示など
チェックボックスとラジオボタン
カスタムデザインのチェックボックス8種とラジオボタン8種
8種類のドロップダウン
セレクトボックス、カスタムドロップダウンなど
ソーシャルボタン
SNSシェアボタン、フォローボタン8種
第6章：インタラクティブUIの制作
アコーディオン、タブ、ツールチップ、スライダーを作成
8種類のアコーディオン
シンプル、アイコン付き、ネスト対応など
8種類のタブUI
水平タブ、垂直タブ、アンダーライン型など
6種類のツールチップ
上下左右配置、矢印付き、リッチコンテンツなど
8種類のスライダー
カルーセル、画像スライダー、コンテンツスライダーなど
第7章：データ表示要素の制作
リスト、テーブル、タイムラインなどデータを整理して表示
10種類のリストデザイン
番号付き、アイコン付き、チェックリスト、説明リストなど
10種類のテーブルデザイン
ストライプ、ホバーハイライト、ソート可能、レスポンシブ対応など
8種類のタイムライン
左寄せ、中央配置、交互配置、アイコン付きなど
第8章：通知とアラートの制作
アラート、トースト通知、モーダルを作成
8種類のアラートデザイン
成功、警告、エラー、情報、閉じるボタン付きなど
8種類のトースト通知
右下表示、自動消去、スタック表示、アニメーション付きなど
8種類のモーダル
確認ダイアログ、情報表示、フォーム入力、画像ビューアーなど
第9章：視覚効果とアニメーション
ローディング、スクロールエフェクト、テキストエフェクト、ファーストビューを作成
8種類のスクロールエフェクト
フェードイン、スライドイン、パララックスなど
ファーストビュー・ヒーローセクション
全画面ヒーロー、動画背景、スプリット、インタラクティブなど8種
応援・サポート
このコースの内容が役に立ったら、ぜひ応援をお願いします！
質の高いコンテンツ作成を継続するために、ご支援をお願いします。